fix: adjust swap/bridge terminology across the widget

lifinance · Jun 8, 2023 · ca69314 · ca69314
1 parent cecacb1
commit ca69314
Show file tree

Hide file tree

Showing 55 changed files with 385 additions and 348 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - adjust-terminology
 
 jobs:
   build:

diff --git a/packages/widget/src/AppDrawer.tsx b/packages/widget/src/AppDrawer.tsx
@@ -112,7 +112,7 @@ export const DrawerButtonText = ({ open }: { open: boolean }) => {
 
   return (
     <DrawerButtonTypography>
-      {open ? t('button.hide') : t('button.lifiSwap')}
+      {open ? t('button.hide') : t('button.lifiExchange')}
     </DrawerButtonTypography>
   );
 };
diff --git a/packages/widget/src/AppRoutes.tsx b/packages/widget/src/AppRoutes.tsx
@@ -52,27 +52,27 @@ export const AppRoutes = () => {
       element: <SelectChainPage formType="to" />,
     },
     {
-      path: navigationRoutes.swapRoutes,
+      path: navigationRoutes.routes,
       element: <SwapRoutesPage />,
     },
     {
-      path: navigationRoutes.activeSwaps,
+      path: navigationRoutes.activeTransactions,
       element: <ActiveSwapsPage />,
     },
     {
-      path: navigationRoutes.swapHistory,
+      path: navigationRoutes.transactionHistory,
       element: <SwapHistoryPage />,
     },
     {
-      path: `${navigationRoutes.swapHistory}?/${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.swapDetails}`,
+      path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
       element: <SwapDetailsPage />,
     },
     {
-      path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.selectWallet}`,
+      path: `${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.selectWallet}`,
       element: <SelectWalletPage />,
     },
     {
-      path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.activeSwaps}?/${navigationRoutes.swapExecution}`,
+      path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
       element: <SwapPage />,
     },
     {

diff --git a/packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx b/packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx
@@ -34,7 +34,7 @@ export const ActiveSwapItem: React.FC<{
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes.swapExecution, { state: { routeId } });
+    navigate(navigationRoutes.transactionExecution, { state: { routeId } });
   };
 
   const getStatusComponent = () => {

diff --git a/packages/widget/src/components/ActiveSwaps/ActiveSwaps.tsx b/packages/widget/src/components/ActiveSwaps/ActiveSwaps.tsx
@@ -20,14 +20,14 @@ export const ActiveSwaps: React.FC<BoxProps> = (props) => {
   }
 
   const handleShowAll = () => {
-    navigate(navigationRoutes.activeSwaps);
+    navigate(navigationRoutes.activeTransactions);
   };
 
   const hasShowAll = executingRoutes?.length > 2;
 
   return (
     <Card variant="selected" selectionColor="secondary" {...props}>
-      <CardTitle>{t('header.activeSwaps')}</CardTitle>
+      <CardTitle>{t('header.activeTransactions')}</CardTitle>
       <Stack spacing={1.5} pt={1.5} pb={hasShowAll ? 0 : 2}>
         {executingRoutes.slice(0, 2).map((routeId) => (
           <ActiveSwapItem key={routeId} routeId={routeId} dense />

diff --git a/packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx b/packages/widget/src/components/GasMessage/FundsSufficiencyMessage.tsx
@@ -19,7 +19,7 @@ export const FundsSufficiencyMessage = () => {
         />
       </WarningMessageCardTitle>
       <Typography variant="body2" px={2} pb={2} pt={2}>
-        {t(`swap.warning.message.insufficientFunds`)}
+        {t(`warning.message.insufficientFunds`)}
       </Typography>
     </WarningMessageCard>
   );

diff --git a/packages/widget/src/components/GasMessage/GasRefuelMessage.tsx b/packages/widget/src/components/GasMessage/GasRefuelMessage.tsx
@@ -44,7 +44,7 @@ export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
               }}
             />
             <Typography variant="body2" fontWeight={700}>
-              {t(`swap.info.title.autoRefuel`)}
+              {t(`info.title.autoRefuel`)}
             </Typography>
           </Box>
           <InfoMessageSwitch checked={enabledAutoRefuel} onChange={onChange} />
@@ -56,7 +56,7 @@ export const GasRefuelMessage: React.FC<BoxProps> = (props) => {
           mountOnEnter
         >
           <Typography variant="body2" px={2} pb={2}>
-            {t(`swap.info.message.autoRefuel`, {
+            {t(`info.message.autoRefuel`, {
               chainName: chain?.name,
             })}
           </Typography>

diff --git a/packages/widget/src/components/GasMessage/GasSufficiencyMessage.tsx b/packages/widget/src/components/GasMessage/GasSufficiencyMessage.tsx
@@ -24,11 +24,11 @@ export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
           }}
         />
         <Typography variant="body2" fontWeight={700}>
-          {t(`swap.warning.title.insufficientGas`)}
+          {t(`warning.title.insufficientGas`)}
         </Typography>
       </WarningMessageCardTitle>
       <Typography variant="body2" px={2} pt={1}>
-        {t(`swap.warning.message.insufficientGas`)}
+        {t(`warning.message.insufficientGas`)}
       </Typography>
       {insufficientGas?.map((item, index) => (
         <Typography
@@ -39,7 +39,7 @@ export const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({
           pb={insufficientGas?.length - 1 === index ? 2 : 0}
           pt={0.5}
         >
-          {t(`swap.tokenOnChainAmount`, {
+          {t(`main.tokenOnChainAmount`, {
             amount: item.insufficientAmount?.toString(),
             tokenSymbol: item.token.symbol,
             chainName: item.chain?.name,

diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -15,14 +15,14 @@ import {
 import { HeaderAppBar } from './Header.style';
 import { NavigationTabs } from './NavigationTabs';
 import { WalletMenuButton } from './WalletHeader';
-import { useHeaderActionStore } from './useHeaderActionStore';
+import { useHeaderStore } from './useHeaderStore';
 
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
   const { variant, subvariant, hiddenUI } = useWidgetConfig();
   const { navigate, navigateBack } = useNavigateBack();
   const { account } = useWallet();
-  const { element } = useHeaderActionStore();
+  const { element, title } = useHeaderStore();
   const { pathname } = useLocation();
 
   const cleanedPathname = pathname.endsWith('/')
@@ -43,8 +43,8 @@ export const NavigationHeader: React.FC = () => {
         return t(`settings.enabledBridges`);
       case navigationRoutes.exchanges:
         return t(`settings.enabledExchanges`);
-      case navigationRoutes.swapHistory:
-        return t(`header.swapHistory`);
+      case navigationRoutes.transactionHistory:
+        return t(`header.transactionHistory`);
       case navigationRoutes.fromToken: {
         if (variant === 'nft') {
           return t(`header.payWith`);
@@ -57,21 +57,21 @@ export const NavigationHeader: React.FC = () => {
       case navigationRoutes.toChain:
       case navigationRoutes.toTokenNative:
         return t(`header.selectChain`);
-      case navigationRoutes.swapRoutes:
-        return t(`header.routes`);
-      case navigationRoutes.activeSwaps:
-        return t(`header.activeSwaps`);
-      case navigationRoutes.swapExecution: {
+      case navigationRoutes.routes:
+        return t(`header.youGet`);
+      case navigationRoutes.activeTransactions:
+        return t(`header.activeTransactions`);
+      case navigationRoutes.transactionExecution: {
         if (variant === 'nft') {
           return t(`header.purchase`);
         }
-        return t(`header.swap`);
+        return t(`header.exchange`);
       }
-      case navigationRoutes.swapDetails: {
+      case navigationRoutes.transactionDetails: {
         if (variant === 'nft') {
           return t(`header.purchaseDetails`);
         }
-        return t(`header.swapDetails`);
+        return t(`header.transactionDetails`);
       }
       default: {
         switch (variant) {
@@ -80,7 +80,7 @@ export const NavigationHeader: React.FC = () => {
           case 'refuel':
             return t(`header.gas`);
           default:
-            return t(`header.swap`);
+            return t(`header.exchange`);
         }
       }
     }
@@ -108,7 +108,7 @@ export const NavigationHeader: React.FC = () => {
             flex={1}
             noWrap
           >
-            {handleHeaderTitle()}
+            {title || handleHeaderTitle()}
           </Typography>
         )}
         <Routes>
@@ -118,14 +118,16 @@ export const NavigationHeader: React.FC = () => {
               <>
                 {account.isActive && !hiddenUI?.includes(HiddenUI.History) ? (
                   <Tooltip
-                    title={t(`header.swapHistory`)}
+                    title={t(`header.transactionHistory`)}
                     enterDelay={400}
                     arrow
                   >
                     <IconButton
                       size="medium"
                       edge="start"
-                      onClick={() => navigate(navigationRoutes.swapHistory)}
+                      onClick={() =>
+                        navigate(navigationRoutes.transactionHistory)
+                      }
                     >
                       <ReceiptLongIcon />
                     </IconButton>

diff --git a/packages/widget/src/components/Header/index.ts b/packages/widget/src/components/Header/index.ts
@@ -1,2 +1,2 @@
 export * from './Header';
-export * from './useHeaderActionStore';
+export * from './useHeaderStore';
diff --git a/packages/widget/src/components/Header/types.ts b/packages/widget/src/components/Header/types.ts
@@ -1,8 +1,11 @@
-export interface HeaderActionState {
+export interface HeaderState {
   element?: React.ReactNode | null;
+  title?: string;
 }
 
-export interface HeaderActionStore extends HeaderActionState {
+export interface HeaderStore extends HeaderState {
   setAction(element?: React.ReactNode | null): () => void;
+  setTitle(title?: string): () => void;
   removeAction(): void;
+  removeTitle(): void;
 }
diff --git a/packages/widget/src/components/Header/useHeaderActionStore.ts b/packages/widget/src/components/Header/useHeaderActionStore.ts
diff --git a/packages/widget/src/components/Header/useHeaderStore.ts b/packages/widget/src/components/Header/useHeaderStore.ts
@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+import type { HeaderStore } from './types';
+
+export const useHeaderStore = create<HeaderStore>((set, get) => ({
+  setAction: (element) => {
+    set(() => ({
+      element,
+    }));
+    return get().removeAction;
+  },
+  setTitle: (title) => {
+    set(() => ({
+      title,
+    }));
+    return get().removeTitle;
+  },
+  removeAction: () => {
+    set(() => ({
+      element: null,
+    }));
+  },
+  removeTitle: () => {
+    set(() => ({
+      title: undefined,
+    }));
+  },
+}));
diff --git a/packages/widget/src/components/Insurance/InsuranceCard.tsx b/packages/widget/src/components/Insurance/InsuranceCard.tsx
@@ -43,8 +43,8 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
           <VerifiedUserIcon fontSize="inherit" />
           <CardLabelTypography type="icon">
             {status === RouteExecutionStatus.Idle
-              ? t('swap.tags.insurance')
-              : t('swap.tags.insured')}
+              ? t('main.tags.insurance')
+              : t('main.tags.insured')}
           </CardLabelTypography>
         </CardLabel>
         {status === RouteExecutionStatus.Idle ? (
@@ -76,11 +76,11 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
             <Typography fontSize={14}>
               <Trans>
                 {status === RouteExecutionStatus.Idle
-                  ? t('swap.insurance.insure', {
+                  ? t('insurance.insure', {
                       amount: insuredAmount,
                       tokenSymbol: insuredTokenSymbol,
                     })
-                  : t('swap.insurance.insured', {
+                  : t('insurance.insured', {
                       amount: insuredAmount,
                       tokenSymbol: insuredTokenSymbol,
                     })}
@@ -99,10 +99,10 @@ export const InsuranceCard: React.FC<InsuranceCardProps> = ({
                 }}
               >
                 <Typography fontSize={14} display="list-item">
-                  {t('swap.insurance.bridgeExploits')}
+                  {t('insurance.bridgeExploits')}
                 </Typography>
                 <Typography fontSize={14} display="list-item">
-                  {t('swap.insurance.slippageError')}
+                  {t('insurance.slippageError')}
                 </Typography>
               </Box>
             </Collapse>

diff --git a/packages/widget/src/components/NFT/NFT.tsx b/packages/widget/src/components/NFT/NFT.tsx
@@ -64,7 +64,7 @@ export const NFT: React.FC<BoxProps & NFTProps> = ({
             <Skeleton width={128} height={21} variant="text" />
           ) : owner ? (
             <Typography fontSize={14} color="text.secondary">
-              {t('swap.ownedBy')}{' '}
+              {t('main.ownedBy')}{' '}
               <Link
                 href={owner.url}
                 target="_blank"

diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx
@@ -40,14 +40,14 @@ export const SelectTokenButton: React.FC<
   const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
   const defaultPlaceholder =
     formType === 'to' && variant === 'refuel'
-      ? t('swap.selectChain')
+      ? t('main.selectChain')
       : formType === 'to' && swapOnly
-      ? t('swap.selectToken')
-      : t('swap.selectChainAndToken');
+      ? t('main.selectToken')
+      : t('main.selectChainAndToken');
   const cardTitle =
     formType === 'from' && variant === 'nft'
       ? t(`header.payWith`)
-      : t(`swap.${formType}`);
+      : t(`main.${formType}`);
   return (
     <Card flex={1} onClick={onClick}>
       <CardTitle>{cardTitle}</CardTitle>
@@ -69,7 +69,7 @@ export const SelectTokenButton: React.FC<
           }
           title={isSelected ? token.symbol : defaultPlaceholder}
           subheader={
-            isSelected ? t(`swap.onChain`, { chainName: chain.name }) : null
+            isSelected ? t(`main.onChain`, { chainName: chain.name }) : null
           }
           selected={isSelected}
           compact={compact}
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ on: @@
       push:
         branches:
           - main
+          - adjust-terminology
     jobs:
       build:
@@ Expand Down @@