From 3e551c6d57f885f7f56219cfb275f7aa6b7f53df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Dan?= <sebastien.dan@gmail.com>
Date: Wed, 8 Nov 2023 18:30:44 +0100
Subject: [PATCH] fix: use token addr as value to fix broken list

---
 .../frontend/src/components/MultiStepForm.tsx    | 10 ++++++----
 packages/frontend/src/components/steps/Step1.tsx | 16 +++++++---------
 packages/frontend/src/contexts/multiStepForm.ts  |  1 +
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/components/MultiStepForm.tsx b/packages/frontend/src/components/MultiStepForm.tsx
index 5c5b989..7573001 100644
--- 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
index 6f307fb..01a21af 100644
--- 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
index fe79232..a9abd87 100644
--- 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
 }