Feature/no identity flow

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

@@ -60,7 +60,7 @@ export const MasaInterface = ({
     )
       return 'createSoulname';
 
-    if (!identity?.identityId && scope?.includes('identity'))
+    if (isLoggedIn && !identity?.identityId && scope?.includes('identity'))
       return 'createIdentity';
 
     if (identity && !creditScores?.length && scope?.includes('credit-score'))
@@ -86,6 +86,7 @@ export const MasaInterface = ({
         open={isModalOpen as boolean}
         close={(): void => closeModal?.()}
         setOpen={setModalOpen as (val: boolean) => void}
+        height={page === 'createIdentity' ? 340 : undefined}
       >
         {page === 'connector' ? pages[page]({ disableMetamask }) : pages[page]}
       </ModalComponent>

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

@@ -15,7 +15,10 @@ export const InterfaceConnector = ({
         <h3 className="title">Select a wallet</h3>
         <p>
           By connecting your wallet, you agree to our{' '}
-          <a href="/terms-and-conditions">Terms of Service</a> and{' '}
+          <a href="https://app.masa.finance/terms-and-conditions">
+            Terms of Service
+          </a>{' '}
+          and{' '}
           <a
             href="https://www.masa.finance/privacy-policy"
             target="_blank"

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

@@ -3,7 +3,7 @@ import { useMasa } from '../../../../provider';
 import { MasaLoading } from '../../../masa-loading';
 
 export const InterfaceCreateIdentity = (): JSX.Element => {
-  const { handlePurchaseIdentity, handleLogout, isLoading } = useMasa();
+  const { handlePurchaseIdentity, isLoading } = useMasa();
 
   const createIdentity = useCallback(async () => {
     await handlePurchaseIdentity?.();
@@ -13,22 +13,14 @@ export const InterfaceCreateIdentity = (): JSX.Element => {
 
   return (
     <div className="interface-create-identity">
-      <div>
-        <h3>It looks like you don't have an identity</h3>
-        <p>Create your identity to enable all its benefits</p>
-      </div>
-
-      <div>
-        <button className="masa-button" onClick={createIdentity}>
-          Create your identity!
-        </button>
-        <div
-          className="dont-have-a-wallet"
-          onClick={(): void => handleLogout?.()}
-        >
-          <p>I don't want to create an identity</p>
-        </div>
-      </div>
+      <h3 className="title">Hurray! 🎉</h3>
+      <p className="subtitle">
+        Congratulations you already have a Celo Domain Name in your wallet. You
+        must now mint a Celo Prosperity Passport.
+      </p>
+      <button className="masa-button" onClick={createIdentity}>
+        Get Prosperity Passport
+      </button>
     </div>
   );
 };

src/components/modal/modal.tsx

@@ -8,17 +8,19 @@ export interface ModalProps {
   open: boolean;
   setOpen: (val: boolean) => void;
   close: () => void;
+  height?: number;
 }
 
 export const ModalComponent = ({
   children,
   open,
   close,
+  height,
 }: ModalProps): JSX.Element => {
   return (
     <Rodal
       data-cy="closeMasaModal"
-      height={615}
+      height={height ? height : 615}
       width={550}
       visible={open}
       onClose={(): void => close()}

src/components/modal/styles.scss

@@ -282,6 +282,32 @@
     }
   }
 
+  .interface-create-identity {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+
+    h3 {
+      font-size: 30px;
+      margin-bottom: 0;
+    }
+
+    p {
+      font-size: 18px;
+      text-align: center;
+      line-height: 24px;
+      color: rgba(0, 0, 0, 0.6);
+    }
+
+    button {
+      width: fit-content;
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+  }
+
   .interface-authenticate,
   .interface-connected {
     .title {

src/provider/masa-context-provider.tsx

@@ -80,8 +80,7 @@ export const MasaContextProvider = ({
   // soul names
   const { soulnames, isSoulnamesLoading, reloadSoulnames } = useSoulnames(
     masaInstance,
-    walletAddress,
-    identity
+    walletAddress
   );
 
   // credit scores

src/provider/modules/soulnames/soulnames.ts

@@ -1,16 +1,11 @@
 import { useQuery } from 'react-query';
 import { Masa, PaymentMethod, SoulNameDetails } from '@masa-finance/masa-sdk';
-import { BigNumber } from 'ethers';
 import { useCallback, useMemo } from 'react';
 import { queryClient } from '../../masa-query-client';
 
 export const useSoulnames = (
   masa?: Masa,
-  walletAddress?: string,
-  identity?: {
-    identityId?: BigNumber | undefined;
-    address?: string | undefined;
-  }
+  walletAddress?: string
 ): {
   soulnames: SoulNameDetails[] | undefined;
   status: string;
@@ -38,7 +33,7 @@ export const useSoulnames = (
     queryKey,
     () => masa?.soulName.list(),
     {
-      enabled: !!masa && !!walletAddress && !!identity?.identityId,
+      enabled: !!masa && !!walletAddress,
       retry: false,
       onSuccess: (soulNames?: SoulNameDetails[]) => {
         if (masa?.config.verbose) {

stories/masa.stories.tsx

@@ -30,7 +30,7 @@ const Component = (): JSX.Element => {
 
   const handleConnect = useCallback(() => {
     connect?.({
-      scope: ['auth', 'soulname'],
+      scope: ['auth', 'soulname', 'identity'],
       callback: function () {
         alert('hello hello connected');
       },