Trails into wallet widget

examples/react/src/config.ts

@@ -70,6 +70,8 @@ export const connectConfig: ConnectConfig = {
         metadataUrl: 'https://dev-metadata.sequence.app',
         apiUrl: 'https://dev-api.sequence.app',
         indexerUrl: 'https://dev-indexer.sequence.app',
+        nodeGatewayUrl: 'https://dev-nodes.sequence.app',
+        trailsApiUrl: 'https://dev-trails-api.sequence-dev.app',
         builderUrl: 'https://dev-api.sequence.build'
       }
     : undefined

packages/connect/README.md

@@ -43,6 +43,7 @@ interface CreateConfigOptions {
   defaultTheme?: Theme
   position?: ModalPosition
   customCSS?: string // Injected into shadow dom
+  trailsCustomCSS?: string | { light?: string; dark?: string }
   signIn?: {
     logoUrl?: string
     projectName?: string

packages/connect/src/styles.ts

@@ -7,8 +7,12 @@ export const styles = String.raw`
     --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-900: oklch(21% 0.034 264.665);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -923,6 +927,12 @@ export const styles = String.raw`
   .border-border-normal {
     border-color: var(--seq-color-border-normal);
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
   .border-primary {
     border-color: var(--seq-color-primary);
   }
@@ -965,6 +975,9 @@ export const styles = String.raw`
   .bg-background-secondary {
     background-color: var(--seq-color-background-secondary);
   }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
   .bg-border-normal {
     background-color: var(--seq-color-border-normal);
   }
@@ -1298,6 +1311,9 @@ export const styles = String.raw`
   .text-gray-500 {
     color: var(--color-gray-500);
   }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
   .text-info {
     color: var(--seq-color-info);
   }
@@ -1378,6 +1394,10 @@ export const styles = String.raw`
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring-1 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

packages/connect/src/types.ts

@@ -85,6 +85,7 @@ export interface ConnectConfig {
   hideSocialConnectOptions?: boolean
   hideConnectedWallets?: boolean
   customCSS?: string
+  trailsCustomCSS?: string | { light?: string; dark?: string }
   embeddedWalletTitle?: string
   renderInline?: boolean
   onConnectSuccess?: (address: string) => void

packages/hooks/src/contexts/ConfigContext.tsx

@@ -7,6 +7,8 @@ export interface SequenceHooksEnv {
   metadataUrl: string
   apiUrl: string
   indexerUrl: string
+  nodeGatewayUrl: string
+  trailsApiUrl: string
   imageProxyUrl: string
   builderUrl: string
 }
@@ -29,6 +31,8 @@ const defaultEnv: Required<SequenceHooksEnv> = {
   metadataUrl: 'https://metadata.sequence.app',
   apiUrl: 'https://api.sequence.app',
   indexerUrl: 'https://indexer.sequence.app',
+  nodeGatewayUrl: 'https://nodes.sequence.app',
+  trailsApiUrl: 'https://trails-api.sequence.app',
   imageProxyUrl: 'https://imgproxy.sequence.xyz/',
   builderUrl: 'https://api.sequence.build'
 }

packages/wallet-widget/README.md

@@ -51,3 +51,21 @@ const MyComponent = () => {
   return <button onClick={onClick}>open wallet</button>
 }
 ```
+
+# Trails widget customization
+
+You can override the Trails widget styling via the connect config. Provide a single CSS string or per-theme values:
+
+```js
+import { SequenceConnect, createConfig } from '@0xsequence/connect'
+
+const config = createConfig('waas', {
+  projectAccessKey: '<your-project-access-key>',
+  waasConfigKey: '<your-waas-config-key>',
+  defaultTheme: 'light',
+  trailsCustomCSS: {
+    light: '/* custom light theme CSS */',
+    dark: '/* custom dark theme CSS */'
+  }
+})
+```

packages/wallet-widget/package.json

@@ -30,6 +30,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "0xtrails": "^0.11.0",
     "@0xsequence/design-system": "2.1.11",
     "@0xsequence/hooks": "workspace:*",
     "@radix-ui/react-popover": "^1.1.11",

packages/wallet-widget/src/components/NavigationHeader/content/HomeHeader.tsx

@@ -97,8 +97,7 @@ export const HomeHeader = () => {
 
           {isOperationMenuOpen && (
             <PopoverPrimitive.Content
-              className="flex flex-col p-2 gap-2 z-30 rounded-xl border border-border-normal"
-              style={{ background: 'rgb(25, 25, 25)' }}
+              className="flex flex-col p-2 gap-2 z-30 rounded-xl border border-border-normal bg-background-primary"
               asChild
               side="bottom"
               sideOffset={8}
@@ -112,7 +111,7 @@ export const HomeHeader = () => {
                     onClickSend()
                   }}
                 >
-                  <ArrowUpIcon color="white" />
+                  <ArrowUpIcon className="text-primary" />
                   <Text variant="normal" fontWeight="bold" color="primary">
                     Send
                   </Text>
@@ -123,7 +122,7 @@ export const HomeHeader = () => {
                     onClickSwap()
                   }}
                 >
-                  <SwapIcon color="white" />
+                  <SwapIcon className="text-primary" />
                   <Text variant="normal" fontWeight="bold" color="primary">
                     Swap
                   </Text>
@@ -134,7 +133,7 @@ export const HomeHeader = () => {
                     onClickReceive()
                   }}
                 >
-                  <ScanIcon color="white" />
+                  <ScanIcon className="text-primary" />
                   <Text variant="normal" fontWeight="bold" color="primary">
                     Receive
                   </Text>
@@ -145,7 +144,7 @@ export const HomeHeader = () => {
                     onClickBuy()
                   }}
                 >
-                  <AddIcon color="white" />
+                  <AddIcon className="text-primary" />
                   <Text variant="normal" fontWeight="bold" color="primary">
                     Buy
                   </Text>

packages/wallet-widget/src/components/SearchLists/GeneralList.tsx

@@ -8,7 +8,7 @@ import { useObservable } from 'micro-observables'
 import { useEffect, useMemo } from 'react'
 import { useConfig } from 'wagmi'
 
-import { useGetAllTokensDetails, useGetMoreBalances, useNavigation, useSettings, useSwap } from '../../hooks/index.js'
+import { useGetAllTokensDetails, useGetMoreBalances, useNavigation, useSettings } from '../../hooks/index.js'
 import { useGetAllCollections } from '../../hooks/useGetAllCollections.js'
 import { useNavigationHeader } from '../../hooks/useNavigationHeader.js'
 import { computeBalanceFiat, type TokenBalanceWithDetails } from '../../utils/index.js'
@@ -23,7 +23,7 @@ const TOKEN_PAGE_SIZE = 10
 const COLLECTIBLE_PAGE_SIZE = 9
 const COLLECTION_PAGE_SIZE = 9
 
-export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'send' | 'swap' }) => {
+export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'send' }) => {
   const { setNavigation } = useNavigation()
   const { chains } = useConfig()
   const {
@@ -34,16 +34,15 @@ export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'se
     selectedWalletsObservable,
     showCollectionsObservable
   } = useSettings()
-  const { wallets, setActiveWallet } = useWallets()
+  const { wallets } = useWallets()
   const { search, selectedTab, setSearch, setSelectedTab } = useNavigationHeader()
-  const { lifiTokens } = useSwap()
 
   const selectedNetworks = useObservable(selectedNetworksObservable)
   const selectedWallets = useObservable(selectedWalletsObservable)
   const showCollections = useObservable(showCollectionsObservable)
 
   useEffect(() => {
-    if (variant === 'send' || variant === 'swap') {
+    if (variant === 'send') {
       setSelectedTab('tokens')
     }
     return () => {
@@ -54,9 +53,8 @@ export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'se
   const activeWallet = wallets.find(wallet => wallet.isActive)
 
   const { data: tokenBalancesData = [], isLoading: isLoadingTokenBalances } = useGetAllTokensDetails({
-    accountAddresses:
-      variant === 'default' || variant === 'swap' ? selectedWallets.map(wallet => wallet.address) : [activeWallet?.address || ''],
-    chainIds: variant === 'default' || variant === 'swap' ? selectedNetworks : allNetworks,
+    accountAddresses: variant === 'default' ? selectedWallets.map(wallet => wallet.address) : [activeWallet?.address || ''],
+    chainIds: variant === 'default' ? selectedNetworks : allNetworks,
     hideUnlistedTokens
   })
 
@@ -71,14 +69,8 @@ export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'se
     _type: 'collection' as const
   }))
 
-  const tokenBalancesWithLifiSupport = tokenBalancesData?.filter(b =>
-    lifiTokens.some(token => token.chainId === b.chainId && token.contractAddress === b.contractAddress)
-  )
-
   const coinBalancesUnordered =
-    (variant === 'swap' ? tokenBalancesWithLifiSupport : tokenBalancesData)?.filter(
-      b => b.contractType === 'ERC20' || compareAddress(b.contractAddress, ethers.ZeroAddress)
-    ) || []
+    tokenBalancesData?.filter(b => b.contractType === 'ERC20' || compareAddress(b.contractAddress, ethers.ZeroAddress)) || []
 
   const { data: coinPrices = [], isLoading: isLoadingCoinPrices } = useGetCoinPrices(
     coinBalancesUnordered.map(token => ({
@@ -370,17 +362,6 @@ export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'se
     })
   }
 
-  const handleTokenClickSwap = async (token: TokenBalanceWithDetails) => {
-    await setActiveWallet(token.accountAddress)
-    setNavigation({
-      location: 'swap-coin',
-      params: {
-        chainId: token.chainId,
-        contractAddress: token.contractAddress
-      }
-    })
-  }
-
   const handleCollectibleClickDefault = (balance: TokenBalanceWithDetails) => {
     setNavigation({
       location: 'collectible-details',
@@ -469,9 +450,7 @@ export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'se
               </div>
             </div>
           )}
-          <div className="flex flex-col p-4">
-            {(variant === 'default' || variant === 'swap') && <FilterMenu filterMenuType={selectedTab} />}
-          </div>
+          <div className="flex flex-col p-4">{variant === 'default' && <FilterMenu filterMenuType={selectedTab} />}</div>
         </div>
 
         <div className="flex flex-col p-4 pt-0">
@@ -483,14 +462,8 @@ export const GeneralList = ({ variant = 'default' }: { variant?: 'default' | 'se
                 hasMoreCoinBalances={search ? hasMoreSearchBalancesTokens : hasMoreBalancesTokens}
                 isFetchingMoreCoinBalances={search ? isFetchingMoreSearchBalancesTokens : isFetchingMoreBalancesTokens}
                 isFetchingInitialBalances={isLoading}
-                onTokenClick={
-                  variant === 'default'
-                    ? handleTokenClickDefault
-                    : variant === 'send'
-                      ? handleTokenClickSend
-                      : handleTokenClickSwap
-                }
-                includeUserAddress={variant === 'default' || variant === 'swap'}
+                onTokenClick={variant === 'default' ? handleTokenClickDefault : handleTokenClickSend}
+                includeUserAddress={variant === 'default'}
               />
             </div>
           </TabsContent>