feat: add reverse tokens button

lifinance · Apr 20, 2022 · b0f826d · b0f826d
1 parent 383a8a5
commit b0f826d
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 7 deletions.
diff --git a/packages/widget/src/components/Header/NavigationHeader.tsx b/packages/widget/src/components/Header/NavigationHeader.tsx
@@ -58,7 +58,7 @@ export const NavigationHeader: React.FC = () => {
       > */}
       {backButtonRoutes.includes(pathname) ? (
         <IconButton
-          size="large"
+          size="medium"
           aria-label="settings"
           color="inherit"
           edge="start"
@@ -80,7 +80,7 @@ export const NavigationHeader: React.FC = () => {
       </Typography>
       {pathname === '/' ? (
         <IconButton
-          size="large"
+          size="medium"
           aria-label="settings"
           color="inherit"
           edge="end"

diff --git a/packages/widget/src/components/Header/WalletHeader.tsx b/packages/widget/src/components/Header/WalletHeader.tsx
@@ -43,7 +43,7 @@ export const WalletHeader: React.FC = () => {
             </Typography>
           </Box>
           <IconButton
-            size="large"
+            size="medium"
             aria-label="disconnect"
             color="inherit"
             edge="end"
@@ -79,7 +79,7 @@ const ConnectButton = () => {
   };
   return (
     <IconButton
-      size="large"
+      size="medium"
       aria-label="disconnect"
       color="inherit"
       edge="end"

diff --git a/packages/widget/src/components/ReverseTokensButton.tsx b/packages/widget/src/components/ReverseTokensButton.tsx
@@ -0,0 +1,31 @@
+import { SwapVert as SwapVertIcon } from '@mui/icons-material';
+import { IconButton } from '@mui/material';
+import { useFormContext } from 'react-hook-form';
+import { SwapFormKey } from '../providers/SwapFormProvider';
+
+export const ReverseTokensButton: React.FC = () => {
+  const { setValue, getValues } = useFormContext();
+  const handleClick = () => {
+    const [fromChain, fromToken, toChain, toToken] = getValues([
+      SwapFormKey.FromChain,
+      SwapFormKey.FromToken,
+      SwapFormKey.ToChain,
+      SwapFormKey.ToToken,
+    ]);
+    setValue(SwapFormKey.FromChain, toChain);
+    setValue(SwapFormKey.FromToken, toToken);
+    setValue(SwapFormKey.ToChain, fromChain);
+    setValue(SwapFormKey.ToToken, fromToken);
+    setValue(SwapFormKey.FromAmount, '');
+  };
+  return (
+    <IconButton
+      onClick={handleClick}
+      size="medium"
+      aria-label="swap-destinations"
+      color="inherit"
+    >
+      <SwapVertIcon />
+    </IconButton>
+  );
+};
diff --git a/packages/widget/src/hooks/useSwapRoutes.ts b/packages/widget/src/hooks/useSwapRoutes.ts
@@ -91,7 +91,7 @@ export const useSwapRoutes = () => {
     {
       enabled: isEnabled,
       refetchIntervalInBackground: true,
-      refetchInterval: 60_000,
+      refetchInterval: 30_000,
       staleTime: 30_000,
       // TODO: probably should be removed
       cacheTime: 30_000,

diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -1,5 +1,5 @@
-import { SwapVert as SwapVertIcon } from '@mui/icons-material';
 import { Box } from '@mui/material';
+import { ReverseTokensButton } from '../../components/ReverseTokensButton';
 import { SelectTokenButton } from '../../components/SelectTokenButton';
 import { SwapButton } from '../../components/SwapButton';
 import { SwapRoutes } from '../../components/SwapRoutes';
@@ -15,7 +15,7 @@ export const SwapPage: React.FC = () => {
           sx={{ display: 'flex', justifyContent: 'center', height: 40 }}
           py={0.5}
         >
-          <SwapVertIcon sx={{ alignSelf: 'center', padding: '0 16px' }} />
+          <ReverseTokensButton />
         </Box>
         <Box mb={3}>
           <SelectTokenButton formType="to" />