Merge pull request #423 from trilitech/add-support-for-custom-networks

Add support for custom networks

.eslintrc

@@ -4,7 +4,7 @@
     "project": "./tsconfig.json",
     "parser": "@typescript-eslint/parser"
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "unused-imports"],
   "extends": [
     "react-app",
     "react-app/jest",
@@ -21,7 +21,8 @@
     "jest/no-identical-title": "warn",
     "jest/valid-expect": "warn",
     "@typescript-eslint/await-thenable": "warn",
-    "@typescript-eslint/no-unnecessary-condition": "warn"
+    "@typescript-eslint/no-unnecessary-condition": "warn",
+    "unused-imports/no-unused-imports": "warn"
   },
   "overrides": [
     {

package.json

@@ -102,6 +102,7 @@
     "electronmon": "^2.0.2",
     "eslint": "^8.47.0",
     "eslint-plugin-storybook": "^0.6.13",
+    "eslint-plugin-unused-imports": "^3.0.0",
     "framer-motion": "^10.15.2",
     "graphql": "^16.8.0",
     "graphql-request": "^6.1.0",

src/components/AccountCard/AccountCard.test.tsx

@@ -20,14 +20,10 @@ import { multisigToAccount } from "../../utils/multisig/helpers";
 import { Multisig } from "../../utils/multisig/types";
 import multisigsSlice, { multisigActions } from "../../utils/redux/slices/multisigsSlice";
 import tokensSlice from "../../utils/redux/slices/tokensSlice";
-import { TezosNetwork } from "../../types/TezosNetwork";
-const {
-  updateTezBalance,
-  updateTokenBalance,
-  updateTezTransfers,
-  updateNetwork,
-  updateDelegations,
-} = assetsSlice.actions;
+import { GHOSTNET, MAINNET } from "../../types/Network";
+import { networksActions } from "../../utils/redux/slices/networks";
+const { updateTezBalance, updateTokenBalance, updateTezTransfers, updateDelegations } =
+  assetsSlice.actions;
 const { addAccount } = accountsSlice.actions;
 
 const { setMultisigs } = multisigsSlice.actions;
@@ -39,7 +35,7 @@ const mockNft = mockNFTToken(0, pkh);
 
 const SELECTED_ACCOUNT_BALANCE = 33200000000;
 beforeEach(() => {
-  store.dispatch(assetsSlice.actions.updateNetwork(TezosNetwork.MAINNET));
+  store.dispatch(networksActions.setCurrent(MAINNET));
   store.dispatch(setMultisigs(multisigs));
   store.dispatch(addAccount([selectedAccount, mockImplicitAccount(1)]));
   store.dispatch(updateTezBalance([{ address: pkh, balance: SELECTED_ACCOUNT_BALANCE }]));
@@ -54,7 +50,7 @@ beforeEach(() => {
   );
   store.dispatch(
     tokensSlice.actions.addTokens({
-      network: TezosNetwork.MAINNET,
+      network: MAINNET,
       tokens: [
         hedgehoge(selectedAccount.address).token,
         tzBtsc(selectedAccount.address).token,
@@ -90,7 +86,7 @@ describe("<AccountCard />", () => {
     expect(link).toHaveProperty("href", expectedLink);
 
     {
-      act(() => store.dispatch(updateNetwork(TezosNetwork.GHOSTNET)));
+      act(() => store.dispatch(networksActions.setCurrent(GHOSTNET)));
 
       const tzktLink = screen.getByTestId("asset-panel-tablist");
       const link = within(tzktLink).getByRole("link", {});

src/components/AccountCard/AccountCardDisplay.tsx

@@ -12,7 +12,7 @@ import { AssetsPanel } from "./AssetsPanel/AssetsPanel";
 import MultisigApprovers from "./MultisigApprovers";
 import AddressPill from "../AddressPill/AddressPill";
 import { OperationDisplay } from "../../types/Transfer";
-import { TezosNetwork } from "../../types/TezosNetwork";
+import { Network } from "../../types/Network";
 import { DynamicModalContext } from "../DynamicModal";
 import { useContext } from "react";
 import DelegationFormPage from "../SendFlow/Delegation/FormPage";
@@ -31,7 +31,7 @@ type Props = {
   nfts: Array<NFTBalance>;
   operationDisplays: Array<OperationDisplay>;
   account: Account;
-  network: TezosNetwork;
+  network: Network;
 };
 
 const RoundButton: React.FC<{

src/components/AccountCard/AssetsPanel/AssetPanel.test.tsx

@@ -1,6 +1,6 @@
 import { mockMultisigAccount } from "../../../mocks/factories";
 import { render, screen } from "../../../mocks/testUtils";
-import { TezosNetwork } from "../../../types/TezosNetwork";
+import { MAINNET } from "../../../types/Network";
 import { AssetsPanel } from "./AssetsPanel";
 
 describe("<AssetPanel/>", () => {
@@ -12,7 +12,7 @@ describe("<AssetPanel/>", () => {
         nfts={[]}
         tokens={[]}
         operationDisplays={[]}
-        network={TezosNetwork.MAINNET}
+        network={MAINNET}
       />
     );
 

src/components/AccountCard/AssetsPanel/AssetsPanel.tsx

@@ -13,15 +13,15 @@ import { DelegationDisplay } from "./DelegationDisplay";
 import MultisigPendingAccordion from "./MultisigPendingAccordion";
 import { NFTsGrid } from "./NFTsGrid";
 import { TokenList } from "./TokenList";
-import { TezosNetwork } from "../../../types/TezosNetwork";
+import { Network } from "../../../types/Network";
 import { useAllDelegations } from "../../../utils/hooks/assetsHooks";
 
 export const AssetsPanel: React.FC<{
   tokens: Array<FA12TokenBalance | FA2TokenBalance>;
   nfts: Array<NFTBalance>;
   account: Account;
   operationDisplays: OperationDisplay[];
-  network: TezosNetwork;
+  network: Network;
 }> = ({ tokens, nfts, account, operationDisplays, network }) => {
   const isMultisig = account.type === AccountType.MULTISIG;
   const rawDelegations = useAllDelegations()[account.address.pkh];

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigDecodedOperationItem.test.tsx

@@ -1,16 +1,17 @@
 import { mockContractAddress, mockImplicitAddress } from "../../../../mocks/factories";
 import { render, screen } from "../../../../mocks/testUtils";
-import { TezosNetwork } from "../../../../types/TezosNetwork";
 import { RawTokenBalance } from "../../../../types/TokenBalance";
 import { assetsActions } from "../../../../utils/redux/slices/assetsSlice";
 import store from "../../../../utils/redux/store";
 import tokensSlice from "../../../../utils/redux/slices/tokensSlice";
 import MultisigDecodedOperationItem from "./MultisigDecodedOperationItem";
+import { MAINNET } from "../../../../types/Network";
+import { networksActions } from "../../../../utils/redux/slices/networks";
 
-const { updateTokenBalance, updateNetwork } = assetsActions;
+const { updateTokenBalance } = assetsActions;
 
 beforeEach(() => {
-  store.dispatch(updateNetwork(TezosNetwork.MAINNET));
+  store.dispatch(networksActions.setCurrent(MAINNET));
 });
 
 describe("<MultisigDecodedOperationItem/>", () => {
@@ -71,7 +72,7 @@ describe("<MultisigDecodedOperationItem/>", () => {
     store.dispatch(updateTokenBalance([mockBalancePlayload]));
     store.dispatch(
       tokensSlice.actions.addTokens({
-        network: TezosNetwork.MAINNET,
+        network: MAINNET,
         tokens: [mockBalancePlayload.token],
       })
     );
@@ -119,7 +120,7 @@ describe("<MultisigDecodedOperationItem/>", () => {
     store.dispatch(updateTokenBalance([mockBalancePlayload]));
     store.dispatch(
       tokensSlice.actions.addTokens({
-        network: TezosNetwork.MAINNET,
+        network: MAINNET,
         tokens: [mockBalancePlayload.token],
       })
     );

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigPendingAccordionItem.test.tsx

@@ -20,6 +20,7 @@ import { estimate, executeOperations, makeToolkit } from "../../../../utils/tezo
 import BigNumber from "bignumber.js";
 import { makeAccountOperations } from "../../../sendForm/types";
 import { makeMultisigApproveOrExecuteOperation } from "../../../../types/Operation";
+import { MAINNET } from "../../../../types/Network";
 
 jest.mock("../../../../utils/hooks/accountUtils");
 jest.mock("../../../sendForm/types");
@@ -102,7 +103,7 @@ describe("<MultisigPendingCard/>", () => {
       makeMultisigApproveOrExecuteOperation(multisig.address, "execute", pendingOps[0].id),
     ]);
 
-    expect(jest.mocked(estimate)).toHaveBeenCalledWith(operation, "mainnet");
+    expect(jest.mocked(estimate)).toHaveBeenCalledWith(operation, MAINNET);
 
     fillPassword("mockPass");
 
@@ -150,7 +151,7 @@ describe("<MultisigPendingCard/>", () => {
       makeMultisigApproveOrExecuteOperation(multisig.address, "approve", pendingOps[0].id),
     ]);
 
-    expect(jest.mocked(estimate)).toHaveBeenCalledWith(operations, "mainnet");
+    expect(jest.mocked(estimate)).toHaveBeenCalledWith(operations, MAINNET);
 
     fillPassword("mockPass");
 

src/components/AccountCard/AssetsPanel/MultisigPendingAccordion/MultisigSignerTile.tsx

@@ -2,7 +2,6 @@ import React, { useContext } from "react";
 import { ImplicitAccount, MultisigAccount } from "../../../../types/Account";
 import { ImplicitAddress } from "../../../../types/Address";
 import { useGetImplicitAccountSafe } from "../../../../utils/hooks/accountHooks";
-import { useSelectedNetwork } from "../../../../utils/hooks/assetsHooks";
 import { useGetContactName } from "../../../../utils/hooks/contactsHooks";
 import { useAsyncActionHandler } from "../../../../utils/hooks/useAsyncActionHandler";
 import { MultisigOperation } from "../../../../utils/multisig/types";
@@ -13,6 +12,7 @@ import { estimate } from "../../../../utils/tezos";
 import { DynamicModalContext } from "../../../DynamicModal";
 import SignPage from "../../../SendFlow/Multisig/SignPage";
 import { MultisigSignerTileDisplay } from "./MultisigSignerTileDisplay";
+import { useSelectedNetwork } from "../../../../utils/hooks/networkHooks";
 
 const MultisigSignerTile: React.FC<{
   signerAddress: ImplicitAddress;

src/components/AccountCard/index.tsx

@@ -6,12 +6,12 @@ import {
   useGetAccountNFTs,
   useGetAccountOperationDisplays,
   useGetDollarBalance,
-  useSelectedNetwork,
 } from "../../utils/hooks/assetsHooks";
 import { DynamicModalContext } from "../DynamicModal";
 import { useReceiveModal } from "../ReceiveModal";
 import SendTezForm from "../SendFlow/Tez/FormPage";
 import { AccountCardDisplay } from "./AccountCardDisplay";
+import { useSelectedNetwork } from "../../utils/hooks/networkHooks";
 
 export const AccountCard: React.FC<{ account: Account }> = ({ account }) => {
   const accountBalance = useGetAccountBalance();

src/components/AddressPill/AddressPill.test.tsx

@@ -2,14 +2,13 @@ import { contact1 } from "../../mocks/contacts";
 import { mockFA1TokenRaw, mockImplicitAddress } from "../../mocks/factories";
 import { render, screen } from "../../mocks/testUtils";
 import { parseContractPkh, parseImplicitPkh } from "../../types/Address";
-import { TezosNetwork } from "../../types/TezosNetwork";
-import assetsSlice from "../../utils/redux/slices/assetsSlice";
 import { contactsActions } from "../../utils/redux/slices/contactsSlice";
 import store from "../../utils/redux/store";
 import tokensSlice from "../../utils/redux/slices/tokensSlice";
 import AddressPill from "./AddressPill";
+import { MAINNET } from "../../types/Network";
+import { networksActions } from "../../utils/redux/slices/networks";
 const { upsert } = contactsActions;
-const { updateNetwork } = assetsSlice.actions;
 
 describe("<AddressPill />", () => {
   it("displays left icon", () => {
@@ -42,10 +41,8 @@ describe("<AddressPill />", () => {
   it("is removable for two icons", () => {
     const address = mockImplicitAddress(0);
     const fa1 = mockFA1TokenRaw(1, address.pkh, 123);
-    store.dispatch(updateNetwork(TezosNetwork.MAINNET));
-    store.dispatch(
-      tokensSlice.actions.addTokens({ network: TezosNetwork.MAINNET, tokens: [fa1.token] })
-    );
+    store.dispatch(networksActions.setCurrent(MAINNET));
+    store.dispatch(tokensSlice.actions.addTokens({ network: MAINNET, tokens: [fa1.token] }));
     render(
       <AddressPill
         address={parseContractPkh(fa1.token.contract.address as string)}

src/components/AddressPill/useAddressKind.test.ts

@@ -7,17 +7,18 @@ import { multisigs } from "../../mocks/multisig";
 import { getWrapper } from "../../mocks/store";
 import { ReduxStore } from "../../providers/ReduxStore";
 import { parseContractPkh, parseImplicitPkh, parsePkh } from "../../types/Address";
-import { TezosNetwork } from "../../types/TezosNetwork";
 import accountsSlice from "../../utils/redux/slices/accountsSlice";
 import assetsSlice from "../../utils/redux/slices/assetsSlice";
 import contactsSlice from "../../utils/redux/slices/contactsSlice";
 import multisigsSlice from "../../utils/redux/slices/multisigsSlice";
 import store from "../../utils/redux/store";
 import tokensSlice from "../../utils/redux/slices/tokensSlice";
 import useAddressKind from "./useAddressKind";
+import { MAINNET } from "../../types/Network";
+import { networksActions } from "../../utils/redux/slices/networks";
 
 beforeEach(() => {
-  store.dispatch(assetsSlice.actions.updateNetwork(TezosNetwork.MAINNET));
+  store.dispatch(networksActions.setCurrent(MAINNET));
 });
 
 describe("useAddressKind", () => {
@@ -58,7 +59,7 @@ describe("useAddressKind", () => {
         delete withoutName.token.metadata?.name;
         store.dispatch(
           tokensSlice.actions.addTokens({
-            network: TezosNetwork.MAINNET,
+            network: MAINNET,
             tokens: [withoutName.token],
           })
         );
@@ -76,7 +77,7 @@ describe("useAddressKind", () => {
       it("returns label", () => {
         store.dispatch(
           tokensSlice.actions.addTokens({
-            network: TezosNetwork.MAINNET,
+            network: MAINNET,
             tokens: [tokenBalance.token],
           })
         );
@@ -140,7 +141,7 @@ describe("useAddressKind", () => {
         store.dispatch(accountsSlice.actions.addAccount([mockImplicitAccount(0)]));
         store.dispatch(
           tokensSlice.actions.addTokens({
-            network: TezosNetwork.MAINNET,
+            network: MAINNET,
             tokens: [hedgehoge(mockImplicitAddress(0)).token, uUSD(mockImplicitAddress(0)).token],
           })
         );

src/components/AddressPill/useAddressKind.ts

@@ -2,7 +2,7 @@ import { Address } from "../../types/Address";
 import { useGetContactName } from "../../utils/hooks/contactsHooks";
 import { useGetOwnedAccountSafe } from "../../utils/hooks/accountHooks";
 import { AccountType } from "../../types/Account";
-import { useGetBaker, useSelectedNetwork } from "../../utils/hooks/assetsHooks";
+import { useGetBaker } from "../../utils/hooks/assetsHooks";
 import {
   AddressKind,
   BakerAddress,
@@ -13,6 +13,7 @@ import {
   OwnedMultisigAccountAddress,
 } from "./types";
 import { useGetTokenType } from "../../utils/hooks/tokensHooks";
+import { useSelectedNetwork } from "../../utils/hooks/networkHooks";
 
 const useAddressKind = (address: Address): AddressKind => {
   const ownedAccount = useOwnedAccountAddressKind(address);

src/components/BuyTez/BuyTezForm.test.tsx

@@ -1,9 +1,9 @@
 import { Modal } from "@chakra-ui/react";
 import { render, screen } from "../../mocks/testUtils";
-import { TezosNetwork } from "../../types/TezosNetwork";
-import { assetsActions } from "../../utils/redux/slices/assetsSlice";
 import store from "../../utils/redux/store";
 import BuyTezForm from "./BuyTezForm";
+import { GHOSTNET, MAINNET } from "../../types/Network";
+import { networksActions } from "../../utils/redux/slices/networks";
 
 const fixture = () => (
   <Modal isOpen={true} onClose={() => {}}>
@@ -13,7 +13,7 @@ const fixture = () => (
 
 describe("<BuyTezForm />", () => {
   test("renders request Tez from faucet on ghostnet", async () => {
-    store.dispatch(assetsActions.updateNetwork(TezosNetwork.GHOSTNET));
+    store.dispatch(networksActions.setCurrent(GHOSTNET));
     render(fixture());
 
     // Async findBy because otherwise we get act warning since store.dispatch is async
@@ -22,11 +22,11 @@ describe("<BuyTezForm />", () => {
   });
 
   test("renders Buy Tez from faucet on ghostnet", async () => {
-    store.dispatch(assetsActions.updateNetwork(TezosNetwork.MAINNET));
+    store.dispatch(networksActions.setCurrent(MAINNET));
     render(fixture());
 
     const result = await screen.findByTestId("buy-tez-button");
     expect(result).toHaveTextContent("Buy Tez");
-    expect(screen.getByTestId("buy-tez-selector")).toBeTruthy();
+    expect(screen.getByTestId("buy-tez-selector")).toBeInTheDocument();
   });
 });

src/components/BuyTez/BuyTezForm.tsx

@@ -9,20 +9,21 @@ import {
   Button,
 } from "@chakra-ui/react";
 import { FormProvider, useForm } from "react-hook-form";
-import { TezosNetwork } from "../../types/TezosNetwork";
 import { navigateToExternalLink } from "../../utils/helpers";
-import { useSelectedNetwork } from "../../utils/hooks/assetsHooks";
-import { wertUrls } from "../../utils/tezos/consts";
 import { OwnedImplicitAccountsAutocomplete } from "../AddressAutocomplete";
 import { FormErrorMessage } from "../FormErrorMessage";
+import { useSelectedNetwork } from "../../utils/hooks/networkHooks";
 
 const BuyTezForm = () => {
   const network = useSelectedNetwork();
-  const isMainnet = network === TezosNetwork.MAINNET;
+  const isMainnet = network.name === "mainnet";
   const title = isMainnet ? "Buy Tez" : "Request Tez from faucet";
 
   const onSubmit = async ({ recipient }: { recipient: string }) => {
-    let url = wertUrls[network];
+    let url = network.buyTezUrl;
+    if (!url) {
+      throw new Error(`${network.name} does not have a buyTezUrl defined`);
+    }
     if (isMainnet) {
       url += `/default/widget/?commodity=XTZ%3ATezos&address=${recipient}`;
     }

src/components/CSVFileUploader/CSVFileUploadForm.tsx

@@ -18,7 +18,6 @@ import { FormProvider, useForm } from "react-hook-form";
 import { Operation } from "../../types/Operation";
 import { RawPkh } from "../../types/Address";
 import { useGetBestSignerForAccount, useGetOwnedAccount } from "../../utils/hooks/accountHooks";
-import { useSelectedNetwork } from "../../utils/hooks/assetsHooks";
 import { useGetToken } from "../../utils/hooks/tokensHooks";
 import { useAppDispatch } from "../../utils/redux/hooks";
 import { estimateAndUpdateBatch } from "../../utils/redux/thunks/estimateAndUpdateBatch";
@@ -29,6 +28,7 @@ import { useAsyncActionHandler } from "../../utils/hooks/useAsyncActionHandler";
 import { FormErrorMessage } from "../FormErrorMessage";
 import { useContext } from "react";
 import { DynamicModalContext } from "../DynamicModal";
+import { useSelectedNetwork } from "../../utils/hooks/networkHooks";
 
 type FormFields = {
   sender: RawPkh;