Merge branch 'main' into next

.changeset/big-chairs-smoke.md

@@ -0,0 +1,52 @@
+---
+"@thirdweb-dev/react": minor
+"@thirdweb-dev/react-core": patch
+---
+
+## New smartWallet() API (Breaking Change)
+
+### Before
+
+In the previous API, adding a smart wallet created it's own new entry called "Smart wallet" in the ConnectWallet Modal and you had to pass in the personal wallets which was shown to the user when they clicked on the "Smart wallet".
+
+```tsx
+<ThirdwebProvider
+  supportedWallets={[
+    smartWalet({
+      personalWallets: [metamaskWallet(), coinbaseWallet()],
+      factoryAddress: "....",
+      gassless: true,
+    }),
+  ]}
+/>
+```
+
+### After
+
+Since most users don't know what a smart wallet is, this was confusing. So with the new API, you can just use smart wallet under the hood for any wallet you want and it will just show up as that wallet and not a "smart wallet" in ConnectWallet Modal to improve the user experience.
+
+Once the user is connected, the ConnectWallet Details button shows to the user that they are infact connected to a smart wallet.
+
+```tsx
+const config = {
+  factoryAddress: "....",
+  gassless: true,
+}
+
+<ThirdwebProvider
+  supportedWallets={[
+    smartWalet(metamaskWallet(), config),
+    smartWalet(coinbaseWallet(), config),
+  ]}
+/>
+```
+
+## New Features added to `ConnectWallet` component
+
+- ENS Name + Avatar support added
+- New 'Send funds' button added to ConnectWallet which users can use to send various tokens.
+- New "Receive funds" button added to ConnectWallet which users scan the QR code from their wallet app on phone to send funds to their other wallet on desktop
+- Added `supportedTokens` prop to customize the list of tokens for each network in for the "Send Funds" screen.
+- "Transaction history" button added to ConnectWallet which opens the block explorer
+- New wallet `embededWallet()` to sign in with Google / Email
+- Ability to show balance of any token instead of just native token in the ConnectWallet details button using the `displayBalanceToken` prop

.changeset/fair-badgers-speak.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/service-utils": patch
+---
+
+Adds platform metrics to usage tracker payload

.changeset/honest-impalas-refuse.md

@@ -0,0 +1,6 @@
+---
+"@thirdweb-dev/unity-js-bridge": patch
+"@thirdweb-dev/wallets": patch
+---
+
+pass explorerRecommendedWalletIds from unity client + add special uninitialized paper case to avoid throwing

.changeset/lovely-cobras-report.md

@@ -0,0 +1,7 @@
+---
+"@thirdweb-dev/wallets": patch
+---
+
+- Fix PaperWallet Google Sign in
+- Fix EmbededWallet AutoConnect when using Google sign in
+- Update EmbededWallet connect API

.changeset/red-years-clean.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/sdk": patch
+---
+
+fromSigner should respect network if possible

.changeset/smart-kids-wink.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/service-utils": patch
+---
+
+add embedded wallets to service definitions

.changeset/tall-zebras-poke.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-native": patch
+---
+
+Update ipfs json upload to new endpoint

.changeset/tiny-onions-turn.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-native": patch
+---
+
+Coinbase url listener should only listen for the Coinbase callbackURL

.changeset/young-mice-dance.md

@@ -0,0 +1,5 @@
+---
+"@thirdweb-dev/react-native": patch
+---
+
+Correctly return json uploads results

packages/chains/chains/19.ts

@@ -13,7 +13,8 @@ export default {
     "https://songbird-api.flare.network/ext/C/rpc",
     "https://sgb.ftso.com.au/ext/bc/C/rpc",
     "https://sgb.lightft.so/rpc",
-    "https://sgb-rpc.ftso.eu"
+    "https://sgb-rpc.ftso.eu",
+    "https://rpc.ftso.au/songbird"
   ],
   "faucets": [],
   "nativeCurrency": {

packages/chains/chains/5522.ts

@@ -0,0 +1,36 @@
+import type { Chain } from "../src/types";
+export default {
+  "name": "VEX EVM TESTNET",
+  "chain": "vex",
+  "icon": {
+    "url": "ipfs://QmcZiEAGFYEEax1uxYnDUh8X5YBvZqMi9K92yZoq4o2zeM",
+    "width": 451,
+    "height": 446,
+    "format": "png"
+  },
+  "rpc": [
+    "https://vex-evm-testnet.rpc.thirdweb.com/${THIRDWEB_API_KEY}",
+    "https://testnet.vexascan.com/evmapi"
+  ],
+  "faucets": [
+    "https://t.me/vexfaucetbot"
+  ],
+  "nativeCurrency": {
+    "name": "VEX EVM TESTNET",
+    "symbol": "VEX",
+    "decimals": 18
+  },
+  "infoURL": "https://vexanium.com",
+  "shortName": "VEX",
+  "chainId": 5522,
+  "networkId": 5522,
+  "explorers": [
+    {
+      "name": "Vexascan-EVM-TestNet",
+      "url": "https://testnet.vexascan.com/evmexplorer",
+      "standard": "EIP3091"
+    }
+  ],
+  "testnet": true,
+  "slug": "vex-evm-testnet"
+} as const satisfies Chain;

packages/react-core/src/core/providers/thirdweb-wallet-provider.tsx

@@ -90,6 +90,7 @@ type ThirdwebWalletContextData = {
    */
   getWalletConfig: (walletInstance: WalletInstance) => WalletConfig | undefined;
   activeChainSetExplicitly: boolean;
+  clientId?: string;
 };
 
 const ThirdwebWalletContext = /* @__PURE__ */ createContext<
@@ -483,6 +484,7 @@ export function ThirdwebWalletProvider(
           return walletInstanceToConfig.get(walletInstance);
         },
         activeChainSetExplicitly: props.activeChainSetExplicitly,
+        clientId: props.clientId,
       }}
     >
       {props.children}

packages/react-native/src/core/storage/uploader.ts

@@ -6,6 +6,7 @@ import {
 } from "@thirdweb-dev/storage";
 import { IpfsUploaderOptions, UploadDataValue } from "./types";
 import * as Application from "expo-application";
+import { Platform } from "react-native";
 
 const APP_BUNDLE_ID = Application.applicationId;
 const METADATA_NAME = "Storage React Native SDK";
@@ -38,6 +39,11 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
       keyvalues: { ...options?.metadata },
     };
 
+    // this is on purpose because we can't import package.json as a module as it is outside rootDir
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { version, name: packageName } = require("../../../package.json");
+    const platform = `react-native-${Platform.OS}`;
+
     if ("uri" in data[0] && "type" in data[0] && "name" in data[0]) {
       // then it's an array of files
       return new Promise(async (resolve, reject) => {
@@ -142,6 +148,10 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
           xhr.setRequestHeader("x-client-id", this.clientId);
         }
 
+        xhr.setRequestHeader("x-sdk-version", version);
+        xhr.setRequestHeader("x-sdk-name", packageName);
+        xhr.setRequestHeader("x-sdk-platform", platform);
+
         xhr.send(form);
       });
     } else {
@@ -153,21 +163,34 @@ export class IpfsUploader implements IStorageUploader<IpfsUploadBatchOptions> {
         });
 
         try {
-          const res = await fetch(`${TW_UPLOAD_SERVER_URL}/ipfs/pin-json`, {
-            method: "POST",
-            headers: {
-              "x-bundle-id": APP_BUNDLE_ID || "", // only empty on web
-              ...(this.clientId ? { "x-client-id": this.clientId } : {}),
-              "Content-Type": "application/json",
+          const res = await fetch(
+            `${TW_UPLOAD_SERVER_URL}/ipfs/batch-pin-json`,
+            {
+              method: "POST",
+              headers: {
+                "x-bundle-id": APP_BUNDLE_ID || "", // only empty on web
+                ...(this.clientId ? { "x-client-id": this.clientId } : {}),
+                "Content-Type": "application/json",
+                "x-sdk-version": version,
+                "x-sdk-name": packageName,
+                "x-sdk-platform": platform,
+              },
+              body: fetchBody,
             },
-            body: fetchBody,
-          });
+          );
 
           if (res.ok) {
-            const ipfs = await res.json();
-            const cid = ipfs.IpfsHash;
+            const ipfsResults = await res.json();
+
+            const results = ipfsResults.results.map(
+              (ipfs: { IpfsHash: string; PinSize: number }) => {
+                const cid = ipfs.IpfsHash;
+
+                return `ipfs://${cid}`;
+              },
+            );
 
-            return resolve([`ipfs://${cid}`]);
+            return resolve(results);
           }
         } catch (error) {
           reject(error);

packages/react-native/src/evm/components/ConnectWalletFlow/ConnectingWallet/ConnectingWallet.tsx

@@ -42,7 +42,7 @@ export function ConnectingWallet({
               Connecting your wallet
             </Text>
             <Text variant="bodySmallSecondary" mt="lg" textAlign="center">
-              Login and connect your wallet through the metamask pop-up
+              {`Login and connect your wallet through the ${wallet.meta.name} pop-up`}
             </Text>
           </>
         )}

packages/react-native/src/evm/providers/thirdweb-provider.tsx

@@ -72,8 +72,15 @@ export const ThirdwebProvider = <
   ...restProps
 }: PropsWithChildren<ThirdwebProviderProps<TChains>>) => {
   const colorScheme = useColorScheme();
+
+  const coinbaseWalletObj = supportedWallets.find(
+    (w) => w.id === walletIds.coinbase,
+  );
   useCoinbaseWalletListener(
-    !!supportedWallets.find((w) => w.id === walletIds.coinbase),
+    !!coinbaseWalletObj,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    coinbaseWalletObj?.config?.callbackURL,
   );
 
   const hasMagicConfig = useMemo(

packages/react-native/src/evm/wallets/hooks/useCoinbaseWallet.ts

@@ -11,15 +11,14 @@ import { useCoinbaseWalletListener } from "./useCoinbaseWalletListener";
  * @param callbackURL The Universal Link used by Coinbase Wallet to return responses to your application.
  * @returns connect function to connect to the Coinbase wallet
  */
-export function useCoinbaseWallet(callbackURL: string) {
+export function useCoinbaseWallet(callbackURL: URL) {
   const connect = useConnect();
-  useCoinbaseWalletListener(true);
+  useCoinbaseWalletListener(true, callbackURL);
 
   return useCallback(
-    async (connectOptions?: { chainId?: number; callbackURL: string }) => {
+    async (connectOptions?: { chainId?: number }) => {
       const { coinbaseWallet } = await import("../wallets/coinbase-wallet");
       return connect(
-        // @ts-expect-error - Passing a URL object to callbackURL crashes the function @fixme: @manan
         coinbaseWallet({ callbackURL: callbackURL }),
         connectOptions,
       );

packages/react-native/src/evm/wallets/hooks/useCoinbaseWalletListener.ts

@@ -7,16 +7,24 @@ import { Linking } from "react-native";
  *
  * This hook sets up the UniversalLinks listener.
  */
-export function useCoinbaseWalletListener(enable: boolean) {
+export function useCoinbaseWalletListener(enable: boolean, callbackURL?: URL) {
   useEffect(() => {
     if (!enable) {
       return;
     }
 
     const sub = Linking.addEventListener("url", ({ url }) => {
-      // @ts-expect-error - Passing a URL object to handleResponse crashes the function
-      handleResponse(url);
+      const incomingUrl = new URL(url);
+      if (
+        callbackURL &&
+        incomingUrl.host === callbackURL.host &&
+        incomingUrl.protocol === callbackURL.protocol &&
+        incomingUrl.hostname === callbackURL.hostname
+      ) {
+        // @ts-expect-error - Passing a URL object to handleResponse crashes the function
+        handleResponse(url);
+      }
     });
     return () => sub?.remove();
-  }, [enable]);
+  }, [callbackURL, enable]);
 }

packages/react-native/src/evm/wallets/wallets/coinbase-wallet.ts

@@ -11,10 +11,7 @@ import {
   WalletOptions,
   walletIds,
 } from "@thirdweb-dev/wallets";
-import {
-  WalletConfig,
-  WalletOptions as WalletOptionsRC,
-} from "@thirdweb-dev/react-core";
+import { WalletOptions as WalletOptionsRC } from "@thirdweb-dev/react-core";
 
 type CoinbaseWalletOptions = Omit<
   WalletOptions<CoinbaseWalletConnectorOptions>,
@@ -80,6 +77,7 @@ export const coinbaseWallet = (config?: {
     meta: CoinbaseWallet.meta,
     create: (options: WalletOptionsRC) =>
       new CoinbaseWallet({ ...options, callbackURL: callbackURLNonNull }),
+    config: config,
     recommended: config?.recommended,
-  } satisfies WalletConfig<CoinbaseWallet>;
+  };
 };

packages/react/src/components/CopyIcon.tsx

@@ -9,6 +9,7 @@ export const CopyIcon: React.FC<{
   tip: string;
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
+  hasCopied?: boolean;
 }> = (props) => {
   const { hasCopied, onCopy } = useClipboard(props.text);
 
@@ -22,7 +23,7 @@ export const CopyIcon: React.FC<{
       }}
     >
       <ToolTip tip={props.tip} side={props.side} align={props.align}>
-        {hasCopied ? <CheckIconStyled /> : <CopyIconSVG />}
+        {props.hasCopied || hasCopied ? <CheckIconStyled /> : <CopyIconSVG />}
       </ToolTip>
     </div>
   );