diff --git a/packages/app-config/src/assets/images/wallets/novawallet.png b/packages/app-config/src/assets/images/wallets/novawallet.png new file mode 100644 index 0000000..e6d97b5 Binary files /dev/null and b/packages/app-config/src/assets/images/wallets/novawallet.png differ diff --git a/packages/app-config/src/dAppSupportedWallets.ts b/packages/app-config/src/dAppSupportedWallets.ts index f2641dc..33c2af5 100644 --- a/packages/app-config/src/dAppSupportedWallets.ts +++ b/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: [], + }, ]; diff --git a/packages/app-providers/src/hooks/useMobile.ts b/packages/app-providers/src/hooks/useMobile.ts new file mode 100644 index 0000000..651873d --- /dev/null +++ b/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 }; +}; diff --git a/packages/app-providers/src/index.ts b/packages/app-providers/src/index.ts index b03d19c..f5ff48b 100644 --- a/packages/app-providers/src/index.ts +++ b/packages/app-providers/src/index.ts @@ -1,3 +1,4 @@ export * from "./walletProvider"; export * from "./storageProvider"; export * from "./graphQLProvider"; +export * from "./hooks/useMobile"; diff --git a/packages/app-providers/src/walletProvider.tsx b/packages/app-providers/src/walletProvider.tsx index e546305..011b14a 100644 --- a/packages/app-providers/src/walletProvider.tsx +++ b/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); diff --git a/packages/app-types/src/wallet.ts b/packages/app-types/src/wallet.ts index 51ea7fa..47f27ff 100644 --- a/packages/app-types/src/wallet.ts +++ b/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"; diff --git a/packages/app-utils/package.json b/packages/app-utils/package.json index 4fd05cc..be13b20 100644 --- a/packages/app-utils/package.json +++ b/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" } } diff --git a/packages/app-utils/src/others.ts b/packages/app-utils/src/others.ts index 6eacce3..29dadf2 100644 --- a/packages/app-utils/src/others.ts +++ b/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 { diff --git a/packages/app/src/pages/Home.tsx b/packages/app/src/pages/Home.tsx index 270b8cc..7ed3cf2 100644 --- a/packages/app/src/pages/Home.tsx +++ b/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 (
@@ -24,26 +25,35 @@ const Home = () => { }} />
-
- {dAppSupportedWallets.map(({ name, logo, sources }, index) => { - const selected = name === walletConfig?.name; - const injecteds = window.injectedWeb3; - const installed = injecteds && sources.some((source) => injecteds[source]); +
+ {isMobile ? ( + + ) : ( + dAppSupportedWallets.map(({ name, logo, sources }, index) => { + const selected = name === walletConfig?.name; + const injecteds = window.injectedWeb3; + const installed = injecteds && sources.some((source) => injecteds[source]); - return ( - - ); - })} + return ( + + ); + }) + )}
); diff --git a/yarn.lock b/yarn.lock index 9faae4c..05b0ead 100644 --- a/yarn.lock +++ b/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"