diff --git a/examples/toolshed/readme.md b/examples/toolshed/readme.md index 24382142..bd4b2347 100644 --- a/examples/toolshed/readme.md +++ b/examples/toolshed/readme.md @@ -5,9 +5,11 @@ This tool is intended as a quick demo to send message on the Aleph.im network us ## Setup ``` +You must install all the dependencies from the typescript sdk at the root of the project before running it + # install dependencies -npm install +npm install # Launches the app in your default browser npm run dev -``` \ No newline at end of file +``` diff --git a/examples/toolshed/src/App.tsx b/examples/toolshed/src/App.tsx index 197ab07d..0aaaa44a 100644 --- a/examples/toolshed/src/App.tsx +++ b/examples/toolshed/src/App.tsx @@ -6,11 +6,31 @@ import SelectProvider from './components/SelectProvider' import KeypairConfig from './components/KeypairConfig' import WalletConfig from './components/WalletConfig' import MessageConfig from './components/MessageConfig' +import HardwareConfig from "./components/HardwareConfig"; function App() { const [state, dispatch] = useReducer(reducer, initState) - + + const connection = () => { + if (state.account) { + return ( +
+

Your address is:

+ {state.account.address} +
+ ) + } + + if (state.selectedChain.endsWith('_KP')) { + return () + } else if (state.selectedChain.endsWith('_HW')) { + return () + } + + return () + } + return (

Aleph.im | Message toolshed

@@ -26,21 +46,7 @@ function App() {

Config

- { !state.account ? - (state.selectedChain.endsWith('_KP') ? - - : - - ) - - : - -
-

Your address is:

- {state.account.address} -
- - } + { connection() }
diff --git a/examples/toolshed/src/components/HardwareConfig.tsx b/examples/toolshed/src/components/HardwareConfig.tsx new file mode 100644 index 00000000..a289ed3e --- /dev/null +++ b/examples/toolshed/src/components/HardwareConfig.tsx @@ -0,0 +1,38 @@ +import { ethereum } from '../../../../src/accounts/providers/Ledger' +import { HardwareChains } from '../model/chains' +import { dispatchAndConsume } from '../model/componentProps' +import { Actions } from '../reducer' + + +function HardwareConfig({ dispatch, state } : dispatchAndConsume) { + const getAccountClass = () => ( + state.selectedChain === HardwareChains.Ethereum ? [ethereum, null] + : [null, null] + ) + + const connectToHardware = async () => { + const [_account, provider] = getAccountClass(); + + if(_account === null) + return + + try{ + const account = await _account.GetAccountFromLedger() + dispatch({ + type: Actions.SET_ACCOUNT, + payload: account + }) + } + catch(err){ + alert(err) + } + } + + return ( +
+ +
+ ) +} + +export default HardwareConfig \ No newline at end of file diff --git a/examples/toolshed/src/components/SelectProvider.tsx b/examples/toolshed/src/components/SelectProvider.tsx index 9f858120..26d28651 100644 --- a/examples/toolshed/src/components/SelectProvider.tsx +++ b/examples/toolshed/src/components/SelectProvider.tsx @@ -1,5 +1,5 @@ import Select, { SingleValue } from 'react-select' -import { KeypairChains, WalletChains } from '../model/chains' +import {HardwareChains, KeypairChains, WalletChains} from '../model/chains' import { dispatchProps } from '../model/componentProps' import { Actions } from '../reducer' @@ -26,7 +26,12 @@ export const availableWallets: Option[] = [ { label: 'Solana (via Phantom)', value: WalletChains.Solana }, ] +export const availableHardware: Option[] = [ + { label: 'Ethereum (via Ledger)', value: HardwareChains.Ethereum }, +] + export const options = [ + { label: 'Hardware', options: availableHardware }, { label: 'Wallets', options: availableWallets }, { label: 'Keypairs', options: availableKeypairs }, ] diff --git a/examples/toolshed/src/model/chains.ts b/examples/toolshed/src/model/chains.ts index 4dae62c9..08cb1ce0 100644 --- a/examples/toolshed/src/model/chains.ts +++ b/examples/toolshed/src/model/chains.ts @@ -8,6 +8,10 @@ export enum KeypairChains { Tezos = "XTC_KP", } +export enum HardwareChains { + Ethereum = "ETH_HW", +} + export enum WalletChains { Avalanche = "AVAX", Ethereum = "ETH", diff --git a/examples/toolshed/src/reducer.ts b/examples/toolshed/src/reducer.ts index 0f760e7f..4528dd7c 100644 --- a/examples/toolshed/src/reducer.ts +++ b/examples/toolshed/src/reducer.ts @@ -1,5 +1,5 @@ import { Account } from "../../../src/accounts/account"; -import { KeypairChains, WalletChains } from "./model/chains"; +import { KeypairChains, WalletChains, HardwareChains } from "./model/chains"; export enum Actions { SELECT_CHAIN, @@ -12,7 +12,7 @@ export type ActionType = { }; export type AppStateType = { - selectedChain: KeypairChains | WalletChains; + selectedChain: KeypairChains | WalletChains | HardwareChains; account: null | Account; };