(token-selector) Fix token import

package.json

@@ -34,6 +34,7 @@
     "lightweight-charts": "^4.1.0",
     "localforage": "^1.10.0",
     "lodash.keyby": "^4.6.0",
+    "lodash.merge": "^4.6.2",
     "lucide-react": "^0.279.0",
     "match-sorter": "^6.3.1",
     "react": "^18.2.0",
@@ -58,6 +59,7 @@
     "@graphql-codegen/typescript-operations": "^4.0.1",
     "@graphql-codegen/typescript-react-apollo": "^4.0.0",
     "@types/lodash.keyby": "^4.6.7",
+    "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20.7.0",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",

src/components/common/TokenSelector/index.tsx

@@ -64,7 +64,7 @@ const Search = ({ data, onSearch }: { data: TokenFieldsFragment[], onSearch: (ma
 
 const LoadingRow = () => <div className='w-full mb-4 h-[60px] text-left bg-card rounded-2xl animate-pulse'></div>
 
-const TokenRow = ({ account, token, onSelect, otherCurrency }: { token: TokenFieldsFragment, account: Address | undefined, onSelect: (currency: Currency) => void, otherCurrency: Currency | null | undefined }) => {
+const TokenRow = ({ account, token, onSelect, otherCurrency, style }: { token: TokenFieldsFragment, account: Address | undefined, onSelect: (currency: Currency) => void, otherCurrency: Currency | null | undefined, style: React.CSSProperties }) => {
 
     const currency = useCurrency(token.id as Address)
 
@@ -85,7 +85,7 @@ const TokenRow = ({ account, token, onSelect, otherCurrency }: { token: TokenFie
         })
     }
 
-    return <button disabled={lock} className='flex items-center justify-between w-full mb-4 py-2 px-3 text-left bg-card rounded-2xl duration-75 hover:bg-card-hover disabled:hover:bg-card disabled:opacity-60' onClick={() => currency && onSelect(currency)}>
+    return <button disabled={lock} className='flex items-center justify-between w-full py-2 px-3 text-left bg-card rounded-2xl duration-75 hover:bg-card-hover disabled:hover:bg-card disabled:opacity-60' onClick={() => currency && onSelect(currency)} style={{...style, height: 76 - 16}}>
         <div className='flex items-center gap-4'>
             <div>
                 <CurrencyLogo currency={currency} size={32} />
@@ -107,11 +107,10 @@ const TokenRow = ({ account, token, onSelect, otherCurrency }: { token: TokenFie
             {isLoading ? 'Loading...' : balance ? formatCurrency.format(Number(balance.formatted)) : ''}
         </div>
     </button>
-
 }
 
 const ImportTokenRow = ({ token, onImport }: { token: Token, onImport: (token: Token) => void }) => <div className='flex justify-between w-full text-left'>
-        <div className='flex gap-4'>
+        <div className='flex items-center gap-4'>
             <div>
                 <CurrencyLogo currency={token} size={32} />
             </div>
@@ -120,7 +119,7 @@ const ImportTokenRow = ({ token, onImport }: { token: Token, onImport: (token: T
                 <div>{token.name}</div>
             </div>
         </div>
-        <button onClick={() => onImport(token)}>Import</button>
+        <button className='px-4 bg-primary-button text-primary-foreground font-bold hover:bg-primary-button/80 rounded-2xl text-md' onClick={() => onImport(token)}>Import</button>
     </div>
 
 
@@ -157,13 +156,13 @@ export const TokenSelector = ({ onSelect, otherCurrency }: { onSelect: (currency
         setTokenForImport(undefined)
     }
 
-    const Row = useCallback(({ data, index }: { data: TokenFieldsFragment[], index: number }) => {
+    const Row = useCallback(({ data, index, style }: { data: TokenFieldsFragment[], index: number, style: React.CSSProperties }) => {
 
         const token = data[index]
 
         if (!token) return null
 
-        return <TokenRow account={account} onSelect={onSelect} token={token} otherCurrency={otherCurrency} />
+        return <TokenRow account={account} onSelect={onSelect} token={token} otherCurrency={otherCurrency} style={style} />
 
     }, [account, onSelect, otherCurrency])
 

src/state/tokensStore.ts

@@ -1,6 +1,7 @@
 import { Address } from "viem";
 import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
+import deepMerge from 'lodash.merge'
 
 interface ImportedTokens {
     [chainId: number]: { 
@@ -37,4 +38,4 @@ export const useTokensState = create(persist<TokensState>((set, get) => ({
             })
         },
     }
-}), { name: 'tokens-storage', storage: createJSONStorage(() => localStorage) }))
+}), { name: 'tokens-storage', storage: createJSONStorage(() => localStorage), merge: (persistedState, currentState) => deepMerge(currentState, persistedState) }))

yarn.lock

@@ -2589,6 +2589,13 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.merge@^4.6.9":
+  version "4.6.9"
+  resolved "https://registry.yarnpkg.com/@types/lodash.merge/-/lodash.merge-4.6.9.tgz#93e94796997ed9a3ebe9ccf071ccaec4c6bc8fb8"
+  integrity sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.199"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.199.tgz#c3edb5650149d847a277a8961a7ad360c474e9bf"