WalletConnect wallet and other improvements in react

packages/thirdweb/src/react/providers/wallet-ui-states-provider.tsx

@@ -23,6 +23,7 @@ export type ModalConfig = {
   isEmbed?: boolean;
   onConnect?: () => void;
   chainId?: bigint;
+  chains?: bigint[];
 };
 
 const WalletModalOpen = /* @__PURE__ */ createContext(false);
@@ -61,6 +62,7 @@ export const WalletUIStatesProvider = (
     };
     onConnect?: () => void;
     chainId?: bigint;
+    chains?: bigint[];
   }>,
 ) => {
   const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
@@ -80,6 +82,7 @@ export const WalletUIStatesProvider = (
     auth: props.auth,
     onConnect: props.onConnect,
     chainId: props.chainId,
+    chains: props.chains,
   });
 
   return (
@@ -235,6 +238,9 @@ export type ModalConfigOptions = {
    * Note that this does not include the sign in, If you want to call a callback after user connects AND signs in with their wallet, use `auth.onLogin` instead
    */
   onConnect?: () => void;
+
+  chainId?: bigint;
+  chains?: bigint[];
 };
 
 /**

packages/thirdweb/src/react/types/wallets.ts

@@ -35,7 +35,7 @@ export type WalletConfig = {
    *
    * This is only required if your wallet requires a personal wallet to be connected such as a Safe Wallet or Smart Wallet
    *
-   * providing the `personalWallets` ensures that autoconnect and ConnectWallet modal works properly for your wallet.
+   * providing the `personalWallets` ensures that auto connect and ConnectWallet modal works properly for your wallet.
    * auto-connect will connect the last connected personal wallet first and then connect your wallet
    * ConnectWallet modal will reopen once the personal wallet is connected so that you can render UI for connecting your wallet as the next step
    */
@@ -112,6 +112,11 @@ export type ConnectUIProps = {
    */
   chainId?: bigint;
 
+  /**
+   * List of all chains supported by the app
+   */
+  chains?: bigint[];
+
   /**
    * Create a wallet instance
    * Calling this function uses calls the `WalletConfig.create` method with the required options

packages/thirdweb/src/react/ui/ConnectWallet/ConnectWallet.tsx

@@ -28,8 +28,16 @@ import {
 } from "../../providers/wallet-ui-states-provider.js";
 
 export type ConnectWalletProps = {
+  /**
+   * If specified, Wallet will be prompted to switch to this chain after connecting if it is not already connected to this chain.
+   */
   chainId?: bigint | number;
 
+  /**
+   * Array of chain ids that the app supports
+   */
+  chains?: (bigint | number)[];
+
   /**
    * CSS class to apply to the button element
    *
@@ -670,6 +678,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
                   auth: props.auth,
                   onConnect: props.onConnect,
                   chainId: props.chainId ? BigInt(props.chainId) : undefined,
+                  chains: props.chains?.map(BigInt),
                 });
                 setIsWalletModalOpen(true);
               }}
@@ -748,7 +757,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
             }}
             hideSwitchToPersonalWallet={props.hideSwitchToPersonalWallet}
             hideDisconnect={props.hideDisconnect}
-            chainIds={props.networkSelector?.chains || []}
+            chains={props?.chains?.map(BigInt) || []}
           />
         );
       })()}

packages/thirdweb/src/react/ui/ConnectWallet/Details.tsx

@@ -76,7 +76,7 @@ export const ConnectedWalletDetails: React.FC<{
   displayBalanceToken?: Record<number, string>;
   hideSwitchToPersonalWallet?: boolean;
   hideDisconnect?: boolean;
-  chainIds: number[];
+  chains: bigint[];
 }> = (props) => {
   const locale = useTWLocale().connectWallet;
   const activeAccount = useActiveAccount();
@@ -564,8 +564,8 @@ export const ConnectedWalletDetails: React.FC<{
       <NetworkSelectorContent
         chains={
           walletChainId
-            ? [...new Set([Number(walletChainId), ...props.chainIds])]
-            : props.chainIds
+            ? [...new Set([walletChainId, ...props.chains])]
+            : props.chains
         }
         open={true}
         theme={props.theme}

packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -34,6 +34,11 @@ export type ConnectEmbedProps = {
    */
   chainId?: number | bigint;
 
+  /**
+   * List of all chains that the app supports
+   */
+  chains?: bigint[];
+
   /**
    * Class name to be added to the root element of ConnectEmbed
    */
@@ -360,7 +365,6 @@ const ConnectEmbedContent = (
         onShow={() => {
           // no op
         }}
-        chainId={props.chainId ? BigInt(props.chainId) : undefined}
       />
     );
   }
@@ -375,6 +379,7 @@ const ConnectEmbedContent = (
     auth: props.auth,
     onConnect: props.onConnect,
     chainId: props.chainId ? BigInt(props.chainId) : undefined,
+    chains: props.chains,
   };
 
   return (

packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModal.tsx

@@ -15,7 +15,7 @@ import { ConnectModalContent } from "./ConnectModalContent.js";
  * @internal
  */
 export const ConnectModal = () => {
-  const { theme, modalSize, chainId } = useContext(ModalConfigCtx);
+  const { theme, modalSize } = useContext(ModalConfigCtx);
 
   const { screen, setScreen, initialScreen } = useScreen();
   const isWalletModalOpen = useIsWalletModalOpen();
@@ -127,7 +127,6 @@ export const ConnectModal = () => {
           onShow={onShow}
           isOpen={isWalletModalOpen}
           onClose={closeModal}
-          chainId={chainId}
         />
       </Modal>
     </CustomThemeProvider>

packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -35,7 +35,6 @@ export const ConnectModalContent = (props: {
   onShow: () => void;
   isOpen: boolean;
   onClose: () => void;
-  chainId?: bigint;
 }) => {
   const { screen, setScreen, initialScreen, onHide, onShow, onClose } = props;
   const { wallets, client, dappMetadata } = useThirdwebProviderProps();
@@ -171,13 +170,15 @@ export const ConnectModalContent = (props: {
         // activeWalletConnectionStatus={activeWalletConnectionStatus}
         // setActiveWalletConnectionStatus={setActiveWalletConnectionStatus}
         // connect={walletConfig.connect}
+
         createInstance={() => {
           return walletConfig.create({
             client,
             dappMetadata,
           });
         }}
-        chainId={props.chainId}
+        chains={modalConfig.chains}
+        chainId={modalConfig.chainId}
       />
     );
   };
@@ -221,7 +222,7 @@ export const ConnectModalContent = (props: {
  * @internal
  */
 export const ConnectModal = () => {
-  const { theme, modalSize, chainId } = useContext(ModalConfigCtx);
+  const { theme, modalSize } = useContext(ModalConfigCtx);
 
   const { screen, setScreen, initialScreen } = useScreen();
   const isWalletModalOpen = useIsWalletModalOpen();
@@ -333,7 +334,6 @@ export const ConnectModal = () => {
           onShow={onShow}
           isOpen={isWalletModalOpen}
           onClose={closeModal}
-          chainId={chainId}
         />
       </Modal>
     </CustomThemeProvider>

packages/thirdweb/src/react/ui/ConnectWallet/Modal/ConnectModalInline.tsx

@@ -35,6 +35,11 @@ export type ConnectModalInlineProps = {
    */
   chainId?: bigint;
 
+  /**
+   * List of all chains that the app supports
+   */
+  chains?: (bigint | number)[];
+
   className?: string;
 
   theme?: "dark" | "light" | Theme;
@@ -108,7 +113,6 @@ export const ConnectModalInline = (props: ConnectModalInlineProps) => {
         onShow={() => {
           // no op
         }}
-        chainId={props.chainId}
       />
 
       {/* close icon */}
@@ -135,6 +139,7 @@ export const ConnectModalInline = (props: ConnectModalInlineProps) => {
     welcomeScreen: props.welcomeScreen,
     titleIconUrl: props.modalTitleIconUrl,
     chainId: props.chainId,
+    chains: props.chains?.map(BigInt),
   };
 
   return (

packages/thirdweb/src/react/ui/ConnectWallet/NetworkSelector.tsx

@@ -96,16 +96,16 @@ export type NetworkSelectorProps = {
    */
   open: boolean;
 
-  chains?: number[];
+  chains?: (number | bigint)[];
 
   /**
    * Array of chains to be displayed under "Popular" section
    */
-  popularChains?: number[];
+  popularChains?: (number | bigint)[];
   /**
    * Array of chains to be displayed under "Recent" section
    */
-  recentChains?: number[];
+  recentChains?: (number | bigint)[];
   /**
    * Override how the chain button is rendered in the Modal
    */

packages/thirdweb/src/react/wallets/shared/WalletConnectConnection.tsx

@@ -33,6 +33,7 @@ export const WalletConnectConnection: React.FC<{
   const { client, dappMetadata } = useThirdwebProviderProps();
   const [qrCodeUri, setQrCodeUri] = useState<string | undefined>();
   const [errorConnecting, setErrorConnecting] = useState(false);
+  const optionalChains = connectUIProps.chains;
 
   const connect = useCallback(() => {
     const wallet = walletConnect({
@@ -71,6 +72,7 @@ export const WalletConnectConnection: React.FC<{
           }
         },
         onSessionRequestSent,
+        optionalChains,
       })
       .then((account) => {
         done(account);
@@ -87,6 +89,7 @@ export const WalletConnectConnection: React.FC<{
     platformUris,
     projectId,
     walletConfig.metadata,
+    optionalChains,
   ]);
 
   const scanStarted = useRef(false);

packages/thirdweb/src/wallets/manager/index.ts

@@ -71,6 +71,7 @@ export function createConnectionManager(options?: ConnectionManagerOptions) {
 
   const disconnect = (account: Account) => {
     onAccountDisconnect(account);
+    account.wallet.disconnect();
   };
 
   const setActiveAccount = (account: Account) => {

packages/thirdweb/src/wallets/manager/storage.ts

@@ -29,9 +29,10 @@ const CONNECT_PARAMS_MAP_KEY = "tw:connected-wallet-params";
  * @param params
  * @internal
  */
-export async function saveConnectParamsToStorage<
-  T extends WalletConnectionOptions,
->(walletId: string, params: T) {
+export async function saveConnectParamsToStorage<T extends object>(
+  walletId: string,
+  params: T,
+) {
   // params must be stringifiable
   if (!isStringifiable(params)) {
     console.debug("params", params);
@@ -89,9 +90,9 @@ export async function deleteConnectParamsFromStorage(walletId: string) {
  * Get the saved connection params from storage for given wallet id
  * @internal
  */
-export async function getSavedConnectParamsFromStorage<
-  T extends WalletConnectionOptions,
->(walletId: string): Promise<T | null> {
+export async function getSavedConnectParamsFromStorage<T extends object>(
+  walletId: string,
+): Promise<T | null> {
   const valueStr = await walletStorage.get(CONNECT_PARAMS_MAP_KEY);
 
   if (!valueStr) {
@@ -102,7 +103,7 @@ export async function getSavedConnectParamsFromStorage<
     const value = JSON.parse(valueStr);
 
     if (value && value[walletId]) {
-      return value[walletId] as T;
+      return value[walletId];
     }
 
     return null;