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 (
+
+ Connect to Hardware
+
+ )
+}
+
+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;
};