Skip to content

Commit a08d4a4

Browse files
IlyaGrshinIlyaGrshin
committed
refactor: extract BalanceCard as shared component
- Create reusable BalanceCard with variant prop (default/overlay) - Simplify Balance and Profile to use BalanceCard - Add force dark mode CSS variables for overlay variant - Fix NumberFlow color inheritance via style prop - Remove duplicate Balance.module.scss and Profile.module.scss
1 parent 9229ee2 commit a08d4a4

File tree

6 files changed

+288
-322
lines changed

6 files changed

+288
-322
lines changed

‎src/pages/prototypes/TS/components/Profile/Profile.module.scss‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎src/pages/prototypes/TS/components/Profile/index.js‎

Lines changed: 28 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,120 +1,40 @@
1-
import { useEffect, useState } from "react"
2-
import NumberFlow, { continuous } from "@number-flow/react"
3-
import { Spoiler } from "spoiled"
4-
import Train from "../../../../../components/Train"
5-
6-
import * as styles from "./Profile.module.scss"
1+
import BalanceCard from "../../../Wallet/components/BalanceCard"
2+
import * as balanceCardStyles from "../../../Wallet/components/BalanceCard/BalanceCard.module.scss"
73
import * as ButtonStyles from "../../../../../components/Button/MultilineButton/MultilineButton.module.scss"
8-
import Text from "../../../../../components/Text"
94
import { MultilineButton } from "../../../../../components/Button"
10-
import { generateRandomBalance } from "../../../../../utils/number"
11-
import { DURATION, COMPLEX_EASING } from "../../../../../utils/animations"
125

136
import ArrowUpCircleFill from "../../../../../icons/28/Arrow Up Circle Fill.svg?react"
147
import ArrowLiftAndRightCircleFill28 from "../../../../../icons/28/Arrow Left & Right Circle Fill.svg?react"
158
import PlusCircleFill28 from "../../../../../icons/28/Plus Circle Fill.svg?react"
169

1710
export default function Profile() {
18-
const [balance, setBalance] = useState("261.69")
19-
const [hidden, setHidden] = useState(false)
20-
21-
useEffect(() => {
22-
const updateBalance = () => {
23-
if (!hidden) {
24-
const randomBalance = generateRandomBalance()
25-
setBalance(randomBalance)
26-
}
27-
}
28-
29-
const interval = setInterval(updateBalance, 1000)
30-
31-
return () => clearInterval(interval)
32-
}, [hidden])
33-
3411
return (
35-
<div className={styles.profile}>
36-
<div className={styles.data}>
37-
<Text
38-
apple={{
39-
variant: "subheadline2",
40-
weight: "semibold",
41-
}}
42-
material={{
43-
variant: "body1",
44-
weight: "regular",
45-
}}
46-
className={styles.label}
47-
>
48-
TON Wallet Balance
49-
</Text>
50-
<Spoiler
51-
className={styles.amount}
52-
hidden={hidden}
53-
onClick={() => setHidden((s) => !s)}
54-
>
55-
<NumberFlow
56-
value={balance}
57-
prefix="$"
58-
willChange
59-
plugins={[continuous]}
60-
spinTiming={{
61-
duration: DURATION.BALANCE_ANIMATION,
62-
easing: COMPLEX_EASING,
63-
}}
64-
opacityTiming={{
65-
duration: DURATION.OPACITY,
66-
}}
12+
<BalanceCard
13+
label="TON Wallet Balance"
14+
initialBalance="261.69"
15+
variant="overlay"
16+
actions={
17+
<>
18+
<MultilineButton
19+
variant="plain"
20+
icon={<ArrowUpCircleFill />}
21+
label="Send"
22+
className={`${ButtonStyles.button} ${balanceCardStyles.overlayButton}`}
23+
/>
24+
<MultilineButton
25+
variant="plain"
26+
icon={<PlusCircleFill28 />}
27+
label="Deposit"
28+
className={`${ButtonStyles.button} ${balanceCardStyles.overlayButton}`}
6729
/>
68-
</Spoiler>
69-
<Train divider="space">
70-
<Text
71-
apple={{ variant: "subheadline2", weight: "semibold" }}
72-
style={{ color: "var(--text-confirm-color)" }}
73-
>
74-
+0.82
75-
</Text>
76-
<Text.Badge
77-
apple={{
78-
variant: "subheadline2",
79-
weight: "semibold",
80-
arrow: { direction: "up" },
81-
}}
82-
variant="tinted"
83-
circled
84-
style={{
85-
color: "var(--text-confirm-color)",
86-
}}
87-
>
88-
0.11%
89-
</Text.Badge>
90-
<Text
91-
apple={{ variant: "subheadline2", weight: "semibold" }}
92-
style={{ color: "var(--tg-theme-subtitle-text-color)" }}
93-
>
94-
Today
95-
</Text>
96-
</Train>
97-
</div>
98-
<div className={styles.buttons}>
99-
<MultilineButton
100-
variant="plain"
101-
icon={<ArrowUpCircleFill />}
102-
label="Send"
103-
className={`${ButtonStyles.button} ${styles.overlayButton}`}
104-
/>
105-
<MultilineButton
106-
variant="plain"
107-
icon={<PlusCircleFill28 />}
108-
label="Deposit"
109-
className={`${ButtonStyles.button} ${styles.overlayButton}`}
110-
/>
111-
<MultilineButton
112-
variant="plain"
113-
icon={<ArrowLiftAndRightCircleFill28 />}
114-
label="Swap"
115-
className={`${ButtonStyles.button} ${styles.overlayButton}`}
116-
/>
117-
</div>
118-
</div>
30+
<MultilineButton
31+
variant="plain"
32+
icon={<ArrowLiftAndRightCircleFill28 />}
33+
label="Swap"
34+
className={`${ButtonStyles.button} ${balanceCardStyles.overlayButton}`}
35+
/>
36+
</>
37+
}
38+
/>
11939
)
12040
}

‎src/pages/prototypes/Wallet/components/Balance/Balance.module.scss‎

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎src/pages/prototypes/Wallet/components/Balance/index.js‎

Lines changed: 2 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,5 @@
1-
import { useState, useEffect } from "react"
2-
import NumberFlow, { continuous } from "@number-flow/react"
3-
import { Spoiler } from "spoiled"
4-
import Train from "../../../../../components/Train"
5-
6-
import * as styles from "./Balance.module.scss"
7-
import Text from "../../../../../components/Text"
8-
import { generateRandomBalance } from "../../../../../utils/number"
9-
import { DURATION, COMPLEX_EASING } from "../../../../../utils/animations"
1+
import BalanceCard from "../BalanceCard"
102

113
export default function Balance() {
12-
const [balance, setBalance] = useState("30.06")
13-
const [hidden, setHidden] = useState(false)
14-
15-
useEffect(() => {
16-
const updateBalance = () => {
17-
if (!hidden) {
18-
const randomBalance = generateRandomBalance()
19-
setBalance(randomBalance)
20-
}
21-
}
22-
23-
const interval = setInterval(updateBalance, 1000)
24-
25-
return () => clearInterval(interval)
26-
}, [hidden])
27-
28-
return (
29-
<div className={styles.balance}>
30-
<Text
31-
apple={{
32-
variant: "subheadline2",
33-
weight: "semibold",
34-
}}
35-
material={{
36-
variant: "body1",
37-
weight: "regular",
38-
}}
39-
className={styles.label}
40-
>
41-
Balance
42-
</Text>
43-
<Spoiler
44-
className={styles.amount}
45-
hidden={hidden}
46-
onClick={() => setHidden((s) => !s)}
47-
>
48-
<NumberFlow
49-
value={balance}
50-
prefix="$"
51-
willChange
52-
plugins={[continuous]}
53-
spinTiming={{
54-
duration: DURATION.BALANCE_ANIMATION,
55-
easing: COMPLEX_EASING,
56-
}}
57-
opacityTiming={{
58-
duration: DURATION.OPACITY,
59-
}}
60-
/>
61-
</Spoiler>
62-
<Train divider="space">
63-
<Text
64-
apple={{ variant: "subheadline2", weight: "semibold" }}
65-
style={{ color: "var(--text-confirm-color)" }}
66-
>
67-
+0.82
68-
</Text>
69-
<Text.Badge
70-
apple={{
71-
variant: "subheadline2",
72-
weight: "semibold",
73-
arrow: { direction: "up" },
74-
}}
75-
variant="tinted"
76-
circled
77-
style={{
78-
color: "var(--text-confirm-color)",
79-
}}
80-
>
81-
0.11%
82-
</Text.Badge>
83-
<Text
84-
apple={{ variant: "subheadline2", weight: "semibold" }}
85-
style={{ color: "var(--tg-theme-subtitle-text-color)" }}
86-
>
87-
Today
88-
</Text>
89-
</Train>
90-
</div>
91-
)
4+
return <BalanceCard label="Balance" initialBalance="30.06" />
925
}

0 commit comments

Comments
 (0)