Skip to content

Commit 88ec66b

Browse files
nicolastmaianicolastmaia
committed
feat: referral program frontend
1 parent b6aef3c commit 88ec66b

File tree

3 files changed

+159
-14
lines changed

3 files changed

+159
-14
lines changed

‎src/components/AccountList/ReferralProgram.tsx‎

Lines changed: 124 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,138 @@
1-
import { useState } from 'react'
1+
import { useState } from 'react';
2+
import './index.css';
3+
import Separator from '../Separator';
4+
import CopyAccountInfo from './CopyAccountInfo';
5+
import { useDaemonContext } from '../../providers/DaemonProvider';
6+
import Skeleton from '../Skeleton';
27

3-
import "./index.css";
8+
import { ReactComponent as ConetToken } from './assets/conet-token.svg';
9+
import { ReactComponent as ConetEthToken } from './assets/conet-eth-token.svg';
10+
import { ReactComponent as SolanaToken } from './assets/solana-token.svg';
11+
import { ReactComponent as SpToken } from './assets/sp-token.svg';
12+
import PassportInfo from '../PassportInfo';
13+
import SelectActivePassportPopup from '../SelectActivePassportPopup';
14+
import { refreshSolanaBalances, storeSystemData } from '../../services/wallets';
15+
import { CoNET_Data } from '../../utils/globals';
16+
import { useNavigate } from 'react-router-dom';
17+
import { ethers } from 'ethers';
18+
19+
import { ReactComponent as VisibilityOnIcon } from "./assets/visibility-on.svg";
20+
import { ReactComponent as VisibilityOffIcon } from "./assets/visibility-off.svg";
421

522
export default function ReferralProgram() {
6-
const [isOpen, setIsOpen] = useState<boolean>(false);
7-
const [walletAddress, setWalletAddress] = useState('');
23+
const [openAccountList, setOpenAccountList] = useState<string[]>([]);
24+
const { profiles, activePassport, setProfiles, randomSolanaRPC, getAllNodes } = useDaemonContext();
25+
26+
const [mainAccountAddressCopied, setMainAccountAddressCopied] = useState(false);
27+
const [solanaAccountAddressCopied, setSolanaAccountAddressCopied] = useState(false);
28+
const [passportToChange, setPassportToChange] = useState();
29+
const [isRefreshingSolanaBalances, setIsRefreshingSolanaBalances] = useState(false);
30+
const [isAddressHidden, setIsAddressHidden] = useState(true);
31+
const [copied, setCopied] = useState(false);
32+
33+
const { isSelectPassportPopupOpen, setIsSelectPassportPopupOpen } = useDaemonContext();
34+
35+
function toggleAccount(accountAddress: string) {
36+
setOpenAccountList((prev) => (
37+
prev.includes(accountAddress) ? prev.filter((item) => item !== accountAddress) : [...prev, accountAddress]
38+
))
39+
}
40+
41+
function handleCopy() {
42+
navigator.clipboard.writeText(profiles?.[0]?.keyID);
43+
setCopied(true)
44+
45+
setTimeout(() => {
46+
setCopied(false)
47+
}, 2000)
48+
}
49+
50+
const getAddress = (wallet: any) => {
51+
return ethers.getAddress(wallet?.keyID).slice(0, 7) + '...' + ethers.getAddress(wallet?.keyID).slice(-5);
52+
}
853

954
return (
10-
<div className={`account-wrapper referral-program ${isOpen ? 'active' : ''}`}>
11-
{/* <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}> */}
12-
<div className="disabled account-main-card">
13-
<div>
55+
<div className={`account-wrapper ${openAccountList.includes(profiles?.[0]?.keyID) ? 'active' : ''}`}>
56+
<div className="account-main-card" onClick={() => toggleAccount(profiles?.[0]?.keyID)}>
57+
<div className="name">
1458
<h3>Referral Program</h3>
15-
<img className="chevron" src="./assets/right-chevron.svg" />
59+
<img height='16px' width='16px' className="chevron" src="./assets/right-chevron.svg" />
1660
</div>
1761
</div>
62+
1863
<div className="info-card">
64+
<div className="copy-div">
65+
{profiles?.[0]?.keyID ?
66+
<>
67+
<div className="copy-text">
68+
<p>Wallet Address</p>
69+
{
70+
isAddressHidden ?
71+
<div style={{ filter: 'blur(3px)' }}>
72+
<span>{getAddress(profiles[0])}
73+
</span>
74+
</div>
75+
:
76+
<span>{getAddress(profiles[0])}
77+
</span>
78+
}
79+
</div>
80+
<div className="button-list">
81+
<button onClick={() => handleCopy()}>
82+
{
83+
copied ? (
84+
<img src="/assets/check.svg" alt="Copy icon" />
85+
) : (
86+
<img src="/assets/copy-purple.svg" alt="Copy icon" />
87+
)
88+
}
89+
</button>
90+
<button className={isAddressHidden ? "hidden" : ""} onClick={() => setIsAddressHidden((prev) => !prev)}>
91+
{
92+
isAddressHidden ? <VisibilityOffIcon /> : <VisibilityOnIcon />
93+
}
94+
</button>
95+
</div>
96+
</>
97+
: <Skeleton width='100%' height='20px' />
98+
}
99+
</div>
100+
101+
<Separator />
102+
19103
<div className="info-wrapper">
20-
<div>
21-
<p>Input you inviter wallet address</p>
22-
<input value={walletAddress} onChange={(e) => setWalletAddress(e.target.value)} placeholder="wallet address" />
104+
<div className='token-assets-title'>
105+
<p className='title'>Rewards</p>
106+
</div>
107+
<div style={{ marginLeft: '16px' }}>
108+
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
109+
<p>Referees</p>
110+
</div>
111+
<p>{100}</p>
112+
</div>
113+
<div style={{ marginLeft: '16px' }}>
114+
<div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
115+
<p>$SP</p>
116+
</div>
117+
<p>{100.0006453}</p>
118+
</div>
119+
</div>
120+
121+
<Separator />
122+
123+
<div className="info-wrapper" style={{ maxHeight: '200px', overflowY: 'auto', }}>
124+
<p>History</p>
125+
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', width: '100%', paddingLeft: '16px' }}>
126+
{(profiles?.[0]?.silentPassPassports && profiles?.[0]?.activePassport)
127+
?
128+
(
129+
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%', gap: '8px' }}>
130+
<p style={{ width: 'auto', fontSize: '16px', color: '#989899', fontWeight: 400 }}>{'0x628r9823u98u98sud9f8u'.slice(0, 5) + '...' + '0x628r9823u98u98sud9f8u'.slice(-5)}</p>
131+
<p style={{ width: 'auto', fontSize: '16px', color: '#9FBFE5FE', fontWeight: 400 }}>+ 10 $SP</p>
132+
</div>
133+
)
134+
: <Skeleton width={'100%'} height={'20px'} />}
23135
</div>
24-
<button><p>Confirm</p></button>
25136
</div>
26137
</div>
27138
</div>

‎src/components/AccountList/SpClub.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { useState } from 'react'
2+
3+
import "./index.css";
4+
5+
export default function SpClub() {
6+
const [isOpen, setIsOpen] = useState<boolean>(false);
7+
const [walletAddress, setWalletAddress] = useState('');
8+
9+
return (
10+
<div className={`account-wrapper referral-program ${isOpen ? 'active' : ''}`}>
11+
{/* <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}> */}
12+
<div className="disabled account-main-card">
13+
<div>
14+
<h3>Join SP Club</h3>
15+
<img className="chevron" src="./assets/right-chevron.svg" />
16+
</div>
17+
</div>
18+
<div className="info-card">
19+
<div className="info-wrapper">
20+
<div>
21+
<p>Input you inviter wallet address</p>
22+
<input value={walletAddress} onChange={(e) => setWalletAddress(e.target.value)} placeholder="wallet address" />
23+
</div>
24+
<button><p>Confirm</p></button>
25+
</div>
26+
</div>
27+
</div>
28+
)
29+
}

‎src/pages/Wallet/index.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
22
import Footer from '../../components/Footer';
33
import './index.css';
44
import AccountList from '../../components/AccountList';
5+
import SpClub from '../../components/AccountList/SpClub';
56
import ReferralProgram from '../../components/AccountList/ReferralProgram';
67

78
export default function Wallet() {
@@ -29,7 +30,11 @@ export default function Wallet() {
2930
</div>
3031
</div>
3132

32-
<ReferralProgram />
33+
<div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: '40px' }}>
34+
<SpClub />
35+
<ReferralProgram />
36+
</div>
37+
3338

3439
<Footer />
3540
</div>

0 commit comments

Comments
 (0)