diff --git a/package.json b/package.json index 46abe456..71c847d6 100644 --- 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 index 662ccf3b..d00644ec 100644 --- 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 index 972c5f02..802ae36f 100644 --- 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 ; return ( -
-
-

It looks like you don't have an identity

-

Create your identity to enable all its benefits

+
+

Hurray! 🎉

+

Congratulations you already have a Celo Domain Name in your wallet. You must now mint a Celo Prosperity Passport.

+
- -
- -
handleLogout?.()} - > -

I don't want to create an identity

-
-
-
); }; diff --git a/src/components/modal/styles.scss b/src/components/modal/styles.scss index 85dbe112..3f9de25a 100644 --- 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 index ae5c6465..1b011be9 100644 --- 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 index bc76dfda..027a0e78 100644 --- 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"