Add instruction for user to login

backend/swagger.yaml

@@ -273,28 +273,22 @@ paths:
               schema: 
                 type: object
                 properties:
-                  subnet:
-                    type: object
-                    properties:
-                      rpcUrl:
-                        description: Subnet Chain RPC URL
-                        type: string
-                      denom:
-                        type: string
-                      networkName:
-                        type: string
-                      networkId:
-                        type: integer
-                      validatorSmartContractAddress:
-                        type: string
-                    required:
-                      - rpcUrl
-                      - denom
-                      - networkName
+                  rpcUrl:
+                    description: Subnet Chain RPC URL
+                    type: string
+                  denom:
+                    type: string
+                  networkName:
+                    type: string
+                  networkId:
+                    type: integer
+                  validatorSmartContractAddress:
+                    type: string
                 required:
-                  - subnet
+                  - rpcUrl
                   - denom
                   - networkName
+                  - networkId
         '400':
           description: 'Bad Request'
         '500':

frontend/src/pages/management-login-page/ManagementLoggedInPage.tsx

@@ -1,18 +1,11 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Card from "@/components/card/Card";
 import ErrorState from "@/components/error-state/ErrorState";
 import InfoList from "@/components/info-list/InfoList";
 import Loader from "@/components/loader/Loader";
-import LoginError from "@/pages/management-login-page/components/LoginError";
 import { formatHash } from "@/utils/formatter";
 import { useAccount, useBalance, useNetwork } from "wagmi";
-import type {
-  ErrorTypes,
-  ManagerError,
-} from "@/pages/errors";
-
 export default function ManagementLoggedInPage() {
-  const [errorType, setErrorType] = useState<ErrorTypes>();
 
   const [isLoading, setIsLoading] = useState(true);
 
@@ -46,10 +39,6 @@ export default function ManagementLoggedInPage() {
     return <Loader />;
   }
 
-  if (errorType) {
-    return <LoginError errorType={errorType} />;
-  }
-
   if (!address) {
     return <ErrorState title="master login" />;
   }

frontend/src/pages/management-login-page/components/LoginError.tsx

@@ -1,18 +1,22 @@
 import { twMerge } from "tailwind-merge";
 
 import { ConnectButton } from "@rainbow-me/rainbowkit";
-import XDCPlaceholder from "@/assets/xdc-logo.png";
+import fillinNetworkGif from "@/assets/fillin-network.gif";
+import addNetworkGif from "@/assets/add-network.gif";
+import importAccountGif from "@/assets/import-account.gif";
 import Card from "@/components/card/Card";
 import InfoList from "@/components/info-list/InfoList";
 import { ErrorTypes } from "@/pages/errors";
 
 
 import type { InfoListInfo } from "@/types/info";
+import { ChainSetting } from "@/main";
 interface LoginErrorProps {
   errorType: ErrorTypes;
+  chainSetting: ChainSetting;
 }
 
-export default function LoginError({ errorType }: LoginErrorProps) {
+export default function LoginError({ errorType, chainSetting }: LoginErrorProps) {
   return (
     <>
       <h1 className="text-2xl font-extrabold">Login in Portal</h1>
@@ -22,46 +26,80 @@ export default function LoginError({ errorType }: LoginErrorProps) {
           <h2 className="pl-4">How to log in correctly?</h2>
         </div>
         <div className="mt-8 grid gap-6 grid-cols-[repeat(auto-fill,minmax(330px,1fr))]">
-          <ImagePlaceholder />
-          <ImagePlaceholder />
-          <ImagePlaceholder />
+          <AddNetworkGif />
+          <FillInNetworkGif />
+          <ImportAccountGif />
         </div>
         <p className="mt-8 text-xl">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          <b>Metamask</b>
         </p>
         <p className="mt-8 text-xl">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
+          1. Download the Wallet from <a target="_blank" href="https://metamask.io/download/" style={{color: "blue"}}>Metamask</a> or <a target="_blank" href="https://chrome.google.com/webstore/detail/xdcpay-20/iidmfamdbddcbjmemafekkohbnfiblhp" style={{color: "blue"}}>XDCPay 2.0</a>
+        </p>
+        <p className="mt-8 text-xl">
+          2. Follow wallet instruction to <b>Create new wallet</b>
+        </p>
+        <p className="mt-8 text-xl">
+          3. Click top left network selector button and <b>"Add a network manually"</b>, filling below fields and save:
+          <br></br>
+          <b>Network name:</b> {chainSetting.networkName}
+          <br></br>
+          <b>New RPC URL:</b> {chainSetting.rpcUrl}
+          <br></br>
+          <b>Chain ID:</b> {chainSetting.networkId}
+          <br></br>
+          <b>Currency symbol:</b> {chainSetting.denom}
+        </p>
+        <p className="mt-8 text-xl">
+          4. Click account selector and select <b>Import account</b>, paste your <b>grandmaster private key</b>
+        </p>
+        <p className="mt-8 text-xl">
+          5. Click the "Connect Wallet" button and click "XDC Pay". Follow the instruction to connect to the site.
         </p>
       </Card>
     </>
   );
 }
 
-function ImagePlaceholder() {
+function AddNetworkGif() {
+  return (
+    <img
+      loading="lazy"
+      className="p-5 h-[330px] object-contain"
+      width="330"
+      height="330"
+      src={addNetworkGif}
+      alt="placeholder"
+    />
+  );
+}
+function FillInNetworkGif() {
+  return (
+    <img
+      loading="lazy"
+      className="p-5 h-[330px] object-contain"
+      width="330"
+      height="330"
+      src={fillinNetworkGif}
+      alt="placeholder"
+    />
+  );
+}
+
+function ImportAccountGif() {
   return (
     <img
       loading="lazy"
       className="p-5 h-[330px] object-contain"
       width="330"
       height="330"
-      src={XDCPlaceholder}
+      src={importAccountGif}
       alt="placeholder"
     />
   );
 }
 
+
 interface ManagementLoginPageInfoItemProps {
   info: InfoListInfo;
   className?: string;

frontend/src/pages/management-login-page/index.tsx

@@ -8,7 +8,7 @@ import { ChainSetting } from "@/main";
 import ABI from "../../abi/ABI.json";
 
 export default function LoginPage() {
-  const loaderData = useLoaderData() as ChainSetting
+  const chainSetting = useLoaderData() as ChainSetting
   const { isConnected, address } = useAccount();
   const { data: readData0 } = useContractReads({
     contracts: [
@@ -22,11 +22,11 @@ export default function LoginPage() {
   const grandmMasters = readData0?.[0]?.["result"] as any;
   if (isConnected) {
     if (grandmMasters != address) {
-      return <LoginError errorType={ErrorTypes.NOT_GRANDMASTER}/>
+      return <LoginError errorType={ErrorTypes.NOT_GRANDMASTER} chainSetting={chainSetting}/>
     }    
     return <ManagementLoggedInPage/>
   } else {
-    return <LoginError errorType={ErrorTypes.WALLET_NOT_LOGIN}/>
+    return <LoginError errorType={ErrorTypes.WALLET_NOT_LOGIN} chainSetting={chainSetting}/>
   }
 
 }