Skip to content

Commit fd6fd47

Browse files
caiolima-stagecaiolima-stage
committed
feat: activity tab and ui adjustments
1 parent 672bbff commit fd6fd47

File tree

10 files changed

+271
-31
lines changed

10 files changed

+271
-31
lines changed

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

Lines changed: 23 additions & 0 deletions
Loading

‎src/components/ActivityTab/assets/sp-token.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/ActivityTab/index.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.activity-tab {
2+
display: flex;
3+
flex-direction: column;
4+
gap: 24px;
5+
6+
width: 100%;
7+
}
8+
9+
.activity {
10+
display: flex;
11+
flex-direction: column;
12+
gap: 8px;
13+
}
14+
15+
.negotiation {
16+
display: flex;
17+
padding: 6px 16px;
18+
justify-content: space-between;
19+
align-items: center;
20+
align-self: stretch;
21+
22+
border-radius: 16px;
23+
background: #191919;
24+
}
25+
26+
.negotiation-item {
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: center;
30+
align-items: flex-start;
31+
gap: 4px;
32+
}
33+
34+
.negotiation-item .span-label {
35+
color: #676768;
36+
}
37+
38+
.negotiation-item .detail {
39+
display: flex;
40+
align-items: center;
41+
gap: 8px;
42+
}
43+
44+
.main-p {
45+
width: fit-content;
46+
font-size: 16px;
47+
}

‎src/components/ActivityTab/index.tsx‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,43 @@
1-
import { useState } from 'react';
21
import './index.css';
2+
import { activityMock } from './mock';
3+
4+
import { ReactComponent as SolanaToken } from './assets/solana-token.svg';
5+
import { ReactComponent as SpToken } from './assets/sp-token.svg';
36

47
export default function ActivityTab() {
5-
8+
69
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>
10+
<div className="activity-tab">
11+
{
12+
activityMock.map((activity) => (
13+
<div className="activity">
14+
<p className="main-p">{activity.date}</p>
15+
{
16+
activity.negotiations.map((negotiation) => (
17+
<div className="negotiation">
18+
<div className="negotiation-item">
19+
<span className="span-label">You sent</span>
20+
<div className="detail">
21+
{ negotiation.sent.token === 'SP' ? <SpToken /> : <SolanaToken /> }
22+
<p className="main-p">{negotiation.sent.value}</p>
23+
<span className="span-label">${negotiation.sent.token}</span>
24+
</div>
25+
</div>
26+
27+
<div className="negotiation-item">
28+
<span className="span-label">You got</span>
29+
<div className="detail">
30+
{ negotiation.got.token === 'SP' ? <SpToken /> : <SolanaToken /> }
31+
<p className="main-p">{negotiation.got.value}</p>
32+
<span className="span-label">${negotiation.got.token}</span>
33+
</div>
34+
</div>
35+
</div>
36+
))
37+
}
38+
</div>
39+
))
40+
}
1441
</div>
1542
)
1643
}

‎src/components/ActivityTab/mock.tsx‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
export const activityMock = [
2+
{
3+
date: '24/02/2025 - 17:09',
4+
negotiations: [
5+
{
6+
sent: {
7+
token: 'SP',
8+
value: '132.890474',
9+
},
10+
got: {
11+
token: 'SOL',
12+
value: '3.780024',
13+
}
14+
},
15+
{
16+
sent: {
17+
token: 'SOL',
18+
value: '3.780024',
19+
},
20+
got: {
21+
token: 'SP',
22+
value: '132.890474',
23+
}
24+
},
25+
{
26+
sent: {
27+
token: 'SP',
28+
value: '132.890474',
29+
},
30+
got: {
31+
token: 'SOL',
32+
value: '3.780024',
33+
}
34+
}
35+
]
36+
},
37+
{
38+
date: '17/02/2025 - 10:25',
39+
negotiations: [
40+
{
41+
sent: {
42+
token: 'SP',
43+
value: '132.890474',
44+
},
45+
got: {
46+
token: 'SOL',
47+
value: '3.780024',
48+
}
49+
},
50+
{
51+
sent: {
52+
token: 'SOL',
53+
value: '3.780024',
54+
},
55+
got: {
56+
token: 'SP',
57+
value: '132.890474',
58+
}
59+
},
60+
{
61+
sent: {
62+
token: 'SP',
63+
value: '132.890474',
64+
},
65+
got: {
66+
token: 'SOL',
67+
value: '3.780024',
68+
}
69+
}
70+
]
71+
},
72+
{
73+
date: '17/02/2025 - 10:25',
74+
negotiations: [
75+
{
76+
sent: {
77+
token: 'SP',
78+
value: '132.890474',
79+
},
80+
got: {
81+
token: 'SOL',
82+
value: '3.780024',
83+
}
84+
},
85+
{
86+
sent: {
87+
token: 'SP',
88+
value: '132.890474',
89+
},
90+
got: {
91+
token: 'SOL',
92+
value: '3.780024',
93+
}
94+
},
95+
{
96+
sent: {
97+
token: 'SOL',
98+
value: '3.780024',
99+
},
100+
got: {
101+
token: 'SP',
102+
value: '132.890474',
103+
}
104+
}
105+
]
106+
},
107+
];

‎src/components/Menu/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { ReactComponent as SupportIconGrey } from "./assets/support-icon-grey.sv
1111
import { ReactComponent as SupportIconBlue } from "./assets/support-icon-blue.svg"
1212
import { ReactComponent as SwapBlueIcon } from "./assets/swap-icon-blue.svg"
1313
import { ReactComponent as SwapIconGrey } from "./assets/swap-icon-grey.svg"
14-
import { ReactComponent as SwapIconDisabled } from "./assets/swap-icon-disabled.svg"
1514

1615
export default function Menu() {
1716
const navigate = useNavigate();
@@ -27,8 +26,8 @@ export default function Menu() {
2726
{location.pathname === "/wallet" ? <WalletBlueIcon /> : <WalletIconGrey />}
2827
<p>My Account</p>
2928
</button>
30-
<button disabled style={{ cursor: 'not-allowed' }}>
31-
<SwapIconDisabled />
29+
<button className={location.pathname === "/swap" ? "active" : ""} onClick={() => navigate("/swap")}>
30+
{location.pathname === "/settings" ? <SwapBlueIcon /> : <SwapIconGrey />}
3231
<p style={{ color: '#5a5a5afe' }}>Swap</p>
3332
</button>
3433
<button className={location.pathname === "/settings" ? "active" : ""} onClick={() => navigate("/settings")}>

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

Lines changed: 23 additions & 0 deletions
Loading

‎src/components/TokenTab/assets/sp-token.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/components/TokenTab/index.css‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,62 +6,62 @@
66
background: #1a1a1a;
77
width: 100%;
88
}
9-
9+
1010
.token-card {
1111
display: flex;
1212
justify-content: space-between;
1313
align-items: center;
14-
14+
1515
padding: 15px;
1616
width: 100%;
1717
}
18-
18+
1919
.token-info {
2020
display: flex;
2121
align-items: center;
2222
gap: 10px;
2323
}
24-
24+
2525
.token-logo {
2626
width: 40px;
2727
height: 40px;
2828
border-radius: 50%;
2929
}
30-
30+
3131
.token-label {
3232
font-size: 16px;
3333
font-weight: light;
3434
color: white;
3535
margin: 0;
3636
}
37-
37+
3838
.token-variation {
3939
font-size: 14px;
4040
margin: 0;
4141
text-align: left;
4242
font-size: 12px;
4343
margin-top: 4px;
4444
}
45-
45+
4646
.positive {
4747
color: #33cc33;
4848
}
49-
49+
5050
.negative {
5151
color: #ff3333;
5252
}
53-
53+
5454
.token-values {
5555
text-align: right;
5656
}
57-
57+
5858
.token-amount {
5959
font-size: 16px;
6060
font-weight: bold;
6161
color: white;
6262
margin: 0;
6363
}
64-
64+
6565
.token-price {
6666
font-size: 14px;
6767
color: gray;
@@ -74,7 +74,6 @@
7474
text-align: right;
7575
padding: 12px 16px;
7676
border-bottom: 1px solid #3f3f40;
77-
max-width: 200px;
7877
}
7978

8079
.last-row{
@@ -84,11 +83,11 @@
8483
.token-data {
8584
display: flex;
8685
flex-direction: column;
87-
86+
8887
background: black;
8988
border-radius: 12px;
9089
background: #1a1a1a;
9190
width: 100%;
9291
font-size: 14px;
93-
92+
9493
}

‎src/components/TokenTab/index.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import { useState } from 'react';
22
import './index.css';
33

4+
import { ReactComponent as SolanaToken } from './assets/solana-token.svg';
5+
import { ReactComponent as SpToken } from './assets/sp-token.svg';
6+
47
const TokenCard: React.FC<{ token: any }> = ({ token }) => {
58
return (
69
<div className="token-card">
710
<div className="token-info">
8-
<img src={token.logo} alt={token.label} className="token-logo" />
11+
{token.logo}
912
<div>
1013
<p className="token-label">{token.label}</p>
1114
<p
@@ -36,21 +39,21 @@ export default function TokenTab() {
3639
const tokens = [
3740
{
3841
"label" : "Silent Pass",
39-
"logo": "SPLogo",
42+
"logo": <SpToken width={32} height={32} />,
4043
"priceVariation": 0.5381,
4144
"amount": "18.61M",
4245
"price": 541.51,
4346
"currency": "$SP"
4447
},
4548
{
4649
"label" : "Solana",
47-
"logo": "SolanaLogo",
50+
"logo": <SolanaToken width={32} height={32} />,
4851
"priceVariation": -0.002,
4952
"amount": 0.902,
5053
"price": 138.39,
5154
"currency": "SOL"
5255
},
53-
56+
5457
]
5558

5659
const [tokenData, setTokenData] = useState<any>({
@@ -62,7 +65,7 @@ export default function TokenTab() {
6265
"impact":1.41
6366
})
6467

65-
68+
6669

6770
return (
6871
<div style={{width:"100%"}}>

0 commit comments

Comments
 (0)