0xtrails 0.1.13 → 0.2.0

package/src/widget/components/SimpleSwap.tsx

@@ -6,6 +6,8 @@ import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { useTokenList } from "../hooks/useTokenList.js"
+import { useRecentTokens } from "../hooks/useRecentTokens.js"
+import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js" // Context version
 import { ScreenHeader } from "./ScreenHeader.js"
 import { TokenSelector } from "./TokenSelector.js"
 import { ChainList } from "./ChainList.js"
@@ -66,9 +68,14 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
   const { setSelectedToken: setDestinationTokenFromHook } =
     useDestinationSelectedToken()
   const { isBalanceVisible } = useBalanceVisible()
+  const { recentTokens, addRecentToken } = useRecentTokens(account?.address)
+
+  // Use new default token selection hook
+  const { defaultOriginToken, isLoading: isLoadingDefaults } =
+    useDefaultTokenSelection()
 
   // Get sorted tokens to auto-select the highest USD value token
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
+  const { filteredTokensFormatted } = useTokenList({
     onContinue: () => {}, // Not used for auto-selection
     onError: () => {}, // Not used for auto-selection
     fundMethod: undefined,
@@ -135,31 +142,24 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
   // Get real token prices from useSendForm (no more mock prices)
   // The useSendForm hook provides real amountUsdDisplay
 
-  // Auto-select the highest USD value token as source token
+  // Auto-select source token using new hook
   useEffect(() => {
-    if (
-      !selectedToken &&
-      !isLoadingTokens &&
-      filteredTokensFormatted?.length > 0
-    ) {
-      const highestValueToken = filteredTokensFormatted[0] // First token is highest USD value
-      if (highestValueToken && Number(highestValueToken.balanceUsd) > 0) {
-        setSelectedToken({
-          ...highestValueToken,
-          contractInfo: {
-            decimals: highestValueToken.contractInfo?.decimals || 18,
-            contractAddress: highestValueToken.contractAddress,
-            symbol: highestValueToken.symbol,
-            name: highestValueToken.name,
-          },
-        } as any)
-      }
+    if (!selectedToken && !isLoadingDefaults && defaultOriginToken) {
+      logger.console.log(
+        "[trails-sdk] Auto-selecting source token:",
+        defaultOriginToken,
+      )
+      setSelectedToken(defaultOriginToken as any)
+
+      // Add to recent tokens
+      addRecentToken(defaultOriginToken as any)
     }
   }, [
     selectedToken,
-    isLoadingTokens,
-    filteredTokensFormatted,
+    isLoadingDefaults,
+    defaultOriginToken,
     setSelectedToken,
+    addRecentToken,
   ])
 
   // Auto-focus input field when selectedToken is available
@@ -301,7 +301,7 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
   // Handle source token selection from full-screen selector
   const handleSourceTokenSelectorSelect = useCallback(
     (token: any) => {
-      setSelectedToken({
+      const formattedToken = {
         ...token,
         decimals: token.contractInfo?.decimals || token.decimals,
         contractInfo: {
@@ -310,14 +310,19 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
           symbol: token.symbol,
           name: token.name,
         },
-      })
+      }
+      setSelectedToken(formattedToken)
       setShowSourceTokenSelector(false)
+
+      // Add to recent tokens
+      addRecentToken(formattedToken)
+
       logger.console.log(
         "[trails-sdk] selected source token from selector in SimpleSwap",
         token,
       )
     },
-    [setSelectedToken],
+    [setSelectedToken, addRecentToken],
   )
 
   // Handle destination token selection from full-screen selector
@@ -347,6 +352,10 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
       }
 
       setShowDestinationTokenSelector(false)
+
+      // Add to recent tokens
+      addRecentToken(formattedToken)
+
       logger.console.log(
         "[trails-sdk] selected destination token from selector in SimpleSwap",
         token,
@@ -357,6 +366,7 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
       setSelectedDestToken,
       setDestinationTokenFromHook,
       setSelectedDestinationChain,
+      addRecentToken,
     ],
   )
 
@@ -425,6 +435,10 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
           setSelectedDestinationChain(chainInfo)
         }
       }
+
+      // Add both tokens to recent tokens when swapping
+      addRecentToken(newSourceToken as any)
+      addRecentToken(newDestToken as any)
       logger.console.log("[trails-sdk] swapped tokens in SimpleSwap", {
         originalSource: tempToken,
         originalDest: selectedDestToken,
@@ -441,8 +455,29 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
     setDestinationTokenFromHook,
     filteredTokensFormatted,
     setSelectedDestinationChain,
+    addRecentToken,
   ])
 
+  // Handle recent token selection
+  const handleRecentTokenSelect = useCallback(
+    (token: any) => {
+      // For source token selection
+      if (showSourceTokenSelector) {
+        handleSourceTokenSelectorSelect(token)
+      }
+      // For destination token selection
+      else if (showDestinationTokenSelector) {
+        handleDestinationTokenSelectorSelect(token)
+      }
+    },
+    [
+      showSourceTokenSelector,
+      showDestinationTokenSelector,
+      handleSourceTokenSelectorSelect,
+      handleDestinationTokenSelectorSelect,
+    ],
+  )
+
   // Handle input type toggle (USD vs Token)
   const handleInputTypeToggle = useCallback(() => {
     // Use tokenAmountForBackend as the source of truth for conversion
@@ -498,25 +533,6 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
     }
   }, [displayAmount.length])
 
-  // Get unique chains from filtered tokens for chain list
-  const uniqueChains = useMemo(() => {
-    if (!filteredTokensFormatted?.length) return []
-
-    const chainIds = new Set(
-      filteredTokensFormatted.map((token) => token.chainId),
-    )
-    return Array.from(chainIds)
-      .map((chainId) => {
-        const chainInfo = getChainInfo(chainId)
-        return {
-          chainId,
-          name: chainInfo?.name || `Chain ${chainId}`,
-          imageUrl: "", // We'll use ChainImage component for chain icons
-        }
-      })
-      .sort((a, b) => a.name.localeCompare(b.name))
-  }, [filteredTokensFormatted])
-
   logger.console.log("[trails-sdk] SimpleSwap", {
     tokenAmountForBackend,
     displayAmount,
@@ -551,7 +567,6 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
   if (showSourceChainList) {
     return (
       <ChainList
-        chains={uniqueChains}
         onBack={() => {
           setShowSourceChainList(false)
           setShowSourceTokenSelector(true)
@@ -582,6 +597,8 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
             setShowSourceTokenSelector(false)
             setShowSourceChainList(true)
           }}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={handleRecentTokenSelect}
         />
       </div>
     )
@@ -591,7 +608,6 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
   if (showDestinationChainList) {
     return (
       <ChainList
-        chains={uniqueChains}
         onBack={() => {
           setShowDestinationChainList(false)
           setShowDestinationTokenSelector(true)
@@ -622,6 +638,8 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
             setShowDestinationTokenSelector(false)
             setShowDestinationChainList(true)
           }}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={handleRecentTokenSelect}
         />
       </div>
     )
@@ -644,7 +662,7 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
             <button
               type="button"
               onClick={() => setShowSourceTokenSelector(true)}
-              className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-hover-bg trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+              className="w-full flex items-center justify-between space-x-3 trails-list-item trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
             >
               <div className="flex items-center space-x-3 flex-1">
                 <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
@@ -782,7 +800,7 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
           <button
             type="button"
             onClick={() => setShowSourceTokenSelector(true)}
-            className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 hover:scale-[1.01] trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+            className="w-full flex items-center justify-between space-x-3 trails-list-item hover:scale-[1.01] trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
           >
             <div className="flex items-center space-x-3 flex-1">
               {selectedToken ? (
@@ -856,7 +874,7 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
           <button
             type="button"
             onClick={() => setShowDestinationTokenSelector(true)}
-            className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 hover:scale-[1.01] trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+            className="w-full flex items-center justify-between space-x-3 trails-list-item hover:scale-[1.01] trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
           >
             <div className="flex items-center space-x-3 flex-1">
               {selectedDestToken ? (
@@ -913,16 +931,7 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
           />
         )}
 
-        {/* Quote Details */}
-        {prepareSendQuote && (
-          <div className="space-y-2">
-            <QuoteDetails
-              quote={prepareSendQuote}
-              showContent={true}
-              swapMode={true}
-            />
-          </div>
-        )}
+        <div className="py-2"></div>
 
         {/* Swap Button */}
         <form onSubmit={handleSubmit}>
@@ -959,6 +968,13 @@ export const SimpleSwap: React.FC<SimpleSwapProps> = ({
             )}
           </button>
         </form>
+
+        {/* Quote Details */}
+        {prepareSendQuote && (
+          <div className="space-y-2">
+            <QuoteDetails quote={prepareSendQuote} showContent={true} />
+          </div>
+        )}
       </div>
     </div>
   )