Bridge redesign (#674)

* fix: copy && tx status

* fix: history button position

* fix: bridge warning && gas summary

* fix: style adjustment

* optimize: gas limit

* fix: no native token no estimated gas limit

* clean: global contexts

* fix: tx table min height

* optimize: token list hover bg

* fix: default relay fee

* fix: not show "should greater than 0"

* feat: view tx history on NFT page

* fix: invalid ERC20

* temp: mainnet env for preview

* fix: before tx completed

* fix: display the remaining seconds

* refactor: clear dependencies

* fix: standardise time

* env: two env for bridge revision

* fix: no connected || no data

* fix: update copy

* fix: header height and margin

* fix: logo adapted for circular cropping

* fix: UI improvements

* fix: withdraw Step 1 and 2 should have same height

* fix: show not connected&&wrong network

* fix: copy of successful tx

* optimize: max button logic

* fix: UI details

* fix: show L1 Data Fee when withdrawing

netlify.toml

@@ -103,6 +103,43 @@ REACT_APP_L2_GAS_PRICE_ORACLE = "0x247969F4fad93a33d4826046bc3eAE0D36BdE548"
 REACT_APP_SCROLL_CHAIN = "0x2D567EcE699Eabe5afCd141eDB7A4f2D0D6ce8a0"
 REACT_APP_L1_MESSAGE_QUEUE = "0xF0B2293F5D834eAe920c6974D50957A1732de763"
 
+[context.bridge-redesign.environment]
+REACT_APP_SCROLL_ENVIRONMENT = "Mainnet"
+REACT_APP_API_BASE_URI = "https://mainnet-api.scroll.io"
+REACT_APP_BRIDGE_API_URI = "https://mainnet-api-bridge.scroll.io/api"
+REACT_APP_ROLLUPSCAN_API_URI = "https://mainnet-api-re.scroll.io/api"
+REACT_APP_CHAIN_ID_L1 = "1"
+REACT_APP_CHAIN_ID_L2 = "534352"
+REACT_APP_EXTERNAL_RPC_URI_L1 = "https://ethereum.blockpi.network/v1/rpc/public"
+REACT_APP_EXTERNAL_RPC_URI_L2 = "https://rpc.scroll.io"
+REACT_APP_EXTERNAL_EXPLORER_URI_L1 = "https://etherscan.io"
+REACT_APP_EXTERNAL_EXPLORER_URI_L2 = "https://scrollscan.com"
+REACT_APP_EXTERNAL_EXPLORER_URI_DORA = "https://www.ondora.xyz/network/scroll"
+REACT_APP_ETHERSCAN_L2 = "https://scrollscan.com"
+REACT_APP_L2_SCAN_URI = "https://scroll.l2scan.co"
+REACT_APP_L1_ETH_GATEWAY_PROXY_ADDR = "0x7F2b8C31F88B6006c382775eea88297Ec1e3E905"
+REACT_APP_L2_ETH_GATEWAY_PROXY_ADDR = "0x6EA73e05AdC79974B931123675ea8F78FfdacDF0"
+REACT_APP_L1_WETH_GATEWAY_PROXY_ADDR = "0x7AC440cAe8EB6328de4fA621163a792c1EA9D4fE"
+REACT_APP_L2_WETH_GATEWAY_PROXY_ADDR = "0x7003E7B7186f0E6601203b99F7B8DECBfA391cf9"
+REACT_APP_L1_CUSTOM_ERC20_GATEWAY_PROXY_ADDR = "0xb2b10a289A229415a124EFDeF310C10cb004B6ff"
+REACT_APP_L2_CUSTOM_ERC20_GATEWAY_PROXY_ADDR = "0x64CCBE37c9A82D85A1F2E74649b7A42923067988"
+REACT_APP_L1_USDC_GATEWAY_PROXY_ADDR = "0xf1AF3b23DE0A5Ca3CAb7261cb0061C0D779A5c7B"
+REACT_APP_L2_USDC_GATEWAY_PROXY_ADDR = "0x33B60d5Dd260d453cAC3782b0bDC01ce84672142"
+REACT_APP_L1_DAI_GATEWAY_PROXY_ADDR = "0x67260A8B73C5B77B55c1805218A42A7A6F98F515"
+REACT_APP_L2_DAI_GATEWAY_PROXY_ADDR = "0xaC78dff3A87b5b534e366A93E785a0ce8fA6Cc62"
+REACT_APP_L1_LIDO_GATEWAY_PROXY_ADDR = "0x6625C6332c9F91F2D27c304E729B86db87A3f504"
+REACT_APP_L2_LIDO_GATEWAY_PROXY_ADDR = "0x8aE8f22226B9d789A36AC81474e633f8bE2856c9"
+REACT_APP_L1_STANDARD_ERC20_GATEWAY_PROXY_ADDR = "0xD8A791fE2bE73eb6E6cF1eb0cb3F36adC9B3F8f9"
+REACT_APP_L2_STANDARD_ERC20_GATEWAY_PROXY_ADDR = "0xE2b4795039517653c5Ae8C2A9BFdd783b48f447A"
+REACT_APP_L1_SCROLL_MESSENGER = "0x6774Bcbd5ceCeF1336b5300fb5186a12DDD8b367"
+REACT_APP_L2_SCROLL_MESSENGER = "0x781e90f1c8Fc4611c9b7497C3B47F99Ef6969CbC"
+REACT_APP_L1_GATEWAY_ROUTER_PROXY_ADDR = "0xF8B1378579659D8F7EE5f3C929c2f3E332E41Fd6"
+REACT_APP_L2_GATEWAY_ROUTER_PROXY_ADDR = "0x4C0926FF5252A435FD19e10ED15e5a249Ba19d79"
+REACT_APP_L1_GAS_PRICE_ORACLE = "0x5300000000000000000000000000000000000002"
+REACT_APP_L2_GAS_PRICE_ORACLE = "0x987e300fDfb06093859358522a79098848C33852"
+REACT_APP_SCROLL_CHAIN = "0xa13BAF47339d63B743e7Da8741db5456DAc1E556"
+REACT_APP_L1_MESSAGE_QUEUE = "0x0d7E906BD9cAFa154b048cFa766Cc1E54E39AF9B"
+
 [context.sepolia.environment]
 REACT_APP_SCROLL_ENVIRONMENT = "Sepolia"
 REACT_APP_API_BASE_URI = "https://sepolia-api.scroll.io"

src/Homepage.tsx

@@ -8,7 +8,6 @@ import ScrollToTop from "@/hooks/useScrollToTop"
 import NotFound from "@/pages/404"
 import { isSepolia, requireEnv } from "@/utils"
 
-import AppWrapper from "./contexts"
 import useMatchedRoute from "./hooks/useMatchedRoute"
 import routes from "./routes"
 
@@ -42,18 +41,16 @@ function Homepage() {
         <meta name="twitter:image" content={getImageUrl("twitter")} />
       </Helmet>
       <RainbowProvider>
-        <AppWrapper>
-          <ScrollToTop>
-            <Header />
-            <Routes>
-              {routes.map((route, key) => (
-                <Route key={key} path={route.path} element={route.element} />
-              ))}
-              <Route path="*" element={<NotFound />} />
-            </Routes>
-            {isSepolia ? null : <Footer />}
-          </ScrollToTop>
-        </AppWrapper>
+        <ScrollToTop>
+          <Header />
+          <Routes>
+            {routes.map((route, key) => (
+              <Route key={key} path={route.path} element={route.element} />
+            ))}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+          {isSepolia ? null : <Footer />}
+        </ScrollToTop>
       </RainbowProvider>
     </div>
   )

src/components/Alert/index.tsx

@@ -0,0 +1,58 @@
+import { makeStyles } from "tss-react/mui"
+
+import { Alert as MuiAlert, SvgIcon } from "@mui/material"
+
+import { ReactComponent as ErrorSvg } from "@/assets/svgs/refactor/bridge-alert-error.svg"
+import { ReactComponent as SuccessSvg } from "@/assets/svgs/refactor/bridge-alert-success.svg"
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    borderRadius: "1rem",
+    padding: "1.2rem 1.6rem",
+  },
+  standardError: {
+    backgroundColor: "#FFE1DB",
+    color: "#FF684B",
+    fontWeight: 600,
+  },
+  standardSuccess: {
+    backgroundColor: "#DFFCF8",
+    color: "#0F8E7E",
+    fontWeight: 600,
+  },
+  icon: {
+    marginRight: 8,
+  },
+  message: {
+    fontFamily: "var(--onboard-font-family-normal) !important",
+    lineHeight: 1.5,
+    fontWeight: 600,
+  },
+}))
+
+const Alert = props => {
+  const { children, ...restProps } = props
+
+  const { classes } = useStyles()
+
+  return (
+    <MuiAlert
+      iconMapping={{
+        success: <SvgIcon sx={{ fontSize: "3.2rem" }} component={SuccessSvg} inheritViewBox></SvgIcon>,
+        error: <SvgIcon sx={{ fontSize: "3.2rem" }} component={ErrorSvg} inheritViewBox></SvgIcon>,
+      }}
+      classes={{
+        root: classes.root,
+        icon: classes.icon,
+        standardError: classes.standardError,
+        standardSuccess: classes.standardSuccess,
+        message: classes.message,
+      }}
+      {...restProps}
+    >
+      {children}
+    </MuiAlert>
+  )
+}
+
+export default Alert

src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import { motion, useCycle } from "framer-motion"
 import { makeStyles } from "tss-react/mui"
 
-import { ButtonBase, CircularProgress, IconButton, SvgIcon } from "@mui/material"
+import { ButtonBase, CircularProgress, IconButton, SvgIcon, alpha } from "@mui/material"
 
 import { ReactComponent as ArrowRightIcon } from "@/assets/svgs/refactor/arrow-right.svg"
 import useCheckViewport from "@/hooks/useCheckViewport"
@@ -51,7 +51,7 @@ const useStyles = makeStyles<any>()((theme, { width, color, disabled, loading, w
     paddingRight: "2rem",
     border: "unset",
     gap: "0.4em",
-    color: "#0F8E7E",
+    color: theme.palette.primary.contrastText,
   },
   active: {
     color: theme.palette.primary.contrastText,
@@ -68,7 +68,7 @@ const useStyles = makeStyles<any>()((theme, { width, color, disabled, loading, w
   },
   maskLoading: {
     width: "100% !important",
-    backgroundColor: "#DFFCF8",
+    backgroundColor: alpha(theme.palette.primary.main, 0.6),
   },
   maskDisabled: {
     backgroundColor: "#EBC28E",
@@ -145,7 +145,7 @@ const Button = props => {
         disabled={disabled || gloomy || loading}
         {...restProps}
       >
-        {children} {loading && <CircularProgress sx={{ color: "#0F8E7E" }} size={isMobile ? 18 : 24} thickness={4}></CircularProgress>}
+        {children} {loading && <CircularProgress sx={{ color: "inherit" }} size={isMobile ? 18 : 24} thickness={4}></CircularProgress>}
       </ButtonBase>
     </motion.div>
   )

src/components/GlobalComponents/index.tsx

@@ -0,0 +1,11 @@
+import TxHistoryDialog from "@/pages/new-bridge/TxHistoryDialog"
+
+const GlobalComponents = () => {
+  return (
+    <>
+      <TxHistoryDialog></TxHistoryDialog>
+    </>
+  )
+}
+
+export default GlobalComponents

src/components/TextButton/index.tsx

@@ -1,7 +1,7 @@
 import Link from "@/components/Link"
 
 const TextButton = props => {
-  const { sx, children, ...restProps } = props
+  const { sx, underline = "hover", children, ...restProps } = props
   return (
     <Link
       component="button"
@@ -10,7 +10,7 @@ const TextButton = props => {
         verticalAlign: "baseline",
         ...sx,
       }}
-      underline="hover"
+      underline={underline}
       {...restProps}
     >
       {children}

src/components/WalletToolkit/NetworkSelect.tsx

@@ -39,7 +39,7 @@ const useStyles = makeStyles<any>()((theme, { dark }) => ({
     color: "#F1F0F0",
   },
   paper: {
-    marginTop: "0.6rem",
+    marginTop: "0.5rem",
     borderRadius: "0.5rem",
     border: dark ? `1px solid ${theme.palette.primary.contrastText}` : "none",
     backgroundColor: dark ? theme.palette.themeBackground.dark : theme.palette.themeBackground.normal,

src/components/WalletToolkit/WalletDropdown.tsx

@@ -1,16 +1,19 @@
 import copy from "copy-to-clipboard"
 import { useCallback, useMemo, useState } from "react"
+import { useLocation } from "react-router-dom"
 import { makeStyles } from "tss-react/mui"
 
 import { ButtonBase, Fade, ListItemIcon, ListItemText, Menu, MenuItem, SvgIcon } from "@mui/material"
 
 import { ReactComponent as CopySuccessSvg } from "@/assets/svgs/refactor/bridge-copy-success.svg"
+import { ReactComponent as HistorySvg } from "@/assets/svgs/refactor/bridge-history.svg"
 import { ReactComponent as BlockSvg } from "@/assets/svgs/refactor/wallet-connector-block.svg"
 import { ReactComponent as CopySvg } from "@/assets/svgs/refactor/wallet-connector-copy.svg"
 import { ReactComponent as DisconnectSvg } from "@/assets/svgs/refactor/wallet-connector-disconnect.svg"
 import { ReactComponent as DownTriangleSvg } from "@/assets/svgs/refactor/wallet-connector-down-triangle.svg"
 import { CHAIN_ID, EXPLORER_URL } from "@/constants"
 import { useRainbowContext } from "@/contexts/RainbowProvider"
+import useBridgeStore from "@/stores/bridgeStore"
 import { generateExploreLink, truncateAddress } from "@/utils"
 
 const useStyles = makeStyles<any>()((theme, { dark }) => ({
@@ -25,10 +28,7 @@ const useStyles = makeStyles<any>()((theme, { dark }) => ({
     color: dark ? theme.palette.primary.contrastText : "#473835",
     whiteSpace: "nowrap",
   },
-  openButton: {
-    borderRadius: "0.5rem 0.5rem 0 0",
-    borderBottomColor: "transparent",
-  },
+
   connectButton: {
     fontFamily: "var(--onboard-font-family-normal)",
     backgroundColor: "#FF684B",
@@ -77,18 +77,18 @@ const useStyles = makeStyles<any>()((theme, { dark }) => ({
 const WalletDropdown = props => {
   const { sx, dark } = props
   const { classes, cx } = useStyles({ dark })
+  const { pathname } = useLocation()
 
   const { walletCurrentAddress, connect, disconnect, chainId } = useRainbowContext()
+  const { changeHistoryVisible } = useBridgeStore()
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const [anchorWidth, setAnchorWidth] = useState(0)
   const [copied, setCopied] = useState(false)
 
   const open = useMemo(() => Boolean(anchorEl), [anchorEl])
 
   const handleClick = e => {
     setAnchorEl(e.currentTarget)
-    setAnchorWidth(e.currentTarget.offsetWidth)
   }
 
   const handleClose = () => {
@@ -107,6 +107,14 @@ const WalletDropdown = props => {
 
   const operations = useMemo(
     () => [
+      {
+        icon: HistorySvg,
+        label: "Transaction history",
+        action: () => {
+          changeHistoryVisible(true)
+          handleClose()
+        },
+      },
       {
         icon: BlockSvg,
         label: "Block explorer",
@@ -122,7 +130,7 @@ const WalletDropdown = props => {
         },
       },
     ],
-    [viewScan, copyAddress, copied, disconnect],
+    [pathname, viewScan, copyAddress, copied, disconnect],
   )
 
   return (
@@ -143,7 +151,14 @@ const WalletDropdown = props => {
         open={open}
         onClose={handleClose}
         TransitionComponent={Fade}
-        sx={{ ".MuiMenu-paper": { width: anchorWidth } }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
         classes={{ paper: classes.paper, list: classes.list }}
       >
         {operations.map(({ icon, label, action }) => (