Add Ledger demo in Toolshed (#107)

* Feat: There were no ledger demo in Toolshed

Solution: Add Ledger connection example in Toolshed

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
-```
+```

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 (
+              <div>
+                  <p>Your address is:</p>
+                  <span>{state.account.address}</span>
+              </div>
+          )
+      }
+
+      if (state.selectedChain.endsWith('_KP')) {
+          return (<KeypairConfig state={state} dispatch={dispatch} />)
+      } else if (state.selectedChain.endsWith('_HW')) {
+          return (<HardwareConfig state={state} dispatch={dispatch} />)
+      }
+
+      return (<WalletConfig state={state} dispatch={dispatch} />)
+    }
+
   return (
     <main>
       <h1>Aleph.im | Message toolshed</h1>
@@ -26,21 +46,7 @@ function App() {
         </section>
         <section className="halfpage">
          <h2>Config</h2>
-          { !state.account ?
-            (state.selectedChain.endsWith('_KP') ?
-            <KeypairConfig state={state} dispatch={dispatch} />
-            : 
-            <WalletConfig state={state} dispatch={dispatch} />
-            )
-
-            :
-
-            <div>
-              <p>Your address is:</p>
-              <span>{state.account.address}</span>
-            </div>
-
-          }
+            { connection() }
         </section>
       </section>
 

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 (
+    <div>
+      <button onClick={connectToHardware}>Connect to Hardware</button>
+    </div>
+  )
+}
+
+export default HardwareConfig

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 },
 ]

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",

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;
 };