Skip to content

Commit 1588f19

Browse files
nicolastmaianicolastmaia
committed
feat (WIP): swap page
1 parent 7005936 commit 1588f19

23 files changed

+1156
-1
lines changed

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { CoNET_Data, setCoNET_Data } from "./utils/globals";
99
import { listenProfileVer } from "./services/listeners";
1010
import Vip from './pages/Vip';
1111
import Wallet from './pages/Wallet';
12+
import Swap from './pages/Swap';
1213
import Settings from './pages/Settings';
1314
import Languages from './pages/Languages';
1415
import Applications from './pages/Applications';
@@ -118,6 +119,7 @@ function App() {
118119
<Route path="/config-device" element={<ConfigDevice />}></Route>
119120
<Route path="/vip" element={<Vip />}></Route>
120121
<Route path="/wallet" element={<Wallet />}></Route>
122+
<Route path="/swap" element={<Swap />}></Route>
121123
<Route path="/settings" element={<Settings />}></Route>
122124
<Route path="/passcode/new" element={<Passcode new />}></Route>
123125
<Route path="/passcode/change" element={<Passcode />}></Route>

‎src/components/ActivityTab/assets/proxy-information.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/ActivityTab/index.css‎

Whitespace-only changes.

‎src/components/ActivityTab/index.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useState } from 'react';
2+
import './index.css';
3+
4+
export default function ActivityTab() {
5+
6+
return (
7+
<div>
8+
<p>Activity</p>
9+
<p>Activity</p>
10+
<p>Activity</p>
11+
<p>Activity</p>
12+
<p>Activity</p>
13+
<p>Activity</p>
14+
</div>
15+
)
16+
}

‎src/components/SwapInput/CopyAccountInfo.tsx‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import { useState } from 'react';
2+
import Separator from '../Separator';
3+
import { CoNET_Data } from '../../utils/globals';
4+
import Skeleton from '../Skeleton';
5+
6+
import { ReactComponent as VisibilityOnIcon } from "./assets/visibility-on.svg";
7+
import { ReactComponent as VisibilityOffIcon } from "./assets/visibility-off.svg";
8+
9+
let copyTimeoutId: NodeJS.Timeout;
10+
11+
export default function CopyAccountInfo({ wallet }: any) {
12+
const [copied, setCopied] = useState({
13+
address: "",
14+
info: "",
15+
});
16+
17+
const [isAddressHidden, setIsAddressHidden] = useState(true);
18+
const [isKeyHidden, setIsKeyHidden] = useState(true);
19+
const [isWordsHidden, setIsWordsHidden] = useState(true);
20+
21+
function handleCopy(info: string) {
22+
let value = '';
23+
24+
if (info === 'address')
25+
value = wallet.keyID
26+
else if (info === 'key')
27+
value = wallet.privateKeyArmor
28+
else if (info === 'words')
29+
value = CoNET_Data?.mnemonicPhrase || ''
30+
31+
navigator.clipboard.writeText(value);
32+
setCopied({ address: value, info });
33+
34+
if (copyTimeoutId)
35+
clearTimeout(copyTimeoutId)
36+
37+
copyTimeoutId = setTimeout(() => setCopied({
38+
address: '',
39+
info: '',
40+
}), 3000);
41+
}
42+
43+
return (
44+
<>
45+
<div className="copy-div">
46+
{wallet?.keyID ?
47+
<>
48+
<div className="copy-text">
49+
<p>Wallet Address</p>
50+
{
51+
isAddressHidden ?
52+
<div style={{ filter: 'blur(3px)' }}>
53+
<span>{wallet.keyID}</span>
54+
</div>
55+
:
56+
<span>{wallet.keyID}</span>
57+
}
58+
</div>
59+
<div className="button-list">
60+
<button onClick={() => handleCopy("address")}>
61+
{
62+
(copied.address === wallet?.keyID && copied.info === "address") ? (
63+
<img src="/assets/check.svg" alt="Copy icon" />
64+
) : (
65+
<img src="/assets/copy-purple.svg" alt="Copy icon" />
66+
)
67+
}
68+
</button>
69+
<button className={isAddressHidden ? "hidden" : ""} onClick={() => setIsAddressHidden((prev) => !prev)}>
70+
{
71+
isAddressHidden ? <VisibilityOffIcon /> : <VisibilityOnIcon />
72+
}
73+
</button>
74+
</div>
75+
</>
76+
: <Skeleton width='100%' height='20px' />
77+
}
78+
</div>
79+
<Separator />
80+
<div className="copy-div">
81+
{wallet?.privateKeyArmor ?
82+
<>
83+
<div className="copy-text">
84+
<p>Private Key</p>
85+
{
86+
isKeyHidden ?
87+
<div style={{ filter: 'blur(3px)' }}>
88+
<span>{wallet.privateKeyArmor}</span>
89+
</div>
90+
: <span>{wallet.privateKeyArmor}</span>
91+
}
92+
</div>
93+
<div className="button-list">
94+
<button onClick={() => handleCopy("key")}>
95+
{
96+
(copied.address === wallet?.privateKeyArmor && copied.info === "key") ? (
97+
<img src="/assets/check.svg" alt="Copy icon" />
98+
) : (
99+
<img src="/assets/copy-purple.svg" alt="Copy icon" />
100+
)
101+
}
102+
</button>
103+
<button className={isKeyHidden ? "hidden" : ""} onClick={() => setIsKeyHidden((prev) => !prev)}>
104+
{
105+
isKeyHidden ? <VisibilityOffIcon /> : <VisibilityOnIcon />
106+
}
107+
</button>
108+
</div>
109+
</>
110+
: <Skeleton width='100%' height='20px' />
111+
}
112+
</div>
113+
<Separator />
114+
<div className="copy-div">
115+
{CoNET_Data?.mnemonicPhrase ?
116+
<>
117+
<div className="copy-text">
118+
<p>Recovery Phrase</p>
119+
{
120+
isWordsHidden ?
121+
<div style={{ filter: 'blur(3px)' }}>
122+
<span>{CoNET_Data?.mnemonicPhrase || ''}</span>
123+
</div>
124+
:
125+
<span>{CoNET_Data?.mnemonicPhrase || ''}</span>
126+
}
127+
</div>
128+
<div className="button-list">
129+
<button onClick={() => handleCopy("words")}>
130+
{
131+
(copied.address === CoNET_Data?.mnemonicPhrase && copied.info === "words") ? (
132+
<img src="/assets/check.svg" alt="Copy icon" />
133+
) : (
134+
<img src="/assets/copy-purple.svg" alt="Copy icon" />
135+
)
136+
}
137+
</button>
138+
<button className={isWordsHidden ? "hidden" : ""} onClick={() => setIsWordsHidden((prev) => !prev)}>
139+
{
140+
isWordsHidden ? <VisibilityOffIcon /> : <VisibilityOnIcon />
141+
}
142+
</button>
143+
</div>
144+
</>
145+
: <Skeleton width='20px' height='20px' />
146+
}
147+
</div>
148+
</>
149+
)
150+
}

‎src/components/SwapInput/ReferralProgram.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 ReferralProgram() {
6+
const [isOpen, setIsOpen] = useState<boolean>(false);
7+
const [walletAddress, setWalletAddress] = useState('');
8+
9+
return (
10+
<div className={`disabled account-wrapper referral-program ${isOpen ? 'active' : ''}`}>
11+
{/* <div className="account-main-card" onClick={() => setIsOpen((prev) => !prev)}> */}
12+
<div className="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/components/SwapInput/assets/conet-eth-token.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎src/components/SwapInput/assets/conet-token.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎src/components/SwapInput/assets/eth-token.svg‎

Lines changed: 16 additions & 0 deletions
Loading

‎src/components/SwapInput/assets/solana-token.svg‎

Lines changed: 23 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)