Merge pull request #24 from Instadapp/arbitrum

Add Arbitrum Network

assets/icons/arbitrum.svg

@@ -0,0 +1,20 @@
+<svg viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0arb)">
+        <path d="M10.5337 12.0149L12.2372 14.7045L13.8109 13.7871L11.5736 10.2397L10.5337 12.0149Z" fill="currentColor" />
+        <path
+            d="M15.2441 11.9721L12.7995 8.14176L11.8925 9.68992L14.2525 13.5294L15.1057 13.032C15.1895 12.9636 15.2401 12.8632 15.2454 12.755L15.2441 11.9721Z"
+            fill="currentColor" />
+        <path
+            d="M5 12.9604C5 13.2327 5.14504 13.4844 5.38065 13.621L6.20496 14.0988L10.2148 7.62987L9.53425 7.61181C8.9544 7.60359 8.32976 7.75522 8.0431 8.22599L5.76604 11.7763L5 12.9604Z"
+            fill="currentColor" />
+        <path d="M12.5291 7.62917L10.7355 7.63572L6.67766 14.3718L8.09601 15.1933L12.5291 7.62917Z" fill="currentColor" />
+        <path
+            d="M16 7.623C15.985 7.24569 15.7819 6.90026 15.4638 6.69913L11.0048 4.11963C10.6901 3.96024 10.297 3.96004 9.98178 4.11953C9.94451 4.13844 5.64557 6.6465 5.64557 6.6465C5.58608 6.67521 5.52878 6.70942 5.47486 6.74824C5.19089 6.95296 5.01778 7.27114 5 7.6207V12.9628L5.76604 11.7788L5.75937 7.6568C5.76027 7.64172 5.76212 7.62689 5.76481 7.61224C5.78213 7.51528 5.83596 7.42875 5.91701 7.37028C5.93723 7.35572 10.3096 4.80972 10.3235 4.80274C10.4263 4.75082 10.5569 4.7502 10.6598 4.80112L15.061 7.34782C15.1651 7.41455 15.2304 7.52766 15.2362 7.65129V12.7574C15.2309 12.8657 15.1883 12.966 15.1047 13.0344L10.6416 15.6363C10.5556 15.6675 10.4551 15.6657 10.3699 15.6309L8.48168 14.5384L8.09597 15.1965L9.79282 16.1793C9.84893 16.2114 9.8989 16.2398 9.93994 16.263C10.0035 16.2988 10.0468 16.3228 10.062 16.3303C10.1826 16.3892 10.3562 16.4235 10.5125 16.4235C10.6559 16.4235 10.7957 16.397 10.928 16.3449L15.5634 13.6444C15.8294 13.437 15.9859 13.1243 16 12.7855V7.623Z"
+            fill="currentColor" />
+    </g>
+    <defs>
+        <clipPath id="clip0arb">
+            <rect x="0.580627" width="20" height="20" rx="2" fill="currentColor" />
+        </clipPath>
+    </defs>
+</svg>

components/swap/SwapCard.vue

@@ -347,7 +347,7 @@
 </template>
 
 <script>
-import { computed, defineComponent, reactive, ref, watch } from '@nuxtjs/composition-api'
+import { computed, defineComponent, onMounted, reactive, ref, watch } from '@nuxtjs/composition-api'
 import { useNetwork } from '~/composables/useNetwork'
 import tokens from '~/constant/tokens'
 import Button from '../Button.vue'
@@ -404,6 +404,10 @@ export default defineComponent({
       decimals: 18,
     })
 
+    onMounted(() => {
+      selectToken1(allTokens.value[1])
+    })
+
     const slippagePerc = computed(() => {
 
       const sellAmountUsd = toBN(token0.amountUSD);

composables/useBalances.ts

@@ -22,24 +22,27 @@ import { useSorting } from "./useSorting";
 const balances = reactive({
   user: {
     mainnet: {},
-    polygon: {}
+    polygon: {},
+    arbitrum: {}
   },
   dsa: {
     mainnet: {},
-    polygon: {}
+    polygon: {},
+    arbitrum: {}
   }
 });
 
 const prices = reactive({
   mainnet: {},
-  polygon: {}
+  polygon: {},
+  arbitrum: {}
 });
 
 export function useBalances() {
   const { $axios } = useContext();
   const { times, plus, ensureValue } = useBigNumber();
   const { account, library } = useWeb3();
-  const { activeNetworkId } = useNetwork()
+  const { activeNetworkId } = useNetwork();
   const { activeAccount } = useDSA();
   const { getTokenByKey } = useToken();
   const { by } = useSorting();
@@ -49,6 +52,9 @@ export function useBalances() {
     prices.polygon = await $axios.$get(
       "https://api.instadapp.io/defi/polygon/prices"
     );
+    prices.arbitrum = await $axios.$get(
+      "https://api.instadapp.io/defi/arbitrum/prices"
+    );
   });
   const fetchBalances = async (refresh = false) => {
     if (!balances.user || refresh) {
@@ -61,6 +67,10 @@ export function useBalances() {
         polygon:
           activeNetworkId.value === Network.Polygon
             ? await getBalances(account.value, Network.Polygon, library.value)
+            : {},
+        arbitrum:
+          activeNetworkId.value === Network.Arbitrum
+            ? await getBalances(account.value, Network.Arbitrum, library.value)
             : {}
       };
     }
@@ -84,6 +94,14 @@ export function useBalances() {
                 Network.Polygon,
                 library.value
               )
+            : {},
+        arbitrum:
+          activeNetworkId.value === Network.Arbitrum
+            ? await getBalances(
+                activeAccount.value.address,
+                Network.Arbitrum,
+                library.value
+              )
             : {}
       };
     }
@@ -95,7 +113,8 @@ export function useBalances() {
 
   const getBalanceByAddress = (address, network = null, type = "dsa") => {
     return (
-      balances[type]?.[network || activeNetworkId.value][address]?.balance || "0"
+      balances[type]?.[network || activeNetworkId.value][address]?.balance ||
+      "0"
     );
   };
 
@@ -126,7 +145,11 @@ export function useBalances() {
     return tokens[activeNetworkId.value].allTokens
       .map(token => ({
         ...token,
-        balance: getBalanceByAddress(token.address, activeNetworkId.value, type),
+        balance: getBalanceByAddress(
+          token.address,
+          activeNetworkId.value,
+          type
+        ),
         netWorth: netWorth(token.address, type)
       }))
       .sort(by("-netWorth"));

composables/useLink.ts

@@ -8,6 +8,9 @@ export function useLink() {
     if (activeNetworkId.value === "polygon") {
       return "https://polygonscan.com/address";
     }
+    if (activeNetworkId.value === "arbitrum") {
+      return "https://arbiscan.io/address";
+    }
 
     return "https://etherscan.io/address";
   });
@@ -21,5 +24,7 @@ export const getMaticLink = transactionHash =>
   `https://polygonscan.com/tx/${transactionHash}`;
 export const getPolygonLink = transactionHash =>
   `https://polygonscan.com/tx/${transactionHash}`;
+export const getArbitrumLink = transactionHash =>
+  `https://arbiscan.io/tx/${transactionHash}`;
 export const getTenderlyLink = simulationId =>
   `https://dashboard.tenderly.co/public/InstaDApp/dsa-simulations/fork-simulation/${simulationId}?hideSidebar=true`;

composables/useNetwork.ts

@@ -2,6 +2,8 @@ import { computed, watchEffect, ref, watch } from "@nuxtjs/composition-api";
 
 import MainnetSVG from "~/assets/icons/mainnet.svg?inline";
 import PolygonSVG from "~/assets/icons/polygon.svg?inline";
+import ArbitrumSVG from "~/assets/icons/arbitrum.svg?inline";
+
 import { useModal } from "./useModal";
 import { useNotification } from "./useNotification";
 import { useWeb3 } from "@instadapp/vue-web3";
@@ -9,12 +11,14 @@ import { useCookies } from "./useCookies";
 
 export enum Network {
   Mainnet = "mainnet",
-  Polygon = "polygon"
+  Polygon = "polygon",
+  Arbitrum = "arbitrum"
 }
 
 export const networks = [
   { id: "mainnet", chainId: 1, name: "Mainnet", icon: MainnetSVG },
-  { id: "polygon", chainId: 137, name: "Polygon", icon: PolygonSVG }
+  { id: "polygon", chainId: 137, name: "Polygon", icon: PolygonSVG },
+  { id: "arbitrum", chainId: 42161, name: "Arbitrum", icon: ArbitrumSVG }
 ];
 
 export const activeNetworkId = ref<Network>();
@@ -93,10 +97,50 @@ export function useNetwork() {
     }
   }
 
+  async function switchToArbitrum() {
+    if (window.ethereum) {
+      const chainId = "0xa4b1";
+
+      try {
+        await window.ethereum.request({
+          method: "wallet_switchEthereumChain",
+          params: [{ chainId }]
+        });
+      } catch (switchError) {
+        // 4902 error code indicates that the chain has not been added to MetaMask.
+        if (switchError.code === 4902) {
+          try {
+            const chainData = {
+              chainId,
+              chainName: 'Arbitrum One',
+              nativeCurrency: {
+                name: 'Ethereum',
+                symbol: 'ETH',
+                decimals: 18,
+              },
+              rpcUrls: ['https://arb1.arbitrum.io/rpc'],
+              blockExplorerUrls: ['https://arbiscan.io'],
+            };
+            await window.ethereum.request({
+              method: "wallet_addEthereumChain",
+              params: [chainData, account.value]
+            });
+          } catch (addError) {
+            return Promise.reject(addError);
+          }
+        } else {
+          return Promise.reject(switchError);
+        }
+      }
+    }
+  }
+
   async function switchNetwork() {
     try {
       if (activeNetworkId.value === "mainnet") {
         await switchToMainnet();
+      } else if (activeNetworkId.value === "arbitrum") {
+        await switchToArbitrum();
       } else {
         await switchToPolygon();
       }

composables/useNotification.ts

@@ -1,6 +1,11 @@
 import { ref } from "@nuxtjs/composition-api";
 import { useFormatting } from "@/composables/useFormatting";
-import { getEtherscanLink, getMaticLink, getTenderlyLink } from "./useLink";
+import {
+  getArbitrumLink,
+  getEtherscanLink,
+  getMaticLink,
+  getTenderlyLink
+} from "./useLink";
 import { useRandom } from "./useRandom";
 import { Network, activeNetworkId } from "./useNetwork";
 const { makeid } = useRandom();
@@ -92,6 +97,8 @@ export function useNotification() {
     let href;
     if (network === Network.Polygon) {
       href = getMaticLink(transactionHash);
+    }else if (network === Network.Arbitrum) {
+      href = getArbitrumLink(transactionHash);
     } else {
       href = getEtherscanLink(transactionHash);
     }
@@ -113,6 +120,8 @@ export function useNotification() {
     let href;
     if (network === Network.Polygon) {
       href = getMaticLink(transactionHash);
+    } else if (network === Network.Arbitrum) {
+      href = getArbitrumLink(transactionHash);
     } else {
       href = getEtherscanLink(transactionHash);
     }

composables/useTenderly.ts

@@ -9,9 +9,10 @@ const forkId = ref(null);
 export function useTenderly() {
   const { $config } = useContext();
   const { activate, deactivate, connector, library } = useWeb3();
+  const { activeNetworkId } = useNetwork();
   const { accounts, refreshAccounts } = useDSA();
   const canSimulate = computed(
-    () => $config.TENDERLY_FORK_PATH && $config.TENDERLY_KEY
+    () => activeNetworkId.value !== "arbitrum" && $config.TENDERLY_FORK_PATH && $config.TENDERLY_KEY
   );
   const loading = ref(false);
 

connectors/index.ts

@@ -14,15 +14,16 @@ import { SafeAppConnector } from "@gnosis.pm/safe-apps-web3-react/dist/connector
 setWeb3LibraryCallback(provider => new Web3(provider));
 
 export const injected = new InjectedConnector({
-  supportedChainIds: [1, 137]
+  supportedChainIds: [1, 137, 42161]
 });
 
 export const walletconnect = new WalletConnectConnector({
   rpc: {
     1: `https://mainnet.infura.io/v3/${process.env.INFURA_ID}`,
-    137: "https://rpc-mainnet.maticvigil.com"
+    137: "https://rpc-mainnet.maticvigil.com",
+    42161: "https://arb1.arbitrum.io/rpc"
   },
-  supportedChainIds: [1, 137]
+  supportedChainIds: [1, 137, 42161]
 });
 
 // mainnet only
@@ -41,7 +42,7 @@ let gnosisSafe = null;
 
 if (process.client) {
   gnosisSafe = new SafeAppConnector({
-    supportedChainIds: [1, 137]
+    supportedChainIds: [1, 137, 42161]
   });
 }
 

constant/addresses.ts

@@ -29,7 +29,21 @@ const addresses = {
       },
       weth: "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2"
     }
-  }
+  },
+  arbitrum: {
+    core: {
+      instaIndex: '0x1eE00C305C51Ff3bE60162456A9B533C07cD9288',
+      instaConnectorsV2: '0x67fCE99Dd6d8d659eea2a1ac1b8881c57eb6592B'
+    },
+    resolver: {
+      accounts: '0xdF19Da523DA64bBE82eE0E4DFf00d676A8386474',
+      balance: '0x29572b16D306acd7ca0CBCA0F08C3EFF131fFDA5',
+      uniswap_v3: '0x04F8a41be023f839E709eeEaA0725FD766139A4d',
+      // uniswap_v3_staker: '0x1a96af80ED8753a77E23074De78480675049A3c9',
+      nonfungiblePositionManager: '0xC36442b4a4522E871399CD717aBDD847Ab11FE88',
+    },
+    uniswapV3Staker: '0x1f98407aaB862CdDeF78Ed252D6f557aA5b0f00d',
+  },
 };
 
 export default addresses;

constant/tokens.ts

@@ -59,6 +59,15 @@ export default {
     { key: 'wmatic', type: 'token', symbol: 'WMATIC', name: 'Wrapped MATIC', address: '0x0d500B1d8E8eF31E21C99d1Db9A6444d3ADf1270', decimals: 18, isStableCoin: false},
     { key: 'wbtc', type: 'token', symbol: 'WBTC', name: 'Wrapped BTC', address: '0x1BFD67037B42Cf73acF2047067bd4F2C47D9BfD6', decimals: 8, isStableCoin: false},
     { key: 'aave', type: 'token', symbol: 'AAVE', name: 'Aave Token', address: '0xD6DF932A45C0f255f85145f286eA0b292B21C90B', decimals: 18, isStableCoin: false },
-  ])
+  ]),
 
+  arbitrum: createTokenUtils([
+    { key: 'eth', type: 'token', symbol: 'ETH', name: 'Ethereum', address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', decimals: 18, isStableCoin: false },
+    { key: 'weth', type: 'token', symbol: 'WETH', name: 'Wrapped Ethereum', address: '0x82aF49447D8a07e3bd95BD0d56f35241523fBab1', decimals: 18, isStableCoin: false },
+    { key: 'usdc', type: 'token', symbol: 'USDC', name: 'USD Coin', address: '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8', decimals: 6, isStableCoin: true },
+    { key: 'usdt', type: 'token', symbol: 'USDT', name: 'Tether USD Coin', address: '0xFd086bC7CD5C481DCC9C85ebE478A1C0b69FCbb9', decimals: 6, isStableCoin: true },
+    { key: 'link', type: 'token', symbol: 'LINK', name: 'ChainLink Token', address: '0xf97f4df75117a78c1A5a0DBb814Af92458539FB4', decimals: 18, isStableCoin: false },
+    { key: 'uni', type: 'token', symbol: 'UNI', name: 'Uniswap Token', address: '0xFa7F8980b0f1E64A2062791cc3b0871572f1F7f0', decimals: 18, isStableCoin: false },
+    { key: 'wbtc', type: 'token', symbol: 'WBTC', name: 'Wrapped BTC', address: '0x2f2a2543B76A4166549F7aaB2e75Bef0aefC5B0f', decimals: 8, isStableCoin: false },
+  ])
 }

layouts/default.vue

@@ -145,14 +145,14 @@ export default defineComponent({
           return;
         }
 
-        if (route.value.path.includes(['mainnet', 'polygon']) && route.value.path.includes(activeNetwork.value.id)) {
+        if (route.value.path.includes(['mainnet', 'polygon', "arbitrum"]) && route.value.path.includes(activeNetwork.value.id)) {
           redirect('/')
         }
       }, { immediate: true })
 
     watch(chainId, (val) => {
       if (val) {
-        if ([1, 137].includes(val)) {
+        if ([1, 137, 42161].includes(val)) {
           checkForNetworkMismatch()
         } else {
           showNetworksMismatchDialog();

package.json

@@ -30,7 +30,7 @@
     "bignumber.js": "^9.0.1",
     "core-js": "^3.15.1",
     "css-color-function": "^1.3.3",
-    "dsa-connect": "^0.4.8",
+    "dsa-connect": "^0.5.0",
     "nuxt": "^2.15.7",
     "qrcode": "^1.4.4",
     "slugify": "^1.6.0",

pages/index.vue

@@ -107,6 +107,15 @@ const appsPerNetwork = {
       url: "/1inch",
       description: "DEX Aggregator"
     }
+  ],
+  arbitrum: [
+    {
+      id: "1inch",
+      icon: OneInchIcon,
+      name: "1inch",
+      url: "/1inch",
+      description: "DEX Aggregator"
+    }
   ]
 };
 

yarn.lock

@@ -5919,10 +5919,10 @@ drbg.js@^1.0.1:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
 
-dsa-connect@^0.4.8:
-  version "0.4.8"
-  resolved "https://registry.yarnpkg.com/dsa-connect/-/dsa-connect-0.4.8.tgz#1471947e07614c94affcdbce8d25419f2db21214"
-  integrity sha512-NMAbAlMMoR1wKlbcsTkNasbIKjVtogsI7e8tDGC164cAKXMMisQ4n1uT7ZAm+K1/0sxHBJDQsiYzpmv/4ds8RA==
+dsa-connect@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/dsa-connect/-/dsa-connect-0.5.0.tgz#33a1d9ab1095f66724a209d85f335e2e7c89cc5d"
+  integrity sha512-n3X5oD980CBG/rj2AbgcHFA1jZwEEvnIeY+qB7/3mOsgRqVFplguYZjAPKpP8da9WkCDHKkt8FvfQfYbTuvuOw==
 
 duplexer3@^0.1.4:
   version "0.1.4"