/
authenticate.tsx
53 lines (49 loc) · 1.57 KB
/
authenticate.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React, { useMemo } from 'react';
import { useMasa } from '../../../../helpers';
import { Spinner } from '../../../spinner';
export const InterfaceAuthenticate = (): JSX.Element => {
const { handleLogin, walletAddress, identity, loading } = useMasa();
const hasIdentity = useMemo(() => {
return identity && identity?.identityId;
}, [identity]);
const shortAddress = useMemo(() => {
return `${walletAddress?.substring(0, 2)}...${walletAddress?.substring(
walletAddress.length - 4,
walletAddress.length - 1
)}`;
}, [walletAddress]);
if (loading) {
return <Spinner />;
}
return (
<div className="interface-authenticate">
<div>
<h3 className="title">Wallet connected!</h3>
<p className="connected-wallet">
Your wallet is connected you can now create an account by minting a
Masa Soulbound Identity and Masa Soulname!
</p>
<p className="connected-wallet with-wallet">
You are connected with the following wallet
<span>{shortAddress}</span>
</p>
</div>
<div>
<button
className="masa-button authenticate-button"
onClick={handleLogin}
>
{loading ? 'loading...' : hasIdentity ? 'Sign in' : 'Register'}
</button>
<div className="dont-have-a-wallet">
<a>
<p>
Want to use a different wallet? Close this window and disconnect
your wallet in Metamask to connect a new wallet
</p>
</a>
</div>
</div>
</div>
);
};