feat(unlock-app): handling token switch (#14062)

feat(unlock-app): handling network switch
unlock-protocol · Jun 18, 2024 · 5e73309 · 5e73309
1 parent 96a2879
commit 5e73309
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 12 deletions.
diff --git a/unlock-app/src/components/interface/locks/Create/elements/CreateLockForm.tsx b/unlock-app/src/components/interface/locks/Create/elements/CreateLockForm.tsx
@@ -140,7 +140,6 @@ export const CreateLockForm = ({
 
   const onChangeNetwork = useCallback(
     (network: number | string) => {
-      setValue('currencyContractAddress', undefined)
       setValue('network', parseInt(`${network}`))
     },
     [setValue]

diff --git a/unlock-app/src/components/interface/locks/Create/elements/SelectToken.tsx b/unlock-app/src/components/interface/locks/Create/elements/SelectToken.tsx
@@ -20,9 +20,9 @@ export const SelectToken = ({
   const [isOpen, setIsOpen] = useState(false)
   const [token, setToken] = useState(defaultToken)
 
-  const onSelect = (token: Token) => {
-    onChange(token)
-    setToken(token)
+  const onSelect = (_token: Token) => {
+    onChange(_token)
+    setToken(_token)
   }
 
   useEffect(() => {
@@ -34,16 +34,20 @@ export const SelectToken = ({
           defaultToken.address,
           network
         )
-        setToken({
-          ...defaultToken,
-          symbol,
-        })
+        if (symbol) {
+          onSelect({
+            ...defaultToken,
+            symbol,
+          } as Token)
+        } else {
+          onSelect((networks[network]?.nativeCurrency as Token) ?? {})
+        }
       } else {
-        setToken(networks[network]?.nativeCurrency ?? {})
+        onSelect((networks[network]?.nativeCurrency as Token) ?? {})
       }
     }
     initialize()
-  }, [defaultToken, network])
+  }, [defaultToken?.address, network])
 
   return (
     <div className={twMerge('flex flex-col gap-1.5', className)}>
@@ -59,8 +63,12 @@ export const SelectToken = ({
         onClick={() => setIsOpen(true)}
         className="box-border flex items-center flex-1 w-full gap-2 pl-4 text-base text-left transition-all border border-gray-400 rounded-lg shadow-sm cursor-pointer hover:border-gray-500 focus:ring-gray-500 focus:border-gray-500 focus:outline-none px-3"
       >
-        <CryptoIcon symbol={token?.symbol || ''} />
-        <span>{token?.symbol}</span>
+        {token?.symbol && (
+          <>
+            <CryptoIcon symbol={token?.symbol || ''} />
+            <span>{token?.symbol}</span>
+          </>
+        )}
       </div>
       <div className="pl-1"></div>
     </div>