From ee5f17871a89befa03e920e63ab307b820c6479d Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Thu, 15 Aug 2024 14:50:30 +0200 Subject: [PATCH] fix: improve deposit flow text --- packages/widget/src/components/Step/Step.tsx | 18 ++++++++++----- .../widget/src/hooks/useProcessMessage.ts | 8 ++----- packages/widget/src/i18n/en.json | 22 +++++++++++-------- .../src/pages/MainPage/ReviewButton.tsx | 14 +++++++----- .../TransactionDetailsPage.tsx | 5 +++-- .../TransactionPage/StatusBottomSheet.tsx | 12 +++++++--- .../pages/TransactionPage/TransactionPage.tsx | 16 ++++++++------ 7 files changed, 57 insertions(+), 38 deletions(-) diff --git a/packages/widget/src/components/Step/Step.tsx b/packages/widget/src/components/Step/Step.tsx index 1a47ede30..34b157ce0 100644 --- 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 index 33a77aa5d..88c639d70 100644 --- 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 index 1f2a9064f..6be4e8162 100644 --- 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 index 718e26b5f..15b953f10 100644 --- 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 index a4e2840fd..bfdd548e8 100644 --- 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 index 56c7f4f6f..f6c3d7707 100644 --- 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(); @@ -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 index 98bf11d6f..0668a0401 100644 --- 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(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: