thirdweb 5.29.6-nightly-c13ffc5f8bbf88998a9bf96730a85ba1713f761a-20240618004239 → 5.30.0-nightly-991cb72bdb1b94fcf0f9a3de36b2ec8ee07ae5ec-20240619000538

package/src/react/web/ui/ConnectWallet/ConnectButtonProps.ts

@@ -74,6 +74,13 @@ export type PayUIOptions = {
         testMode?: boolean;
       }
     | false;
+
+  /**
+   * Extra details to store with the purchase.
+   *
+   * This details will be stored with the purchase and can be retrieved later via the status API or Webhook
+   */
+  purchaseData?: object;
 };
 
 /**
@@ -85,7 +92,7 @@ export type ConnectButton_connectButtonOptions = {
    * Set a custom label for the button. The default is `"Connect"`
    * @example
    * ```tsx
-   * <ConnectButton button={{
+   * <ConnectButton connectButton={{
    *    label: "Sign in"
    * }} />
    * ```
@@ -98,8 +105,8 @@ export type ConnectButton_connectButtonOptions = {
    * For some CSS properties, you may need to use the `!important` to override the default styles
    *
    * ```tsx
-   * <ConnectButton button={{
-   *  className="my-custom-class"
+   * <ConnectButton connectButton={{
+   *   className: "my-custom-class",
    * }} />
    * ```
    */
@@ -107,6 +114,14 @@ export type ConnectButton_connectButtonOptions = {
 
   /**
    * CSS styles to apply to the connectButton element
+   * @example
+   * ```tsx
+   * <ConnectButton connectButton={{
+   *   style: {
+   *     color: "red",
+   *   },
+   * }} />
+   * ```
    */
   style?: React.CSSProperties;
 };
@@ -205,7 +220,7 @@ export type ConnectButton_detailsButtonOptions = {
    * @example
    * ```tsx
    * <ConnectButton detailsButton={{
-   *    balanceToken:{
+   *    displayBalanceToken:{
    *      // show USDC balance when connected to Ethereum mainnet or Polygon
    *      [ethereum.id]: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599",
    *      [polygon.id]: "0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359",
@@ -559,16 +574,42 @@ export type ConnectButtonProps = {
   signInButton?: {
     /**
      * Set a custom label for the sign-in button
+     * @example
+     * ```tsx
+     * <ConnectButton
+     *   signInButton={{
+     *     label: "Sign in now!"
+     *   }}
+     * />
+     * ```
      */
     label?: string;
 
     /**
      * CSS styles to apply to the sign-in button element
+     * @example
+     * ```tsx
+     * <ConnectButton
+     *   signInButton={{
+     *     style: {
+     *       color: "purple",
+     *     }
+     *   }}
+     * />
+     * ```
      */
     style?: React.CSSProperties;
 
     /**
      * CSS class to apply to the sign-in button element
+     * @example
+     * ```tsx
+     * <ConnectButton
+     *   signInButton={{
+     *     className: "my-class-name"
+     *   }}
+     * />
+     * ```
      */
     className?: string;
   };

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

@@ -604,6 +604,7 @@ function SwapScreenContent(
             : toToken.address,
           toAmount: tokenAmount,
           client,
+          purchaseData: payOptions.purchaseData,
         }
       : undefined;
 
@@ -799,6 +800,8 @@ function FiatScreenContent(
           toAmount: tokenAmount,
           client,
           isTestMode: buyWithFiatOptions?.testMode,
+          purchaseData: props.payOptions.purchaseData,
+          fromAddress: account.address,
         }
       : undefined,
   );

package/src/react/web/ui/ConnectWallet/useConnectModal.tsx

@@ -55,7 +55,7 @@ export function useConnectModal() {
         setRootEl(undefined);
       }
 
-      return new Promise((resolve, reject) => {
+      return new Promise<Wallet>((resolve, reject) => {
         setIsConnecting(true);
         getConnectLocale(props.locale || "en_US")
           .then((locale) => {

package/src/react/web/ui/components/CopyIcon.tsx

@@ -15,6 +15,7 @@ export const CopyIcon: React.FC<{
   hasCopied?: boolean;
 }> = (props) => {
   const { hasCopied, onCopy } = useClipboard(props.text);
+  const showCheckIcon = props.hasCopied || hasCopied;
 
   return (
     <div
@@ -31,13 +32,11 @@ export const CopyIcon: React.FC<{
       }}
     >
       <ToolTip tip={props.tip} side={props.side} align={props.align}>
-        {props.hasCopied || hasCopied ? (
-          <Container color="success">
-            <CheckIcon />
+        <div>
+          <Container color={showCheckIcon ? "success" : undefined}>
+            {showCheckIcon ? <CheckIcon /> : <CopyIconSVG />}
           </Container>
-        ) : (
-          <CopyIconSVG />
-        )}
+        </div>
       </ToolTip>
     </div>
   );

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.29.6-nightly-c13ffc5f8bbf88998a9bf96730a85ba1713f761a-20240618004239";
+export const version = "5.30.0-nightly-991cb72bdb1b94fcf0f9a3de36b2ec8ee07ae5ec-20240619000538";

package/src/wallets/wallet-connect/controller.ts

@@ -92,7 +92,7 @@ export async function connectWC(
   let { onDisplayUri } = wcOptions || {};
 
   // use default sessionHandler unless onDisplayUri is explicitly provided
-  if (!onDisplayUri && sessionHandler) {
+  if (!onDisplayUri && sessionHandler && walletId !== "walletConnect") {
     const walletInfo = await getWalletInfo(walletId);
     const deeplinkHandler = (uri: string) => {
       const appUrl = walletInfo.mobile.native || walletInfo.mobile.universal;
@@ -235,10 +235,11 @@ async function initProvider(
   });
 
   const provider = await EthereumProvider.init({
-    showQrModal: sessionRequestHandler
-      ? false
-      : wcOptions?.showQrModal === undefined
-        ? defaultShowQrModal
+    showQrModal:
+      wcOptions?.showQrModal === undefined
+        ? sessionRequestHandler
+          ? false
+          : defaultShowQrModal
         : wcOptions.showQrModal,
     projectId: wcOptions?.projectId || DEFAULT_PROJECT_ID,
     optionalMethods: OPTIONAL_METHODS,