-
Wallet connected!
-
- Now that you connected your wallet, you need to run through a little
- authentication process, it wont take much and only needs a signature
+
Wallet connected!
+
+ Your wallet is connected you can now create an account by minting a
+ Masa Soulbound Identity and Masa Soulname!
+
+
+
+ You are connected with the following wallet
+ {shortAddress}
-
diff --git a/src/common/components/masa-interface/pages/connected/index.tsx b/src/common/components/masa-interface/pages/connected/index.tsx
index ec23db36..b6a216e9 100644
--- a/src/common/components/masa-interface/pages/connected/index.tsx
+++ b/src/common/components/masa-interface/pages/connected/index.tsx
@@ -1,50 +1,24 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect } from 'react';
import { useMasa } from '../../../../helpers/provider/use-masa';
import { MasaLoading } from '../../../masa-loading';
+import { Spinner } from '../../../spinner';
export const InterfaceConnected = () => {
- const {
- handleLogout,
- closeModal,
- company,
- soulnames,
- loadSoulnames,
- loading,
- } = useMasa();
+ const { company, loading, closeModal } = useMasa();
useEffect(() => {
- loadSoulnames?.();
- }, [loadSoulnames]);
-
- const name = useMemo(() => {
- if (soulnames?.length) {
- return soulnames[0].tokenDetails.sbtName;
- } else {
- return null;
- }
- }, [soulnames]);
+ setTimeout(() => {
+ closeModal?.();
+ }, 3000);
+ }, []);
if (loading) return
;
return (
-
- Hello{name ? ', ' : '!'} {name}
-
-
- Woo hoo!
-
you have successfully connected your wallet.
-
-
-
-
-
+
We are taking you to {company}
+
+
);
diff --git a/src/common/components/masa-interface/pages/connector/index.tsx b/src/common/components/masa-interface/pages/connector/index.tsx
index db919c4a..bf14bd0a 100644
--- a/src/common/components/masa-interface/pages/connector/index.tsx
+++ b/src/common/components/masa-interface/pages/connector/index.tsx
@@ -7,7 +7,7 @@ export const InterfaceConnector = ({ disable }: { disable?: boolean }) => {
return (
-
Select a wallet
+
Select a wallet
By connecting your wallet, you agree to our Terms of Service{' '}
and Privacy Policy
diff --git a/src/common/components/masa-loading/index.tsx b/src/common/components/masa-loading/index.tsx
index b7217463..1aceaced 100644
--- a/src/common/components/masa-loading/index.tsx
+++ b/src/common/components/masa-loading/index.tsx
@@ -1,9 +1,10 @@
import React from 'react';
+import { Spinner } from '../spinner';
export const MasaLoading = () => {
return (
);
};
diff --git a/src/common/components/modal/index.tsx b/src/common/components/modal/index.tsx
index 6ffa50e7..df005986 100644
--- a/src/common/components/modal/index.tsx
+++ b/src/common/components/modal/index.tsx
@@ -13,7 +13,8 @@ export interface ModalProps {
export const ModalComponent = ({ children, open, close }: ModalProps) => {
return (
close()}
className="masa-rodal-container"
diff --git a/src/common/components/modal/styles.scss b/src/common/components/modal/styles.scss
index 5073d72f..8ff4637d 100644
--- a/src/common/components/modal/styles.scss
+++ b/src/common/components/modal/styles.scss
@@ -4,13 +4,15 @@
justify-content: center;
align-items: center;
+ border-radius: 24px;
}
.masa-modal {
display: flex;
flex-direction: column;
align-items: flex-start;
+ box-sizing: border-box;
- padding-top: 1em;
+ padding: 1.2em;
width: 100%;
height: 100%;
@@ -71,7 +73,10 @@
flex-direction: row;
justify-content: center;
- padding-top: 2em;
+ text-align: center;
+ p {
+ font-size: 16px;
+ }
}
.masa-input {
@@ -82,6 +87,11 @@
padding: 1em 1.2em;
}
+ .authenticate-button {
+ margin: 20px 0;
+ font-weight: 500;
+ }
+
.input-row {
display: flex;
flex-direction: row;
@@ -93,6 +103,7 @@
.spinner {
width: 100%;
+ height: 100%;
display: flex;
justify-content: center;
align-items: center;
@@ -114,6 +125,30 @@
padding-top: 0;
}
}
+
+ .interface-authenticate,
+ .interface-connected {
+ .title {
+ text-align: center;
+ }
+
+ .connected-wallet {
+ text-align: center;
+ font-size: 18px;
+ color: rgba(0, 0, 0, 0.6);
+
+ &.with-wallet {
+ margin-top: 64px;
+ display: flex;
+ flex-direction: column;
+ span {
+ margin-top: 12px;
+ font-weight: 800;
+ color: #5987a6;
+ }
+ }
+ }
+ }
}
// RODAL STYLES
@@ -148,7 +183,7 @@
z-index: 101;
padding: 15px;
background: #fff;
- border-radius: 3px;
+ border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
diff --git a/src/common/components/spinner/index.ts b/src/common/components/spinner/index.ts
new file mode 100644
index 00000000..b2a4e980
--- /dev/null
+++ b/src/common/components/spinner/index.ts
@@ -0,0 +1 @@
+export { Spinner } from './spinner';
diff --git a/src/common/components/spinner/spinner.tsx b/src/common/components/spinner/spinner.tsx
new file mode 100644
index 00000000..528e427f
--- /dev/null
+++ b/src/common/components/spinner/spinner.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import MoonLoader from 'react-spinners/MoonLoader';
+
+export interface SpinnerProps {
+ /** Spinner color */
+ color?: string;
+}
+
+export function Spinner({ color = '#000' }: SpinnerProps) {
+ return (
+
+
+
+ );
+}
diff --git a/src/common/helpers/masa/index.ts b/src/common/helpers/masa/index.ts
index d4d93fe0..e42cf968 100644
--- a/src/common/helpers/masa/index.ts
+++ b/src/common/helpers/masa/index.ts
@@ -2,6 +2,25 @@ import { environments, Masa } from '@masa-finance/masa-sdk';
import { ethers, Wallet } from 'ethers';
import { ArweaveConfig } from '../provider/masa-context';
+const getChainName = (chainId) => {
+ switch (chainId) {
+ case 1:
+ return 'mainnet';
+ case 5:
+ return 'goerli';
+ case 44787:
+ return 'alfajores';
+ case 42220:
+ return 'celo';
+ case 137:
+ return 'polygon';
+ case 80001:
+ return 'mumbai';
+
+ default:
+ return 'goerli';
+ }
+};
export const createRandomWallet = (): Wallet | null => {
console.info('Creating random wallet!');
const wallet = ethers.Wallet.createRandom();
@@ -37,6 +56,7 @@ export const createNewMasa = (
cookie: cookie || undefined,
wallet: signer,
apiUrl: environment.apiUrl,
+ defaultNetwork: getChainName(signer?.provider?._network?.chainId ?? 5),
environment: environment.environment,
arweave: {
host: arweaveConfig?.host || 'arweave.net',
diff --git a/src/common/helpers/provider/masa-context.tsx b/src/common/helpers/provider/masa-context.tsx
index 56fdf8fc..b1d68559 100644
--- a/src/common/helpers/provider/masa-context.tsx
+++ b/src/common/helpers/provider/masa-context.tsx
@@ -91,12 +91,15 @@ export const MasaContextProvider = ({
masaInstance,
provider
);
+
const {
identity,
handlePurchaseIdentity,
isLoading: identityLoading,
} = useIdentity(masaInstance, walletAddress);
+
const { soulnames } = useSoulnames(masaInstance, walletAddress, identity);
+
const {
creditScores,
isLoading: creditScoreLoading,
@@ -176,7 +179,7 @@ export const MasaContextProvider = ({
setMasaInstance(null);
}
}
- }, [provider, noWallet]);
+ }, [provider, noWallet, walletAddress]);
const context = {
setProvider,
diff --git a/src/common/helpers/provider/modules/identity/identity.ts b/src/common/helpers/provider/modules/identity/identity.ts
index cabb60d4..388c3760 100644
--- a/src/common/helpers/provider/modules/identity/identity.ts
+++ b/src/common/helpers/provider/modules/identity/identity.ts
@@ -6,8 +6,11 @@ export const useIdentity = (masa, walletAddress) => {
const { data, status, isLoading, error } = useQuery(
`identity-${walletAddress}`,
() => masa.identity.load(walletAddress),
- { enabled: !!masa && !!walletAddress }
+ {
+ enabled: !!masa && !!walletAddress,
+ }
);
+ console.log('IDENTITYU', { data, error, ENABLED: !!masa && !!walletAddress });
const handlePurchaseIdentity = useCallback(async () => {
await masa?.identity.create();
diff --git a/src/common/helpers/provider/use-metamask.ts b/src/common/helpers/provider/use-metamask.ts
index b5c5fdfd..8baf4a5c 100644
--- a/src/common/helpers/provider/use-metamask.ts
+++ b/src/common/helpers/provider/use-metamask.ts
@@ -4,7 +4,7 @@ import { queryClient } from './masa-query-client';
import { useMasa } from './use-masa';
export const useMetamask = ({ disable }: { disable?: boolean }) => {
- const { setProvider, setMissingProvider, masa } = useMasa();
+ const { setProvider, setMissingProvider, handleLogout } = useMasa();
const provider = useMemo(() => {
if (typeof window !== 'undefined') {
@@ -71,12 +71,8 @@ export const useMetamask = ({ disable }: { disable?: boolean }) => {
localStorage.setItem('isWalletConnected', 'true');
};
- const handleLogout = useCallback(async () => {
- await masa?.session.logout();
- }, [masa]);
-
const disconnect = useCallback(async () => {
- await handleLogout();
+ await handleLogout?.();
localStorage.setItem('isWalletConnected', 'false');
setProvider?.(null);
}, [handleLogout, setProvider]);
@@ -87,11 +83,27 @@ export const useMetamask = ({ disable }: { disable?: boolean }) => {
window?.ethereum?.on('accountsChanged', async (accounts) => {
if (accounts.length === 0) {
setProvider?.(null);
- await handleLogout();
+ await handleLogout?.();
await disconnect();
queryClient.invalidateQueries('wallet');
}
});
+
+ //@ts-ignore
+ window?.ethereum?.on('networkChanged', async (accounts) => {
+ //@ts-ignore
+ const newProvider = new ethers.providers.Web3Provider(window?.ethereum);
+ if (newProvider) {
+ await newProvider.send('eth_requestAccounts', []);
+
+ await accountChangedHandler(newProvider.getSigner(0));
+ if (newProvider && setProvider) {
+ setProvider(newProvider.getSigner(0));
+ onConnect();
+ }
+ queryClient.invalidateQueries('wallet');
+ }
+ });
}
}, [handleLogout, disconnect, setProvider]);
diff --git a/stories/masa.stories.tsx b/stories/masa.stories.tsx
index 670034d1..c6c754af 100644
--- a/stories/masa.stories.tsx
+++ b/stories/masa.stories.tsx
@@ -37,7 +37,7 @@ const Component = (props) => {
const handleConect = useCallback(() => {
connect?.({
- scope: ['identity'],
+ scope: [],
callback: function () {
alert('hello hello connected');
},
@@ -48,9 +48,6 @@ const Component = (props) => {
queryClient.invalidateQueries('wallet');
};
- const create2FACode = () => {
- handleGenerateGreen?.('+59895485057');
- };
const mintGreen = async () => {
// todo
};
@@ -62,7 +59,6 @@ const Component = (props) => {
-
{loggedIn && }
);
@@ -71,7 +67,7 @@ const Component = (props) => {
const Template: Story = (props) => {
return (
<>
-
+
diff --git a/styles.scss b/styles.scss
index e27d3ccd..b7574fa2 100644
--- a/styles.scss
+++ b/styles.scss
@@ -71,22 +71,36 @@
font-size: 14px;
}
+ .title {
+ font-family: Ezra;
+ font-size: 30px;
+ }
+
+ .masa-spinner {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
.masa-button {
width: 100%;
background: black;
color: white;
text-align: center;
- padding: 1em 1.2em;
+ padding: 1.5em 1.2em;
height: auto;
border: none;
transition: background 120ms ease-in-out;
+ border-radius: 4px;
&:hover {
- background: #000000CC;
+ background: #000000cc;
}
}
}
diff --git a/yarn.lock b/yarn.lock
index e595330f..689f0603 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13372,6 +13372,11 @@ react-shallow-renderer@^16.15.0:
object-assign "^4.1.1"
react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
+react-spinners@^0.13.8:
+ version "0.13.8"
+ resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.8.tgz#5262571be0f745d86bbd49a1e6b49f9f9cb19acc"
+ integrity sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==
+
react-syntax-highlighter@^11.0.2:
version "11.0.3"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-11.0.3.tgz#de639b97b781c3f7056d1ee7b6573ea8ab741460"