feat: new token selector

src/assets/chains/index.ts

@@ -1,3 +1,5 @@
 export { default as ARBITRUM_ICON } from './arbitrum.svg'
 export { default as MANTLE_ICON } from './mantle.svg'
+export { default as SOLANA_ICON } from './solana.svg'
+export { default as TRON_ICON } from './tron.svg'
 

src/components/0_Bruddle/Button.tsx

@@ -72,7 +72,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
         }, [])
 
         const buttonClasses = twMerge(
-            'btn w-full flex items-center gap-2 transform transition-transform active:scale-90 ease-in-out notranslate',
+            `btn w-full flex items-center gap-2 transform transition-all hover:shadow-none hover:translate-x-[3px] hover:translate-y-[${shadowSize}px] notranslate`,
             buttonVariants[variant],
             variant === 'transparent' && props.disabled && 'disabled:bg-transparent disabled:border-transparent',
             size && buttonSizes[size],

src/components/0_Bruddle/Divider.tsx

@@ -2,14 +2,15 @@ import { twMerge } from 'tailwind-merge'
 
 type DividerProps = {
     text?: string
+    dividerClassname?: HTMLElement['className']
 } & React.HTMLAttributes<HTMLDivElement>
 
-const Divider = ({ text, className, ...props }: DividerProps) => {
+const Divider = ({ text, className, dividerClassname, ...props }: DividerProps) => {
     return (
         <div className={twMerge('flex w-full items-center justify-center py-2', className)} {...props}>
-            <span className="h-0.25 w-full bg-n-1 dark:bg-white"></span>
+            <span className={twMerge('h-0.25 w-full bg-n-1 dark:bg-white', dividerClassname)}></span>
             {text && <span className="mx-4 text-sm font-medium">{text}</span>}
-            <span className="h-0.25 w-full bg-n-1 dark:bg-white"></span>
+            <span className={twMerge('h-0.25 w-full bg-n-1 dark:bg-white', dividerClassname)}></span>
         </div>
     )
 }

src/components/Cashout/Components/Initial.view.tsx

@@ -11,7 +11,7 @@ import TokenSelector from '@/components/Global/TokenSelector/TokenSelector'
 import ValidatedInput from '@/components/Global/ValidatedInput'
 import { MAX_CASHOUT_LIMIT, MIN_CASHOUT_LIMIT } from '@/components/Offramp/Offramp.consts'
 import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
-import { tokenSelectorContext, loadingStateContext } from '@/context'
+import { loadingStateContext, tokenSelectorContext } from '@/context'
 import { useAuth } from '@/context/authContext'
 import { useZeroDev } from '@/hooks/useZeroDev'
 import { useWallet } from '@/hooks/wallet/useWallet'
@@ -311,7 +311,7 @@ export const InitialCashoutView = ({
                     )}
                     {isExternalWallet && (
                         <>
-                            <TokenSelector classNameButton="max-w-[100%]" />
+                            <TokenSelector />
                             {selectedWallet!.balances!.length === 0 && (
                                 <div
                                     onClick={() => {

src/components/Claim/Link/Initial.view.tsx

@@ -27,6 +27,7 @@ import { useWallet } from '@/hooks/wallet/useWallet'
 import { WalletProviderType } from '@/interfaces'
 import { useAppDispatch } from '@/redux/hooks'
 import { walletActions } from '@/redux/slices/wallet-slice'
+import { sendLinksApi } from '@/services/sendLinks'
 import {
     areEvmAddressesEqual,
     checkifImageType,
@@ -36,15 +37,14 @@ import {
     getBridgeChainName,
     getBridgeTokenName,
 } from '@/utils'
-import { SQUID_ETH_ADDRESS } from '@/utils/token.utils'
+import { NATIVE_TOKEN_ADDRESS, SQUID_ETH_ADDRESS } from '@/utils/token.utils'
 import { Popover } from '@headlessui/react'
 import * as Sentry from '@sentry/nextjs'
 import { getSquidRouteRaw } from '@squirrel-labs/peanut-sdk'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { formatUnits } from 'viem'
 import * as _consts from '../Claim.consts'
 import useClaimLink from '../useClaimLink'
-import { sendLinksApi } from '@/services/sendLinks'
 
 const isPeanutClaimOnlyMode = () => {
     if (typeof window === 'undefined') return false
@@ -341,7 +341,7 @@ export const InitialClaimLinkView = ({
                 const tokenAmount = claimLinkData.amount
 
                 const fromToken =
-                    claimLinkData.tokenAddress === '0x0000000000000000000000000000000000000000'
+                    claimLinkData.tokenAddress === NATIVE_TOKEN_ADDRESS
                         ? SQUID_ETH_ADDRESS
                         : claimLinkData.tokenAddress.toLowerCase()
 
@@ -577,15 +577,7 @@ export const InitialClaimLinkView = ({
                     {(!isConnected || isExternalWallet) &&
                         recipientType !== 'iban' &&
                         recipientType !== 'us' &&
-                        !isPeanutClaimOnlyMode() && (
-                            <TokenSelector
-                                shouldBeConnected={false}
-                                showOnlySquidSupported
-                                onReset={() => {
-                                    resetSelectedToken()
-                                }}
-                            />
-                        )}
+                        !isPeanutClaimOnlyMode() && <TokenSelector />}
                     {/* Route Information & Peanut Sponsored
                      * Shows when:
                      * - Has valid recipient

src/components/Create/useCreateLink.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { getLinkFromTx } from '@/app/actions/claimLinks'
 import { fetchTokenPrice } from '@/app/actions/tokens'
-import { PEANUT_API_URL, next_proxy_url } from '@/constants'
+import { PEANUT_API_URL, PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN, next_proxy_url } from '@/constants'
 import { loadingStateContext, tokenSelectorContext } from '@/context'
 import { useWalletType } from '@/hooks/useWalletType'
 import {
@@ -10,35 +10,34 @@ import {
     getLinkFromReceipt,
     isNativeCurrency,
     saveCreatedLinkToLocalStorage,
+    saveToLocalStorage,
 } from '@/utils'
 import { switchNetwork as switchNetworkUtil } from '@/utils/general.utils'
 import peanut, {
     generateKeysFromString,
-    getRandomString,
-    getLatestContractVersion,
     getContractAbi,
     getContractAddress,
+    getLatestContractVersion,
     getLinkFromParams,
+    getRandomString,
     interfaces as peanutInterfaces,
 } from '@squirrel-labs/peanut-sdk'
 import { BigNumber, ethers } from 'ethers'
 import { useCallback, useContext } from 'react'
-import type { TransactionReceipt, Hash } from 'viem'
+import type { Hash, TransactionReceipt } from 'viem'
 import {
-    formatEther,
-    parseEther,
-    parseUnits,
+    bytesToNumber,
     encodeFunctionData,
+    formatEther,
     parseAbi,
+    parseEther,
     parseEventLogs,
-    bytesToNumber,
+    parseUnits,
     toBytes,
 } from 'viem'
 import { useAccount, useConfig, useSendTransaction, useSignTypedData, useSwitchChain } from 'wagmi'
 import { waitForTransactionReceipt } from 'wagmi/actions'
 import { getTokenDetails, isGaslessDepositPossible } from './Create.utils'
-import { saveToLocalStorage } from '@/utils'
-import { PEANUT_WALLET_CHAIN, PEANUT_WALLET_TOKEN } from '@/constants'
 
 interface ICheckUserHasEnoughBalanceProps {
     tokenValue: string | undefined
@@ -49,6 +48,7 @@ import { Hex } from 'viem'
 
 import { useZeroDev } from '@/hooks/useZeroDev'
 import { useWallet } from '@/hooks/wallet/useWallet'
+import { NATIVE_TOKEN_ADDRESS } from '@/utils/token.utils'
 import { captureException } from '@sentry/nextjs'
 
 export const useCreateLink = () => {
@@ -261,7 +261,7 @@ export const useCreateLink = () => {
 
             let transactionCostWei = feeOptions.gasLimit.mul(feeOptions.maxFeePerGas || feeOptions.gasPrice)
             let transactionCostNative = formatEther(transactionCostWei)
-            const nativeTokenPrice = await fetchTokenPrice('0x0000000000000000000000000000000000000000', chainId)
+            const nativeTokenPrice = await fetchTokenPrice(NATIVE_TOKEN_ADDRESS, chainId)
             if (!nativeTokenPrice || typeof nativeTokenPrice.price !== 'number' || isNaN(nativeTokenPrice.price)) {
                 throw new Error('Failed to fetch token price')
             }
@@ -281,7 +281,7 @@ export const useCreateLink = () => {
 
                 let transactionCostWei = feeOptions.gasLimit.mul(feeOptions.maxFeePerGas || feeOptions.gasPrice)
                 let transactionCostNative = formatEther(transactionCostWei)
-                const nativeTokenPrice = await fetchTokenPrice('0x0000000000000000000000000000000000000000', chainId)
+                const nativeTokenPrice = await fetchTokenPrice(NATIVE_TOKEN_ADDRESS, chainId)
                 if (!nativeTokenPrice) {
                     throw new Error('Failed to fetch token price')
                 }

src/components/Global/EmptyStates/EmptyState.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import Card from '../Card'
+import { Icon, IconName } from '../Icons/Icon'
+
+interface EmptyStateProps {
+    icon: IconName
+    title: string | React.ReactNode
+    description?: string
+    cta?: React.ReactNode
+}
+
+// EmptyState component - Used for dispalying when there's no data in a certain scneario and we want to inform users with a cta (optional)
+export default function EmptyState({ title, description, icon, cta }: EmptyStateProps) {
+    return (
+        <Card position="single" className="p-0">
+            <div className="flex flex-col items-center justify-center gap-2 py-6">
+                <div className="rounded-full bg-primary-1 p-2">
+                    <Icon name={icon} size={16} />
+                </div>
+                <div className="text-center">
+                    <div className="font-medium">{title}</div>
+                    {description && <div className="text-sm text-grey-1">{description}</div>}
+                    {cta && cta}
+                </div>
+            </div>
+        </Card>
+    )
+}

src/components/Global/Icons/Icon.tsx

@@ -23,12 +23,15 @@ import { PeanutSupportIcon } from './peanut-support'
 import { SearchIcon } from './search'
 import { ShareIcon } from './share'
 import { SmileIcon } from './smile'
+import { StarIcon } from './star'
 import { TxnOffIcon } from './txn-off'
 import { UserIcon } from './user'
 import { UserPlusIcon } from './user-plus'
 import { WalletIcon } from './wallet'
+import { WalletCancelIcon } from './wallet-cancel'
+import { WalletOutlineIcon } from './wallet-outline'
 
-// allowed icon names
+// available icon names
 export type IconName =
     | 'arrow-down'
     | 'arrow-down-left'
@@ -49,12 +52,15 @@ export type IconName =
     | 'search'
     | 'txn-off'
     | 'wallet'
+    | 'wallet-cancel'
+    | 'wallet-outline'
     | 'currency'
     | 'achievements'
     | 'link'
     | 'logout'
     | 'paperclip'
     | 'smile'
+    | 'star'
     | 'user'
     | 'share'
     | 'user-plus'
@@ -83,6 +89,8 @@ const iconComponents: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> =
     search: SearchIcon,
     'txn-off': TxnOffIcon,
     wallet: WalletIcon,
+    'wallet-cancel': WalletCancelIcon,
+    'wallet-outline': WalletOutlineIcon,
     currency: CurrencyIcon,
     achievements: AchievementsIcon,
     link: LinkIcon,
@@ -91,6 +99,7 @@ const iconComponents: Record<IconName, ComponentType<SVGProps<SVGSVGElement>>> =
     smile: SmileIcon,
     user: UserIcon,
     share: ShareIcon,
+    star: StarIcon,
     'user-plus': UserPlusIcon,
     copy: CopyIcon,
     cancel: CancelIcon,

src/components/Global/Icons/star.tsx

@@ -0,0 +1,10 @@
+import { FC, SVGProps } from 'react'
+
+export const StarIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+    <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M8.28969 4.44473L7.17899 0.787738C6.95987 0.0699403 5.9474 0.0699403 5.73584 0.787738L4.61759 4.44473H1.25527C0.522363 4.44473 0.220133 5.3892 0.817038 5.81232L3.56734 7.77682L2.48686 11.26C2.26774 11.9627 3.08377 12.5294 3.66556 12.0836L6.45364 9.96799L9.24171 12.0912C9.82351 12.537 10.6395 11.9703 10.4204 11.2676L9.33994 7.78437L12.0902 5.81988C12.6871 5.3892 12.3849 4.45228 11.652 4.45228H8.28969V4.44473Z"
+            fill="currentColor"
+        />
+    </svg>
+)

src/components/Global/Icons/wallet-cancel.tsx

@@ -0,0 +1,26 @@
+import { FC, SVGProps } from 'react'
+
+export const WalletCancelIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M0.414006 1.54608C0.121112 1.25318 0.121113 0.77831 0.414006 0.485417C0.706899 0.192524 1.18177 0.192524 1.47467 0.485417L16.586 15.5967C16.8789 15.8896 16.8789 16.3645 16.586 16.6574C16.2931 16.9503 15.8182 16.9503 15.5253 16.6574L0.414006 1.54608Z"
+            fill="currentColor"
+        />
+        <path
+            d="M15.0637 4.00073V5.48696C15.4483 5.71511 15.7156 6.12578 15.7156 6.60815V10.5193C15.7156 11.0017 15.4483 11.4123 15.0637 11.6405V11.906L13.6694 10.5193H14.4119V6.60815H9.84888V6.69075L8.87935 5.73888C9.11848 5.4726 9.46499 5.30444 9.84888 5.30444H13.76V4.00073H7.14135L5.84507 2.69702H13.76C14.4771 2.69702 15.0637 3.28369 15.0637 4.00073Z"
+            fill="currentColor"
+        />
+        <path
+            d="M3.33032 13.1267V4.00073C3.33032 3.54849 3.5611 3.1481 3.91309 2.91406L4.99365 4.00073H4.63403V13.1267H13.76V12.7654L14.8426 13.8509C14.608 14.1997 14.2096 14.4304 13.76 14.4304H4.63403C3.91047 14.4304 3.33032 13.8438 3.33032 13.1267Z"
+            fill="currentColor"
+        />
+        <path
+            d="M9.84888 11.823C9.13184 11.823 8.54517 11.2363 8.54517 10.5193V7.55054L9.84888 8.85522V10.5193H11.5171L12.8101 11.823H9.84888Z"
+            fill="currentColor"
+        />
+        <path
+            d="M12.7822 8.56372C12.7822 8.02371 12.3445 7.58594 11.8044 7.58594C11.5116 7.58594 11.2489 7.71464 11.0697 7.91855L12.4503 9.29784C12.6538 9.11866 12.7822 8.85618 12.7822 8.56372Z"
+            fill="currentColor"
+        />
+    </svg>
+)

src/components/Global/Icons/wallet-outline.tsx

@@ -0,0 +1,14 @@
+import { FC, SVGProps } from 'react'
+
+export const WalletOutlineIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+    <svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path
+            d="M11.8684 3.09036V1.65036C11.8684 0.955628 11.3 0.387207 10.6053 0.387207H1.76316C1.06211 0.387207 0.5 0.955628 0.5 1.65036V10.4925C0.5 11.1872 1.06211 11.7556 1.76316 11.7556H10.6053C11.3 11.7556 11.8684 11.1872 11.8684 10.4925V9.05247C12.2411 8.83142 12.5 8.43352 12.5 7.96615V4.17668C12.5 3.70931 12.2411 3.31142 11.8684 3.09036ZM11.2368 4.17668V7.96615H6.81579V4.17668H11.2368ZM1.76316 10.4925V1.65036H10.6053V2.91352H6.81579C6.12105 2.91352 5.55263 3.48194 5.55263 4.17668V7.96615C5.55263 8.66089 6.12105 9.22931 6.81579 9.22931H10.6053V10.4925H1.76316Z"
+            fill="currentColor"
+        />
+        <path
+            d="M8.71053 7.01879C9.23374 7.01879 9.65789 6.59463 9.65789 6.07142C9.65789 5.5482 9.23374 5.12405 8.71053 5.12405C8.18731 5.12405 7.76316 5.5482 7.76316 6.07142C7.76316 6.59463 8.18731 7.01879 8.71053 7.01879Z"
+            fill="currentColor"
+        />
+    </svg>
+)