Rewrite squid URL with local API proxy

.github/workflows/lint.yml

@@ -12,6 +12,10 @@ jobs:
         node-version: [18.x]
 
     steps:
+      - uses: actions/checkout@v2
+      - name: List files
+        run: ls -R
+
       - name: Cancel previous runs
         uses: styfle/cancel-workflow-action@0.5.0
         with:

next.config.js

@@ -1,5 +1,7 @@
 /** @type {import('next').NextConfig} */
 
+const { config } = require("./src/services/squid/squidConfig");
+
 const nextConfig = {
   reactStrictMode: true,
   modularizeImports: {
@@ -10,6 +12,14 @@ const nextConfig = {
       transform: "@mui/icons-material/{{member}}",
     },
   },
+  async rewrites() {
+    return [
+      {
+        source: "/api/graphql/shibuya-testnet",
+        destination: config["shibuya-testnet"],
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;

src/components/ModalWalletProvider/ConnectButton.tsx

@@ -37,6 +37,8 @@ export const ConnectButton: React.FC = () => {
   );
 
   const handleNetworkChange = (chainId: ChainId | undefined) => {
+    if (chainId === undefined) return;
+
     setNetwork(chainId);
     if (
       chainId !== xSignerSelected?.networkId &&

src/components/NetworkConfirmationModal/index.tsx

@@ -23,7 +23,7 @@ export default function NetworkConfirmationModal() {
   };
 
   const handleConfirm = () => {
-    setNetwork(xSignerSelected?.networkId);
+    xSignerSelected && setNetwork(xSignerSelected.networkId);
     setOpen(false);
   };
 

src/config/chain.ts

@@ -15,6 +15,7 @@ export const DEFAULT_CHAIN: Chain["id"] = IS_DEVELOPMENT
   : "astar";
 
 export type ChainExtended = Chain & {
+  id: ChainId;
   logo: {
     src: string;
     alt: string;

src/config/squid.ts

@@ -0,0 +1,4 @@
+import { config } from "@/services/squid/squidConfig";
+import { ChainId } from "@/services/useink/types";
+
+export const squidConfig: Partial<Record<ChainId, string>> = config;

src/context/usePolkadotContext.tsx

@@ -1,6 +1,7 @@
 import React, {
   createContext,
   PropsWithChildren,
+  useCallback,
   useContext,
   useEffect,
   useState,
@@ -9,13 +10,15 @@ import { useAllWallets, useWallet } from "useink";
 import { ChainId } from "useink/dist/chains";
 
 import { DEFAULT_CHAIN } from "@/config/chain";
-import { SetState } from "@/domain/utilityReactTypes";
+import { WalletConnectionEvents } from "@/domain/events/WalletConnectionEvents";
 import { Wallet, WalletAccount } from "@/services/useink/types";
 import { createNotImplementedWarning } from "@/utils/error";
 
+import { useLocalDbContext } from "./uselocalDbContext";
+
 interface PolkadotContextProps {
-  network: ChainId | undefined;
-  setNetwork: SetState<ChainId | undefined>;
+  network: ChainId;
+  setNetwork: (chain: ChainId) => void;
   accounts: WalletAccount[] | undefined;
   accountConnected: WalletAccount | undefined;
   wallets: Wallet[];
@@ -26,7 +29,7 @@ interface PolkadotContextProps {
 }
 
 const PolkadotContext = createContext<PolkadotContextProps>({
-  network: undefined,
+  network: DEFAULT_CHAIN,
   accounts: undefined,
   accountConnected: undefined,
   wallets: [],
@@ -40,23 +43,38 @@ const PolkadotContext = createContext<PolkadotContextProps>({
 export const PolkadotContextProvider: React.FC<PropsWithChildren> = ({
   children,
 }) => {
-  const [networkId, setNetworkId] = useState<ChainId | undefined>();
+  const [networkId, setNetworkId] = useState<ChainId>(DEFAULT_CHAIN);
   const { accounts, account, connect, disconnect, isConnected, setAccount } =
     useWallet();
   const walletList = useAllWallets();
+  const { networkRepository } = useLocalDbContext();
+
+  const loadNetworkConnected = useCallback(() => {
+    const networkSelected = networkRepository.getNetworkSelected();
+    setNetworkId(networkSelected.id);
+  }, [networkRepository]);
 
   useEffect(() => {
-    if (networkId) return;
+    loadNetworkConnected();
+  }, [loadNetworkConnected]);
 
-    // set default chain according environment
-    setNetworkId(DEFAULT_CHAIN);
-  }, [networkId]);
+  const setCurrentChain = useCallback(
+    async (chainId: ChainId) => {
+      networkRepository.setNetworkSelected(chainId);
+      setNetworkId(chainId);
+
+      document.dispatchEvent(
+        new CustomEvent(WalletConnectionEvents.networkChanged)
+      );
+    },
+    [networkRepository]
+  );
 
   return (
     <PolkadotContext.Provider
       value={{
         network: networkId,
-        setNetwork: setNetworkId,
+        setNetwork: setCurrentChain,
         accounts,
         accountConnected: account,
         wallets: walletList,

src/context/uselocalDbContext.tsx

@@ -1,38 +1,57 @@
 import React, { createContext, PropsWithChildren, useContext } from "react";
 
 import { IAddressBookRepository } from "@/domain/repositores/IAddressBookRepository";
+import { INetworkRepository } from "@/domain/repositores/INetworkRepository";
+import { ITxQueueRepository } from "@/domain/repositores/ITxQueueRepository";
+import { IXsignerOwnersRepository } from "@/domain/repositores/IXsignerOwnersRepository";
 import { IXsignerSelectedRepository } from "@/domain/repositores/IXsignerSelectedRepository";
 import { MyDatabase } from "@/services/localDB";
 import { AddressBookRepository } from "@/services/localDB/AddressBookRepository";
 import { SignatoriesAccountDatabase } from "@/services/localDB/SignatoriesAccountRepository";
 import { XsignerSelectedRepository } from "@/services/localDB/XsignerSelectedRepository";
+import { LocalStorageNetworkRepository } from "@/services/LocalStorageNetworkRepository";
+import { GraphClient } from "@/services/squid/GraphClient";
+import { TxQueueRepository } from "@/services/squid/TxQueueRepository";
+import { XsignerOwnersRepository } from "@/services/squid/XsignerOwnersRepository";
 
 interface DbContext {
+  networkRepository: INetworkRepository;
   signatoriesAccountRepository: SignatoriesAccountDatabase;
   xsignerSelectedRepository: IXsignerSelectedRepository;
+  xsignerOwnersRepository: IXsignerOwnersRepository;
   addressBookRepository: IAddressBookRepository;
+  txQueueRepository: ITxQueueRepository;
 }
 
 const signatoriesAccountRepository = new SignatoriesAccountDatabase(
   new MyDatabase()
 );
 const xsignerSelectedRepository = new XsignerSelectedRepository();
-
 const addressBookRepository = new AddressBookRepository();
+const networkRepository = new LocalStorageNetworkRepository();
+const graphSquidClient = new GraphClient(networkRepository);
+const xsignerOwnersRepository = new XsignerOwnersRepository(graphSquidClient);
+const txQueueRepository = new TxQueueRepository(graphSquidClient);
 
 const DbContext = createContext<DbContext>({
+  networkRepository,
   signatoriesAccountRepository,
   xsignerSelectedRepository,
+  xsignerOwnersRepository,
   addressBookRepository,
+  txQueueRepository,
 });
 
 export const LocalDbProvider: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <DbContext.Provider
       value={{
+        networkRepository,
         signatoriesAccountRepository,
         xsignerSelectedRepository,
+        xsignerOwnersRepository,
         addressBookRepository,
+        txQueueRepository,
       }}
     >
       {children}

src/domain/events/WalletConnectionEvents.ts

@@ -1,3 +1,4 @@
 export const enum WalletConnectionEvents {
   onWalletConnection = "onWalletConnection",
+  networkChanged = "networkChanged",
 }

src/domain/repositores/INetworkRepository.ts

@@ -0,0 +1,6 @@
+import { ChainExtended } from "@/config/chain";
+
+export interface INetworkRepository {
+  getNetworkSelected(): ChainExtended;
+  setNetworkSelected(chainId: string): void;
+}

src/hooks/txQueue/useListTxQueue.ts

@@ -1,24 +1,22 @@
 import { useEffect, useState } from "react";
 
+import { useLocalDbContext } from "@/context/uselocalDbContext";
 import { TxQueueData } from "@/domain/repositores/ITxQueueRepository";
-import { squidClient } from "@/pages/_app";
-import { TxQueueRepository } from "@/services/squid/TxQueueRepository";
 import { customReportError } from "@/utils/error";
 
-const repository = new TxQueueRepository(squidClient);
-
 export function useListTxQueue(address: string | undefined) {
   const [data, setData] = useState<TxQueueData | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const { txQueueRepository } = useLocalDbContext();
 
   useEffect(() => {
     const fetchData = async () => {
       if (!address) return;
       setIsLoading(true);
       setError(null);
       try {
-        const result = await repository.getQueue(address);
+        const result = await txQueueRepository.getQueue(address);
         if (result) {
           setData(result);
         }
@@ -31,7 +29,7 @@ export function useListTxQueue(address: string | undefined) {
     };
 
     fetchData();
-  }, [address]);
+  }, [address, txQueueRepository]);
 
   return { data, isLoading, error };
 }

src/hooks/xsignerOwners/useFindXsignerOwners.ts

@@ -1,10 +1,9 @@
 import { useEffect, useState } from "react";
 import { ArrayOneOrMore } from "useink/dist/core";
 
+import { useLocalDbContext } from "@/context/uselocalDbContext";
 import { MultisigData } from "@/domain/repositores/IXsignerOwnersRepository";
 import { Owner } from "@/domain/SignatoriesAccount";
-import { squidClient } from "@/pages/_app";
-import { XsignerOwnersRepository } from "@/services/squid/XsignerOwnersRepository";
 import { customReportError } from "@/utils/error";
 
 interface Props {
@@ -18,18 +17,19 @@ type MultisigDataFormatted = Pick<MultisigData, "threshold"> & {
   address: string;
 };
 
-const repository = new XsignerOwnersRepository(squidClient);
-
 export function useFindXsignerOwners({ address, walletName }: Props) {
   const [data, setData] = useState<MultisigDataFormatted | undefined>();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const { xsignerOwnersRepository } = useLocalDbContext();
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         setLoading(true);
-        const result = await repository.getMultisigByAddress(address as string);
+        const result = await xsignerOwnersRepository.getMultisigByAddress(
+          address as string
+        );
         if (result) {
           setData({
             address: result.addressSS58,
@@ -51,7 +51,7 @@ export function useFindXsignerOwners({ address, walletName }: Props) {
     if (address) {
       fetchData();
     }
-  }, [address, walletName]);
+  }, [address, walletName, xsignerOwnersRepository]);
 
   return {
     data,

src/pages/_app.tsx

@@ -2,7 +2,6 @@ import "@/styles/globals.css";
 import "react-loading-skeleton/dist/skeleton.css";
 import "react-toastify/dist/ReactToastify.css";
 
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { CacheProvider, EmotionCache } from "@emotion/react";
 import { NextPage } from "next";
 import type { AppProps } from "next/app";
@@ -33,11 +32,6 @@ Router.events.on("routeChangeComplete", () => {
   NProgress.done();
 });
 
-export const squidClient = new ApolloClient({
-  uri: "http://18.118.77.170:4350/graphql",
-  cache: new InMemoryCache(),
-});
-
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
@@ -61,34 +55,32 @@ export default function App(props: ExtendedProps) {
     Component.getLayout ?? ((page) => <AppLayout>{page}</AppLayout>);
 
   return (
-    <ApolloProvider client={squidClient}>
-      <CacheProvider value={emotionCache}>
-        <UseInkProvider
-          config={{
-            dappName: "XSigners Wallet",
-            chains: CHAINS,
-          }}
-        >
-          <PolkadotContextProvider>
-            <LocalDbProvider>
-              <SettingsThemeConsumer>
-                {({ settings }) => {
-                  return (
-                    <ThemeCustomization settings={settings}>
-                      <AppNotificationsContextProvider>
-                        <WalletConnectionGuard walletRequired={walletRequired}>
-                          {getLayout(<Component {...pageProps} />)}
-                        </WalletConnectionGuard>
-                        <AppToastNotifications />
-                      </AppNotificationsContextProvider>
-                    </ThemeCustomization>
-                  );
-                }}
-              </SettingsThemeConsumer>
-            </LocalDbProvider>
-          </PolkadotContextProvider>
-        </UseInkProvider>
-      </CacheProvider>
-    </ApolloProvider>
+    <CacheProvider value={emotionCache}>
+      <UseInkProvider
+        config={{
+          dappName: "XSigners Wallet",
+          chains: CHAINS,
+        }}
+      >
+        <PolkadotContextProvider>
+          <LocalDbProvider>
+            <SettingsThemeConsumer>
+              {({ settings }) => {
+                return (
+                  <ThemeCustomization settings={settings}>
+                    <AppNotificationsContextProvider>
+                      <WalletConnectionGuard walletRequired={walletRequired}>
+                        {getLayout(<Component {...pageProps} />)}
+                      </WalletConnectionGuard>
+                      <AppToastNotifications />
+                    </AppNotificationsContextProvider>
+                  </ThemeCustomization>
+                );
+              }}
+            </SettingsThemeConsumer>
+          </LocalDbProvider>
+        </PolkadotContextProvider>
+      </UseInkProvider>
+    </CacheProvider>
   );
 }