Merge branch 'main' into fix/sale-widget-transaction-errors

packages/blockchain-data/sdk/src/blockchain-data.ts

@@ -223,7 +223,6 @@ export class BlockchainData {
 
   /**
    * Create a mint request to mint a set of NFTs for a given collection
-   * @experimental
    * @param request - the request object containing the parameters to be provided in the API request
    * @returns a promise that resolves with the remaining rate limits
    * @throws {@link index.APIError}
@@ -241,7 +240,6 @@ export class BlockchainData {
 
   /**
    * List all mint requests for a given contract address
-   * @experimental
    * @param request - the request object containing the parameters to be provided in the API request
    * @returns a promise that resolves with a list of mint requests
    * @throws {@link index.APIError}
@@ -259,7 +257,6 @@ export class BlockchainData {
 
   /**
    * Retrieve the status of a single mint request identified by its reference ID
-   * @experimental
    * @param request - the request object containing the parameters to be provided in the API request
    * @returns a promise that resolves with a single mint request
    * @throws {@link index.APIError}

packages/checkout/widgets-lib/src/lib/hooks/useWalletConnect.ts

@@ -22,7 +22,7 @@ export const useWalletConnect = () => {
       (async () => setEthereumProvider(await WalletConnectManager.getInstance().getProvider()))();
       setWalletConnectModal(WalletConnectManager.getInstance().getModal());
     }
-  }, []);
+  }, [isWalletConnectEnabled]);
 
   const openWalletConnectModal = useCallback(async ({
     connectCallback,
@@ -133,6 +133,14 @@ export const useWalletConnect = () => {
   ), [ethereumProvider, walletConnectModal]);
 
   const getWalletLogoUrl = useCallback(async () => await WalletConnectManager.getInstance().getWalletLogoUrl(), []);
+  const getWalletName = useCallback(() => {
+    if (!ethereumProvider || !ethereumProvider.session) return 'Other';
+    let peerName = ethereumProvider.session.peer.metadata.name;
+    peerName = peerName.replace('Wallet', '');
+    peerName = peerName.replace('wallet', '');
+    peerName = peerName.trim();
+    return peerName;
+  }, [ethereumProvider]);
 
   return {
     isWalletConnectEnabled,
@@ -141,5 +149,6 @@ export const useWalletConnect = () => {
     walletConnectModal,
     openWalletConnectModal,
     getWalletLogoUrl,
+    getWalletName,
   };
 };

packages/checkout/widgets-lib/src/widgets/bridge/components/WalletNetworkButton.tsx

@@ -5,7 +5,7 @@ import { ChainId, WalletProviderRdns } from '@imtbl/checkout-sdk';
 import { getChainNameById } from 'lib/chains';
 import { networkIcon } from 'lib';
 import { Web3Provider } from '@ethersproject/providers';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useWalletConnect } from 'lib/hooks/useWalletConnect';
 import {
   networkButtonStyles,
@@ -44,8 +44,21 @@ export function WalletNetworkButton({
   const [walletLogoUrl, setWalletLogoUrl] = useState<string | undefined>(
     undefined,
   );
+  const [walletConnectPeerName, setWalletConnectPeerName] = useState('Other');
   const [isWalletConnect, setIsWalletConnect] = useState<boolean>(false);
-  const { isWalletConnectEnabled, getWalletLogoUrl } = useWalletConnect();
+  const { isWalletConnectEnabled, getWalletLogoUrl, getWalletName } = useWalletConnect();
+
+  const walletDisplayName = useMemo(() => {
+    if (walletProviderDetail?.info.rdns === WalletProviderRdns.PASSPORT) {
+      return walletName;
+    }
+
+    if (isWalletConnectProvider(walletProvider)) {
+      return walletConnectPeerName;
+    }
+
+    return walletProviderDetail?.info.name;
+  }, [walletProviderDetail, walletConnectPeerName, walletProvider]);
 
   useEffect(() => {
     if (isWalletConnectEnabled) {
@@ -55,9 +68,10 @@ export function WalletNetworkButton({
         (async () => {
           setWalletLogoUrl(await getWalletLogoUrl());
         })();
+        setWalletConnectPeerName(getWalletName());
       }
     }
-  }, [isWalletConnectEnabled, walletProvider]);
+  }, [isWalletConnectEnabled, walletProvider, getWalletLogoUrl, getWalletName]);
 
   return (
     <Box
@@ -87,10 +101,7 @@ export function WalletNetworkButton({
           flex: 1,
         }}
       >
-        <Heading size="xSmall" sx={{ textTransform: 'capitalize' }}>
-          {walletProviderDetail?.info.rdns === WalletProviderRdns.PASSPORT
-            ? walletName : walletProviderDetail?.info.name}
-        </Heading>
+        <Heading size="xSmall" sx={{ textTransform: 'capitalize' }}>{walletDisplayName}</Heading>
         <Body size="xSmall" sx={walletCaptionStyles}>
           {walletAddress}
         </Body>

packages/checkout/widgets-lib/src/widgets/connect/components/WalletList.tsx

@@ -1,6 +1,7 @@
 import { Box } from '@biom3/react';
 import {
   ChainId,
+  CheckoutErrorType,
   WalletProviderName, WalletProviderRdns,
 } from '@imtbl/checkout-sdk';
 import {
@@ -9,11 +10,12 @@ import {
 import { motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
 import { Web3Provider } from '@ethersproject/providers';
+import { UnableToConnectDrawer } from 'components/UnableToConnectDrawer/UnableToConnectDrawer';
+import { ChangedYourMindDrawer } from 'components/ChangedYourMindDrawer/ChangedYourMindDrawer';
 import { ConnectWidgetViews } from '../../../context/view-context/ConnectViewContextTypes';
 import { ConnectActions, ConnectContext } from '../context/ConnectContext';
 import { WalletItem } from './WalletItem';
 import {
-  SharedViews,
   ViewActions,
   ViewContext,
 } from '../../../context/view-context/ViewContext';
@@ -56,6 +58,10 @@ export function WalletList(props: WalletListProps) {
   const [showWalletDrawer, setShowWalletDrawer] = useState(false);
   const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect();
 
+  const [showChangedYourMindDrawer, setShowChangedYourMindDrawer] = useState(false);
+  const [showUnableToConnectDrawer, setShowUnableToConnectDrawer] = useState(false);
+  const [chosenProviderDetail, setChosenProviderDetail] = useState<EIP6963ProviderDetail>();
+
   const filteredProviders = useMemo(() => (
     providers.filter((provider) => (!(provider.info.rdns === WalletProviderRdns.PASSPORT)))
   ), [providers]);
@@ -150,22 +156,24 @@ export function WalletList(props: WalletListProps) {
           getProviderSlugFromRdns(providerDetail.info.rdns),
         );
         await handleConnectViewUpdate(web3Provider);
-      } catch (err: any) {
+      } catch (err: CheckoutErrorType | any) {
+        if (err.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) {
         // eslint-disable-next-line no-console
-        console.error('Connect rejected', err);
+          console.error('Connect rejected', err);
+
+          setShowChangedYourMindDrawer(true);
+        } else {
+          // eslint-disable-next-line no-console
+          console.error('Connect error', err);
 
-        // TODO: Wire up error state drawers or throw them
+          setShowUnableToConnectDrawer(true);
+        }
       }
     } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error('Connect unknown error', err);
 
-      viewDispatch({
-        payload: {
-          type: ViewActions.UPDATE_VIEW,
-          view: { type: SharedViews.ERROR_VIEW, error: err },
-        },
-      });
+      setShowUnableToConnectDrawer(true);
     }
   }, [checkout]);
 
@@ -203,6 +211,7 @@ export function WalletList(props: WalletListProps) {
 
   const handleWalletChange = async (event: WalletChangeEvent) => {
     const { providerDetail } = event;
+    setChosenProviderDetail(providerDetail);
     track({
       userJourney: UserJourney.CONNECT,
       screen: 'ConnectWallet',
@@ -220,6 +229,9 @@ export function WalletList(props: WalletListProps) {
 
   const handleWalletItemClick = useCallback(
     async (providerDetail: EIP6963ProviderDetail<EIP1193Provider>) => {
+      setShowChangedYourMindDrawer(false);
+      setShowUnableToConnectDrawer(false);
+      setChosenProviderDetail(providerDetail);
       track({
         userJourney: UserJourney.CONNECT,
         screen: 'ConnectWallet',
@@ -236,6 +248,11 @@ export function WalletList(props: WalletListProps) {
     [track, checkout],
   );
 
+  const onChosenProviderDetailChange = useCallback(() => {
+    if (!chosenProviderDetail) return;
+    handleWalletItemClick(chosenProviderDetail!);
+  }, [chosenProviderDetail]);
+
   const onBrowserWalletsClick = useCallback(() => {
     setShowWalletDrawer(true);
   }, [track]);
@@ -316,6 +333,20 @@ export function WalletList(props: WalletListProps) {
         }}
         onWalletChange={handleWalletChange}
       />
+
+      <ChangedYourMindDrawer
+        visible={showChangedYourMindDrawer}
+        checkout={checkout!}
+        onCloseDrawer={() => setShowChangedYourMindDrawer(false)}
+        onTryAgain={onChosenProviderDetailChange}
+      />
+
+      <UnableToConnectDrawer
+        visible={showUnableToConnectDrawer}
+        checkout={checkout!}
+        onCloseDrawer={() => setShowUnableToConnectDrawer(false)}
+        onTryAgain={() => setShowUnableToConnectDrawer(false)}
+      />
     </Box>
   );
 }

packages/internal/generated-clients/src/mr-openapi.json

@@ -1816,8 +1816,8 @@
     },
     "/v1/chains/{chain_name}/collections/{contract_address}/nfts/mint-requests": {
       "post": {
-        "description": "[Experimental] Create a mint request to mint a set of NFTs for a given collection",
-        "summary": "[Experimental] Mint NFTs",
+        "description": "Create a mint request to mint a set of NFTs for a given collection",
+        "summary": "Mint NFTs",
         "security": [
           {
             "ImmutableApiKey": [
@@ -1907,8 +1907,8 @@
         }
       },
       "get": {
-        "description": "[Experimental] Retrieve the status of all mints for a given contract address",
-        "summary": "[Experimental] List mint requests",
+        "description": "Retrieve the status of all mints for a given contract address",
+        "summary": "List mint requests",
         "security": [
           {
             "ImmutableApiKey": [
@@ -1999,8 +1999,8 @@
     },
     "/v1/chains/{chain_name}/collections/{contract_address}/nfts/mint-requests/{reference_id}": {
       "get": {
-        "description": "[Experimental] Retrieve the status of a mint request identified by its reference_id",
-        "summary": "[Experimental] Get mint request by reference ID",
+        "description": "Retrieve the status of a mint request identified by its reference_id",
+        "summary": "Get mint request by reference ID",
         "security": [
           {
             "ImmutableApiKey": [

packages/internal/generated-clients/src/multi-rollup/domain/nfts-api.ts

@@ -54,8 +54,8 @@ import { MintRequestStatus } from '../models';
 export const NftsApiAxiosParamCreator = function (configuration?: Configuration) {
     return {
         /**
-         * [Experimental] Create a mint request to mint a set of NFTs for a given collection
-         * @summary [Experimental] Mint NFTs
+         * Create a mint request to mint a set of NFTs for a given collection
+         * @summary Mint NFTs
          * @param {string} contractAddress The address of contract
          * @param {string} chainName The name of chain
          * @param {CreateMintRequestRequest} createMintRequestRequest the request body
@@ -101,8 +101,8 @@ export const NftsApiAxiosParamCreator = function (configuration?: Configuration)
             };
         },
         /**
-         * [Experimental] Retrieve the status of a mint request identified by its reference_id
-         * @summary [Experimental] Get mint request by reference ID
+         * Retrieve the status of a mint request identified by its reference_id
+         * @summary Get mint request by reference ID
          * @param {string} contractAddress The address of contract
          * @param {string} chainName The name of chain
          * @param {string} referenceId The ID of the mint request
@@ -239,8 +239,8 @@ export const NftsApiAxiosParamCreator = function (configuration?: Configuration)
             };
         },
         /**
-         * [Experimental] Retrieve the status of all mints for a given contract address
-         * @summary [Experimental] List mint requests
+         * Retrieve the status of all mints for a given contract address
+         * @summary List mint requests
          * @param {string} contractAddress The address of contract
          * @param {string} chainName The name of chain
          * @param {string} [pageCursor] Encoded page cursor to retrieve previous or next page. Use the value returned in the response.
@@ -418,8 +418,8 @@ export const NftsApiFp = function(configuration?: Configuration) {
     const localVarAxiosParamCreator = NftsApiAxiosParamCreator(configuration)
     return {
         /**
-         * [Experimental] Create a mint request to mint a set of NFTs for a given collection
-         * @summary [Experimental] Mint NFTs
+         * Create a mint request to mint a set of NFTs for a given collection
+         * @summary Mint NFTs
          * @param {string} contractAddress The address of contract
          * @param {string} chainName The name of chain
          * @param {CreateMintRequestRequest} createMintRequestRequest the request body
@@ -431,8 +431,8 @@ export const NftsApiFp = function(configuration?: Configuration) {
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
         /**
-         * [Experimental] Retrieve the status of a mint request identified by its reference_id
-         * @summary [Experimental] Get mint request by reference ID
+         * Retrieve the status of a mint request identified by its reference_id
+         * @summary Get mint request by reference ID
          * @param {string} contractAddress The address of contract
          * @param {string} chainName The name of chain
          * @param {string} referenceId The ID of the mint request
@@ -471,8 +471,8 @@ export const NftsApiFp = function(configuration?: Configuration) {
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
         /**
-         * [Experimental] Retrieve the status of all mints for a given contract address
-         * @summary [Experimental] List mint requests
+         * Retrieve the status of all mints for a given contract address
+         * @summary List mint requests
          * @param {string} contractAddress The address of contract
          * @param {string} chainName The name of chain
          * @param {string} [pageCursor] Encoded page cursor to retrieve previous or next page. Use the value returned in the response.
@@ -527,8 +527,8 @@ export const NftsApiFactory = function (configuration?: Configuration, basePath?
     const localVarFp = NftsApiFp(configuration)
     return {
         /**
-         * [Experimental] Create a mint request to mint a set of NFTs for a given collection
-         * @summary [Experimental] Mint NFTs
+         * Create a mint request to mint a set of NFTs for a given collection
+         * @summary Mint NFTs
          * @param {NftsApiCreateMintRequestRequest} requestParameters Request parameters.
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
@@ -537,8 +537,8 @@ export const NftsApiFactory = function (configuration?: Configuration, basePath?
             return localVarFp.createMintRequest(requestParameters.contractAddress, requestParameters.chainName, requestParameters.createMintRequestRequest, options).then((request) => request(axios, basePath));
         },
         /**
-         * [Experimental] Retrieve the status of a mint request identified by its reference_id
-         * @summary [Experimental] Get mint request by reference ID
+         * Retrieve the status of a mint request identified by its reference_id
+         * @summary Get mint request by reference ID
          * @param {NftsApiGetMintRequestRequest} requestParameters Request parameters.
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
@@ -567,8 +567,8 @@ export const NftsApiFactory = function (configuration?: Configuration, basePath?
             return localVarFp.listAllNFTs(requestParameters.chainName, requestParameters.fromUpdatedAt, requestParameters.pageCursor, requestParameters.pageSize, options).then((request) => request(axios, basePath));
         },
         /**
-         * [Experimental] Retrieve the status of all mints for a given contract address
-         * @summary [Experimental] List mint requests
+         * Retrieve the status of all mints for a given contract address
+         * @summary List mint requests
          * @param {NftsApiListMintRequestsRequest} requestParameters Request parameters.
          * @param {*} [options] Override http request option.
          * @throws {RequiredError}
@@ -859,8 +859,8 @@ export interface NftsApiListNFTsByAccountAddressRequest {
  */
 export class NftsApi extends BaseAPI {
     /**
-     * [Experimental] Create a mint request to mint a set of NFTs for a given collection
-     * @summary [Experimental] Mint NFTs
+     * Create a mint request to mint a set of NFTs for a given collection
+     * @summary Mint NFTs
      * @param {NftsApiCreateMintRequestRequest} requestParameters Request parameters.
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
@@ -871,8 +871,8 @@ export class NftsApi extends BaseAPI {
     }
 
     /**
-     * [Experimental] Retrieve the status of a mint request identified by its reference_id
-     * @summary [Experimental] Get mint request by reference ID
+     * Retrieve the status of a mint request identified by its reference_id
+     * @summary Get mint request by reference ID
      * @param {NftsApiGetMintRequestRequest} requestParameters Request parameters.
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}
@@ -907,8 +907,8 @@ export class NftsApi extends BaseAPI {
     }
 
     /**
-     * [Experimental] Retrieve the status of all mints for a given contract address
-     * @summary [Experimental] List mint requests
+     * Retrieve the status of all mints for a given contract address
+     * @summary List mint requests
      * @param {NftsApiListMintRequestsRequest} requestParameters Request parameters.
      * @param {*} [options] Override http request option.
      * @throws {RequiredError}