Transfers update + Remove all Etherscan links (#1164)

BeanstalkFarms · Oct 22, 2024 · d3888f2 · d3888f2
2 parents c7b3b88 + 10835d3
commit d3888f2
Show file tree

Hide file tree

Showing 16 changed files with 319 additions and 221 deletions.
diff --git a/projects/dex-ui/src/components/Create/useWhitelistedWellComponents.ts b/projects/dex-ui/src/components/Create/useWhitelistedWellComponents.ts
@@ -10,6 +10,7 @@ import CyrfinLogo from "src/assets/images/cyrfin-logo.svg";
 import HalbornLogo from "src/assets/images/halborn-logo.png";
 import { AddressMap } from "src/types";
 import { toAddressMap } from "src/utils/addresses";
+import { explorerUrl } from "src/utils/chain";
 import useSdk from "src/utils/sdk/useSdk";
 import { usePumps } from "src/wells/pump/usePumps";
 import { useWellImplementations } from "src/wells/useWellImplementations";
@@ -51,8 +52,6 @@ export type WellComponentInfo = {
   info: ComponentInfo[];
   links: {
     explorer?: string;
-    // arbiscan?: string;
-    // etherscan?: string;
     github?: string;
     learnMore?: string;
   };
@@ -179,7 +178,7 @@ const getComponentWithUpdateLinks = (
   chainId: ChainId,
   address: string
 ) => {
-  const explorer = `https://${ChainResolver.isL2Chain(chainId) ? "arbiscan" : "etherscan"}.io/address/${address}`;
+  const explorer = explorerUrl(chainId) + `/address/${address}`;
 
   return {
     ...wellComponent,

diff --git a/projects/dex-ui/src/components/Frame/ContractInfoMarquee.tsx b/projects/dex-ui/src/components/Frame/ContractInfoMarquee.tsx
@@ -2,15 +2,14 @@ import React from "react";
 
 import styled, { keyframes } from "styled-components";
 
+import { ChainId } from "@beanstalk/sdk-core";
+
+import { explorerUrl, useResolvedChainId } from "src/utils/chain";
+
 type ContractMarqueeInfo = Record<string, { display: string; to?: string; url?: string }[]>;
 
 const CarouselData: ContractMarqueeInfo = {
-  ADDRESS: [
-    {
-      display: "0xBA51AAAA95aeEFc1292515b36D86C51dC7877773",
-      url: "https://etherscan.io/address/0xBA51AAAA95aeEFc1292515b36D86C51dC7877773"
-    }
-  ],
+  ADDRESS: [],
   AUDIT: [
     { display: "HALBORN", url: "/halborn-basin-audit.pdf" },
     { display: "CYFRIN", url: "/cyfrin-basin-audit.pdf" },
@@ -19,13 +18,35 @@ const CarouselData: ContractMarqueeInfo = {
   V1: [{ display: "WHITEPAPER", url: "/basin.pdf" }]
 };
 
+const ethCarouselAddresses = {
+  display: import.meta.env.VITE_AQUIFER_ADDRESS_ETH,
+  url: `${explorerUrl(ChainId.ETH_MAINNET)}/address/${import.meta.env.VITE_AQUIFER_ADDRESS_ETH}`
+};
+
+const arbCarouselAddresses = {
+  display: import.meta.env.VITE_AQUIFER_ADDRESS_ARBITRUM,
+  url: `${explorerUrl(ChainId.ARBITRUM_MAINNET)}/address/${import.meta.env.VITE_AQUIFER_ADDRESS_ARBITRUM}`
+};
+
+const CarouselInfo = (chainId: ChainId) => {
+  const data = { ...CarouselData };
+
+  const aquiferStruct =
+    chainId === ChainId.ARBITRUM_MAINNET ? arbCarouselAddresses : ethCarouselAddresses;
+
+  data.ADDRESS[0] = aquiferStruct;
+
+  return data;
+};
+
 const speedPerItem = 16; // approx same speed as TokenMarque
 const itemGap = 24;
 const numItems = 4;
 const singleItemWidth = 1112.06;
 
 export const ContractInfoMarquee = () => {
-  const data = Object.entries(CarouselData);
+  const chainId = useResolvedChainId();
+  const data = Object.entries(CarouselInfo(chainId));
 
   const totalItemWidth = numItems * singleItemWidth;
   const totalGapWidth = numItems * itemGap;

diff --git a/projects/dex-ui/src/components/TxnToast/ToastAlert.tsx b/projects/dex-ui/src/components/TxnToast/ToastAlert.tsx
@@ -4,6 +4,7 @@ import toast from "react-hot-toast";
 import styled from "styled-components";
 
 import { ImageButton } from "src/components/ImageButton";
+import { explorerName, explorerUrl, useSdkChainId } from "src/utils/chain";
 
 import { Copy, X } from "../Icons";
 import { BodyCaps, BodyS, LinksTextLink } from "../Typography";
@@ -30,14 +31,15 @@ export function ToastAlert({
   id?: any;
 }) {
   const handleClick = useCallback(() => (id !== null ? dismissErrors(id) : dismissErrors()), [id]);
+  const chainId = useSdkChainId();
 
   return (
     <Container>
       <Text>
         <Title>{desc}</Title>
         {hash && (
-          <Link href={`https://etherscan.io/tx/${hash}`} target="_blank" rel="noreferrer">
-            View on Etherscan
+          <Link href={`${explorerUrl(chainId)}/tx/${hash}`} target="_blank" rel="noreferrer">
+            View on {explorerName(chainId)}
           </Link>
         )}
 

diff --git a/projects/dex-ui/src/components/Well/Activity/eventRender.tsx b/projects/dex-ui/src/components/Well/Activity/eventRender.tsx
@@ -6,6 +6,7 @@ import styled from "styled-components";
 import { TokenValue } from "@beanstalk/sdk";
 
 import { size } from "src/breakpoints";
+import { explorerUrl } from "src/utils/chain";
 import {
   AddEvent,
   EVENT_TYPE,
@@ -92,7 +93,7 @@ export const renderEvent = (
     <Row key={event.tx}>
       <Td>
         <Action
-          href={`https://etherscan.io/tx/${event.tx}`}
+          href={`${explorerUrl(well.sdk.chainId)}/tx/${event.tx}`}
           target="_blank"
           rel="noopener noreferrer"
         >

diff --git a/projects/dex-ui/src/components/Well/OtherSection.tsx b/projects/dex-ui/src/components/Well/OtherSection.tsx
@@ -97,10 +97,10 @@ const OtherSectionContent: FC<Props> = ({ well }) => {
               <Detail>{wellTokenDetail} Well</Detail>
             </Td>
             <DesktopTd align={"right"}>
-              <Link href={`https://etherscan.io/address/${well.address}`}>{well.address}</Link>
+              <Link href={`https://arbiscan.io/address/${well.address}`}>{well.address}</Link>
             </DesktopTd>
             <MobileTd align={"right"}>
-              <Link href={`https://etherscan.io/address/${well.address}`}>
+              <Link href={`https://arbiscan.io/address/${well.address}`}>
                 {well.address.substr(0, 5) + "..." + well.address.substr(well.address.length - 5)}
               </Link>
             </MobileTd>
@@ -110,10 +110,10 @@ const OtherSectionContent: FC<Props> = ({ well }) => {
               <Detail>Well LP Token - {displayTokenSymbol(well.lpToken as Token)}</Detail>
             </Td>
             <DesktopTd align={"right"}>
-              <Link href={`https://etherscan.io/address/${well.address}`}>{well.address}</Link>
+              <Link href={`https://arbiscan.io/address/${well.address}`}>{well.address}</Link>
             </DesktopTd>
             <MobileTd align={"right"}>
-              <Link href={`https://etherscan.io/address/${well.address}`}>
+              <Link href={`https://arbiscan.io/address/${well.address}`}>
                 {well.address.substr(0, 5) + "..." + well.address.substr(well.address.length - 5)}
               </Link>
             </MobileTd>
@@ -128,8 +128,8 @@ const OtherSectionContent: FC<Props> = ({ well }) => {
                   <Link
                     href={
                       token
-                        ? `https://etherscan.io/address/${token.address}`
-                        : `https://etherscan.io/`
+                        ? `https://arbiscan.io/address/${token.address}`
+                        : `https://arbiscan.io/`
                     }
                     target="_blank"
                     rel="noopener noreferrer"
@@ -141,8 +141,8 @@ const OtherSectionContent: FC<Props> = ({ well }) => {
                   <Link
                     href={
                       token
-                        ? `https://etherscan.io/address/${token.address}`
-                        : `https://etherscan.io/`
+                        ? `https://arbiscan.io/address/${token.address}`
+                        : `https://arbiscan.io/`
                     }
                     target="_blank"
                     rel="noopener noreferrer"
@@ -162,12 +162,12 @@ const OtherSectionContent: FC<Props> = ({ well }) => {
                   <Detail>{tableItem.name}</Detail>
                 </Td>
                 <DesktopTd align={"right"}>
-                  <Link href={`https://etherscan.io/address/${tableItem.address}`}>
+                  <Link href={`https://arbiscan.io/address/${tableItem.address}`}>
                     {tableItem.address}
                   </Link>
                 </DesktopTd>
                 <MobileTd align={"right"}>
-                  <Link href={`https://etherscan.io/address/${tableItem.address}`}>
+                  <Link href={`https://arbiscan.io/address/${tableItem.address}`}>
                     {tableItem.address.substr(0, 5) +
                       "..." +
                       tableItem.address.substr(tableItem.address.length - 5)}

diff --git a/projects/dex-ui/src/utils/chain.ts b/projects/dex-ui/src/utils/chain.ts
@@ -1,4 +1,4 @@
-import { ChainResolver } from "@beanstalk/sdk-core";
+import { ChainId, ChainResolver } from "@beanstalk/sdk-core";
 
 import useSdk from "./sdk/useSdk";
 
@@ -17,3 +17,21 @@ export function useResolvedChainId() {
 
   return ChainResolver.resolveToMainnetChainId(sdkChainId);
 }
+
+export const explorerUrl = (chainId: ChainId) => {
+  switch (ChainResolver.resolveToMainnetChainId(chainId)) {
+    case ChainId.ARBITRUM_MAINNET:
+      return `https://arbiscan.io`;
+    default:
+      return `https://etherscan.io`;
+  }
+};
+
+export const explorerName = (chainId: ChainId) => {
+  switch (ChainResolver.resolveToMainnetChainId(chainId)) {
+    case ChainId.ARBITRUM_MAINNET:
+      return "Arbiscan";
+    default:
+      return "Etherscan";
+  }
+};
diff --git a/projects/ui/src/components/Common/Connection/WalletButton.tsx b/projects/ui/src/components/Common/Connection/WalletButton.tsx
@@ -133,7 +133,7 @@ const WalletButton: FC<{ showFullText?: boolean } & ButtonProps> = ({
           <Row gap={1}>
             <img
               src={chain.explorerLogoUrl || etherscanIcon}
-              alt="Etherscan"
+              alt="Etherscan/Arbiscan"
               width={20}
             />
             <Typography variant="body1" color="text.primary">

diff --git a/projects/ui/src/components/Common/FarmerChip.tsx b/projects/ui/src/components/Common/FarmerChip.tsx
@@ -1,29 +1,34 @@
 import React from 'react';
 import { Button, Typography } from '@mui/material';
 import { IconSize } from '~/components/App/muiTheme';
-import AddressIcon from './AddressIcon';
 import Row from '~/components/Common/Row';
 
 import { FC } from '~/types';
+import { CHAIN_INFO } from '~/constants';
+import { useResolvedChainId } from '~/hooks/chain/useChainId';
+import AddressIcon from './AddressIcon';
 
-const FarmerChip: FC<{ account: string }> = ({ account }) => (
-  <Button
-    size="small"
-    variant="text"
-    color="primary"
-    sx={{
-      fontWeight: 400,
-      color: 'text.primary',
-    }}
-    href={`https://etherscan.io/address/${account}`}
-    target="_blank"
-    rel="noreferrer"
-  >
-    <Row gap={0.5}>
-      <AddressIcon address={account} size={IconSize.xs} />
-      <Typography>{account.substring(0, 6)}</Typography>
-    </Row>
-  </Button>
-);
+const FarmerChip: FC<{ account: string }> = ({ account }) => {
+  const chainId = useResolvedChainId();
+  return (
+    <Button
+      size="small"
+      variant="text"
+      color="primary"
+      sx={{
+        fontWeight: 400,
+        color: 'text.primary',
+      }}
+      href={`${CHAIN_INFO[chainId].explorer}/address/${account}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <Row gap={0.5}>
+        <AddressIcon address={account} size={IconSize.xs} />
+        <Typography>{account.substring(0, 6)}</Typography>
+      </Row>
+    </Button>
+  );
+};
 
 export default FarmerChip;
diff --git a/projects/ui/src/components/Common/Form/AddressInputField.tsx b/projects/ui/src/components/Common/Form/AddressInputField.tsx
@@ -19,11 +19,11 @@ import { ethers } from 'ethers';
 import useChainId from '~/hooks/chain/useChainId';
 import useAccount from '~/hooks/ledger/useAccount';
 import { CHAIN_INFO } from '~/constants';
+import Row from '~/components/Common/Row';
+import { FC } from '~/types';
 import OutputField from './OutputField';
 import BorderEffect from './BorderEffect';
 import { trimAddress } from '../../../util';
-import Row from '~/components/Common/Row';
-import { FC } from '~/types';
 
 export type AddressInputFieldProps = Partial<TextFieldProps> & {
   name: string;
@@ -153,7 +153,7 @@ const AddressInputFieldInner: FC<FieldProps & AddressInputFieldProps> = ({
               color="primary"
             />
             <Typography>
-              <Tooltip title="View on Etherscan">
+              <Tooltip title={`View on ${CHAIN_INFO[chainId].explorerName}`}>
                 <Link
                   underline="hover"
                   color="text.primary"

diff --git a/projects/ui/src/components/Common/Form/SmartSubmitButton.tsx b/projects/ui/src/components/Common/Form/SmartSubmitButton.tsx
@@ -71,7 +71,7 @@ const SmartSubmitButton: FC<
     loading?: boolean;
   } & ButtonProps
 > = ({ contract, tokens, mode = 'auto', nowApproving, children, ...props }) => {
-  const { explorer } = useChainConstant(CHAIN_INFO); // fallback to mainnet
+  const { explorer, explorerName } = useChainConstant(CHAIN_INFO); // fallback to mainnet
   const { values, setFieldValue } = useFormikContext<
     FormState | FormStateNew
   >();
@@ -253,7 +253,7 @@ const SmartSubmitButton: FC<
                 before executing this transaction.
               </Typography>
               <Typography>
-                View on Etherscan:{' '}
+                View on {explorerName}:{' '}
                 <Link
                   href={`${explorer}/address/${contract.address}`}
                   target="_blank"

diff --git a/projects/ui/src/components/History/EventItem.tsx b/projects/ui/src/components/History/EventItem.tsx
@@ -8,6 +8,8 @@ import { BEAN, PODS, SILO_WHITELIST } from '~/constants/tokens';
 import { SupportedChainId } from '~/constants/chains';
 import Row from '~/components/Common/Row';
 import { FC } from '~/types';
+import { CHAIN_INFO } from '~/constants';
+import useChainConstant from '~/hooks/chain/useChainConstant';
 import TokenIcon from '../Common/TokenIcon';
 import useTokenMap from '../../hooks/chain/useTokenMap';
 
@@ -47,6 +49,7 @@ const EventItem: FC<EventItemProps> = ({ event, account }) => {
   let amountOut;
 
   const siloTokens = useTokenMap(SILO_WHITELIST);
+  const chainInfo = useChainConstant(CHAIN_INFO);
 
   const processTokenEvent = (
     e: EventManager.Event,
@@ -209,7 +212,7 @@ const EventItem: FC<EventItemProps> = ({ event, account }) => {
                   textDecoration: 'none',
                   '&:hover': { textDecoration: 'underline' },
                 }}
-                href={`https://etherscan.io/tx/${event.transactionHash}`}
+                href={`${chainInfo.explorer}/tx/${event.transactionHash}`}
                 target="_blank"
                 rel="noreferrer"
               >