Flip origin and destination (#225)

* flip origins * unrelated
RegionX-Labs · Aug 17, 2024 · e2914bc · e2914bc
1 parent b4e41ea
commit e2914bc
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/components/Transfer/transferActions.tsx b/src/components/Transfer/transferActions.tsx
@@ -77,7 +77,7 @@ const TransferActions = () => {
   };
 
   return (
-    <Box width='60%' margin='0.5rem auto'>
+    <Box width='50%' margin='0.5rem auto'>
       <Stack margin='0.5rem 0' direction='column' gap={0.5} alignItems='center'>
         <ArrowDownward />
       </Stack>

diff --git a/src/components/Transfer/transferForm.tsx b/src/components/Transfer/transferForm.tsx
@@ -1,3 +1,4 @@
+import CachedIcon from '@mui/icons-material/Cached';
 import { Box, Paper, Stack, Typography } from '@mui/material';
 
 import theme from '@/utils/muiTheme';
@@ -21,8 +22,14 @@ const TransferForm = () => {
     setSelectedRegion,
   } = useTransferState();
 
+  const flip = () => {
+    const oldOriginChain = originChain;
+    setOriginChain(destinationChain);
+    setDestinationChain(oldOriginChain);
+  };
+
   return (
-    <Box width='60%' margin='0.5rem auto'>
+    <Box width='50%' margin='1rem auto'>
       <Paper
         sx={{
           padding: '2rem',
@@ -41,8 +48,19 @@ const TransferForm = () => {
           <ChainSelector chain={originChain} setChain={setOriginChain} />
         </Stack>
 
+        <Box display='flex' justifyContent='center' mt='1.5rem'>
+          <CachedIcon
+            sx={{
+              color: theme.palette.common.black,
+              fontSize: '2rem',
+              cursor: 'pointer',
+            }}
+            onClick={flip}
+          />
+        </Box>
+
         {/* Destination Chain */}
-        <Stack margin='1rem 0' direction='column' gap='1rem'>
+        <Stack margin='0.5rem 0' direction='column' gap='1rem'>
           <Typography
             sx={{ color: theme.palette.common.black, fontSize: '1.25rem' }}
           >

diff --git a/src/pages/paras/renewal.tsx b/src/pages/paras/renewal.tsx
@@ -255,7 +255,7 @@ const Renewal = () => {
               <Banner
                 content={
                   'No more cores are on sale! Attempting to renew will fail. To avoid these kind of \
-                  issues in the future, please renew during the interlude phase '
+                  issues in the future, please renew during the interlude phase. '
                 }
                 link={{
                   title: 'Renewal FAQ',