feat(examples): Improve react example with chain/wallet selector, bal…

…ance display, etc.
scio-labs · Oct 23, 2023 · 4a000d1 · 4a000d1
1 parent 1124701
commit 4a000d1
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 49 deletions.
diff --git a/examples/react-ts/index.html b/examples/react-ts/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>React Example</title>
-    <!-- Pico CSS -->
+    <!-- Pico CSS (https://picocss.com/) -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
   </head>
   <body id="root">

diff --git a/examples/react-ts/src/App.tsx b/examples/react-ts/src/App.tsx
@@ -1,5 +1,13 @@
+import {
+  allSubstrateChains,
+  allSubstrateWallets,
+  development,
+  getSubstrateChain,
+  getSubstrateWallet,
+  useBalance,
+  useInkathon,
+} from '@scio-labs/use-inkathon'
 import { useEffect, useState } from 'react'
-import { allSubstrateChains, development, getSubstrateChain, useInkathon } from '../../../dist'
 
 export default function App() {
   return (
@@ -15,8 +23,9 @@ export default function App() {
 
       <div className="container">
         <div className="grid">
-          {/* Connect to a network */}
-          <ConnectToNetwork />
+          {/* Connection Settings (pick network & wallet) */}
+          <ConnectionSettings />
+
           {/* Connection status & Disconnect */}
           <ConnectionStatus />
         </div>
@@ -25,41 +34,48 @@ export default function App() {
   )
 }
 
-function ConnectToNetwork() {
+function ConnectionSettings() {
   const { connect } = useInkathon()
   const [isLoading, setIsLoading] = useState(false)
 
   const handleConnect = async () => {
     setIsLoading(true)
-    const selectedChain = document.querySelector<HTMLInputElement>(
-      'input[name="radio-chain"]:checked',
-    )?.value
-    const substrateChain = getSubstrateChain(selectedChain)
-    await connect?.(substrateChain)
+    const selectedNetwork = (document.getElementById('select-network') as HTMLSelectElement)?.value
+    const selectedWallet = (document.getElementById('select-wallet') as HTMLSelectElement)?.value
+    const substrateChain = getSubstrateChain(selectedNetwork)
+    const substrateWallet = getSubstrateWallet(selectedWallet)
+    console.log('Connection settings:', { substrateChain, substrateWallet })
+
+    await connect?.(substrateChain, substrateWallet)
     setIsLoading(false)
   }
 
   return (
     <article>
-      <h2>Connect to a network</h2>
+      <h2 style={{ marginBottom: '1.5rem' }}>Connection Settings</h2>
 
       {/* Network list */}
-      <fieldset>
+      <label htmlFor="select-network">Network</label>
+      <select id="select-network" required>
         {allSubstrateChains
           .filter((c) => c.network !== development.network)
-          .map((chain, index) => (
-            <label htmlFor={`radio-chain-${chain.network}`} key={chain.network}>
-              <input
-                type="radio"
-                name="radio-chain"
-                id={`radio-chain-${chain.network}`}
-                value={chain.network}
-                defaultChecked={index === 0}
-              />
+          .map((chain) => (
+            <option key={chain.network} value={chain.network}>
               {chain.name}
-            </label>
+            </option>
           ))}
-      </fieldset>
+      </select>
+
+      {/* Wallet list */}
+      <label htmlFor="select-wallet">Wallet</label>
+      <select id="select-wallet">
+        <option>Default (detect)</option>
+        {allSubstrateWallets.map((wallet) => (
+          <option key={wallet.id} value={wallet.id}>
+            {wallet.name}
+          </option>
+        ))}
+      </select>
 
       {/* Connect button */}
       <button aria-busy={isLoading} disabled={isLoading} onClick={handleConnect}>
@@ -71,43 +87,55 @@ function ConnectToNetwork() {
 
 function ConnectionStatus() {
   const { api, isConnected, activeChain, activeAccount, disconnect } = useInkathon()
-  const [palletVersion, setPalletVersion] = useState<number | undefined | null>(undefined)
 
+  // Fetch & watch balance
+  const { balanceFormatted } = useBalance(activeAccount?.address, true)
+
+  // Check whether the connected chain has pallet-contracts
+  const [hasPalletContracts, setHasPalletContracts] = useState<boolean | undefined>(undefined)
   useEffect(() => {
     const getPalletVersion = api?.query?.contracts?.palletVersion
-    if (!getPalletVersion) {
-      setPalletVersion(null)
-    } else {
-      getPalletVersion().then((v) => {
-        setPalletVersion((v as any)?.words?.[0])
-      })
-    }
+    setHasPalletContracts(!!getPalletVersion)
   }, [api])
 
   return (
     <article>
-      <h2>Status</h2>
+      <h2 style={{ marginBottom: '1.5rem' }}>Status</h2>
 
-      {!isConnected && <em>Not connected</em>}
+      <p>
+        {isConnected ? (
+          <code style={{ color: 'rgba(56, 142, 60, 1)', background: 'rgba(56, 142, 60, .1)' }}>
+            Connected
+          </code>
+        ) : (
+          <code>Disconnected</code>
+        )}
+      </p>
 
       {isConnected && (
         <>
-          {/* Network status */}
-          <p>
-            <em>Successfully connected</em>
-          </p>
-          <ul>
-            <li>
-              <strong>Network:</strong> {activeChain?.name}
-            </li>
-            <li>
-              <strong>Contracts Pallet Version:</strong>{' '}
-              {palletVersion === null ? 'Not available' : palletVersion}
-            </li>
-            <li>
-              <strong>Account:</strong> {activeAccount?.address}
-            </li>
-          </ul>
+          {/* Chain */}
+          <strong>Network</strong>
+          <small>
+            <p>
+              {activeChain?.name}{' '}
+              {!hasPalletContracts && (
+                <span style={{ color: 'rgba(198, 40, 40, 1)' }}>(pallet-contracts not found)</span>
+              )}
+            </p>
+          </small>
+
+          {/* Wallet Address */}
+          <strong>Account</strong>
+          <small>
+            <p>{activeAccount?.address}</p>
+          </small>
+
+          {/* Balance */}
+          <strong>Balance</strong>
+          <small>
+            <p>{balanceFormatted}</p>
+          </small>
 
           {/* Disconnect button */}
           <button className="secondary" onClick={disconnect}>