feat: add loaders for loading subnets and tokens (#39)

topos-protocol · Nov 30, 2023 · bb9221a · bb9221a
1 parent 3921f18
commit bb9221a
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 18 deletions.
diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx
@@ -36,7 +36,7 @@ const App = () => {
   const theme = useTheme()
   const [errors, setErrors] = useState<Error[]>([])
   const [subnets, setSubnets] = useState<SubnetWithId[]>()
-  const { loading, registeredSubnets } = useRegisteredSubnets()
+  const { registeredSubnets } = useRegisteredSubnets()
 
   useEffect(
     function onRegisteredSubnetsChange() {
@@ -87,7 +87,7 @@ const App = () => {
       <ErrorsContext.Provider value={{ setErrors }}>
         <SubnetsContext.Provider
           value={{
-            loading,
+            loading: !Boolean(subnets),
             data: subnets,
           }}
         >

diff --git a/packages/frontend/src/components/MultiStepForm.tsx b/packages/frontend/src/components/MultiStepForm.tsx
@@ -81,14 +81,15 @@ const MultiStepForm = () => {
     [registeredSubnets, receivingSubnetId]
   )
 
-  const { tokens: registeredTokens } = useRegisteredTokens(sendingSubnet)
+  const { tokens: registeredTokens, loading: registeredTokensLoading } =
+    useRegisteredTokens(sendingSubnet)
 
-  const tokenSymbol =
+  const tokenAddress =
     Form.useWatch('token', form1) || form1.getFieldValue('token')
 
   const token = useMemo(
-    () => registeredTokens?.find((t) => t.symbol === tokenSymbol),
-    [registeredTokens, tokenSymbol]
+    () => registeredTokens?.find((t) => t.addr === tokenAddress),
+    [registeredTokens, tokenAddress]
   )
 
   const recipientAddress =
@@ -132,6 +133,7 @@ const MultiStepForm = () => {
           receivingSubnet,
           recipientAddress,
           registeredTokens,
+          registeredTokensLoading,
           sendingSubnet,
           token,
         }}

diff --git a/packages/frontend/src/components/steps/Step0.tsx b/packages/frontend/src/components/steps/Step0.tsx
@@ -65,7 +65,7 @@ const Step0 = ({ onFinish }: StepProps) => {
         ]}
       >
         <SubnetSelect
-          disabled={status !== 'connected'}
+          disabled={status !== 'connected' || getRegisteredSubnetsLoading}
           loading={getRegisteredSubnetsLoading}
           size="large"
           subnets={registeredSubnets}

diff --git a/packages/frontend/src/components/steps/Step1.tsx b/packages/frontend/src/components/steps/Step1.tsx
@@ -37,8 +37,6 @@ const TransactionTypeSelector = styled(Segmented)`
   margin-bottom: 1rem;
 `
 
-const { Option } = Select
-
 const Step1 = ({ onFinish, onPrev }: StepProps) => {
   const { data: registeredSubnets } = useContext(SubnetsContext)
   const {
@@ -47,6 +45,7 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
     receivingSubnet,
     recipientAddress,
     registeredTokens,
+    registeredTokensLoading,
     sendingSubnet,
     token,
   } = useContext(MultiStepFormContext)
@@ -169,6 +168,8 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
         >
           <Select
             size="middle"
+            disabled={registeredTokensLoading}
+            loading={registeredTokensLoading}
             dropdownRender={(menu) => (
               <>
                 {menu}
@@ -178,13 +179,11 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
                 </Space>
               </>
             )}
-          >
-            {registeredTokens?.map((token) => (
-              <Option key={token.symbol} value={token.symbol}>
-                {token.symbol}
-              </Option>
-            ))}
-          </Select>
+            options={registeredTokens?.map(({ addr, symbol }) => ({
+              label: symbol,
+              value: addr,
+            }))}
+          />
         </Form.Item>
         <Form.Item
           name="receivingSubnet"

diff --git a/packages/frontend/src/contexts/multiStepForm.ts b/packages/frontend/src/contexts/multiStepForm.ts
@@ -10,6 +10,7 @@ interface MultiStepFormContext {
   receivingSubnet?: SubnetWithId
   recipientAddress?: string
   registeredTokens?: Token[]
+  registeredTokensLoading?: boolean
   sendingSubnet?: SubnetWithId
   token?: Token
 }

diff --git a/packages/frontend/src/contexts/subnets.ts b/packages/frontend/src/contexts/subnets.ts
@@ -1,5 +1,5 @@
-import React from 'react'
+import { createContext } from 'react'
 
 import { FetchData, SubnetWithId } from '../types'
 
-export const SubnetsContext = React.createContext<FetchData<SubnetWithId[]>>({})
+export const SubnetsContext = createContext<FetchData<SubnetWithId[]>>({})