@dodoex/wallet-web3-react 0.4.4 → 0.4.5-beta.1

package/dist/types/WalletConnect/ConnectDialog.d.ts

@@ -1,10 +1,11 @@
 import WalletWeb3 from '@dodoex/wallet-web3';
 import React from 'react';
 import { ConnectPageProps } from './ConnectPage';
-export default function ConnectDialog({ open, onClose, walletWeb3, onConnectWallet, WalletTag, }: {
+export default function ConnectDialog({ open, onClose, walletWeb3, priorityWalletType, onConnectWallet, WalletTag, }: {
     open: boolean;
     onClose: () => void;
     walletWeb3: WalletWeb3;
+    priorityWalletType?: ConnectPageProps['priorityWalletType'];
     onConnectWallet?: ConnectPageProps['onConnectWallet'];
     WalletTag?: ConnectPageProps['WalletTag'];
 }): React.JSX.Element;

package/dist/types/WalletConnect/ConnectPage.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import WalletWeb3 from '@dodoex/wallet-web3';
+import WalletWeb3, { WalletType } from '@dodoex/wallet-web3';
 import { WalletItem } from '../hooks/useConnectWallet';
 import { WalletTagProps } from '../components/WalletTag';
 export type ConnectDialogWalletTag = React.FC<WalletTagProps & {
@@ -10,9 +10,10 @@ export interface ConnectPageProps {
     account?: string;
     walletWeb3?: WalletWeb3;
     showOtherInjectWallet?: boolean;
+    priorityWalletType?: WalletType | string;
     onClose: () => void;
     onConnectWallet?: (wallet: WalletItem) => void | Promise<void>;
     WalletTag?: ConnectDialogWalletTag;
 }
-declare function ConnectPage({ chainId, account, walletWeb3, showOtherInjectWallet, onClose, onConnectWallet, WalletTag, }: ConnectPageProps): React.JSX.Element;
+declare function ConnectPage({ chainId, account, walletWeb3, showOtherInjectWallet, priorityWalletType, onClose, onConnectWallet, WalletTag, }: ConnectPageProps): React.JSX.Element;
 export default ConnectPage;

package/dist/types/WalletConnect/WalletDialog.d.ts

@@ -1,10 +1,11 @@
 import WalletWeb3 from '@dodoex/wallet-web3';
 import React from 'react';
 import { ConnectPageProps } from './ConnectPage';
-export default function WalletDialog({ open, onClose, walletWeb3, onConnectWallet, WalletTag, }: {
+export default function WalletDialog({ open, onClose, walletWeb3, priorityWalletType, onConnectWallet, WalletTag, }: {
     open: boolean;
     onClose: () => void;
     walletWeb3: WalletWeb3;
+    priorityWalletType?: ConnectPageProps['priorityWalletType'];
     onConnectWallet?: ConnectPageProps['onConnectWallet'];
     WalletTag?: ConnectPageProps['WalletTag'];
 }): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dodoex/wallet-web3-react",
-  "version": "0.4.4",
+  "version": "0.4.5-beta.1",
   "source": "src/index.tsx",
   "types": "dist/types/index.d.ts",
   "typings": "dist/types/index.d.ts",
@@ -89,4 +89,3 @@
     "react-infinite-scroller": "^1.2.6"
   }
 }
-

package/src/WalletConnect/ConnectDialog.tsx

@@ -9,12 +9,14 @@ export default function ConnectDialog({
   open,
   onClose,
   walletWeb3,
+  priorityWalletType,
   onConnectWallet,
   WalletTag,
 }: {
   open: boolean;
   onClose: () => void;
   walletWeb3: WalletWeb3;
+  priorityWalletType?: ConnectPageProps['priorityWalletType'];
   onConnectWallet?: ConnectPageProps['onConnectWallet'];
   WalletTag?: ConnectPageProps['WalletTag'];
 }) {
@@ -26,6 +28,7 @@ export default function ConnectDialog({
         account={account}
         walletWeb3={walletWeb3}
         showOtherInjectWallet
+        priorityWalletType={priorityWalletType}
         onClose={onClose}
         onConnectWallet={onConnectWallet}
         WalletTag={WalletTag}

package/src/WalletConnect/ConnectPage.tsx

@@ -219,6 +219,7 @@ export interface ConnectPageProps {
   account?: string;
   walletWeb3?: WalletWeb3;
   showOtherInjectWallet?: boolean;
+  priorityWalletType?: WalletType | string;
   onClose: () => void;
   onConnectWallet?: (wallet: WalletItem) => void | Promise<void>;
   WalletTag?: ConnectDialogWalletTag;
@@ -228,6 +229,7 @@ function ConnectPage({
   account,
   walletWeb3,
   showOtherInjectWallet,
+  priorityWalletType,
   onClose,
   onConnectWallet,
   WalletTag,
@@ -267,13 +269,52 @@ function ConnectPage({
     hasTermsOfServiceLink: !!termsOfServiceLink,
   });
   const [showAllWallet, setShowAllWallet] = React.useState(false);
-  const showWalletList = React.useMemo(() => {
-    if (showAllWallet) return walletList;
-    return walletList.slice(0, 6);
-  }, [walletList, showAllWallet]);
+  const sortedWalletList = React.useMemo(() => {
+    if (!priorityWalletType) return walletList;
+
+    const priorityWallet = walletList.find(
+      (wallet) => wallet.currentType === priorityWalletType,
+    );
+    if (!priorityWallet) return walletList;
+
+    return [
+      priorityWallet,
+      ...walletList.filter((wallet) => wallet.currentType !== priorityWalletType),
+    ];
+  }, [priorityWalletType, walletList]);
+  const { visibleWalletList, hiddenWalletList } = React.useMemo(() => {
+    if (!priorityWalletType) {
+      return {
+        visibleWalletList: showAllWallet ? sortedWalletList : sortedWalletList.slice(0, 6),
+        hiddenWalletList: sortedWalletList.slice(6),
+      };
+    }
+
+    const [firstWallet, ...otherWallets] = sortedWalletList;
+    if (!firstWallet) {
+      return {
+        visibleWalletList: [],
+        hiddenWalletList: [],
+      };
+    }
+
+    const installedWallets = otherWallets.filter((wallet) => wallet.isInstalled);
+    const uninstalledWallets = otherWallets.filter((wallet) => !wallet.isInstalled);
+    const collapsedVisibleWalletList = [firstWallet, ...installedWallets].slice(0, 6);
+    const collapsedHiddenWalletList = sortedWalletList.filter(
+      (wallet) => !collapsedVisibleWalletList.includes(wallet),
+    );
+
+    return {
+      visibleWalletList: showAllWallet
+        ? [firstWallet, ...installedWallets, ...uninstalledWallets]
+        : collapsedVisibleWalletList,
+      hiddenWalletList: showAllWallet ? uninstalledWallets : collapsedHiddenWalletList,
+    };
+  }, [priorityWalletType, showAllWallet, sortedWalletList]);
   const morePriorityWalletList = React.useMemo(() => {
-    return walletList.slice(6, 9);
-  }, [walletList]);
+    return hiddenWalletList.slice(0, 3);
+  }, [hiddenWalletList]);
 
   return (
     <>
@@ -299,7 +340,7 @@ function ConnectPage({
               ...walletGroupStyle,
             }}
           >
-            {showWalletList.map((wallet) => {
+            {visibleWalletList.map((wallet) => {
               return (
                 <WalletGroupItem
                   key={wallet.title}
@@ -319,7 +360,7 @@ function ConnectPage({
               );
             })}
           </Box>
-          {morePriorityWalletList.length ? (
+          {hiddenWalletList.length ? (
             <Box
               sx={{
                 mx: 20,

package/src/WalletConnect/WalletDialog.tsx

@@ -12,12 +12,14 @@ export default function WalletDialog({
   open,
   onClose,
   walletWeb3,
+  priorityWalletType,
   onConnectWallet,
   WalletTag,
 }: {
   open: boolean;
   onClose: () => void;
   walletWeb3: WalletWeb3;
+  priorityWalletType?: ConnectPageProps['priorityWalletType'];
   onConnectWallet?: ConnectPageProps['onConnectWallet'];
   WalletTag?: ConnectPageProps['WalletTag'];
 }) {
@@ -70,6 +72,7 @@ export default function WalletDialog({
           account={account}
           walletWeb3={walletWeb3}
           showOtherInjectWallet
+          priorityWalletType={priorityWalletType}
           onClose={onClose}
           onConnectWallet={onConnectWallet}
           WalletTag={WalletTag}

package/src/hooks/useFetchTokensBalance.ts

@@ -1,9 +1,14 @@
 'use client';
 
-import { getFetchERC20BalanceOfQueryOptions } from '@dodoex/dodo-contract-request';
+import {
+  getFetchERC20BalanceOfQueryOptions,
+  getFetchMulticallWithValidGetEthBalanceQueryOptions,
+} from '@dodoex/dodo-contract-request';
 import { useQueries } from '@tanstack/react-query';
 import { TokenInfo } from '../components/TokenLogo';
 
+const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
+
 type TokenInfoMap = Map<string, bigint>;
 
 export default function useFetchTokensBalance({
@@ -19,11 +24,11 @@ export default function useFetchTokensBalance({
 }) {
   const tokensQueries = useQueries({
     queries: (tokenList ?? []).map((token) => {
-      const query = getFetchERC20BalanceOfQueryOptions(
-        skip ? undefined : token.chainId,
-        token?.address,
-        account,
-      );
+      const chainId = skip ? undefined : token.chainId;
+      const query =
+        token.address.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()
+          ? getFetchMulticallWithValidGetEthBalanceQueryOptions(chainId, account)
+          : getFetchERC20BalanceOfQueryOptions(chainId, token?.address, account);
 
       return {
         queryKey: blockNumber

package/src/locales/en.po

@@ -76,7 +76,7 @@ msgstr "Claim Rewards"
 msgid "Connect Alchemy"
 msgstr "Connect Alchemy"
 
-#: src/WalletConnect/ConnectPage.tsx:281
+#: src/WalletConnect/ConnectPage.tsx:322
 msgid "Connect Wallet"
 msgstr "Connect Wallet"
 
@@ -176,7 +176,7 @@ msgstr "Log in with your email or a passkey"
 msgid "Mint Token"
 msgstr "Mint Token"
 
-#: src/WalletConnect/ConnectPage.tsx:391
+#: src/WalletConnect/ConnectPage.tsx:432
 msgid "More Wallets"
 msgstr "More Wallets"
 

package/src/locales/zh.po

@@ -76,7 +76,7 @@ msgstr ""
 msgid "Connect Alchemy"
 msgstr ""
 
-#: src/WalletConnect/ConnectPage.tsx:281
+#: src/WalletConnect/ConnectPage.tsx:322
 msgid "Connect Wallet"
 msgstr ""
 
@@ -174,7 +174,7 @@ msgstr ""
 msgid "Mint Token"
 msgstr ""
 
-#: src/WalletConnect/ConnectPage.tsx:391
+#: src/WalletConnect/ConnectPage.tsx:432
 msgid "More Wallets"
 msgstr ""