fix: improve deposit flow text

lifinance · Aug 15, 2024 · ee5f178 · ee5f178
1 parent db663c3
commit ee5f178
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 38 deletions.
diff --git a/packages/widget/src/components/Step/Step.tsx b/packages/widget/src/components/Step/Step.tsx
@@ -22,7 +22,7 @@ export const Step: React.FC<{
 }> = ({ step, fromToken, toToken, impactToken, toAddress }) => {
   const { t } = useTranslation();
   const { getChainById } = useAvailableChains();
-  const { subvariant } = useWidgetConfig();
+  const { subvariant, subvariantOptions } = useWidgetConfig();
 
   const stepHasError = step.execution?.process.some(
     (process) => process.status === 'FAILED',
@@ -39,20 +39,28 @@ export const Step: React.FC<{
         );
         if (hasBridgeStep && hasSwapStep) {
           return subvariant === 'custom'
-            ? t('main.stepBridgeAndBuy')
+            ? subvariantOptions?.custom === 'deposit'
+              ? t('main.stepBridgeAndDeposit')
+              : t('main.stepBridgeAndBuy')
             : t('main.stepSwapAndBridge');
         }
         if (hasBridgeStep) {
           return subvariant === 'custom'
-            ? t('main.stepBridgeAndBuy')
+            ? subvariantOptions?.custom === 'deposit'
+              ? t('main.stepBridgeAndDeposit')
+              : t('main.stepBridgeAndBuy')
             : t('main.stepBridge');
         }
         return subvariant === 'custom'
-          ? t('main.stepSwapAndBuy')
+          ? subvariantOptions?.custom === 'deposit'
+            ? t('main.stepSwapAndDeposit')
+            : t('main.stepSwapAndBuy')
           : t('main.stepSwap');
       default:
         return subvariant === 'custom'
-          ? t('main.stepSwapAndBuy')
+          ? subvariantOptions?.custom === 'deposit'
+            ? t('main.stepSwapAndDeposit')
+            : t('main.stepSwapAndBuy')
           : t('main.stepSwap');
     }
   };

diff --git a/packages/widget/src/hooks/useProcessMessage.ts b/packages/widget/src/hooks/useProcessMessage.ts
@@ -61,9 +61,7 @@ const processStatusMessages: Record<
     PENDING: (t) => t(`main.process.swap.pending`),
     DONE: (t, subvariant, subvariantOptions) =>
       subvariant === 'custom'
-        ? subvariantOptions?.custom
-          ? t(`main.process.${subvariantOptions?.custom}.done`)
-          : t(`main.process.checkout.done`)
+        ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t(`main.process.swap.done`),
   },
   CROSS_CHAIN: {
@@ -76,9 +74,7 @@ const processStatusMessages: Record<
     PENDING: (t) => t(`main.process.receivingChain.pending`),
     DONE: (t, subvariant, subvariantOptions) =>
       subvariant === 'custom'
-        ? subvariantOptions?.custom
-          ? t(`main.process.${subvariantOptions?.custom}.done`)
-          : t(`main.process.checkout.done`)
+        ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)
         : t(`main.process.receivingChain.done`),
   },
   TRANSACTION: {},

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
@@ -12,10 +12,11 @@
     "bookmark": "Bookmark",
     "bookmarks": "Bookmarks",
     "bridge": "Bridge",
+    "bridgeReview": "Review bridge",
     "buy": "Buy",
-    "buyNow": "Buy now",
     "cancel": "Cancel",
     "changeWallet": "Change wallet",
+    "checkoutReview": "Review purchase",
     "close": "Close",
     "confirm": "Confirm",
     "connectWallet": "Connect wallet",
@@ -24,6 +25,8 @@
     "copyAddress": "Copy address",
     "dark": "Dark",
     "delete": "Delete",
+    "deposit": "Deposit",
+    "depositReview": "Review deposit",
     "disconnect": "Disconnect",
     "done": "Done",
     "exchange": "Exchange",
@@ -36,14 +39,12 @@
     "removeTransaction": "Remove transaction",
     "reset": "Reset",
     "resetSettings": "Reset settings",
-    "reviewBridge": "Review bridge",
-    "reviewPurchase": "Review purchase",
-    "reviewSwap": "Review swap",
     "seeDetails": "See details",
     "showAll": "Show all",
     "startBridging": "Start bridging",
     "startSwapping": "Start swapping",
     "swap": "Swap",
+    "swapReview": "Review swap",
     "tryAgain": "Try again",
     "viewCoverage": "View coverage",
     "viewOnExplorer": "View on explorer"
@@ -53,21 +54,21 @@
     "bookmarkedWallets": "Bookmarked wallets",
     "bridge": "Bridge",
     "checkout": "Checkout",
+    "checkoutDetails": "Checkout details",
     "deposit": "Deposit",
+    "depositDetails": "Deposit details",
     "exchange": "Exchange",
     "from": "Exchange from",
     "gas": "Gas",
     "payWith": "Pay with",
-    "purchase": "Purchase",
-    "purchaseDetails": "Purchase details",
     "receive": "Receive",
     "recentWallets": "Recent wallets",
     "selectChain": "Select chain",
     "selectWallet": "Select your wallet",
+    "send": "Send",
     "sendToWallet": "Send to wallet",
     "settings": "Settings",
     "swap": "Swap",
-    "send": "Send",
     "to": "Exchange to",
     "transactionDetails": "Transaction details",
     "transactionHistory": "Transaction history",
@@ -96,12 +97,13 @@
     "message": {
       "exchangePartiallySuccessful": "We've tried to complete the transaction, but {{tool}} couldn't proceed due to either slippage settings or lack of liquidity for the {{tokenSymbol}} token.",
       "exchangeSuccessful": "There are now {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in {{walletAddress}} wallet on {{chainName}} chain.",
-      "purchaseSuccessful": "You now own {{assetName}} in {{walletAddress}} wallet on {{chainName}} chain."
+      "checkoutSuccessful": "You now own {{assetName}} in {{walletAddress}} wallet on {{chainName}} chain."
     },
     "title": {
       "bridgePartiallySuccessful": "Bridge partially successful",
       "bridgeSuccessful": "Bridge successful",
-      "purchaseSuccessful": "Purchase successful",
+      "depositSuccessful": "Deposit successful",
+      "checkoutSuccessful": "Purchase successful",
       "refundIssued": "Refund issued",
       "swapPartiallySuccessful": "Swap partially successful",
       "swapSuccessful": "Swap successful"
@@ -256,10 +258,12 @@
     "sentToAddress": "Sent to {{address}}",
     "stepBridge": "Bridge",
     "stepBridgeAndBuy": "Bridge and buy",
+    "stepBridgeAndDeposit": "Bridge and deposit",
     "stepDetails": "{{tool}} via LI.FI",
     "stepSwap": "Swap",
     "stepSwapAndBridge": "Swap and bridge",
     "stepSwapAndBuy": "Swap and buy",
+    "stepSwapAndDeposit": "Swap and deposit",
     "supportId": "Support ID",
     "swapStepDetails": "Swap on {{chain}} via {{tool}}",
     "tags": {

diff --git a/packages/widget/src/pages/MainPage/ReviewButton.tsx b/packages/widget/src/pages/MainPage/ReviewButton.tsx
@@ -11,7 +11,7 @@ import { navigationRoutes } from '../../utils/navigationRoutes.js';
 export const ReviewButton: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { subvariant } = useWidgetConfig();
+  const { subvariant, subvariantOptions } = useWidgetConfig();
   const splitState = useSplitSubvariantStore((state) => state.state);
   const [toAddress] = useFieldValues('toAddress');
   const { requiredToAddress } = useToAddressRequirements();
@@ -32,20 +32,22 @@ export const ReviewButton: React.FC = () => {
     if (currentRoute) {
       switch (subvariant) {
         case 'custom':
-          return t(`button.reviewPurchase`);
+          return t(`button.${subvariantOptions?.custom ?? 'checkout'}Review`);
         case 'refuel':
           return t(`button.getGas`);
         default:
           const transactionType =
             currentRoute.fromChainId === currentRoute.toChainId
-              ? 'Swap'
-              : 'Bridge';
-          return t(`button.review${transactionType}`);
+              ? 'swap'
+              : 'bridge';
+          return t(`button.${transactionType}Review`);
       }
     } else {
       switch (subvariant) {
         case 'custom':
-          return t(`button.buy`);
+          return subvariantOptions?.custom === 'deposit'
+            ? t(`button.deposit`)
+            : t(`button.buy`);
         case 'refuel':
           return t(`button.getGas`);
         case 'split':

diff --git a/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx b/packages/widget/src/pages/TransactionDetailsPage/TransactionDetailsPage.tsx
@@ -26,7 +26,8 @@ import { TransactionDetailsSkeleton } from './TransactionDetailsSkeleton.js';
 export const TransactionDetailsPage: React.FC = () => {
   const { t, i18n } = useTranslation();
   const { navigate } = useNavigateBack();
-  const { subvariant, contractSecondaryComponent } = useWidgetConfig();
+  const { subvariant, subvariantOptions, contractSecondaryComponent } =
+    useWidgetConfig();
   const { state }: any = useLocation();
   const { tools } = useTools();
   const storedRouteExecution = useRouteExecutionStore(
@@ -39,7 +40,7 @@ export const TransactionDetailsPage: React.FC = () => {
 
   const title =
     subvariant === 'custom'
-      ? t(`header.purchaseDetails`)
+      ? t(`header.${subvariantOptions?.custom ?? 'checkout'}Details`)
       : t(`header.transactionDetails`);
   useHeader(title);
 

diff --git a/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx b/packages/widget/src/pages/TransactionPage/StatusBottomSheet.tsx
@@ -80,8 +80,12 @@ export const StatusBottomSheetContent: React.FC<
   const { navigateBack, navigate } = useNavigateBack();
   const queryClient = useQueryClient();
   const { setFieldValue } = useFieldActions();
-  const { subvariant, contractSecondaryComponent, contractCompactComponent } =
-    useWidgetConfig();
+  const {
+    subvariant,
+    subvariantOptions,
+    contractSecondaryComponent,
+    contractCompactComponent,
+  } = useWidgetConfig();
   const { getChainById } = useAvailableChains();
 
   const ref = useRef<HTMLElement>();
@@ -166,7 +170,9 @@ export const StatusBottomSheetContent: React.FC<
     case RouteExecutionStatus.Done: {
       title =
         subvariant === 'custom'
-          ? t('success.title.purchaseSuccessful')
+          ? t(
+              `success.title.${subvariantOptions?.custom ?? 'checkout'}Successful`,
+            )
           : t(`success.title.${transactionType}Successful`);
       if (token) {
         primaryMessage = t('success.message.exchangeSuccessful', {

diff --git a/packages/widget/src/pages/TransactionPage/TransactionPage.tsx b/packages/widget/src/pages/TransactionPage/TransactionPage.tsx
@@ -35,7 +35,8 @@ export const TransactionPage: React.FC = () => {
   const { setFieldValue } = useFieldActions();
   const emitter = useWidgetEvents();
   const { navigateBack } = useNavigateBack();
-  const { subvariant, contractSecondaryComponent } = useWidgetConfig();
+  const { subvariant, subvariantOptions, contractSecondaryComponent } =
+    useWidgetConfig();
   const { state }: any = useLocation();
   const stateRouteId = state?.routeId;
   const [routeId, setRouteId] = useState<string>(stateRouteId);
@@ -59,15 +60,14 @@ export const TransactionPage: React.FC = () => {
 
   const getHeaderTitle = () => {
     if (subvariant === 'custom') {
-      return t(`header.purchase`);
+      return t(`header.${subvariantOptions?.custom ?? 'checkout'}`);
     } else {
       if (route) {
         const transactionType =
-          route.fromChainId === route.toChainId ? 'Swap' : 'Bridge';
-
+          route.fromChainId === route.toChainId ? 'swap' : 'bridge';
         return status === RouteExecutionStatus.Idle
-          ? t(`button.review${transactionType}`)
-          : t(`header.${transactionType.toLowerCase() as 'swap' | 'bridge'}`);
+          ? t(`button.${transactionType}Review`)
+          : t(`header.${transactionType}`);
       }
     }
 
@@ -159,7 +159,9 @@ export const TransactionPage: React.FC = () => {
       case RouteExecutionStatus.Idle:
         switch (subvariant) {
           case 'custom':
-            return t('button.buyNow');
+            return subvariantOptions?.custom === 'deposit'
+              ? t(`button.deposit`)
+              : t(`button.buy`);
           case 'refuel':
             return t('button.startBridging');
           default: