Skip to content

Commit b5358f8

Browse files
tierotiero
committed
feat: Add wallet and swap functionalities with new components
- Implemented BalanceCards component to display wallet balances. - Created LightningSection for handling Lightning Network payments and invoice creation. - Developed SendSection for sending Bitcoin to specified addresses. - Introduced SwapCard for managing token swaps between Arkade and EVM networks. - Added SwapDetails component to show detailed swap information. - Created TokenInput for inputting token amounts with balance display. - Implemented VTXOList to display VTXOs associated with the wallet. - Developed WalletInfo component to show various wallet addresses with copy functionality. - Integrated WalletTab to combine all wallet-related functionalities. - Updated index file to export new components for easier access.
1 parent 85badce commit b5358f8

File tree

14 files changed

+2135
-1345
lines changed

14 files changed

+2135
-1345
lines changed

‎apps/xverse/src/components/Dashboard.tsx‎

Lines changed: 67 additions & 1345 deletions
Large diffs are not rendered by default.

‎apps/xverse/src/components/hooks/useSwap.ts‎

Lines changed: 543 additions & 0 deletions
Large diffs are not rendered by default.

‎apps/xverse/src/components/styles.ts‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import type { CSSProperties } from 'react';
2+
3+
export const colors = {
4+
primary: '#667eea',
5+
primaryHover: '#5a67d8',
6+
background: '#f5f7fa',
7+
cardBg: '#ffffff',
8+
inputBg: '#f9fafb',
9+
border: '#e5e7eb',
10+
borderLight: '#f3f4f6',
11+
text: '#1a1a1a',
12+
textSecondary: '#6b7280',
13+
textMuted: '#9ca3af',
14+
success: '#10b981',
15+
successBg: '#dcfce7',
16+
warning: '#f59e0b',
17+
warningBg: '#fef3c7',
18+
error: '#ef4444',
19+
errorBg: '#fee2e2',
20+
};
21+
22+
export const spacing = {
23+
xs: 4,
24+
sm: 8,
25+
md: 16,
26+
lg: 24,
27+
xl: 32,
28+
};
29+
30+
export const borderRadius = {
31+
sm: 8,
32+
md: 12,
33+
lg: 16,
34+
xl: 24,
35+
full: 9999,
36+
};
37+
38+
export const baseStyles = {
39+
card: {
40+
backgroundColor: colors.cardBg,
41+
borderRadius: borderRadius.xl,
42+
border: `1px solid ${colors.border}`,
43+
padding: spacing.md,
44+
} as CSSProperties,
45+
46+
input: {
47+
width: '100%',
48+
padding: '12px',
49+
border: `1px solid ${colors.border}`,
50+
borderRadius: borderRadius.sm,
51+
fontSize: '14px',
52+
outline: 'none',
53+
backgroundColor: colors.cardBg,
54+
} as CSSProperties,
55+
56+
button: {
57+
padding: '12px 24px',
58+
borderRadius: borderRadius.md,
59+
fontSize: '14px',
60+
fontWeight: 600,
61+
cursor: 'pointer',
62+
border: 'none',
63+
transition: 'all 0.2s ease',
64+
} as CSSProperties,
65+
66+
buttonPrimary: {
67+
padding: '16px 24px',
68+
borderRadius: borderRadius.lg,
69+
fontSize: '16px',
70+
fontWeight: 600,
71+
cursor: 'pointer',
72+
border: 'none',
73+
backgroundColor: colors.primary,
74+
color: '#fff',
75+
width: '100%',
76+
transition: 'all 0.2s ease',
77+
} as CSSProperties,
78+
79+
buttonSecondary: {
80+
padding: '12px 24px',
81+
borderRadius: borderRadius.sm,
82+
fontSize: '14px',
83+
fontWeight: 600,
84+
cursor: 'pointer',
85+
border: `1px solid ${colors.border}`,
86+
backgroundColor: colors.inputBg,
87+
color: colors.text,
88+
transition: 'all 0.2s ease',
89+
} as CSSProperties,
90+
91+
label: {
92+
fontSize: '12px',
93+
fontWeight: 500,
94+
color: colors.textSecondary,
95+
marginBottom: spacing.xs,
96+
} as CSSProperties,
97+
98+
sectionTitle: {
99+
margin: 0,
100+
fontSize: '16px',
101+
fontWeight: 600,
102+
color: colors.text,
103+
} as CSSProperties,
104+
};
105+
106+
export const tabStyles = {
107+
container: {
108+
display: 'flex',
109+
justifyContent: 'center',
110+
gap: spacing.sm,
111+
marginBottom: spacing.lg,
112+
} as CSSProperties,
113+
114+
tab: {
115+
padding: '12px 24px',
116+
borderRadius: borderRadius.full,
117+
border: 'none',
118+
fontSize: '16px',
119+
fontWeight: 600,
120+
cursor: 'pointer',
121+
transition: 'all 0.2s ease',
122+
} as CSSProperties,
123+
124+
tabActive: {
125+
backgroundColor: colors.text,
126+
color: '#fff',
127+
} as CSSProperties,
128+
129+
tabInactive: {
130+
backgroundColor: 'transparent',
131+
color: colors.textSecondary,
132+
} as CSSProperties,
133+
};
134+
135+
export const formatSats = (sats: number): string => {
136+
return sats.toLocaleString() + ' sats';
137+
};
138+
139+
export const formatAddress = (address: string, chars = 6): string => {
140+
if (!address) return '';
141+
return `${address.slice(0, chars)}...${address.slice(-4)}`;
142+
};

‎apps/xverse/src/components/tabs/BalanceCards.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from 'react';
2+
import type { CSSProperties } from 'react';
3+
import { colors, borderRadius, spacing, baseStyles, formatSats } from '../styles';
4+
5+
interface BalanceData {
6+
total: number;
7+
onchain: number;
8+
offchain: number;
9+
settled: number;
10+
}
11+
12+
interface BalanceCardsProps {
13+
balance: BalanceData | null;
14+
isLoading: boolean;
15+
onRefresh: (options?: { silent?: boolean }) => Promise<void>;
16+
onOnboard?: () => Promise<string>;
17+
}
18+
19+
export const BalanceCards: React.FC<BalanceCardsProps> = ({
20+
balance,
21+
isLoading,
22+
onRefresh,
23+
onOnboard,
24+
}) => {
25+
return (
26+
<div style={styles.section}>
27+
<div style={styles.header}>
28+
<h3 style={baseStyles.sectionTitle}>Balance</h3>
29+
<button
30+
onClick={() => onRefresh()}
31+
disabled={isLoading}
32+
style={baseStyles.buttonSecondary}
33+
>
34+
{isLoading ? 'Refreshing...' : 'Refresh'}
35+
</button>
36+
</div>
37+
38+
{balance && (
39+
<>
40+
<div style={styles.grid}>
41+
<div style={styles.card}>
42+
<div style={styles.label}>Total</div>
43+
<div style={styles.value}>{formatSats(balance.total)}</div>
44+
</div>
45+
<div style={styles.card}>
46+
<div style={styles.label}>On-chain</div>
47+
<div style={styles.value}>{formatSats(balance.onchain)}</div>
48+
</div>
49+
<div style={styles.card}>
50+
<div style={styles.label}>Off-chain (VTXOs)</div>
51+
<div style={styles.value}>{formatSats(balance.offchain)}</div>
52+
</div>
53+
<div style={styles.card}>
54+
<div style={styles.label}>Settled</div>
55+
<div style={styles.value}>{formatSats(balance.settled)}</div>
56+
</div>
57+
</div>
58+
59+
{balance.onchain > 0 && onOnboard && (
60+
<div style={styles.onboardBanner}>
61+
<p style={styles.onboardText}>
62+
You have {formatSats(balance.onchain)} in your boarding address.
63+
</p>
64+
<button onClick={onOnboard} disabled={isLoading} style={baseStyles.buttonPrimary}>
65+
{isLoading ? 'Onboarding...' : 'Onboard Funds to VTXOs'}
66+
</button>
67+
</div>
68+
)}
69+
</>
70+
)}
71+
</div>
72+
);
73+
};
74+
75+
const styles: Record<string, CSSProperties> = {
76+
section: {
77+
backgroundColor: colors.cardBg,
78+
border: `1px solid ${colors.border}`,
79+
borderRadius: borderRadius.lg,
80+
padding: spacing.lg,
81+
},
82+
header: {
83+
display: 'flex',
84+
justifyContent: 'space-between',
85+
alignItems: 'center',
86+
marginBottom: spacing.md,
87+
},
88+
grid: {
89+
display: 'grid',
90+
gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
91+
gap: spacing.md,
92+
},
93+
card: {
94+
padding: spacing.md,
95+
backgroundColor: colors.inputBg,
96+
borderRadius: borderRadius.md,
97+
},
98+
label: {
99+
fontSize: '13px',
100+
color: colors.textSecondary,
101+
marginBottom: spacing.xs,
102+
},
103+
value: {
104+
fontSize: '20px',
105+
fontWeight: 600,
106+
color: colors.text,
107+
},
108+
onboardBanner: {
109+
marginTop: spacing.md,
110+
padding: spacing.md,
111+
backgroundColor: colors.warningBg,
112+
borderRadius: borderRadius.md,
113+
},
114+
onboardText: {
115+
margin: 0,
116+
marginBottom: spacing.sm,
117+
fontSize: '14px',
118+
color: colors.text,
119+
},
120+
};

0 commit comments

Comments
 (0)