Skip to content

Commit 55abd90

Browse files
chris13524chris13524
committed
Cleanup UI
1 parent 77d7052 commit 55abd90

File tree

8 files changed

+167
-143
lines changed

8 files changed

+167
-143
lines changed

‎pages/add-transaction.tsx

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { NextPage } from 'next';
22
import Link from 'next/link';
33
import styles from '../styles/Home.module.css';
4-
import { Box, NumberInput, Button, Select } from '@mantine/core';
4+
import { Box, NumberInput, Button, Select, Stack } from '@mantine/core';
55
import { useForm } from '@mantine/form';
66
import { useAccount, useSigner } from 'wagmi';
77
import { ethers } from 'ethers';
@@ -28,36 +28,40 @@ const AddTransaction: NextPage = () => {
2828

2929
return (
3030
<Box sx={{ maxWidth: 300 }} mx="auto">
31-
<h1>Add Transaction</h1>
31+
<Stack>
32+
<h1>Add Transaction</h1>
3233

33-
<form onSubmit={form.onSubmit(values => {
34-
console.log("values.member: " + values.member);
35-
console.log("account.address: " + account!.address);
36-
console.log("values.amount:", values.amount);
37-
(async () => {
38-
await contract.adjust(values.member, account!.address, ethers.utils.parseEther(values.amount.toString()));
39-
alert("Transaction added");
40-
})();
41-
})}>
42-
<Select
43-
label="Member"
44-
data={members ? members.map(member => ({
45-
label: member,
46-
value: member,
47-
})) : []}
48-
{...form.getInputProps('member')}
49-
/>
50-
<NumberInput
51-
label="Amount"
52-
placeholder="0.01"
53-
precision={8}
54-
required
55-
{...form.getInputProps('amount')}
56-
/>
57-
<Button type="submit">Submit</Button>
58-
</form>
34+
<form onSubmit={form.onSubmit(values => {
35+
console.log("values.member: " + values.member);
36+
console.log("account.address: " + account!.address);
37+
console.log("values.amount:", values.amount);
38+
(async () => {
39+
await contract.adjust(values.member, account!.address, ethers.utils.parseEther(values.amount.toString()));
40+
alert("Transaction added");
41+
})();
42+
})}>
43+
<Stack>
44+
<Select
45+
label="Member"
46+
data={members ? members.map(member => ({
47+
label: member,
48+
value: member,
49+
})) : []}
50+
{...form.getInputProps('member')}
51+
/>
52+
<NumberInput
53+
label="Amount"
54+
placeholder="0.01"
55+
precision={8}
56+
required
57+
{...form.getInputProps('amount')}
58+
/>
59+
<Button type="submit">Submit</Button>
60+
</Stack>
61+
</form>
5962

60-
<Link href="/">Back</Link>
63+
<Link href="/"><a className={styles.link}>Back</a></Link>
64+
</Stack>
6165
</Box >
6266
);
6367
}

‎pages/balances.tsx

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { NextPage } from 'next';
22
import Link from 'next/link';
33
import styles from '../styles/Home.module.css';
4-
import { Box, List } from '@mantine/core';
4+
import { Box, Stack, Text, Paper } from '@mantine/core';
55
import { useAccount, useBalance, useSigner, useContractRead } from 'wagmi';
66
import { ethers } from 'ethers';
77
import { useSplitContract } from '../utils/contracts';
@@ -40,17 +40,21 @@ const Balances: NextPage = () => {
4040

4141
return (
4242
<Box sx={{ maxWidth: 300 }} mx="auto">
43-
<h1>Balances</h1>
43+
<Stack>
44+
<h1>Balances</h1>
4445

45-
<h2>Contract balance: {contractBalance?.formatted}</h2>
46-
47-
<List>
46+
<h2>Contract balance: {contractBalance?.formatted} ETH</h2>
47+
{/* <h2>Current ETH price: {chainlinkData.}</h2> */}
4848
{memberBalances ? memberBalances.map(member =>
49-
<List.Item key={member.member}>{member.member}: {ethers.utils.formatEther(member.balance)}</List.Item>
49+
<Paper key={member.member} shadow="xs" p="md">
50+
<Text lineClamp={4}>
51+
{member.member}: {ethers.utils.formatEther(member.balance)} ETH
52+
</Text>
53+
</Paper>
5054
) : <>Loading members...</>}
51-
</List>
5255

53-
<Link href="/">Back</Link>
56+
<Link href="/"><a className={styles.link}>Back</a></Link>
57+
</Stack>
5458
</Box >
5559
);
5660
}

‎pages/deposit.tsx

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { NextPage } from 'next';
22
import Link from 'next/link';
33
import styles from '../styles/Home.module.css';
4-
import { Box, NumberInput, Button } from '@mantine/core';
4+
import { Box, NumberInput, Button, Stack } from '@mantine/core';
55
import { useForm } from '@mantine/form';
66
import { useAccount, useSigner } from 'wagmi';
77
import { ethers } from 'ethers';
@@ -27,26 +27,30 @@ const Deposit: NextPage = () => {
2727

2828
return (
2929
<Box sx={{ maxWidth: 300 }} mx="auto">
30-
<h1>Deposit</h1>
31-
32-
<form onSubmit={form.onSubmit(values => {
33-
console.log("values.amount:", values.amount);
34-
(async () => {
35-
await contract.deposit({ value: ethers.utils.parseEther(values.amount.toString()) });
36-
alert("Deposit accepted");
37-
})();
38-
})}>
39-
<NumberInput
40-
label="Amount"
41-
placeholder="0.01"
42-
precision={8}
43-
required
44-
{...form.getInputProps('amount')}
45-
/>
46-
<Button type="submit">Submit</Button>
47-
</form>
48-
49-
<Link href="/">Back</Link>
30+
<Stack>
31+
<h1>Deposit</h1>
32+
33+
<form onSubmit={form.onSubmit(values => {
34+
console.log("values.amount:", values.amount);
35+
(async () => {
36+
await contract.deposit({ value: ethers.utils.parseEther(values.amount.toString()) });
37+
alert("Deposit accepted");
38+
})();
39+
})}>
40+
<Stack>
41+
<NumberInput
42+
label="Amount"
43+
placeholder="0.01"
44+
precision={8}
45+
required
46+
{...form.getInputProps('amount')}
47+
/>
48+
<Button type="submit">Submit</Button>
49+
</Stack>
50+
</form>
51+
52+
<Link href="/"><a className={styles.link}>Back</a></Link>
53+
</Stack>
5054
</Box >
5155
);
5256
}

‎pages/index.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Box, Stack } from '@mantine/core';
12
import type { NextPage } from 'next';
23
import Head from 'next/head';
34
import Link from 'next/link';
@@ -12,15 +13,17 @@ const Home: NextPage = () => {
1213
<link rel="icon" href="/favicon.ico" />
1314
</Head>
1415

15-
<div className={styles.links}>
16-
<h1>Split/3</h1>
17-
<Link href="/members">Members</Link>
18-
<Link href="/balances">Balances</Link>
19-
<Link href="/add-transaction">Add transaction</Link>
20-
<Link href="/settle-up">Settle up</Link>
21-
<Link href="/deposit">Deposit</Link>
22-
<Link href="/withdraw">Withdraw</Link>
23-
</div>
16+
<Box sx={{ maxWidth: 300 }} mx="auto">
17+
<Stack>
18+
<h1>Split/3</h1>
19+
<Link href="/members"><a className={styles.link}>Members</a></Link>
20+
<Link href="/balances"><a className={styles.link}>Balances</a></Link>
21+
<Link href="/add-transaction"><a className={styles.link}>Add transaction</a></Link>
22+
<Link href="/settle-up"><a className={styles.link}>Settle up</a></Link>
23+
<Link href="/deposit"><a className={styles.link}>Deposit</a></Link>
24+
<Link href="/withdraw"><a className={styles.link}>Withdraw</a></Link>
25+
</Stack>
26+
</Box>
2427
</>
2528
);
2629
}

‎pages/members.tsx

Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { NextPage } from 'next';
22
import Link from 'next/link';
33
import styles from '../styles/Home.module.css';
4-
import { TextInput, Box, Button, List } from '@mantine/core';
4+
import { TextInput, Box, Button, Text, Stack, Paper } from '@mantine/core';
55
import { useForm } from '@mantine/form';
66
import { useAccount, useSigner } from 'wagmi';
77
import { useSplitContract } from '../utils/contracts';
@@ -26,31 +26,36 @@ const AddTransaction: NextPage = () => {
2626

2727
return (
2828
<Box sx={{ maxWidth: 300 }} mx="auto">
29-
<h1>Members</h1>
30-
31-
<form onSubmit={form.onSubmit(values => {
32-
console.log("values.address: " + values.address);
33-
(async () => {
34-
await contract.addMember(values.address);
35-
alert("Member added");
36-
})();
37-
})}>
38-
<TextInput
39-
label="Address"
40-
placeholder="0x000000"
41-
required
42-
{...form.getInputProps('address')}
43-
/>
44-
<Button type="submit">Submit</Button>
45-
</form>
46-
47-
<List>
29+
<Stack>
30+
<h1>Members</h1>
31+
32+
<form onSubmit={form.onSubmit(values => {
33+
console.log("values.address: " + values.address);
34+
(async () => {
35+
await contract.addMember(values.address);
36+
alert("Member added");
37+
})();
38+
})}>
39+
<Stack>
40+
<TextInput
41+
label="Address"
42+
placeholder="0x000000"
43+
required
44+
{...form.getInputProps('address')}
45+
/>
46+
<Button type="submit">Submit</Button>
47+
</Stack>
48+
</form>
49+
50+
<h2>Existing members</h2>
4851
{members ? members.map(member =>
49-
<List.Item key={member}>{ member }</List.Item>
52+
<Paper key={member} shadow="xs" p="md">
53+
<Text lineClamp={4}>{member}</Text>
54+
</Paper>
5055
) : <>Loading members...</>}
51-
</List>
5256

53-
<Link href="/">Back</Link>
57+
<Link href="/"><a className={styles.link}>Back</a></Link>
58+
</Stack>
5459
</Box >
5560
);
5661
}

‎pages/settle-up.tsx

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { NextPage } from 'next';
22
import Link from 'next/link';
33
import styles from '../styles/Home.module.css';
4-
import { TextInput, Box, NumberInput, Button } from '@mantine/core';
4+
import { TextInput, Box, NumberInput, Button, Stack } from '@mantine/core';
55
import { useForm } from '@mantine/form';
66
import { useAccount, useSigner } from 'wagmi';
77
import { ethers } from 'ethers';
@@ -25,31 +25,35 @@ const SettleUp: NextPage = () => {
2525

2626
return (
2727
<Box sx={{ maxWidth: 300 }} mx="auto">
28-
<h1>Settle Up</h1>
29-
30-
<form onSubmit={form.onSubmit(values => {
31-
(async () => {
32-
await contract.settle(values.member, { value: ethers.utils.parseEther(values.amount.toString()) });
33-
alert("Settled up");
34-
})();
35-
})}>
36-
<TextInput
37-
label="Settle with"
38-
placeholder="0x000000"
39-
required
40-
{...form.getInputProps('member')}
41-
/>
42-
<NumberInput
43-
label="Amount"
44-
placeholder="0.01"
45-
precision={8}
46-
required
47-
{...form.getInputProps('amount')}
48-
/>
49-
<Button type="submit">Submit</Button>
50-
</form>
51-
52-
<Link href="/">Back</Link>
28+
<Stack>
29+
<h1>Settle Up</h1>
30+
31+
<form onSubmit={form.onSubmit(values => {
32+
(async () => {
33+
await contract.settle(values.member, { value: ethers.utils.parseEther(values.amount.toString()) });
34+
alert("Settled up");
35+
})();
36+
})}>
37+
<Stack>
38+
<TextInput
39+
label="Settle with"
40+
placeholder="0x000000"
41+
required
42+
{...form.getInputProps('member')}
43+
/>
44+
<NumberInput
45+
label="Amount"
46+
placeholder="0.01"
47+
precision={8}
48+
required
49+
{...form.getInputProps('amount')}
50+
/>
51+
<Button type="submit">Submit</Button>
52+
</Stack>
53+
</form>
54+
55+
<Link href="/"><a className={styles.link}>Back</a></Link>
56+
</Stack>
5357
</Box >
5458
);
5559
}

0 commit comments

Comments
 (0)