Merge pull request #24 from darwinia-network/feat/jay/nova-wallet

feat: adapt mobile wallet such as Nova Wallet

packages/app-config/src/dAppSupportedWallets.ts

@@ -1,6 +1,7 @@
 import polkadotJSExtensionLogo from "./assets/images/wallets/polkadot-js.svg";
 import talismanJSExtensionLogo from "./assets/images/wallets/talisman.svg";
 import subwalletJSExtensionLogo from "./assets/images/wallets/subwallet-js.svg";
+import novaWalletLogo from "./assets/images/wallets/novawallet.png";
 import { WalletConfig } from "@darwinia/app-types";
 
 export const dAppSupportedWallets: WalletConfig[] = [
@@ -73,4 +74,10 @@ export const dAppSupportedWallets: WalletConfig[] = [
     ],
     sources: ['subwallet-js', '"subwallet-js"']
   },
+  {
+    name: "NovaWallet",
+    logo: novaWalletLogo,
+    extensions: [],
+    sources: [],
+  },
 ];

packages/app-providers/src/hooks/useMobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import { isMobile as isMobileUtil } from "@darwinia/app-utils";
+
+export const useMobile = () => {
+  const [isMobile, setIsMobile] = useState(isMobileUtil());
+
+  useEffect(() => {
+    const mq = window.matchMedia("(min-width: 1024px)");
+    setIsMobile(!mq.matches);
+
+    const listener = (ev: MediaQueryListEvent) => {
+      setIsMobile(!ev.matches || isMobileUtil());
+    };
+    mq.addEventListener("change", listener, false);
+    return () => {
+      mq.removeEventListener("change", listener);
+    };
+  }, []);
+
+  return { isMobile };
+};

packages/app-providers/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./walletProvider";
 export * from "./storageProvider";
 export * from "./graphQLProvider";
+export * from "./hooks/useMobile";

packages/app-providers/src/walletProvider.tsx

@@ -241,7 +241,7 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
 
     const injecteds = window.injectedWeb3;
     const source = injecteds && walletCfg.sources.find((source) => injecteds[source]);
-    if (!source) {
+    if (!source && name !== 'NovaWallet') {
       setWalletConnected(false);
       setRequestingWalletConnection(false);
       setLoadingTransaction(false);
@@ -273,32 +273,43 @@ export const WalletProvider = ({ children }: PropsWithChildren) => {
         // console.log("error");
       });
 
-      const wallet = injecteds[source];
-      if (!wallet.enable) {
-        return;
+      let accounts: InjectedAccountWithMeta[] = [];
+      if (name === 'NovaWallet') {
+        const extensions = await web3Enable(DARWINIA_APPS);
+        if (extensions.length) {
+          setSigner(extensions[0].signer);
+          const unfilteredAccounts = await web3Accounts();
+          accounts = unfilteredAccounts
+            .filter((account) => !account.address.startsWith("0x"));
+        }
+      } else if (source) {
+        const wallet = injecteds[source];
+        if (!wallet.enable) {
+          return;
+        }
+        const res = await wallet.enable(DARWINIA_APPS);
+        if (res) {
+          const enabledExtensions = [res];
+
+          /* this is the signer that needs to be used when we sign a transaction */
+          setSigner(enabledExtensions[0].signer);
+          /* this will return a list of all the accounts that are in the Polkadot extension */
+          const unfilteredAccounts = await res.accounts.get();
+          accounts = unfilteredAccounts
+            .filter((account) => !account.address.startsWith("0x"))
+            .map(({ address, genesisHash, name, type }) => ({ address, type, meta: { genesisHash, name, source  } }));
+        }
       }
-      const res = await wallet.enable(DARWINIA_APPS);
-      if (res) {
-        const enabledExtensions = [res];
-
-        /* this is the signer that needs to be used when we sign a transaction */
-        setSigner(enabledExtensions[0].signer);
-        /* this will return a list of all the accounts that are in the Polkadot extension */
-        const unfilteredAccounts = await res.accounts.get();
-        const accounts = unfilteredAccounts
-          .filter((account) => !account.address.startsWith("0x"))
-          .map(({ address, genesisHash, name, type }) => ({ address, type, meta: { genesisHash, name, source  } }));
-        accounts.forEach((account) => {
-          keyring.saveAddress(account.address, account.meta);
-        });
-        injectedAccountsRef.current = accounts;
+      accounts.forEach((account) => {
+        keyring.saveAddress(account.address, account.meta);
+      });
+      injectedAccountsRef.current = accounts;
 
-        if (accounts.length > 0) {
-          /* we default using the first account */
-          setWalletConnected(true);
-        }
-        setSelectedWallet(name);
+      if (accounts.length > 0) {
+        /* we default using the first account */
+        setWalletConnected(true);
       }
+      setSelectedWallet(name);
     } catch (e) {
       setWalletConnected(false);
       setRequestingWalletConnection(false);

packages/app-types/src/wallet.ts

@@ -1,7 +1,7 @@
 import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
 import { AssetBalance } from "./storage";
 
-export type SupportedWallet = "Polkadot{.js}" | "Talisman" | "SubWallet";
+export type SupportedWallet = "Polkadot{.js}" | "Talisman" | "SubWallet" | "NovaWallet";
 export type SupportedBrowser = "Chrome" | "Firefox" | "Brave" | "Edge" | "Opera";
 export type ChainName = "Crab" | "Pangolin" | "Darwinia" | "Pangoro";
 import { Struct } from "@polkadot/types";

packages/app-utils/package.json

@@ -27,6 +27,7 @@
     "@polkadot/util-crypto": "^10.4.2",
     "bignumber.js": "^9.1.1",
     "ethers": "^5.7.2",
+    "is-mobile": "^4.0.0",
     "moment": "^2.29.4"
   }
 }

packages/app-utils/src/others.ts

@@ -3,6 +3,7 @@ import { STORAGE as APP_STORAGE } from "@darwinia/app-config";
 import BigNumber from "bignumber.js";
 import { ethers } from "ethers";
 import { encodeAddress } from "@polkadot/util-crypto";
+export { isMobile } from 'is-mobile';
 
 export const setStore = (key: keyof Storage, value: unknown) => {
   try {

packages/app/src/pages/Home.tsx

@@ -1,11 +1,12 @@
 import { useAppTranslation, localeKeys } from "@darwinia/app-locale";
-import { useWallet } from "@darwinia/app-providers";
+import { useWallet, useMobile } from "@darwinia/app-providers";
 import migrationIcon from "../assets/images/migration.svg";
 import { dAppSupportedWallets } from "@darwinia/app-config";
 
 const Home = () => {
   const { t } = useAppTranslation();
   const { connectWallet, selectedNetwork, walletConfig } = useWallet();
+  const { isMobile } = useMobile();
 
   return (
     <div className={"flex flex-1 flex-col gap-[20px]"}>
@@ -24,26 +25,35 @@ const Home = () => {
           }}
         />
       </div>
-      <div className={"flex flex-1 bg-blackSecondary items-center justify-center gap-5"}>
-        {dAppSupportedWallets.map(({ name, logo, sources }, index) => {
-          const selected = name === walletConfig?.name;
-          const injecteds = window.injectedWeb3;
-          const installed = injecteds && sources.some((source) => injecteds[source]);
+      <div className={"flex flex-1 flex-col lg:flex-row bg-blackSecondary items-center justify-center gap-5 py-5"}>
+        {isMobile ? (
+          <button
+            className="flex items-center justify-center border border-primary transition duration-300 hover:opacity-60 w-3/4 py-10"
+            onClick={() => connectWallet("NovaWallet")}
+          >
+            {t(localeKeys.connectWallet)}
+          </button>
+        ) : (
+          dAppSupportedWallets.map(({ name, logo, sources }, index) => {
+            const selected = name === walletConfig?.name;
+            const injecteds = window.injectedWeb3;
+            const installed = injecteds && sources.some((source) => injecteds[source]);
 
-          return (
-            <button
-              className={`flex flex-col gap-[10px] items-center justify-center w-[200px] h-[210px] border transition-colors duration-300 ${
-                !installed ? "bg-white/20" : "hover:border-primary"
-              } ${selected ? "border-primary" : "border-white/20"}`}
-              key={index}
-              onClick={() => connectWallet(name)}
-              disabled={!installed}
-            >
-              <img className={"w-[55px]"} src={logo} alt="image" />
-              <span className="text-14-bold">{name}</span>
-            </button>
-          );
-        })}
+            return (
+              <button
+                className={`flex flex-col gap-[10px] items-center justify-center w-[200px] h-[120px] lg:h-[210px] border transition-colors duration-300 ${
+                  !installed ? "bg-white/20" : "hover:border-primary"
+                } ${selected ? "border-primary" : "border-white/20"}`}
+                key={index}
+                onClick={() => connectWallet(name)}
+                disabled={!installed}
+              >
+                <img className={"w-[55px]"} src={logo} alt="image" />
+                <span className="text-14-bold">{name}</span>
+              </button>
+            );
+          })
+        )}
       </div>
     </div>
   );

yarn.lock

@@ -5153,6 +5153,11 @@ is-lambda@^1.0.1:
   resolved "https://registry.npmjs.org/is-lambda/-/is-lambda-1.0.1.tgz"
   integrity sha512-z7CMFGNrENq5iFB9Bqo64Xk6Y9sg+epq1myIcdHaGnbMTYOxvzsEtdYqQUylB7LxfkvgrrjP32T6Ywciio9UIQ==
 
+is-mobile@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-4.0.0.tgz#bba396eb9656e2739afde3053d7191da310fc758"
+  integrity sha512-mlcHZA84t1qLSuWkt2v0I2l61PYdyQDt4aG1mLIXF5FDMm4+haBCxCPYSr/uwqQNRk1MiTizn0ypEuRAOLRAew==
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"