fix: improve deposit flow card titles (#328)

examples/deposit-flow/src/App.tsx

@@ -4,19 +4,14 @@ import {
   CoinKey,
   DisabledUI,
   HiddenUI,
-  ItemPrice,
   LiFiWidget,
 } from '@lifi/widget'
 import { useMemo } from 'react'
+import { DepositCard } from './components/DepositCard'
+import { contractTool } from './config'
 
-const depositAddress = '0xdde759c7cf032b1d0e633a7e9cfa6653d1911a22'
-const depositAmount = 5000000n
-
-export const contractTool = {
-  logoURI:
-    'https://github.com/lifinance/widget/assets/18644653/eb043a91-18ba-4da7-91c4-029a53a25989',
-  name: 'Immutable',
-}
+// EXAMPLE CONTRACT, DON'T DEPOSIT
+const depositAddress = '0x4bF3E32de155359D1D75e8B474b66848221142fc'
 
 const contractCalls: ContractCall[] = []
 
@@ -30,7 +25,7 @@ export function App() {
       },
       subvariant: 'custom',
       subvariantOptions: { custom: 'deposit' },
-      integrator: 'Immutable',
+      integrator: 'ProtocolName',
       disabledUI: [DisabledUI.ToAddress],
       hiddenUI: [HiddenUI.Appearance, HiddenUI.Language],
       useRecommendedRoute: true,
@@ -47,7 +42,7 @@ export function App() {
   return (
     <LiFiWidget
       contractComponent={
-        <ItemPrice
+        <DepositCard
           token={{
             chainId: 10,
             address: '0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85',
@@ -58,7 +53,6 @@ export function App() {
             coinKey: CoinKey.USDC,
             logoURI:
               'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png',
-            amount: depositAmount,
           }}
           contractCalls={contractCalls}
         />

examples/deposit-flow/src/components/DepositCard.tsx

@@ -0,0 +1,84 @@
+import {
+  type ContractCall,
+  type TokenAmount,
+  useFieldActions,
+} from '@lifi/widget'
+import { Avatar, Box, Chip, Stack, Typography } from '@mui/material'
+import { useEffect } from 'react'
+import { contractTool } from '../config'
+
+export interface ItemPriceProps {
+  token: TokenAmount
+  contractCalls?: ContractCall[]
+}
+
+export const DepositCard: React.FC<ItemPriceProps> = ({
+  token,
+  contractCalls,
+}) => {
+  const { setFieldValue } = useFieldActions()
+
+  useEffect(() => {
+    if (token) {
+      setFieldValue('toChain', token.chainId, { isTouched: true })
+      setFieldValue('toToken', token.address, { isTouched: true })
+    }
+    if (contractCalls) {
+      setFieldValue('contractCalls', contractCalls, {
+        isTouched: true,
+      })
+    }
+  }, [contractCalls, setFieldValue, token])
+  return (
+    <Stack spacing={2} padding={2}>
+      <Box display="flex" alignItems="center" gap={1}>
+        <Avatar alt="Protocol" src={contractTool.logoURI} />
+        <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+          Protocol Name
+        </Typography>
+      </Box>
+      <Box display="flex" justifyContent="space-between" gap={2}>
+        <Box
+          sx={{
+            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            borderRadius: 1,
+            paddingX: 2,
+            paddingY: 1,
+            flex: 1,
+          }}
+        >
+          <Typography variant="subtitle2">TVL</Typography>
+          <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+            $69M
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+            borderRadius: 1,
+            paddingX: 2,
+            paddingY: 1,
+            flex: 1,
+          }}
+        >
+          <Typography variant="subtitle2">Incentives</Typography>
+          <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+            $4.2M
+          </Typography>
+        </Box>
+      </Box>
+      <Box display="flex" gap={1}>
+        <Chip label="USDC" avatar={<Avatar alt="USDC" src={token.logoURI} />} />
+        <Chip
+          label="Vault"
+          avatar={
+            <Avatar
+              alt="Vault"
+              src={'https://gravatar.com/avatar/any?d=retro'}
+            />
+          }
+        />
+      </Box>
+    </Stack>
+  )
+}

examples/deposit-flow/src/config.ts

@@ -0,0 +1,4 @@
+export const contractTool = {
+  logoURI: 'https://gravatar.com/avatar/any?d=wavatar',
+  name: 'Protocol Name',
+}

examples/deposit-flow/src/main.tsx

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { http, WagmiProvider, createConfig } from 'wagmi'
-import { base, mainnet } from 'wagmi/chains'
+import { arbitrum, base, mainnet, optimism } from 'wagmi/chains'
 import { injected } from 'wagmi/connectors'
 import { App } from './App'
 import { WalletHeader } from './components/WalletHeader'
@@ -12,11 +12,13 @@ const queryClient = new QueryClient()
 const _projectId = import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID
 
 const config = createConfig({
-  chains: [mainnet],
+  chains: [mainnet, base, optimism, arbitrum],
   connectors: [injected()],
   transports: {
     [mainnet.id]: http(),
     [base.id]: http(),
+    [optimism.id]: http(),
+    [arbitrum.id]: http(),
   },
 })
 

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.12.6-alpha.0",
+  "version": "3.12.6-beta.0",
   "private": true,
   "sideEffects": false,
   "type": "module",

packages/wallet-management/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/wallet-management",
-  "version": "3.4.8-alpha.0",
+  "version": "3.4.8-beta.0",
   "description": "LI.FI Wallet Management solution.",
   "type": "module",
   "main": "./src/index.ts",

packages/wallet-management/src/i18n/i18next.d.ts

@@ -2,13 +2,9 @@ import en from './en.json' with { type: 'json' }
 
 const defaultResource = { translation: en }
 
-declare global {
-  namespace WalletTranslation {
-    declare module 'i18next' {
-      interface CustomTypeOptions {
-        defaultNS: 'translation'
-        resources: typeof defaultResource
-      }
-    }
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    defaultNS: 'translation'
+    resources: typeof defaultResource
   }
 }

packages/widget-embedded/src/config.ts

@@ -3,6 +3,7 @@ import './index.css'
 
 export const widgetBaseConfig: WidgetConfig = {
   subvariant: 'custom',
+
   integrator: 'li.fi-playground',
   hiddenUI: ['history'],
   // buildUrl: true,

packages/widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.12.6-alpha.0",
+  "version": "3.12.6-beta.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",

packages/widget/src/components/AmountInput/AmountInput.tsx

@@ -70,6 +70,7 @@ export const AmountInputBase: React.FC<
   ...props
 }) => {
   const { t } = useTranslation()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
   const ref = useRef<HTMLInputElement>(null)
   const amountKey = FormKeyHelper.getAmountKey(formType)
   const { onChange, onBlur, value } = useFieldController({ name: amountKey })
@@ -98,9 +99,16 @@ export const AmountInputBase: React.FC<
     }
   }, [value])
 
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.amount')
+        : t('header.youPay')
+      : t('header.send')
+
   return (
     <InputCard {...props}>
-      <CardTitle>{t('header.send')}</CardTitle>
+      <CardTitle>{title}</CardTitle>
       <FormContainer>
         <AmountInputStartAdornment formType={formType} />
         <FormControl fullWidth>

packages/widget/src/components/ContractComponent/ItemPrice.tsx

@@ -1,5 +1,6 @@
 import type { ContractCall } from '@lifi/sdk'
 import { useEffect } from 'react'
+import { formatUnits } from 'viem'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import type { TokenAmount } from '../../types/token.js'
 import { Token } from '../Token/Token.js'
@@ -19,9 +20,13 @@ export const ItemPrice: React.FC<ItemPriceProps> = ({
     if (token) {
       setFieldValue('toChain', token.chainId, { isTouched: true })
       setFieldValue('toToken', token.address, { isTouched: true })
-      setFieldValue('toAmount', token.amount?.toString(), {
-        isTouched: true,
-      })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
     }
     if (contractCalls) {
       setFieldValue('contractCalls', contractCalls, {

packages/widget/src/components/ContractComponent/NFT/NFT.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { formatUnits } from 'viem'
 import { useFieldActions } from '../../../stores/form/useFieldActions.js'
 import { NFTBase } from './NFTBase.js'
 import type { NFTProps } from './types.js'
@@ -18,9 +19,13 @@ export const NFT: React.FC<NFTProps> = ({
     if (token) {
       setFieldValue('toChain', token.chainId, { isTouched: true })
       setFieldValue('toToken', token.address, { isTouched: true })
-      setFieldValue('toAmount', token.amount?.toString(), {
-        isTouched: true,
-      })
+      setFieldValue(
+        'toAmount',
+        token.amount ? formatUnits(token.amount, token.decimals) : '',
+        {
+          isTouched: true,
+        }
+      )
     }
     if (contractCall) {
       setFieldValue('contractCalls', [contractCall], {

packages/widget/src/components/RouteCard/RouteCard.tsx

@@ -26,7 +26,7 @@ export const RouteCard: React.FC<
   ...other
 }) => {
   const { t } = useTranslation()
-  const { subvariant } = useWidgetConfig()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
   const [cardExpanded, setCardExpanded] = useState(defaulExpanded)
 
   const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {
@@ -35,7 +35,7 @@ export const RouteCard: React.FC<
   }
 
   const token: TokenAmount =
-    subvariant === 'custom'
+    subvariant === 'custom' && subvariantOptions?.custom !== 'deposit'
       ? { ...route.fromToken, amount: BigInt(route.fromAmount) }
       : { ...route.toToken, amount: BigInt(route.toAmount) }
   const impactToken: TokenAmount | undefined =

packages/widget/src/components/Routes/Routes.tsx

@@ -16,7 +16,8 @@ import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
 export const Routes: React.FC<CardProps> = (props) => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { subvariant, useRecommendedRoute } = useWidgetConfig()
+  const { subvariant, subvariantOptions, useRecommendedRoute } =
+    useWidgetConfig()
   const {
     routes,
     isLoading,
@@ -42,11 +43,16 @@ export const Routes: React.FC<CardProps> = (props) => {
   const showAll =
     !onlyRecommendedRoute && !routeNotFound && (routes?.length ?? 0) > 1
 
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.receive')
+        : t('header.youPay')
+      : t('header.receive')
+
   return (
     <Card {...props}>
-      <CardTitle>
-        {subvariant === 'custom' ? t('header.youPay') : t('header.receive')}
-      </CardTitle>
+      <CardTitle>{title}</CardTitle>
       <ProgressToNextUpdate
         updatedAt={dataUpdatedAt || new Date().getTime()}
         timeToUpdate={refetchTime}

packages/widget/src/components/Routes/RoutesExpanded.tsx

@@ -64,7 +64,7 @@ export const RoutesExpanded = () => {
 export const RoutesExpandedElement = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
-  const { subvariant } = useWidgetConfig()
+  const { subvariant, subvariantOptions } = useWidgetConfig()
   const routesRef = useRef<Route[]>()
   const emitter = useWidgetEvents()
   const routesActiveRef = useRef(false)
@@ -118,6 +118,13 @@ export const RoutesExpandedElement = () => {
     emitter.emit(WidgetEvent.WidgetExpanded, expanded)
   }, [emitter, expanded])
 
+  const title =
+    subvariant === 'custom'
+      ? subvariantOptions?.custom === 'deposit'
+        ? t('header.deposit')
+        : t('header.youPay')
+      : t('header.receive')
+
   return (
     <RoutesExpandedCollapse
       timeout={timeout.enter}
@@ -137,9 +144,7 @@ export const RoutesExpandedElement = () => {
                   flex: 1,
                 }}
               >
-                {subvariant === 'custom'
-                  ? t('header.youPay')
-                  : t('header.receive')}
+                {title}
               </Typography>
               <ProgressToNextUpdate
                 updatedAt={dataUpdatedAt || new Date().getTime()}