[Import Multisig] Added import multisig data logic

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
+    "@apollo/client": "^3.8.1",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -29,6 +30,7 @@
     "bn.js": "^5.2.1",
     "dexie": "^3.2.4",
     "fs-extra": "^11.1.1",
+    "graphql": "^16.8.0",
     "next": "13.4.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/components/NetworkBadge/styled.ts

@@ -1,15 +1,18 @@
+import isPropValid from "@emotion/is-prop-valid";
 import styled from "@emotion/styled";
 import { Stack, StackProps } from "@mui/material";
 
-export const StyledStack = styled(Stack)<
-  StackProps & { logoSize?: { width: number; height: number } }
->(({ logoSize }) => ({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  gap: ".25rem",
-  "& img": {
-    width: logoSize?.width ?? "auto",
-    height: logoSize?.height ?? "auto",
-  },
-}));
+export const StyledStack = styled(Stack, {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== "logoSize",
+})<StackProps & { logoSize?: { width: number; height: number } }>(
+  ({ logoSize }) => ({
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: ".25rem",
+    "& img": {
+      width: logoSize?.width ?? "auto",
+      height: logoSize?.height ?? "auto",
+    },
+  })
+);

src/components/StepperSignersAccount/steps/load/WalletImportStep.tsx

@@ -1,4 +1,10 @@
-import { Box, Link, TextField, Typography } from "@mui/material";
+import {
+  Box,
+  CircularProgress,
+  Link,
+  TextField,
+  Typography,
+} from "@mui/material";
 import { useEffect, useState } from "react";
 import { ArrayOneOrMore } from "useink/dist/core";
 
@@ -15,6 +21,7 @@ function WalletImportStep({
   handleOwners,
   handleThreshold,
   errors,
+  setErrors,
   step,
   walletName,
   address,
@@ -26,11 +33,15 @@ function WalletImportStep({
   handleThreshold: (threshold: number) => void;
   handleAddress: (address: string, step: number, field?: number) => void;
   errors: Array<ValidationError[]>;
+  setErrors: React.Dispatch<React.SetStateAction<ValidationError[][]>>;
   step: number;
   address: string;
 }) {
   const { network } = usePolkadotContext();
-  const { data, error, isLoading } = useFetchSignersAccount({ address });
+  const { data, error, isLoading } = useFetchSignersAccount({
+    address,
+    walletName,
+  });
   const [tempAddress, setTempAddress] = useState(address);
   const { logo, name: networkName } = getChain(network);
 
@@ -42,6 +53,20 @@ function WalletImportStep({
     [tempAddress]
   );
 
+  useEffect(() => {
+    if (!isLoading && address) {
+      if (error || !data) {
+        setErrors((prev: Array<Array<ValidationError>>) => {
+          const newErrors = [...prev];
+          newErrors[step][0] = {
+            error: true,
+            message: "Multisig not found.",
+          };
+          return newErrors;
+        });
+      }
+    }
+  }, [error, isLoading, data, address, setErrors, step]);
   useEffect(() => {
     handleAddress(address, step);
   }, []);
@@ -75,6 +100,9 @@ function WalletImportStep({
         margin="normal"
         error={errors[step][0]?.error}
         helperText={errors[step][0]?.message}
+        InputProps={{
+          endAdornment: isLoading && <CircularProgress size={20} />,
+        }}
       />
       <TextField
         label="Name"

src/hooks/signatoriesAccount/useFetchSignersAccount.ts

@@ -1,53 +1,59 @@
-import { useEffect, useState } from "react";
+import { useQuery } from "@apollo/client";
+import gql from "graphql-tag";
+import { ArrayOneOrMore } from "useink/dist/core";
 
-import { usePolkadotContext } from "@/context/usePolkadotContext";
-import { SignatoriesAccount } from "@/domain/SignatoriesAccount";
+import { Owner } from "@/domain/SignatoriesAccount";
 import { customReportError } from "@/utils/error";
 
 interface Props {
   address: string;
+  walletName: string;
 }
 
-export function useFetchSignersAccount({ address }: Props) {
-  const [data, setData] = useState<SignatoriesAccount | undefined>(undefined);
-  const { accountConnected } = usePolkadotContext();
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!address) return;
-
-    const fetchData = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        // mock fake promise - This will be replaced once we have the API
-        const result = await new Promise<SignatoriesAccount>((resolve) => {
-          setTimeout(() => {
-            resolve({
-              address,
-              name: "My-imported-wallet",
-              threshold: 1,
-              owners: [
-                {
-                  address: accountConnected?.address ?? "",
-                  name: "Signer 1",
-                },
-              ],
-            } as SignatoriesAccount);
-          }, 1000);
-        });
-        setData(result);
-      } catch (err) {
-        const errorFormated = customReportError(err);
-        setError(errorFormated);
-      } finally {
-        setIsLoading(false);
-      }
-    };
+interface MultisigData {
+  id: string;
+  addressHex: string;
+  addressSS58: string;
+  owners: string[];
+  threshold: number;
+}
+
+interface MyQueryResponse {
+  multisigs: MultisigData[];
+}
 
-    fetchData();
-  }, [accountConnected?.address, address]);
+const FETCH_MULTISIG = gql`
+  query MyQuery($address: String!) {
+    multisigs(where: { addressSS58_eq: $address }) {
+      owners
+      threshold
+      addressSS58
+      addressHex
+    }
+  }
+`;
+
+export function useFetchSignersAccount({ address, walletName }: Props) {
+  const { loading, error, data } = useQuery<MyQueryResponse>(FETCH_MULTISIG, {
+    variables: { address },
+    skip: !address,
+  });
+
+  const formattedData = data?.multisigs[0]
+    ? {
+        address: data.multisigs[0].addressSS58,
+        name: walletName,
+        threshold: data.multisigs[0].threshold,
+        owners: data.multisigs[0].owners.map((address, index) => ({
+          address,
+          name: `Signer ${index + 1}`,
+        })) as ArrayOneOrMore<Owner>,
+      }
+    : undefined;
 
-  return { data, isLoading, error };
+  return {
+    data: formattedData,
+    isLoading: loading,
+    error: error ? customReportError(error) : null,
+  };
 }

src/hooks/signatoriesAccount/useFormSignersAccountState.ts

@@ -17,6 +17,7 @@ export const INVALID_OWNER_NAME_ERROR =
   "Owner name must be less than 50 chars.";
 export const INVALID_WALLET_NAME_ERROR =
   "Wallet name must exist and be less than 50 chars.";
+export const DUPLICATE_ADDRESS_ERROR = "Duplicate owner address detected.";
 
 const VALIDATIONS = {
   walletName: (name: string) => name && name.length <= 50,
@@ -80,16 +81,27 @@ export const useFormSignersAccountState = () => {
       let updateRequired = false; // A flag to check if an update is really needed
 
       const newErrors = [...errors];
+      const seenAddresses = new Set<string>();
 
       newOwners.forEach((owner, index) => {
         let errorMessage = "";
 
-        if (!VALIDATIONS.ownerAddress(owner.address)) {
-          errorMessage = INVALID_ADDRESS_ERROR;
+        // Check for duplicated addresses
+        if (seenAddresses.has(owner.address)) {
+          errorMessage = DUPLICATE_ADDRESS_ERROR;
+        } else {
+          seenAddresses.add(owner.address);
         }
 
-        if (!VALIDATIONS.ownerName(owner.name)) {
-          errorMessage = INVALID_OWNER_NAME_ERROR;
+        // Continue with other validations if no duplicate error
+        if (!errorMessage) {
+          if (!VALIDATIONS.ownerAddress(owner.address)) {
+            errorMessage = INVALID_ADDRESS_ERROR;
+          }
+
+          if (!VALIDATIONS.ownerName(owner.name)) {
+            errorMessage = INVALID_OWNER_NAME_ERROR;
+          }
         }
 
         const error = {

src/pages/_app.tsx

@@ -1,6 +1,7 @@
 import "@/styles/globals.css";
 import "react-loading-skeleton/dist/skeleton.css";
 
+import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
 import { CacheProvider, EmotionCache } from "@emotion/react";
 import { NextPage } from "next";
 import type { AppProps } from "next/app";
@@ -16,6 +17,11 @@ import { PolkadotContextProvider } from "@/context/usePolkadotContext";
 import ThemeCustomization from "@/themes";
 import createEmotionCache from "@/utils/createEmotionCache";
 
+const squidClient = new ApolloClient({
+  uri: "https://squid.subsquid.io/ink-multisig-shibuya/v/v2/graphql",
+  cache: new InMemoryCache(),
+});
+
 // Client-side cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
 
@@ -39,29 +45,31 @@ export default function App(props: ExtendedProps) {
     Component.getLayout ?? ((page) => <AppLayout>{page}</AppLayout>);
 
   return (
-    <CacheProvider value={emotionCache}>
-      <UseInkProvider
-        config={{
-          dappName: "XSigners Wallet",
-          chains: CHAINS,
-        }}
-      >
-        <PolkadotContextProvider>
-          <LocalDbProvider>
-            <SettingsThemeConsumer>
-              {({ settings }) => {
-                return (
-                  <ThemeCustomization settings={settings}>
-                    <WalletConnectionGuard walletRequired={walletRequired}>
-                      {getLayout(<Component {...pageProps} />)}
-                    </WalletConnectionGuard>
-                  </ThemeCustomization>
-                );
-              }}
-            </SettingsThemeConsumer>
-          </LocalDbProvider>
-        </PolkadotContextProvider>
-      </UseInkProvider>
-    </CacheProvider>
+    <ApolloProvider client={squidClient}>
+      <CacheProvider value={emotionCache}>
+        <UseInkProvider
+          config={{
+            dappName: "XSigners Wallet",
+            chains: CHAINS,
+          }}
+        >
+          <PolkadotContextProvider>
+            <LocalDbProvider>
+              <SettingsThemeConsumer>
+                {({ settings }) => {
+                  return (
+                    <ThemeCustomization settings={settings}>
+                      <WalletConnectionGuard walletRequired={walletRequired}>
+                        {getLayout(<Component {...pageProps} />)}
+                      </WalletConnectionGuard>
+                    </ThemeCustomization>
+                  );
+                }}
+              </SettingsThemeConsumer>
+            </LocalDbProvider>
+          </PolkadotContextProvider>
+        </UseInkProvider>
+      </CacheProvider>
+    </ApolloProvider>
   );
 }