Adding error modal and some CSS

src/components/masa-interface/masa-interface.tsx

@@ -9,6 +9,7 @@ import {
   InterfaceCreateIdentity,
 } from './pages';
 import { InterfaceCreateSoulname } from './pages/create-soulname';
+import { InterfaceErrorModal } from './pages/error-modal';
 import { InterfaceSuccessCreateIdentity } from './pages/success-create-identity';
 import { InterfaceSwitchChain } from './pages/switch-chain';
 
@@ -24,7 +25,7 @@ const pages = {
   connectedState: <InterfaceConnected />,
   authenticate: <InterfaceAuthenticate />,
   createCreditScore: <InterfaceCreateCreditScore />,
-  switchNetwork: <InterfaceSwitchChain />,
+  switchNetwork: <InterfaceSwitchChain />
 };
 
 export const MasaInterface = ({

src/components/masa-interface/pages/create-soulname/create-soulname.tsx

@@ -5,6 +5,12 @@ import { MasaLoading } from '../../../masa-loading';
 import { PaymentMethod } from '@masa-finance/masa-sdk';
 import { Spinner } from '../../../spinner';
 import { Select } from '../../../select';
+import { InterfaceErrorModal } from '../error-modal';
+
+const errorMessages = {
+  UNPREDICTABLE_GAS_LIMIT:
+    'You do not have sufficient funds in you wallet. Please add funds to your wallet and try again',
+};
 
 export const InterfaceCreateSoulname = (): JSX.Element => {
   const {
@@ -53,6 +59,10 @@ export const InterfaceCreateSoulname = (): JSX.Element => {
     return values;
   }, [masa, enabledMethods]);
 
+  const [error, setError] = useState<null | {
+    title: string;
+    subtitle: string;
+  }>(null);
   const [soulname, setSoulname] = useState<string>('');
   const [extension, setExtension] = useState<string>();
   const [loadingIsAvailable, setLoadingIsAvailable] = useState(false);
@@ -145,30 +155,36 @@ export const InterfaceCreateSoulname = (): JSX.Element => {
     setLoadingMint(true);
 
     try {
-      // do we have an identity yet?
-      identity?.identityId
-        ? // yes, only mint soul name
-          await masa?.soulName.create(
-            paymentMethod,
-            soulname,
-            registrationPeriod
-          )
-        : // nope, mint both
-          await handlePurchaseIdentityWithSoulname?.(
-            paymentMethod,
-            soulname,
-            registrationPeriod
-          );
+      if (identity && identity.identityId) {
+        await masa?.soulName.create(
+          paymentMethod,
+          soulname,
+          registrationPeriod
+        );
+      } else {
+        await handlePurchaseIdentityWithSoulname?.(
+          paymentMethod,
+          soulname,
+          registrationPeriod
+        );
+      }
 
       if (!forcedPage && setForcedPage) {
         reloadSoulnames?.();
         setForcedPage('successIdentityCreate');
       } else {
         closeModal?.(true);
       }
-    } catch (error) {
-      if (error instanceof Error) {
-        console.error(`Minting failed! ${error.message}`);
+    } catch (error: unknown) {
+      if (error) {
+        const errorObject = error as {
+          code: string;
+        };
+        setError({
+          title: '',
+          subtitle: errorMessages?.[errorObject.code] ?? 'Unknown error',
+        });
+        console.error(`Minting failed! ${errorObject.message}`);
       }
     }
     setLoadingMint(false);
@@ -213,6 +229,16 @@ export const InterfaceCreateSoulname = (): JSX.Element => {
       </div>
     );
 
+  if (error) {
+    return (
+      <InterfaceErrorModal
+        {...error}
+        handleComplete={() => setError(null)}
+        buttonText={'Try again'}
+      />
+    );
+  }
+
   return (
     <div className="interface-create-soulname">
       <div className="title-container">

src/components/masa-interface/pages/error-modal/error-modal.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useMasa } from '../../../../provider';
+import { MasaLoading } from '../../../masa-loading';
+
+export const InterfaceErrorModal = ({
+  title,
+  subtitle,
+  handleComplete,
+  buttonText
+}): JSX.Element => {
+  const { isLoading } = useMasa();
+
+  if (isLoading) return <MasaLoading />;
+
+  return (
+    <div className="interface-error-modal">
+      <h3 className="title">Whoops! 💸</h3>
+      <p className="subtitle">{subtitle}</p>
+      <button className="masa-button" onClick={handleComplete}>
+        {buttonText}
+      </button>
+    </div>
+  );
+};

src/components/masa-interface/pages/error-modal/index.ts

@@ -0,0 +1 @@
+export { InterfaceErrorModal } from './error-modal';

src/components/modal/styles.scss

@@ -283,6 +283,41 @@
     }
   }
 
+  .interface-error-modal {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+    height: 100%;
+
+    .subtitle {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 0;
+      color: rgba(0, 0, 0, 0.6);
+      font-family: Inter, 'Helvetica Neue';
+    }
+
+    h3 {
+      font-size: 30px;
+      margin: 0;
+    }
+
+    p {
+      font-size: 18px;
+      text-align: center;
+      line-height: 24px;
+      color: rgba(0, 0, 0, 0.6);
+      margin: 0;
+    }
+
+    button {
+      width: fit-content;
+      padding: 16px 64px;
+    }
+  }
   .interface-create-identity {
     display: flex;
     flex-direction: column;

src/provider/modules/soulnames/soulnames.ts

@@ -20,7 +20,7 @@ export const useSoulnames = (
     soulname: string,
     registrationPeriod: number,
     paymentMethod: PaymentMethod
-  ) => Promise<boolean>;
+  ) => Promise<boolean | any>;
   error: unknown;
 } => {
   const queryKey: (string | NetworkName | undefined)[] = useMemo(() => {
@@ -54,14 +54,20 @@ export const useSoulnames = (
       registrationPeriod: number,
       paymentMethod: PaymentMethod
     ) => {
-      const result = await masa?.soulName.create(
-        paymentMethod,
-        soulname,
-        registrationPeriod
-      );
-      await queryClient.invalidateQueries(['soulnames']);
+      try {
+        const result = await masa?.soulName.create(
+          paymentMethod,
+          soulname,
+          registrationPeriod
+        );
 
-      return !!result?.success;
+        await queryClient.invalidateQueries(['soulnames']);
+
+        return !!result?.success;
+      } catch (e: unknown) {
+        console.log('ERROR', e);
+        return { success: false, errorCode: 'error' };
+      }
     },
     [masa]
   );

stories/masa.stories.tsx

@@ -97,7 +97,7 @@ const Component = (): JSX.Element => {
 const Template: Story = (props: Args) => {
   return (
     <>
-      <MasaProvider company="Base" forceNetwork={'basegoerli'}>
+      <MasaProvider company="Celo" forceNetwork={'celo'} environmentName={"production" as any}>
         <Component {...props} />
       </MasaProvider>
     </>