fix: adjust swap/bridge terminology across the widget

lerna.json

@@ -1,19 +1,13 @@
 {
   "npmClient": "yarn",
-  "packages": [
-    "packages/*"
-  ],
-  "ignoreChanges": [
-    "**/*.md"
-  ],
+  "packages": ["packages/*"],
+  "ignoreChanges": ["**/*.md"],
   "command": {
     "version": {
-      "ignore": [
-        "**/*.md"
-      ]
+      "ignoreChanges": ["**/*.md"]
     }
   },
   "changelogPreset": "conventionalcommits",
-  "useWorkspaces": true,
-  "version": "independent"
+  "version": "independent",
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

package.json

@@ -27,12 +27,12 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/big.js": "^6.1.6",
-    "@types/eslint": "^8.40.0",
+    "@types/eslint": "^8.40.1",
     "@types/events": "^3.0.0",
     "@types/node": "^20.2.5",
-    "@types/react": "^18.2.8",
+    "@types/react": "^18.2.9",
     "@types/react-dom": "^18.2.4",
-    "@types/uuid": "^9.0.1",
+    "@types/uuid": "^9.0.2",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "cpy-cli": "^4.2.0",
@@ -45,7 +45,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "lerna": "^6.6.2",
+    "lerna": "^7.0.0",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/widget-embedded/package.json

@@ -30,22 +30,22 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.133",
     "@mui/material": "^5.13.4",
-    "@opensea/seaport-js": "2.0.2",
+    "@opensea/seaport-js": "2.0.3",
     "@tanstack/react-query": "^4.29.12",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
     "events": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.2",
+    "react-router-dom": "^6.12.1",
     "web3": "^1.10.0"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@vitejs/plugin-react": "^4.0.0",
     "buffer": "^6.0.3",
     "esbuild": "^0.17.19",
-    "rollup": "^3.23.1",
+    "rollup": "^3.24.0",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",

packages/widget-embedded/src/config.ts

@@ -9,73 +9,22 @@ export const WidgetVariants = [
 ] as const;
 
 export const widgetBaseConfig: WidgetConfig = {
-  // fromChain: 137,
-  // toChain: 10,
-  // fromToken: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
-  // toToken: '0x7f5c764cbc14f9669b88837ca1490cca17c31607', // 0x0000000000000000000000000000000000000000
-  // fromAmount: '20',
-  // toAddress: '0x552008c0f6870c2f77e5cC1d2eb9bdff03e30Ea0',
-
   variant: 'nft',
   integrator: 'li.fi-playground',
   hiddenUI: ['history'],
-  chains: {
-    allow: [], // 1, 1285, 10, 56, 137
-    deny: [],
-  },
-  // useRecommendedRoute: true,
-  buildSwapUrl: true,
-  // disabledUI: ['toAddress', 'fromAmount', 'toToken', 'fromToken'],
+  buildUrl: true,
   sdkConfig: {
     // apiUrl: 'https://staging.li.quest/v1/',
     defaultRouteOptions: {
-      // slippage: 0.03,
-      // order: 'SAFEST',
-      // allowSwitchChain: false,
-      // fee: 0.05
+      // maxPriceImpact: 0.4,
     },
   },
-  // theme: {
-  //   palette: {
-  //     background: {
-  //       paper: '#121212',
-  //     },
-  //   },
-  // },
-  bridges: {
-    // allow: ['stargate'],
-    // deny: ['connext'],
-  },
-  languages: {
-    // allow: ['uk'],
-    // deny: ['uk'],
-  },
-  // languageResources: {
-  //   en: {
-  //     button: { swap: 'Test' },
-  //   },
-  //   es,
-  // },
 };
 
 export const widgetConfig: WidgetConfig = {
   ...widgetBaseConfig,
   containerStyle: {
-    // border: `1px solid ${
-    //   window.matchMedia('(prefers-color-scheme: dark)').matches
-    //     ? 'rgb(66, 66, 66)'
-    //     : 'rgb(234, 234, 234)'
-    // }`,
     boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.08)',
     borderRadius: '16px',
   },
-  // theme: {
-  //   components: {
-  //     MuiAvatar: {
-  //       defaultProps: {
-  //         imgProps: { crossOrigin: 'anonymous' },
-  //       },
-  //     },
-  //   },
-  // },
 };

packages/widget-embedded/src/index.tsx

@@ -41,12 +41,6 @@ root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <WalletProvider>
-        {/* <BrowserRouter>
-        <Routes>
-          <Route path="/swap/*" element={<App />} />
-          <Route path="/*" element={<App />} />
-        </Routes>
-      </BrowserRouter> */}
         <App />
       </WalletProvider>
     </QueryClientProvider>

packages/widget-playground/package.json

@@ -33,7 +33,7 @@
     "events": "^3.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.2"
+    "react-router-dom": "^6.12.1"
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",

packages/widget-playground/src/config.ts

@@ -31,7 +31,7 @@ export const widgetBaseConfig: WidgetConfig = {
     deny: [],
   },
   // useRecommendedRoute: true,
-  buildSwapUrl: true,
+  buildUrl: true,
   // hiddenUI: ['poweredBy', 'language', 'appearance', 'drawerButton'],
   // disabledUI: ['toAddress', 'fromAmount', 'toToken', 'fromToken'],
   // requiredUI: ['toAddress'],
@@ -136,7 +136,7 @@ export const widgetBaseConfig: WidgetConfig = {
   },
   // languageResources: {
   //   en: {
-  //     button: { swap: 'Test' },
+  //     button: { exchange: 'Test' },
   //   },
   //   es,
   // },

packages/widget-playground/src/index.tsx

@@ -17,7 +17,6 @@ root.render(
     <WalletProvider>
       <BrowserRouter>
         <Routes>
-          <Route path="/swap/*" element={<App />} />
           <Route path="/*" element={<App />} />
         </Routes>
       </BrowserRouter>

packages/widget/package.json

@@ -47,7 +47,7 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@ethersproject/abstract-signer": "^5.7.0",
     "@ethersproject/address": "^5.7.0",
@@ -61,7 +61,7 @@
     "@tanstack/react-query": "^4.29.12",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "big.js": "^6.2.1",
-    "i18next": "^22.5.0",
+    "i18next": "^22.5.1",
     "i18next-browser-languagedetector": "^7.0.2",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.0",
@@ -70,7 +70,7 @@
     "react-hook-form": "^7.44.3",
     "react-i18next": "^12.3.1",
     "react-intersection-observer": "^9.4.4",
-    "react-router-dom": "^6.11.2",
+    "react-router-dom": "^6.12.1",
     "react-timer-hook": "^3.0.6",
     "uuid": "^9.0.0",
     "zustand": "^4.3.8"

packages/widget/src/App.tsx

@@ -11,7 +11,7 @@ import {
 import { Header } from './components/Header';
 import { Initializer } from './components/Initializer';
 import { PoweredBy } from './components/PoweredBy';
-import { SwapRoutesExpanded } from './components/SwapRoutes';
+import { RoutesExpanded } from './components/Routes';
 import { useExpandableVariant } from './hooks';
 import type { WidgetConfig, WidgetProps } from './types';
 
@@ -49,7 +49,7 @@ export const AppDefault = () => {
         <PoweredBy />
         <Initializer />
       </AppContainer>
-      {expandable ? <SwapRoutesExpanded /> : null}
+      {expandable ? <RoutesExpanded /> : null}
     </AppExpandedContainer>
   );
 };

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>
   );
 };

packages/widget/src/AppProvider.tsx

@@ -4,9 +4,9 @@ import { Fragment } from 'react';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
 import { queryClient } from './config/queryClient';
 import {
+  FormProvider,
   I18nProvider,
   SDKProvider,
-  SwapFormProvider,
   ThemeProvider,
   URLSearchParamsBuilder,
   WalletProvider,
@@ -28,9 +28,9 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
             <ThemeProvider>
               <I18nProvider>
                 <WalletProvider>
-                  <SwapFormProvider>
+                  <FormProvider>
                     <AppRouter>{children}</AppRouter>
-                  </SwapFormProvider>
+                  </FormProvider>
                 </WalletProvider>
               </I18nProvider>
             </ThemeProvider>
@@ -42,13 +42,13 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
 };
 
 export const AppRouter: React.FC<PropsWithChildren<{}>> = ({ children }) => {
-  const { buildSwapUrl } = useWidgetConfig();
+  const { buildUrl } = useWidgetConfig();
   const inRouterContext = useInRouterContext();
   const Router = inRouterContext ? Fragment : MemoryRouter;
   return (
     <Router>
       {children}
-      {buildSwapUrl ? <URLSearchParamsBuilder /> : null}
+      {buildUrl ? <URLSearchParamsBuilder /> : null}
     </Router>
   );
 };

packages/widget/src/AppRoutes.tsx

@@ -1,16 +1,16 @@
 import { useRoutes } from 'react-router-dom';
 import { NotFound } from './components/NotFound';
-import { ActiveSwapsPage } from './pages/ActiveSwapsPage';
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage';
 import { MainPage } from './pages/MainPage';
+import { RoutesPage } from './pages/RoutesPage';
 import { SelectChainPage } from './pages/SelectChainPage';
 import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage';
 import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
 import { SettingsPage } from './pages/SettingsPage';
-import { SwapDetailsPage } from './pages/SwapDetailsPage';
-import { SwapHistoryPage } from './pages/SwapHistoryPage';
-import { SwapPage } from './pages/SwapPage';
-import { SwapRoutesPage } from './pages/SwapRoutesPage';
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage';
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage';
+import { TransactionPage } from './pages/TransactionPage';
 import { navigationRoutes } from './utils';
 
 export const AppRoutes = () => {
@@ -52,28 +52,28 @@ export const AppRoutes = () => {
       element: <SelectChainPage formType="to" />,
     },
     {
-      path: navigationRoutes.swapRoutes,
-      element: <SwapRoutesPage />,
+      path: navigationRoutes.routes,
+      element: <RoutesPage />,
     },
     {
-      path: navigationRoutes.activeSwaps,
-      element: <ActiveSwapsPage />,
+      path: navigationRoutes.activeTransactions,
+      element: <ActiveTransactionsPage />,
     },
     {
-      path: navigationRoutes.swapHistory,
-      element: <SwapHistoryPage />,
+      path: navigationRoutes.transactionHistory,
+      element: <TransactionHistoryPage />,
     },
     {
-      path: `${navigationRoutes.swapHistory}?/${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.swapDetails}`,
-      element: <SwapDetailsPage />,
+      path: `${navigationRoutes.transactionHistory}?/${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.transactionDetails}`,
+      element: <TransactionDetailsPage />,
     },
     {
-      path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.swapExecution}?/${navigationRoutes.selectWallet}`,
+      path: `${navigationRoutes.routes}?/${navigationRoutes.transactionExecution}?/${navigationRoutes.selectWallet}`,
       element: <SelectWalletPage />,
     },
     {
-      path: `${navigationRoutes.swapRoutes}?/${navigationRoutes.activeSwaps}?/${navigationRoutes.swapExecution}`,
-      element: <SwapPage />,
+      path: `${navigationRoutes.routes}?/${navigationRoutes.activeTransactions}?/${navigationRoutes.transactionExecution}`,
+      element: <TransactionPage />,
     },
     {
       path: '*',

packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx → packages/widget/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -8,9 +8,9 @@ import { RouteExecutionStatus } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { StepTimer } from '../Step/StepTimer';
 import { TokenAvatar, TokenAvatarGroup } from '../TokenAvatar';
-import { ListItem, ListItemButton } from './ActiveSwaps.style';
+import { ListItem, ListItemButton } from './ActiveTransactions.style';
 
-export const ActiveSwapItem: React.FC<{
+export const ActiveTransactionItem: React.FC<{
   routeId: string;
   dense?: boolean;
 }> = ({ routeId, dense }) => {
@@ -34,7 +34,7 @@ export const ActiveSwapItem: React.FC<{
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes.swapExecution, { state: { routeId } });
+    navigate(navigationRoutes.transactionExecution, { state: { routeId } });
   };
 
   const getStatusComponent = () => {