no identity flow, styling for hurray modal

masa-finance · Mar 2, 2023 · a4ad966 · a4ad966
1 parent d4dd6f2
commit a4ad966
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "react-spinners": "^0.13.8",
     "rodal": "^2.0.0",
     "storybook-addon-sass-postcss": "^0.1.3",
+    "storybrook": "^0.0.0",
     "tsconfig-paths-webpack-plugin": "^4.0.0"
   },
   "devDependencies": {

diff --git a/src/components/masa-interface/masa-interface.tsx b/src/components/masa-interface/masa-interface.tsx
@@ -52,15 +52,17 @@ export const MasaInterface = ({
 
     // if (network && !chain?.name.includes(network)) return 'switchNetwork';
     if (!isLoggedIn && provider) return 'authenticate';
+      console.log({soulnames})
 
-    if (
-      (!soulnames || (soulnames && soulnames.length === 0)) &&
-      scope?.includes('soulname')
-    )
+      if (!identity?.identityId && scope?.includes('identity'))
+          return 'createIdentity';
+
+      if (
+          (!soulnames || (soulnames && soulnames.length === 0)) &&
+          scope?.includes('soulname')
+      )
       return 'createSoulname';
 
-    if (!identity?.identityId && scope?.includes('identity'))
-      return 'createIdentity';
 
     if (identity && !creditScores?.length && scope?.includes('credit-score'))
       return 'createCreditScore';

diff --git a/src/components/masa-interface/pages/create-identity/create-identity.tsx b/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?.();
@@ -12,23 +12,12 @@ export const InterfaceCreateIdentity = (): JSX.Element => {
   if (isLoading) return <MasaLoading />;
 
   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 className="interface-create-identity flex items-center justify-center">
+          <h3>Hurray! 🎉</h3>
+          <p>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>
-
-      <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>
-    </div>
   );
 };
diff --git a/src/components/modal/styles.scss b/src/components/modal/styles.scss
@@ -282,6 +282,29 @@
     }
   }
 
+  .interface-create-identity {
+      justify-content: center;
+      align-items: center;
+      gap: 3rem;
+
+      h3 {
+          font-size: 30px;
+          margin-bottom: 0;
+      }
+
+      p {
+          font-size: 18px;
+          text-align: center;
+          line-height: 24px;
+      }
+
+      button {
+          width: fit-content;
+          padding-left: 2rem;
+          padding-right: 2rem;
+      }
+  }
+
   .interface-authenticate,
   .interface-connected {
     .title {

diff --git a/stories/masa.stories.tsx b/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');
       },

diff --git a/yarn.lock b/yarn.lock
@@ -13435,6 +13435,11 @@ storybook-addon-sass-postcss@^0.1.3:
     sass-loader "^10.2.0"
     style-loader "^1.3.0"
 
+storybrook@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/storybrook/-/storybrook-0.0.0.tgz#c481bbaf1bfdb9bdd6b32fd1bb7f6a154d3aa1ff"
+  integrity sha512-JV/Wj2CnBcO2YMdANO60emM14lGh7cU5e3l8I5uKCd8sXCmp53MEF2qOKSBxbiGpC945UXexv4h2s0P0msL5aA==
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"