thirdweb 5.88.6-nightly-b182302f590e75c9881cebd0ca1cc8b1425d50b8-20250218000338 → 5.88.6

package/src/adapters/viem.test.ts

@@ -6,27 +6,26 @@ import {
   USDT_CONTRACT_ADDRESS,
   USDT_CONTRACT_WITH_ABI,
 } from "~test/test-contracts.js";
-import { ANVIL_PKEY_A, TEST_ACCOUNT_B } from "~test/test-wallets.js";
+import {
+  ANVIL_PKEY_A,
+  TEST_ACCOUNT_B,
+  TEST_IN_APP_WALLET_A,
+} from "~test/test-wallets.js";
 import { typedData } from "~test/typed-data.js";
-
 import { ANVIL_CHAIN, FORKED_ETHEREUM_CHAIN } from "../../test/src/chains.js";
 import { TEST_CLIENT } from "../../test/src/test-clients.js";
 import { randomBytesBuffer } from "../utils/random.js";
-import { privateKeyToAccount } from "../wallets/private-key.js";
 import { toViemContract, viemAdapter } from "./viem.js";
 
-const account = privateKeyToAccount({
-  privateKey: ANVIL_PKEY_A,
-  client: TEST_CLIENT,
-});
+const wallet = TEST_IN_APP_WALLET_A;
 
 describe("walletClient.toViem", () => {
-  let walletClient: ReturnType<typeof viemAdapter.walletClient.toViem>;
+  let walletClient: ReturnType<typeof viemAdapter.wallet.toViem>;
 
   beforeAll(() => {
-    walletClient = viemAdapter.walletClient.toViem({
+    walletClient = viemAdapter.wallet.toViem({
       client: TEST_CLIENT,
-      account,
+      wallet,
       chain: ANVIL_CHAIN,
     });
   });
@@ -37,7 +36,8 @@ describe("walletClient.toViem", () => {
   });
 
   test("should sign message", async () => {
-    if (!walletClient.account) {
+    const account = wallet.getAccount();
+    if (!walletClient.account || !account) {
       throw new Error("Account not found");
     }
     const expectedSig = await account.signMessage({ message: "hello world" });
@@ -49,7 +49,8 @@ describe("walletClient.toViem", () => {
   });
 
   test("should sign raw message", async () => {
-    if (!walletClient.account) {
+    const account = wallet.getAccount();
+    if (!walletClient.account || !account) {
       throw new Error("Account not found");
     }
     const bytes = randomBytesBuffer(32);
@@ -110,12 +111,16 @@ describe("walletClient.toViem", () => {
   });
 
   test("should get address on live chain", async () => {
-    walletClient = viemAdapter.walletClient.toViem({
+    walletClient = viemAdapter.wallet.toViem({
       client: TEST_CLIENT,
-      account,
+      wallet,
       chain: FORKED_ETHEREUM_CHAIN,
     });
 
+    const account = wallet.getAccount();
+    if (!walletClient.account || !account) {
+      throw new Error("Account not found");
+    }
     const address = await walletClient.getAddresses();
     expect(address[0]).toBeDefined();
     expect(address[0]).toBe(account.address);
@@ -123,6 +128,10 @@ describe("walletClient.toViem", () => {
 
   test("should match thirdweb account signature", async () => {
     const message = "testing123";
+    const account = wallet.getAccount();
+    if (!walletClient.account || !account) {
+      throw new Error("Account not found");
+    }
 
     const rawViemAccount = viemPrivateKeyToAccount(ANVIL_PKEY_A);
     const twSignature = await account.signMessage({ message });
@@ -143,4 +152,11 @@ describe("walletClient.toViem", () => {
     expect(result.abi).toEqual(USDT_ABI);
     expect(result.address).toBe(USDT_CONTRACT_ADDRESS);
   });
+
+  test("should switch chain", async () => {
+    await walletClient.switchChain({
+      id: FORKED_ETHEREUM_CHAIN.id,
+    });
+    expect(await walletClient.getChainId()).toBe(FORKED_ETHEREUM_CHAIN.id);
+  });
 });

package/src/adapters/viem.ts

@@ -20,7 +20,9 @@ import { estimateGas } from "../transaction/actions/estimate-gas.js";
 import { sendTransaction } from "../transaction/actions/send-transaction.js";
 import { prepareTransaction } from "../transaction/prepare-transaction.js";
 import { getAddress } from "../utils/address.js";
-import type { Account } from "../wallets/interfaces/wallet.js";
+import type { Account, Wallet } from "../wallets/interfaces/wallet.js";
+import { fromProvider } from "./eip1193/from-eip1193.js";
+import { toProvider } from "./eip1193/to-eip1193.js";
 
 /**
  * Converts thirdweb accounts and contracts to viem wallet clients and contract objects or the other way around.
@@ -149,6 +151,7 @@ export const viemAdapter = {
    *   walletClient,
    * });
    * ```
+   * @deprecated use viemAdapter.wallet instead
    */
   walletClient: {
     /**
@@ -161,6 +164,7 @@ export const viemAdapter = {
      * import { viemAdapter } from "thirdweb/adapters";
      * const walletClient = viemAdapter.walletClient.toViem({ account, client, chain });
      * ```
+     * @deprecated use viemAdapter.wallet instead
      */
     toViem: toViemWalletClient,
     /**
@@ -173,9 +177,62 @@ export const viemAdapter = {
      * import { viemAdapter } from "thirdweb/adapters";
      * const account = viemAdapter.walletClient.fromViem({ walletClient });
      * ```
+     * @deprecated use viemAdapter.wallet instead
      */
     fromViem: fromViemWalletClient,
   },
+  /**
+   * Converts a thirdweb account to a Viem Wallet client or the other way around.
+   * @param options - The options for creating the Viem Wallet client.
+   * @returns The Viem Wallet client.
+   * @example
+   *
+   * ### toViem
+   * ```ts
+   * import { viemAdapter } from "thirdweb/adapters/viem";
+   *
+   * const walletClient = viemAdapter.wallet.toViem({
+   *  wallet,
+   *  client,
+   *  chain: ethereum,
+   * });
+   * ```
+   *
+   * ### fromViem
+   * ```ts
+   * import { viemAdapter } from "thirdweb/adapters";
+   *
+   * const wallet = viemAdapter.wallet.fromViem({
+   *   walletClient,
+   * });
+   * ```
+   */
+  wallet: {
+    /**
+     * Converts a Thirdweb wallet to a Viem wallet client.
+     * @param options - The options for converting a Thirdweb wallet to a Viem wallet client.
+     * @param options.wallet - The Thirdweb wallet to convert.
+     * @returns A Promise that resolves to a Viem wallet client.
+     * @example
+     * ```ts
+     * import { viemAdapter } from "thirdweb/adapters";
+     * const walletClient = viemAdapter.wallet.toViem({ wallet, client, chain });
+     * ```
+     */
+    toViem: walletToViem,
+    /**
+     * Converts a Viem wallet client to a Thirdweb wallet.
+     * @param options - The options for converting a Viem wallet client to a Thirdweb wallet.
+     * @param options.walletClient - The Viem wallet client to convert.
+     * @returns A Promise that resolves to a Thirdweb wallet.
+     * @example
+     * ```ts
+     * import { viemAdapter } from "thirdweb/adapters";
+     * const wallet = viemAdapter.wallet.fromViem({ walletClient });
+     * ```
+     */
+    fromViem: walletFromViem,
+  },
 };
 
 type FromViemContractOptions<TAbi extends Abi> = {
@@ -247,6 +304,7 @@ type ToViemWalletClientOptions = {
   chain: Chain;
 };
 
+// DEPRECATED
 function toViemWalletClient(options: ToViemWalletClientOptions): WalletClient {
   const { account, chain, client } = options;
   if (!account) {
@@ -305,6 +363,14 @@ function toViemWalletClient(options: ToViemWalletClientOptions): WalletClient {
       if (request.method === "eth_accounts") {
         return [account.address];
       }
+      if (
+        request.method === "wallet_switchEthereumChain" ||
+        request.method === "wallet_addEthereumChain"
+      ) {
+        throw new Error(
+          "Can't switch chains because only an account was passed to 'viemAdapter.walletClient.toViem()', please pass a connected wallet instance instead.",
+        );
+      }
       return rpcClient(request);
     },
   });
@@ -317,6 +383,7 @@ function toViemWalletClient(options: ToViemWalletClientOptions): WalletClient {
   });
 }
 
+// DEPRECATED
 function fromViemWalletClient(options: {
   walletClient: WalletClient;
 }): Account {
@@ -355,3 +422,67 @@ function fromViemWalletClient(options: {
     },
   };
 }
+
+type WalletToViemOptions = {
+  client: ThirdwebClient;
+  chain: Chain;
+  wallet: Wallet;
+};
+
+function walletToViem(options: WalletToViemOptions): WalletClient {
+  const { wallet, chain, client } = options;
+
+  if (!wallet.getAccount()) {
+    throw new Error("Wallet is not connected.");
+  }
+
+  const rpcUrl = getRpcUrlForChain({ chain, client });
+  const viemChain: ViemChain = {
+    id: chain.id,
+    name: chain.name || "",
+    rpcUrls: {
+      default: { http: [rpcUrl] },
+    },
+    nativeCurrency: {
+      name: chain.nativeCurrency?.name || "Ether",
+      symbol: chain.nativeCurrency?.symbol || "ETH",
+      decimals: chain.nativeCurrency?.decimals || 18,
+    },
+  };
+
+  const eip1193Provider = toProvider({
+    chain,
+    client,
+    wallet,
+  });
+  return createWalletClient({
+    transport: custom({
+      request: (request) => eip1193Provider.request(request),
+    }),
+    account: wallet.getAccount()?.address,
+    chain: viemChain,
+    key: "thirdweb-wallet",
+  });
+}
+
+function walletFromViem(options: {
+  walletClient: WalletClient;
+}): Wallet {
+  const viemAccount = options.walletClient.account;
+  if (!viemAccount) {
+    throw new Error(
+      "Account not found in walletClient, please pass it explicitly.",
+    );
+  }
+
+  const wallet = fromProvider({
+    provider: {
+      request: (request) => options.walletClient.request(request),
+      on: () => {},
+      removeListener: () => {},
+    },
+    walletId: "adapter",
+  });
+
+  return wallet;
+}

package/src/chains/chain-definitions/arbitrum-nova.ts

@@ -10,7 +10,7 @@ export const arbitrumNova = /* @__PURE__ */ defineChain({
   blockExplorers: [
     {
       name: "Arbiscan",
-      url: "https://nova-explorer.arbitrum.io/",
+      url: "https://nova.arbiscan.io/",
     },
   ],
 });

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -635,11 +635,7 @@ function SelectedTokenInfo(props: {
             placeholder="0"
             type="text"
             data-placeholder={props.tokenAmount === ""}
-            value={
-              props.tokenAmount
-                ? formatNumber(Number(props.tokenAmount), 5)
-                : "0"
-            }
+            value={props.tokenAmount || "0"}
             disabled={props.disabled}
             onClick={(e) => {
               // put cursor at the end of the input
@@ -936,13 +932,15 @@ function createSupportedTokens(
   payOptions: PayUIOptions,
   supportedTokensOverrides?: SupportedTokens,
 ): SupportedTokens {
-  const tokens: SupportedTokens = {};
+  // dev override
+  if (supportedTokensOverrides) {
+    return supportedTokensOverrides;
+  }
 
+  const tokens: SupportedTokens = {};
   const isBuyWithFiatDisabled = payOptions.buyWithFiat === false;
   const isBuyWithCryptoDisabled = payOptions.buyWithCrypto === false;
 
-  // FIXME (pay) when buywithFiat is disabled, missing a bunch of tokens on base??
-
   for (const x of data) {
     tokens[x.chain.id] = x.tokens.filter((t) => {
       // for source tokens, data is not provided, so we include all of them
@@ -970,19 +968,6 @@ function createSupportedTokens(
       return true; // include the token
     });
   }
-
-  // override with props.supportedTokens
-  if (supportedTokensOverrides) {
-    for (const k in supportedTokensOverrides) {
-      const key = Number(k);
-      const tokenList = supportedTokensOverrides[key];
-
-      if (tokenList) {
-        tokens[key] = tokenList;
-      }
-    }
-  }
-
   return tokens;
 }
 

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TokenSelectorScreen.tsx

@@ -381,33 +381,90 @@ function TokenBalanceRow(props: {
     <StyledButton
       onClick={() => onClick(tokenBalance.token, wallet)}
       variant="secondary"
-      style={style}
+      style={{
+        ...style,
+        display: "flex",
+        justifyContent: "space-between",
+        minWidth: 0, // Needed for text truncation to work
+      }}
     >
-      <Container flex="row" center="y" gap="sm">
+      <Container
+        flex="row"
+        center="y"
+        gap="sm"
+        style={{
+          flex: "1 1 50%",
+          minWidth: 0,
+          maxWidth: "50%",
+          overflow: "hidden",
+          flexWrap: "nowrap",
+        }}
+      >
         <TokenIcon
           token={tokenBalance.token}
           chain={tokenBalance.chain}
           size="md"
           client={client}
         />
-        <Container flex="column" gap="4xs">
-          <Text size="xs" color="primaryText">
+        <Container flex="column" gap="4xs" style={{ minWidth: 0 }}>
+          <Text
+            size="xs"
+            color="primaryText"
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
             {tokenBalance.token.symbol}
           </Text>
-          {chainInfo && <Text size="xs">{chainInfo.name}</Text>}
+          {chainInfo && (
+            <Text
+              size="xs"
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap",
+              }}
+            >
+              {chainInfo.name}
+            </Text>
+          )}
         </Container>
       </Container>
-      <Container flex="row" center="y" gap="4xs" color="secondaryText">
+
+      <Container
+        flex="row"
+        center="y"
+        gap="4xs"
+        color="secondaryText"
+        style={{
+          flex: "1 1 50%",
+          maxWidth: "50%",
+          minWidth: 0,
+          justifyContent: "flex-end",
+          flexWrap: "nowrap",
+        }}
+      >
         <Container
           flex="column"
           color="secondaryText"
           gap="4xs"
           style={{
-            justifyContent: "flex-end",
             alignItems: "flex-end",
+            minWidth: 0,
+            overflow: "hidden",
           }}
         >
-          <Text size="xs" color="primaryText">
+          <Text
+            size="xs"
+            color="primaryText"
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
             {formatTokenBalance(tokenBalance.balance, true, 2)}
           </Text>
           <FiatValue
@@ -418,7 +475,11 @@ function TokenBalanceRow(props: {
             size="xs"
           />
         </Container>
-        <ChevronRightIcon width={iconSize.md} height={iconSize.md} />
+        <ChevronRightIcon
+          width={iconSize.md}
+          height={iconSize.md}
+          style={{ flexShrink: 0 }}
+        />
       </Container>
     </StyledButton>
   );
@@ -429,6 +490,7 @@ const StyledButton = /* @__PURE__ */ styled(Button)((props) => {
   return {
     background: "transparent",
     justifyContent: "space-between",
+    flexWrap: "nowrap",
     flexDirection: "row",
     padding: spacing.sm,
     paddingRight: spacing.xs,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.88.6-nightly-b182302f590e75c9881cebd0ca1cc8b1425d50b8-20250218000338";
+export const version = "5.88.6";