✨ Get EXA

components/BridgeContent/SocketPlugIn/index.tsx

@@ -12,14 +12,12 @@ import { optimism } from 'viem/chains';
 import useAnalytics from 'hooks/useAnalytics';
 import { hexToRgb } from './utils';
 import useAssetAddresses from 'hooks/useAssetAddresses';
-import { Asset, TokensResponse } from 'types/Bridge';
+import { Asset, NATIVE_TOKEN_ADDRESS, TokensResponse } from 'types/Bridge';
 
 const DynamicBridge = dynamic(() => import('@socket.tech/plugin').then((mod) => mod.Bridge), {
   ssr: false,
 });
 
-const NATIVE_TOKEN = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee';
-
 type Props = {
   updateRoutes: () => void;
 };
@@ -53,7 +51,7 @@ const SocketPlugIn = ({ updateRoutes }: Props) => {
   }, [fetchAssets]);
 
   const tokenList = useMemo(() => {
-    const markets = [...assets, NATIVE_TOKEN];
+    const markets = [...assets, NATIVE_TOKEN_ADDRESS];
     if (!tokens) return [];
 
     return tokens
@@ -144,7 +142,7 @@ const SocketPlugIn = ({ updateRoutes }: Props) => {
         API_KEY={process.env.NEXT_PUBLIC_SOCKET_API_KEY || ''}
         defaultSourceNetwork={chain?.id || optimism.id}
         defaultDestNetwork={optimism.id}
-        defaultDestToken={NATIVE_TOKEN}
+        defaultDestToken={NATIVE_TOKEN_ADDRESS}
         customize={{
           primary: hexToRgb(palette.components.bg),
           secondary: hexToRgb(palette.components.bg),

components/BridgeContent/SocketTxHistory/AssetAmount.tsx

@@ -6,7 +6,12 @@ import Image from 'next/image';
 import formatNumber from 'utils/formatNumber';
 import { formatUnits } from 'viem';
 
-type Props = { asset: Asset; amount: number; mobile?: boolean; chains?: Chain[] };
+type Props = {
+  asset: Pick<Asset, 'chainId' | 'decimals' | 'logoURI' | 'symbol'>;
+  amount: number;
+  mobile?: boolean;
+  chains?: Chain[];
+};
 
 const AssetAmount = ({ asset, amount, mobile, chains }: Props) => {
   const chain = useMemo(() => {
@@ -17,7 +22,7 @@ const AssetAmount = ({ asset, amount, mobile, chains }: Props) => {
     <Box display={'flex'} flexDirection={'column'} gap={1.5}>
       <Box display={'flex'} alignItems={'center'} height={16} gap={0.5}>
         <Image
-          src={asset.logoURI}
+          src={asset.logoURI || ''}
           alt={asset.symbol}
           width={mobile ? 24 : 16}
           height={mobile ? 24 : 16}

components/DropdownMenu/index.tsx

@@ -97,7 +97,7 @@ const DropdownMenu = <T,>({
           },
         }}
       >
-        {Object.values(options).map((o) => (
+        {options.map((o) => (
           <OptionItem
             key={JSON.stringify(o, (_, value) => (typeof value === 'bigint' ? String(value) : value))}
             onClick={() => {

components/Navbar/index.tsx

@@ -109,19 +109,19 @@ function Navbar() {
                 pathname: '/security',
                 name: t('Security Hub'),
                 icon: <GppGoodRoundedIcon sx={{ fontSize: '13px' }} />,
-                isNew: true,
+                isNew: false,
               },
               {
                 pathname: '/activity',
                 name: t('Activity Monitor'),
                 icon: <MonitorHeartRoundedIcon sx={{ fontSize: '13px' }} />,
-                isNew: true,
+                isNew: false,
               },
               {
                 pathname: '/revoke',
                 name: t('Revoke Allowances'),
                 icon: <RemoveCircleOutlineRoundedIcon sx={{ fontSize: '13px' }} />,
-                isNew: true,
+                isNew: false,
               },
             ]}
           />

components/StakingModal/index.tsx

@@ -40,7 +40,7 @@ import { waitForTransaction } from '@wagmi/core';
 import { ModalBox, ModalBoxCell, ModalBoxRow } from 'components/common/modal/ModalBox';
 import SocketAssetSelector from 'components/SocketAssetSelector';
 import useSocketAssets from 'hooks/useSocketAssets';
-import { AssetBalance } from 'types/Bridge';
+import { AssetBalance, NATIVE_TOKEN_ADDRESS } from 'types/Bridge';
 import ModalInput from 'components/OperationsModal/ModalInput';
 import Link from 'next/link';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
@@ -64,7 +64,6 @@ import useDelayedEffect from 'hooks/useDelayedEffect';
 import { gasLimit } from 'utils/gas';
 import { useModal } from 'contexts/ModalContext';
 
-const NATIVE_TOKEN_ADDRESS = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee';
 const MIN_SUPPLY = parseEther('0.002');
 const PROTO_STAKER_DOCS = 'https://docs.exact.ly/guides/periphery/proto-staker';
 

components/getEXA/ChainSelector.tsx

@@ -0,0 +1,79 @@
+import React, { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Skeleton, Typography } from '@mui/material';
+import DropdownMenu from 'components/DropdownMenu';
+import { useGetEXA } from 'contexts/GetEXAContext';
+import Image from 'next/image';
+import { Chain } from 'types/Bridge';
+type AssetOptionProps = {
+  chain?: Chain;
+  option?: boolean;
+  optionSize?: number;
+  selectedSize?: number;
+};
+
+function ChainOption({ chain, option = false, optionSize = 17, selectedSize = 14 }: AssetOptionProps) {
+  const size = option ? optionSize : selectedSize;
+
+  if (!chain) {
+    return <Skeleton width={80} />;
+  }
+
+  return (
+    <Box
+      display="flex"
+      gap={0.5}
+      my={0.5}
+      mx={option ? 0.5 : 0}
+      alignContent="center"
+      alignItems="center"
+      justifyContent="center"
+    >
+      {chain.icon && (
+        <Image
+          src={chain.icon}
+          alt={chain.name}
+          width={size}
+          height={size}
+          style={{
+            borderRadius: '100%',
+          }}
+        />
+      )}
+      <Typography fontWeight={600} fontSize={size} color="grey.900">
+        {chain.name}
+      </Typography>
+    </Box>
+  );
+}
+
+const ChainSelector = ({ disabled }: { disabled?: boolean }) => {
+  const { t } = useTranslation();
+
+  const { setChain: onChainChange, chains, chain } = useGetEXA();
+
+  const handleChainChange = useCallback(
+    (value: string) => {
+      const c = chains?.find(({ name }) => value === name);
+      if (c) onChainChange(c);
+    },
+    [chains, onChainChange],
+  );
+
+  if (!chains) return <Skeleton width={100} />;
+
+  return (
+    <DropdownMenu
+      label={t('Asset')}
+      options={chains.map(({ name }) => name)}
+      onChange={handleChainChange}
+      renderValue={<ChainOption chain={chain} />}
+      renderOption={(o: string) => <ChainOption option chain={chains.find(({ name }) => o === name)} />}
+      data-testid="modal-asset-selector"
+      disabled={disabled}
+    />
+  );
+};
+
+export default memo(ChainSelector);

components/getEXA/ReviewRoute.tsx

@@ -0,0 +1,192 @@
+import React, { memo } from 'react';
+
+import { Box, Typography, Table, TableBody, TableRow, TableCell, Avatar, useTheme, Skeleton } from '@mui/material';
+import { optimism } from 'wagmi/chains';
+import { TXStep, useGetEXA } from 'contexts/GetEXAContext';
+import { LoadingButton } from '@mui/lab';
+import { useTranslation } from 'react-i18next';
+
+import formatNumber from 'utils/formatNumber';
+import Image from 'next/image';
+import { formatEther } from 'viem';
+import ModalAlert from 'components/common/modal/ModalAlert';
+import { ArrowForward } from '@mui/icons-material';
+
+const ReviewRoute = () => {
+  const { t } = useTranslation();
+  const { chain, asset, route, qtyOut, qtyOutUSD, qtyIn, txStep, protocol, txError, approve, socketSubmit } =
+    useGetEXA();
+  const { palette } = useTheme();
+
+  if (!asset?.logoURI || !chain || !qtyOut || !protocol) {
+    return;
+  }
+
+  return (
+    <Box display="flex" flexDirection="column" gap={3}>
+      <Typography fontSize={19} fontWeight={700}>
+        {t('Transaction Summary')}
+      </Typography>
+      <Table
+        sx={{
+          '& td': {
+            border: 0,
+            padding: 0,
+          },
+        }}
+      >
+        <TableBody>
+          <TableRow>
+            <TableCell sx={{ position: 'relative' }}>
+              <Typography fontSize={14} mb={1}>
+                {t('From')}
+              </Typography>
+              <Box display="flex" flexDirection="column" gap={0.5}>
+                <Box display="flex" gap={0.5} alignItems="center">
+                  <Image width={24} height={24} src={asset.logoURI || ''} alt={asset.symbol} />
+                  <Typography fontSize={19} fontWeight={500}>
+                    {formatNumber(qtyIn)} {asset.symbol}
+                  </Typography>
+                </Box>
+                <Box display="flex" gap={0.5} alignItems="center">
+                  <Image width={16} height={16} style={{ borderRadius: '100%' }} src={chain.icon} alt={chain.name} />
+                  <Typography fontSize={14} fontWeight={700}>
+                    {chain.chainId === optimism.id ? optimism.name : chain.name}
+                  </Typography>
+                </Box>
+              </Box>
+            </TableCell>
+            <TableCell>
+              <ArrowForward fontSize={'small'} sx={{ color: 'blue', marginX: 2 }} width={24} />
+            </TableCell>
+            <TableCell>
+              <Typography fontSize={14} mb={1}>
+                {t('To')}
+              </Typography>
+              <Box display="flex" gap={0.5} flexDirection={'column'}>
+                <Box display="flex" gap={0.5} alignItems="center">
+                  <Image width={24} height={24} src="/img/assets/EXA.svg" alt="EXA" />
+                  <Typography fontSize={19} fontWeight={500}>
+                    {formatNumber(formatEther(qtyOut))} EXA
+                  </Typography>
+                </Box>
+                <Box display="flex" gap={0.5} alignItems="center">
+                  <Image
+                    width={16}
+                    height={16}
+                    style={{ borderRadius: '100%' }}
+                    src={'/img/assets/OP.svg'}
+                    alt={optimism.name}
+                  />
+                  <Typography fontSize={14} fontWeight={700}>
+                    {optimism.name}
+                  </Typography>
+                </Box>
+              </Box>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <Box
+        sx={{
+          backgroundColor: 'grey.50',
+          border: '1px solid',
+          borderColor: palette.grey[200],
+          borderRadius: 1,
+          p: 2,
+          '& td:first-of-type': {
+            color: palette.text.disabled,
+          },
+          '& td:last-of-type': {
+            textAlign: 'right',
+            display: 'flex',
+            flexDirection: 'row-reverse',
+          },
+          '& td': {
+            p: 1,
+          },
+          '& tr:first-of-type td': {
+            paddingTop: 0,
+          },
+          '& tr:last-of-type td': {
+            border: 0,
+            paddingBottom: 0,
+          },
+        }}
+      >
+        <Table>
+          <TableBody>
+            <TableRow>
+              <TableCell>{t('Estimated Output')}</TableCell>
+              <TableCell>
+                <Box display="flex" flexDirection="column">
+                  <Box display="flex" gap={0.5}>
+                    <Image width={20} height={20} src="/img/assets/EXA.svg" alt="EXA" />
+                    <Typography fontSize={19} fontWeight={700}>
+                      EXA {formatNumber(formatEther(qtyOut))}
+                    </Typography>
+                  </Box>
+                  <Typography fontSize={14} fontWeight={500} fontFamily={'IBM Plex Mono'} color="grey.500">
+                    {qtyOutUSD !== undefined && <Typography>~${formatNumber(formatEther(qtyOutUSD))}</Typography>}
+                  </Typography>
+                </Box>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>{t('Dex')}</TableCell>
+              <TableCell>
+                {protocol && (
+                  <Box display="flex" gap={1} alignItems="center">
+                    <Avatar src={protocol.icon || ''} alt={protocol.displayName} sx={{ width: 20, height: 20 }} />
+                    <Typography fontSize={19} fontWeight={700}>
+                      {protocol.displayName}
+                    </Typography>
+                  </Box>
+                )}
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>{t('Gas Fee')}</TableCell>
+              <TableCell>
+                {route ? (
+                  route.totalGasFeesInUsd && (
+                    <Typography fontSize={19} fontWeight={700}>
+                      ${formatNumber(route.totalGasFeesInUsd)}
+                    </Typography>
+                  )
+                ) : (
+                  <Skeleton width={100} />
+                )}
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>{t('Swap Slippage')}</TableCell>
+              <TableCell>
+                <Typography fontSize={19} fontWeight={700}>
+                  {route ? (
+                    `${route.userTxs[0].swapSlippage || route.userTxs[0].steps?.[0]?.bridgeSlippage}%`
+                  ) : (
+                    <Skeleton width={100} />
+                  )}
+                </Typography>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Box>
+
+      {txError?.status && <ModalAlert message={txError.message} variant={txError.variant} mb={1} />}
+      {txStep === TXStep.CONFIRM || txStep === TXStep.CONFIRM_PENDING ? (
+        <LoadingButton variant="contained" onClick={socketSubmit} loading={txStep === TXStep.CONFIRM_PENDING}>
+          {t('Confirm')}
+        </LoadingButton>
+      ) : (
+        <LoadingButton fullWidth onClick={approve} variant="contained" loading={txStep === TXStep.APPROVE_PENDING}>
+          {t('Approve')}
+        </LoadingButton>
+      )}
+    </Box>
+  );
+};
+
+export default memo(ReviewRoute);