feat: add swapping page draft

lifinance · Apr 28, 2022 · 1c387ab · 1c387ab
1 parent 24b52f9
commit 1c387ab
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 11 deletions.
diff --git a/packages/widget/src/App.tsx b/packages/widget/src/App.tsx
@@ -10,8 +10,8 @@ import { SelectTokenPage } from './pages/SelectTokenPage';
 import { SelectWalletPage } from './pages/SelectWalletPage';
 import { SettingsPage } from './pages/SettingsPage';
 import { SwapPage } from './pages/SwapPage';
+import { SwappingPage } from './pages/SwappingPage';
 import { SwapRoutesPage } from './pages/SwapRoutesPage';
-import { TransactionPage } from './pages/TransactionPage';
 import { SwapExecutionProvider } from './providers/SwapExecutionProvider';
 import { SwapFormProvider } from './providers/SwapFormProvider';
 import { WalletProvider } from './providers/WalletProvider';
@@ -61,8 +61,8 @@ export const App: React.FC<AppProps> = ({ config }) => {
                         element={<SwapRoutesPage />}
                       />
                       <Route
-                        path={routes.transaction}
-                        element={<TransactionPage />}
+                        path={routes.swapping}
+                        element={<SwappingPage />}
                       />
                     </Routes>
                   </SwapExecutionProvider>

diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -14,7 +14,7 @@ const backButtonRoutes = [
   routes.fromToken,
   routes.toToken,
   routes.swapRoutes,
-  routes.transaction,
+  routes.swapping,
 ];
 
 export const NavigationHeader: React.FC = () => {
@@ -41,9 +41,9 @@ export const NavigationHeader: React.FC = () => {
       case routes.toToken:
         return t(`header.to`);
       case routes.swapRoutes:
-        return t(`swap.routes`);
-      case routes.transaction:
-        return t(`header.processIsOn`);
+        return t(`header.routes`);
+      case routes.swapping:
+        return t(`header.swapping`);
       default:
         return t(`header.swap`);
     }

diff --git a/packages/widget/src/i18n/en/translation.json b/packages/widget/src/i18n/en/translation.json
@@ -2,13 +2,13 @@
   "header": {
     "walletConnected": "Wallet connected",
     "connectWallet": "Connect wallet",
+    "selectWallet": "Select your wallet",
     "swap": "Swap",
     "from": "Swap from",
     "to": "Swap to",
     "settings": "Settings",
-    "wouldLikeToSwap": "I'd like to swap",
-    "processIsOn": "Process is on...",
-    "selectWallet": "Select your wallet"
+    "routes": "Routes",
+    "swapping": "Swapping"
   },
   "swap": {
     "from": "From",

diff --git a/packages/widget/src/pages/SwappingPage/SwappingPage.tsx b/packages/widget/src/pages/SwappingPage/SwappingPage.tsx
@@ -0,0 +1,31 @@
+import { Container } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useSwapExecutionContext } from '../../providers/SwapExecutionProvider';
+import { StepItem } from './StepItem';
+
+export const SwappingPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { route } = useSwapExecutionContext();
+  console.log('swapping update');
+
+  return (
+    <Container>
+      {route?.steps.map((step, index, steps) => (
+        <StepItem
+          key={step.id}
+          step={step}
+          fromToken={
+            index === 0
+              ? { ...route.fromToken, amount: route.fromAmount }
+              : undefined
+          }
+          toToken={
+            index === steps.length - 1
+              ? { ...route.toToken, amount: route.toAmount }
+              : undefined
+          }
+        />
+      ))}
+    </Container>
+  );
+};
diff --git a/packages/widget/src/utils/routes.ts b/packages/widget/src/utils/routes.ts
@@ -5,7 +5,7 @@ export const routes = {
   fromToken: '/select-from-token',
   toToken: '/select-to-token',
   swapRoutes: '/swap-routes',
-  transaction: '/transaction',
+  swapping: '/swapping',
 };
 
 export type RouteType = keyof typeof routes;