fix: use token addr as value to fix broken list

topos-protocol · Nov 8, 2023 · 3e551c6 · 3e551c6
1 parent 93c448d
commit 3e551c6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/packages/frontend/src/components/MultiStepForm.tsx b/packages/frontend/src/components/MultiStepForm.tsx
@@ -82,14 +82,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 =
@@ -113,6 +114,7 @@ const MultiStepForm = () => {
           receivingSubnet,
           recipientAddress,
           registeredTokens,
+          registeredTokensLoading,
           sendingSubnet,
           token,
         }}

diff --git a/packages/frontend/src/components/steps/Step1.tsx b/packages/frontend/src/components/steps/Step1.tsx
@@ -36,8 +36,6 @@ const TransactionTypeSelector = styled(Segmented)`
   margin-bottom: 1rem;
 `
 
-const { Option } = Select
-
 const Step1 = ({ onFinish, onPrev }: StepProps) => {
   const { data: registeredSubnets } = useContext(SubnetsContext)
   const {
@@ -46,6 +44,7 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
     receivingSubnet,
     recipientAddress,
     registeredTokens,
+    registeredTokensLoading,
     sendingSubnet,
     token,
   } = useContext(MultiStepFormContext)
@@ -168,6 +167,7 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
         >
           <Select
             size="middle"
+            loading={registeredTokensLoading}
             dropdownRender={(menu) => (
               <>
                 {menu}
@@ -177,13 +177,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
 }