Bean UI - Copy and UX tweaks to Migration page (#1150)

BeanstalkFarms · Oct 15, 2024 · 0138a5c · 0138a5c
2 parents 8f12f0d + 06cc947
commit 0138a5c
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 18 deletions.
diff --git a/projects/ui/src/components/Common/MigrationMessage.tsx b/projects/ui/src/components/Common/MigrationMessage.tsx
@@ -8,7 +8,7 @@ export default function MigrationMessage({ message }: { message?: string }) {
   return (
     <Box sx={{ textAlign: 'center' }}>
       <Typography variant="h1">
-        {message || isArbitrum ? "We're migrating!" : "We're on Arbitrum!"}
+        {message || isArbitrum ? "We're migrating!" : "We're on Arbitrum One!"}
       </Typography>
       <Typography variant="body1" textAlign="center" sx={{ display: 'inline-flex', gap: 0.5 }}>
         Please check

diff --git a/projects/ui/src/components/Nav/routes.ts b/projects/ui/src/components/Nav/routes.ts
@@ -11,6 +11,7 @@ import disclosuresIcon from '~/img/beanstalk/interface/nav/disclosures.svg';
 import analyticsIcon from '~/img/beanstalk/interface/nav/stats.svg';
 import basinIcon from '~/img/beanstalk/interface/nav/basin.svg';
 import pipelineIcon from '~/img/beanstalk/interface/nav/pipeline.svg';
+import migrationIcon from '~/img/beanstalk/interface/nav/migration.svg';
 
 export type RouteData = {
   /** Nav item title */
@@ -83,12 +84,12 @@ const ROUTES: { [key in RouteKeys]: RouteData[] } = {
       icon: governanceIcon,
       small: true,
     },
-    // {
-    //   path: '/preview',
-    //   title: 'Migration Preview',
-    //   icon: migrationIcon,
-    //   small: true,
-    // },
+    {
+      path: '/l2claim',
+      title: 'Claim Balances on L2',
+      icon: migrationIcon,
+      small: true,
+    },
     {
       path: 'docs',
       href: 'https://docs.bean.money/almanac',

diff --git a/projects/ui/src/constants/chaininfo.ts b/projects/ui/src/constants/chaininfo.ts
@@ -63,7 +63,7 @@ export const CHAIN_INFO: ChainInfoMap = {
     explorer: 'https://arbiscan.io',
     explorerName: 'Arbiscan',
     explorerLogoUrl: arbitrumIcon,
-    label: 'Arbitrum',
+    label: 'Arbitrum One',
     logoUrl: ethereumLogoUrl,
     nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
     statusPage: 'https://status.arbitrum.io/',

diff --git a/projects/ui/src/hooks/chain/useIsSmartContract.ts b/projects/ui/src/hooks/chain/useIsSmartContract.ts
@@ -19,7 +19,7 @@ export default function useIsSmartContract() {
             } else {
                 setIsLoading(true);
                 const _isContract = await getBytecode(client, { address: account as `0x${string}` })
-                if (_isContract === "0x") {
+                if (_isContract === "0x" || !_isContract) {
                     setIsContract(false);
                 } else {
                     setIsContract(true);

diff --git a/projects/ui/src/pages/l1delegate.tsx b/projects/ui/src/pages/l1delegate.tsx
@@ -4,6 +4,7 @@ import {
     Button,
     Card,
     InputAdornment,
+    Link,
     TextField,
     Typography,
 } from '@mui/material';
@@ -211,6 +212,14 @@ export default function L1Delegate() {
         };
     }, [l1ReadResults])
 
+    useEffect(() => {
+        if (!isContract && account) {
+            checkAddress(account)
+        } else {
+            checkAddress("")
+        }
+    }, [isContract, account])
+
     useEffect(() => {
         getMigrationData();
     }, [account, sdk]);
@@ -331,9 +340,21 @@ export default function L1Delegate() {
                 <Box sx={{ paddingX: 2 }}>
                     <>
                         <PageHeader
-                            title="Delegate Contract Balance for L2 Migration"
-                            description="Specify which address your want your Beanstalk assets migrated to on Arbitrum"
+                            title="Delegate Balances for L2 Migration"
+                            description="Specify which address your want your Beanstalk assets migrated to on Arbitrum One"
                         />
+                        {isContract &&
+                            <Link
+                                color="primary"
+                                display="flex"
+                                flexDirection="row"
+                                gap={1}
+                                alignItems="center"
+                                href={'#/l2claim'}
+                            >
+                                <Typography variant="subtitle1">Done with this step? Click here to Claim your assets on Arbitrum One →</Typography>
+                            </Link>
+                        }
                         <Card sx={{ padding: 1, maxWidth: 700, minWidth: 300, marginTop: 2 }}>
                             <Typography variant="h4" fontWeight={FontWeight.bold} padding={1}>
                                 Delegate Balances
@@ -356,7 +377,7 @@ export default function L1Delegate() {
                                     fontWeight={600}
                                     sx={{ alignSelf: 'center' }}
                                 >
-                                    Arbitrum
+                                    Arbitrum One
                                 </Typography>
                                 <Typography>{ }</Typography>
                             </Box>
@@ -367,12 +388,12 @@ export default function L1Delegate() {
                                     </Typography>
                                     {(beanComplete) &&
                                         <Typography padding={1}>
-                                            The specified account will automatically be credited with Circulating Beans once Migration data clears the Arbitrum bridge.
+                                            The specified account will automatically be credited with Circulating Beans once Migration data clears the Arbitrum One bridge.
                                         </Typography>
                                     }
                                     {(migrateInternal && internalComplete) &&
                                         <Typography padding={1}>
-                                            Smart Contracts must claim their Beanstalk assets on Arbitrum in order to complete the Migration process. Click the button below to continue.
+                                            Smart Contracts must claim their Beanstalk assets on Arbitrum One in order to complete the Migration process. Click the button below to continue.
                                         </Typography>
                                     }
                                 </>
@@ -435,7 +456,7 @@ export default function L1Delegate() {
                                                 <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%', justifyContent: 'flex-end' }}>
                                                     <Typography sx={{ padding: 1, color: 'GrayText' }}>
                                                         Beans held in your wallet will be
-                                                        migrated and automatically sent to the specified address on Arbitrum.
+                                                        migrated and automatically sent to the specified address on Arbitrum One.
                                                     </Typography>
                                                     <Button
                                                         disabled={!isAddressValid || (!isAddressValid && beanBalance.eq(0)) || !destinationAccount || beanComplete}
@@ -452,7 +473,7 @@ export default function L1Delegate() {
                                                 <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%', justifyContent: 'flex-end' }}>
                                                     <Typography sx={{ padding: 1, color: 'GrayText' }}>
                                                         Beanstalk balances associated with this contract address will be
-                                                        migrated and available to receive on Arbitrum at the address
+                                                        migrated and available to receive on Arbitrum One at the address
                                                         specified.
                                                     </Typography>
                                                     <Button

diff --git a/projects/ui/src/pages/l2claim.tsx b/projects/ui/src/pages/l2claim.tsx
@@ -283,7 +283,7 @@ export default function L2Claim() {
                                     <Typography>{hasFert ? 'Fertilizer' : 'No Fertilizer'}</Typography>
                                 </Box>
                                 <Typography sx={{ padding: 1 }}>
-                                    This page will periodically check Arbitrum for the arrival of migration data. The button below will automatically
+                                    This page will periodically check Arbitrum One for the arrival of migration data. The button below will automatically
                                     enable itself when this data becomes available.
                                 </Typography>
                                 <Button
@@ -300,7 +300,7 @@ export default function L2Claim() {
                                     onClick={() => (!isArbitrum && !isTestnet) ? switchChain({ chainId: 42161 }) : onSubmit()}
                                 >
                                     {(!isArbitrum && !isTestnet) ?
-                                        'Switch to Arbitrum'
+                                        'Switch to Arbitrum One'
                                         : !receiverApproved ?
                                             <Box sx={{ display: 'inline-flex', gap: 1, alignContent: 'center' }}>
                                                 <BeanProgressIcon