added static supported chains list for asset swap and send, version bump

etherspot · Aug 23, 2022 · 1c8dc5d · 1c8dc5d
1 parent 63bd078
commit 1c8dc5d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@etherspot/react-transaction-buidler",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Etherspot React component.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

diff --git a/src/components/TransactionBlock/AssetSwapTransactionBlock.tsx b/src/components/TransactionBlock/AssetSwapTransactionBlock.tsx
@@ -7,9 +7,11 @@ import React, {
 import styled from 'styled-components';
 import {
   AccountBalance,
-  CrossChainBridgeSupportedChain,
   ExchangeOffer,
 } from 'etherspot';
+import { TokenListToken } from 'etherspot/dist/sdk/assets/classes/token-list-token';
+import { ethers } from 'ethers';
+import { debounce } from 'lodash';
 
 import TextInput from '../TextInput';
 import SelectInput, { SelectOption } from '../SelectInput/SelectInput';
@@ -22,9 +24,7 @@ import {
   addressesEqual,
   ErrorMessages,
 } from '../../utils/validation';
-import { TokenListToken } from 'etherspot/dist/sdk/assets/classes/token-list-token';
-import { ethers } from 'ethers';
-import { debounce } from 'lodash';
+import { supportedChains } from '../../utils/chain';
 
 export interface SwapAssetTransactionBlockValues {
   chainId?: number;
@@ -44,10 +44,10 @@ const Title = styled.h3`
   border-bottom: 1px solid #000;
 `;
 
-const mapAvailableNetworkToSelectOption = ({
-  name: title,
+const mapSupportedChainToSelectOption = ({
+  title,
   chainId: value,
-}: CrossChainBridgeSupportedChain): SelectOption => ({
+}: { title: string; chainId: number; }): SelectOption => ({
   title,
   value,
 });
@@ -64,26 +64,17 @@ const AssetSwapTransactionBlock = ({
   const [selectedToAsset, setSelectedToAsset] = useState<SelectOption | null>(null);
   const [selectedNetwork, setSelectedNetwork] = useState<SelectOption | null>(null);
   const [selectedOffer, setSelectedOffer] = useState<SelectOption | null>(null);
-  const [availableNetworks, setAvailableNetworks] = useState<CrossChainBridgeSupportedChain[] | null>(null);
   const [availableFromAssets, setAvailableFromAssets] = useState<TokenListToken[] | null>(null);
   const [availableFromAssetsBalances, setAvailableFromAssetsBalances] = useState<AccountBalance[] | null>(null);
   const [availableToAssets, setAvailableToAssets] = useState<TokenListToken[] | null>(null);
   const [availableOffers, setAvailableOffers] = useState<ExchangeOffer[] | null>(null);
-  const [isLoadingAvailableNetworks, setIsLoadingAvailableNetworks] = useState<boolean>(false);
   const [isLoadingAvailableAssets, setIsLoadingAvailableAssets] = useState<boolean>(false);
   const [isLoadingAvailableOffers, setIsLoadingAvailableOffers] = useState<boolean>(false);
 
   const { setTransactionBlockValues, resetTransactionBlockFieldValidationError } = useTransactionBuilder();
 
   const { sdk, getSupportedAssetsForChainId, getAssetsBalancesForChainId, getSdkForChainId } = useEtherspot();
 
-  const networkOptions = useMemo(
-    () => availableNetworks
-      ?.filter((network) => network.sendingEnabled)
-      ?.map(mapAvailableNetworkToSelectOption),
-    [availableNetworks],
-  );
-
   useEffect(() => {
     setSelectedFromAsset(null);
     setAmount('');
@@ -97,19 +88,6 @@ const AssetSwapTransactionBlock = ({
     resetTransactionBlockFieldValidationError(transactionBlockId, 'offer');
   }, [selectedNetwork]);
 
-  const updateAvailableNetworks = useCallback(async () => {
-    if (!sdk) return;
-    setIsLoadingAvailableNetworks(true);
-    try {
-      const networks = await sdk.getCrossChainBridgeSupportedChains();
-      setAvailableNetworks(networks);
-    } catch (e) {
-      //
-    }
-    setIsLoadingAvailableNetworks(false);
-  }, [sdk]);
-
-  useEffect(() => { updateAvailableNetworks(); }, [updateAvailableNetworks]);
 
   const updateAvailableOffers = useCallback(debounce(async () => {
     setSelectedOffer(null);
@@ -252,8 +230,7 @@ const AssetSwapTransactionBlock = ({
       <Title>Swap asset</Title>
       <SelectInput
         label="Network"
-        options={networkOptions ?? []}
-        isLoading={isLoadingAvailableNetworks}
+        options={supportedChains.map(mapSupportedChainToSelectOption)}
         selectedOption={selectedNetwork}
         onOptionSelect={(option) => {
           resetTransactionBlockFieldValidationError(transactionBlockId, 'chainId');

diff --git a/src/components/TransactionBlock/SendAssetTransactionBlock.tsx b/src/components/TransactionBlock/SendAssetTransactionBlock.tsx
@@ -7,8 +7,9 @@ import React, {
 import styled from 'styled-components';
 import {
   AccountBalance,
-  CrossChainBridgeSupportedChain,
 } from 'etherspot';
+import { TokenListToken } from 'etherspot/dist/sdk/assets/classes/token-list-token';
+import { ethers } from 'ethers';
 
 import TextInput from '../TextInput';
 import SelectInput, { SelectOption } from '../SelectInput/SelectInput';
@@ -21,8 +22,7 @@ import {
   addressesEqual,
   ErrorMessages,
 } from '../../utils/validation';
-import { TokenListToken } from 'etherspot/dist/sdk/assets/classes/token-list-token';
-import { ethers } from 'ethers';
+import { supportedChains } from '../../utils/chain';
 
 export interface SendAssetTransactionBlockValues {
   receiverAddress?: string;
@@ -39,10 +39,10 @@ const Title = styled.h3`
   border-bottom: 1px solid #000;
 `;
 
-const mapAvailableNetworkToSelectOption = ({
-  name: title,
+const mapSupportedChainToSelectOption = ({
+  title,
   chainId: value,
-}: CrossChainBridgeSupportedChain): SelectOption => ({
+}: { title: string; chainId: number; }): SelectOption => ({
   title,
   value,
 });
@@ -58,23 +58,14 @@ const SendAssetTransactionBlock = ({
   const [amount, setAmount] = useState<string>('');
   const [selectedAsset, setSelectedAsset] = useState<SelectOption | null>(null);
   const [selectedNetwork, setSelectedNetwork] = useState<SelectOption | null>(null);
-  const [availableNetworks, setAvailableNetworks] = useState<CrossChainBridgeSupportedChain[] | null>(null);
   const [availableAssets, setAvailableAssets] = useState<TokenListToken[] | null>(null);
   const [availableAssetsBalances, setAvailableAssetsBalances] = useState<AccountBalance[] | null>(null);
-  const [isLoadingAvailableNetworks, setIsLoadingAvailableNetworks] = useState<boolean>(false);
   const [isLoadingAvailableAssets, setIsLoadingAvailableAssets] = useState<boolean>(false);
 
   const { setTransactionBlockValues, resetTransactionBlockFieldValidationError } = useTransactionBuilder();
 
   const { sdk, getSupportedAssetsForChainId, getAssetsBalancesForChainId } = useEtherspot();
 
-  const networkOptions = useMemo(
-    () => availableNetworks
-      ?.filter((network) => network.sendingEnabled)
-      ?.map(mapAvailableNetworkToSelectOption),
-    [availableNetworks],
-  );
-
   useEffect(() => {
     setSelectedAsset(null);
     setAmount('');
@@ -84,22 +75,6 @@ const SendAssetTransactionBlock = ({
     resetTransactionBlockFieldValidationError(transactionBlockId, 'assetSymbol');
   }, [selectedNetwork]);
 
-  const updateAvailableNetworks = useCallback(async () => {
-    if (!sdk) return;
-    setIsLoadingAvailableNetworks(true);
-    try {
-      const networks = await sdk.getCrossChainBridgeSupportedChains();
-      setAvailableNetworks(networks);
-    } catch (e) {
-      //
-    }
-    setIsLoadingAvailableNetworks(false);
-  }, [sdk]);
-
-  useEffect(() => {
-    updateAvailableNetworks();
-  }, [updateAvailableNetworks]);
-
   const updateAvailableAssets = useCallback(async () => {
     if (!sdk || !selectedNetwork) return;
     setIsLoadingAvailableAssets(true);
@@ -183,8 +158,7 @@ const SendAssetTransactionBlock = ({
       <Title>Send asset</Title>
       <SelectInput
         label="Network"
-        options={networkOptions ?? []}
-        isLoading={isLoadingAvailableNetworks}
+        options={supportedChains.map(mapSupportedChainToSelectOption)}
         selectedOption={selectedNetwork}
         onOptionSelect={(option) => {
           resetTransactionBlockFieldValidationError(transactionBlockId, 'chainId');

diff --git a/src/utils/chain.ts b/src/utils/chain.ts
@@ -4,20 +4,27 @@ import { TokenListToken } from 'etherspot/dist/sdk/assets/classes/token-list-tok
 // Based on: https://chainid.network/
 export const CHAIN_ID = {
   ETHEREUM_MAINNET: 1,
-  ETHEREUM_KOVAN: 42,
   POLYGON: 137,
   BINANCE: 56,
   XDAI: 100,
   AVALANCHE: 43114,
-  FUJI: 43113,
-  MUMBAI: 80001,
   OPTIMISM: 10,
-  OPTIMISM_KOVAN: 69,
   ARBITRUM: 42161,
   AURORA: 1313161554,
   FANTOM: 250,
 };
 
+export const supportedChains = [
+  { chainId: CHAIN_ID.ETHEREUM_MAINNET, title: 'Ethereum' },
+  { chainId: CHAIN_ID.POLYGON, title: 'Polygon' },
+  { chainId: CHAIN_ID.BINANCE, title: 'Binance Smart Chain' },
+  { chainId: CHAIN_ID.XDAI, title: 'Gnosis Chain (xDai)' },
+  { chainId: CHAIN_ID.OPTIMISM, title: 'Optimism' },
+  { chainId: CHAIN_ID.ARBITRUM, title: 'Arbitrum' },
+  { chainId: CHAIN_ID.AURORA, title: 'Aurora' },
+  { chainId: CHAIN_ID.FANTOM, title: 'Fantom' },
+];
+
 export const nativeAssetPerChainId: { [chainId: number]: TokenListToken } = {
   [CHAIN_ID.ETHEREUM_MAINNET]: {
     chainId: CHAIN_ID.ETHEREUM_MAINNET,