refine showing error

Author: zaidarain1

packages/checkout/widgets-lib/src/components/UnableToConnectDrawer/UnableToConnectDrawer.tsx

@@ -17,14 +17,12 @@ export interface UnableToConnectDrawerProps {
   checkout: Checkout;
   onCloseDrawer: () => void;
   onTryAgain?: () => void;
-  message?: string;
 }
 export function UnableToConnectDrawer({
   visible,
   checkout,
   onCloseDrawer,
   onTryAgain,
-  message,
 }: UnableToConnectDrawerProps) {
   const { t } = useTranslation();
 
@@ -104,7 +102,7 @@ export function UnableToConnectDrawer({
                 paddingX: 'base.spacing.x6',
               }}
             >
-              {message ?? t('drawers.walletConnectionError.unableToConnect.body')}
+              {t('drawers.walletConnectionError.unableToConnect.body')}
             </Body>
           </Box>
         </Box>

packages/checkout/widgets-lib/src/locales/en.json

@@ -1218,11 +1218,6 @@
         "body": "Check your wallet and try again, or close and try a different option",
         "actionButtonText": "Try again"
       },
-      "passportProviderError": {
-        "heading": "Unable to connect",
-        "body": "Have you called `await passport.connectEvm()` to initialize the passport provider?",
-        "actionButtonText": "Try again"
-      },
       "changedYourMind": {
         "heading": "Changed your mind?",
         "body": "Make sure pop ups are enabled and follow the prompts in your wallet to connect",

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

@@ -80,10 +80,7 @@ export function WalletList(props: WalletListProps) {
   const { isWalletConnectEnabled, openWalletConnectModal } = useWalletConnect();
   const walletConnectItemRef = useRef(null);
   const [showChangedYourMindDrawer, setShowChangedYourMindDrawer] = useState(false);
-  const [unableToConnectDrawerState, setUnableToConnectDrawerState] = useState({
-    visible: false,
-    message: undefined as string | undefined,
-  });
+  const [showUnableToConnectDrawer, setShowUnableToConnectDrawer] = useState(false);
   const [showNonPassportWarning, setShowNonPassportWarning] = useState(false);
   const [chosenProviderDetail, setChosenProviderDetail] = useState<EIP6963ProviderDetail>();
 
@@ -204,22 +201,21 @@ export function WalletList(props: WalletListProps) {
             // eslint-disable-next-line no-console
             console.error('Connect error', err);
 
-            setUnableToConnectDrawerState({ visible: true, message: undefined });
+            setShowUnableToConnectDrawer(true);
           }
         }
       } catch (err: any) {
         if (
           isError(err, 'INVALID_ARGUMENT')
           && err.message.includes('value={ "ethereumProvider": { "isPassport": true } }')) {
-          setUnableToConnectDrawerState({
-            visible: true,
-            message: t('drawers.walletConnectionError.passportProviderError.body'),
-          });
-          return;
+          // eslint-disable-next-line no-console
+          console.error('Invalid type', 'Unable to connect to the Passport provider');
         }
+
         // eslint-disable-next-line no-console
         console.error('Connect unknown error', err);
-        setUnableToConnectDrawerState({ visible: true, message: undefined });
+
+        setShowUnableToConnectDrawer(true);
       }
     },
     [checkout],
@@ -300,7 +296,7 @@ export function WalletList(props: WalletListProps) {
       }
 
       setShowChangedYourMindDrawer(false);
-      setUnableToConnectDrawerState({ visible: false, message: undefined });
+      setShowUnableToConnectDrawer(false);
       setChosenProviderDetail(providerDetail);
       track({
         userJourney: UserJourney.CONNECT,
@@ -456,15 +452,10 @@ export function WalletList(props: WalletListProps) {
       />
 
       <UnableToConnectDrawer
-        visible={unableToConnectDrawerState.visible}
+        visible={showUnableToConnectDrawer}
         checkout={checkout!}
-        onCloseDrawer={() => {
-          setUnableToConnectDrawerState({ visible: false, message: undefined });
-        }}
-        onTryAgain={() => {
-          setUnableToConnectDrawerState({ visible: false, message: undefined });
-        }}
-        message={unableToConnectDrawerState.message}
+        onCloseDrawer={() => setShowUnableToConnectDrawer(false)}
+        onTryAgain={() => setShowUnableToConnectDrawer(false)}
       />
 
       <NonPassportWarningDrawer