Skip to content

Commit a7baa2a

Browse files
tuphan-dntuphan-dn
committedMar 14, 2022
input
1 parent 1a07e36 commit a7baa2a

File tree

19 files changed

+276
-273
lines changed

19 files changed

+276
-273
lines changed
 

‎public/manifest.json

+2-12
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,8 @@
44
"icons": [
55
{
66
"src": "favicon.png",
7-
"sizes": "64x64 32x32 24x24 16x16",
8-
"type": "image/x-icon"
9-
},
10-
{
11-
"src": "favicon.png",
12-
"type": "image/png",
13-
"sizes": "192x192"
14-
},
15-
{
16-
"src": "favicon.png",
17-
"type": "image/png",
18-
"sizes": "512x512"
7+
"sizes": "32x32",
8+
"type": "image/png"
199
}
2010
],
2111
"start_url": ".",

‎src/components/bid/index.tsx

-75
This file was deleted.

‎src/components/tokenName.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export type TokenNameProps = {
55
}
66

77
const TokenName = ({ publicKey }: TokenNameProps) => {
8-
const tokenName = publicKey?.toBase58().substring(0, 2) || '??'
8+
const tokenName = publicKey?.toBase58().substring(0, 4) || '??'
99
return <span>{tokenName}</span>
1010
}
1111

‎src/components/tokenSelection/index.tsx

+13-22
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,22 @@
1-
import { Fragment } from 'react'
2-
31
import { Space, Typography } from 'antd'
4-
import { DownOutlined } from '@ant-design/icons'
2+
import IconSax from 'components/iconsax'
53
import TokenAvatar from 'components/tokenAvatar'
64
import TokenName from 'components/tokenName'
5+
import { CSSProperties } from 'react'
76

8-
const TokenSelection = ({ publicKey }: { publicKey?: any }) => {
7+
export type TokenSelectionProps = { publicKey?: any; style?: CSSProperties }
98

9+
const TokenSelection = ({ publicKey, style }: TokenSelectionProps) => {
1010
return (
11-
<Fragment>
12-
<Space
13-
style={{ boxShadow: '0 4px 40px #2124332e' }}
14-
className="token-select"
15-
>
16-
<TokenAvatar
17-
publicKey={publicKey}
18-
style={{ border: 'none' }}
19-
></TokenAvatar>
20-
21-
<Typography.Text type="secondary">
22-
<TokenName publicKey={publicKey} />
23-
</Typography.Text>
24-
<Typography.Text type="secondary">
25-
<DownOutlined style={{ fontSize: '10px' }} />
26-
</Typography.Text>
27-
</Space>
28-
</Fragment>
11+
<Space className="token-select shadowed" style={style}>
12+
<TokenAvatar publicKey={publicKey} style={{ border: 'none' }} />
13+
<Typography.Text type="secondary">
14+
<TokenName publicKey={publicKey} />
15+
</Typography.Text>
16+
<Typography.Text type="secondary">
17+
<IconSax variant="Bulk" name="ArrowDown2" />
18+
</Typography.Text>
19+
</Space>
2920
)
3021
}
3122

‎src/helper/nizk/deposit.ts

+2
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export const Deposit = {
9696
const HE1 = HybridEquality.prove(s1, r1_, srcAmountA, dstAmountA)
9797
const HE2 = HybridEquality.prove(s2, r2_, srcAmountB, dstAmountB)
9898
const HE3 = HybridEquality.prove(s3, r3_, dstAmountLP, srcAmountLP)
99+
99100
return {
100101
srcAmountA,
101102
srcAmountB,
@@ -111,6 +112,7 @@ export const Deposit = {
111112
HE3,
112113
}
113114
},
115+
114116
verify: (proof: DepositProof) => {
115117
let ok = true
116118
const {

‎src/index.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { StrictMode } from 'react'
21
import { render } from 'react-dom'
32
import { HashRouter } from 'react-router-dom'
43
import { Provider } from 'react-redux'
@@ -11,13 +10,11 @@ import reportWebVitals from 'reportWebVitals'
1110
import 'static/styles/index.less'
1211

1312
render(
14-
<StrictMode>
15-
<Provider store={store}>
16-
<HashRouter>
17-
<App />
18-
</HashRouter>
19-
</Provider>
20-
</StrictMode>,
13+
<Provider store={store}>
14+
<HashRouter>
15+
<App />
16+
</HashRouter>
17+
</Provider>,
2118
document.getElementById('root'),
2219
)
2320

‎src/store/devTools.ts

+2-20
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,12 @@ export const devTools = (appName: string): any => {
1111
}
1212
}
1313

14-
// BigInt Serialization Middleware
15-
// https://redux-toolkit.js.org/api/serializabilityMiddleware
16-
const isPlain = (val: any): boolean => {
17-
const isPlainObject = (obj: object): boolean => {
18-
if (obj === null) return false
19-
const proto = Object.getPrototypeOf(obj)
20-
return proto !== null && Object.getPrototypeOf(proto) === null
21-
}
22-
return (
23-
typeof val === 'undefined' ||
24-
val === null ||
25-
typeof val === 'string' ||
26-
typeof val === 'boolean' ||
27-
typeof val === 'number' ||
28-
Array.isArray(val) ||
29-
isPlainObject(val) ||
30-
typeof val === 'bigint'
31-
)
32-
}
3314
BigInt.prototype.toJSON = function () {
3415
return this.toString() // https://github.com/GoogleChromeLabs/jsbi/issues/30
3516
}
17+
3618
export const bigintSerializationMiddleware = {
3719
serializableCheck: {
38-
isSerializable: isPlain,
20+
isSerializable: () => true,
3921
},
4022
}

‎src/store/swap.reducer.ts

+12-20
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export type SwapState = {
1414
export type Wallet = {
1515
publicKey?: PublicKey
1616
mint?: PublicKey
17-
amount?: number
17+
amount: number | ''
1818
}
1919

2020
export enum Direction {
@@ -29,8 +29,12 @@ export enum Direction {
2929
const NAME = 'swap'
3030
const initialState: SwapState = {
3131
direction: Direction.AB,
32-
bid: {},
33-
ask: {},
32+
bid: {
33+
amount: '',
34+
},
35+
ask: {
36+
amount: '',
37+
},
3438
}
3539

3640
/**
@@ -39,18 +43,11 @@ const initialState: SwapState = {
3943

4044
export const setSwapWallet = createAsyncThunk(
4145
`${NAME}/setSwapWallet`,
42-
async (state: SwapState) => {
46+
async (state: Partial<SwapState>) => {
4347
return state
4448
},
4549
)
4650

47-
export const setAmountWallet = createAsyncThunk(
48-
`${NAME}/setAmountWallet`,
49-
async ({ type, wallet }: { type: string; wallet: Wallet }) => {
50-
return { [`${type}`]: wallet }
51-
},
52-
)
53-
5451
/**
5552
* Usual procedure
5653
*/
@@ -60,15 +57,10 @@ const slice = createSlice({
6057
initialState,
6158
reducers: {},
6259
extraReducers: (builder) =>
63-
void builder
64-
.addCase(
65-
setSwapWallet.fulfilled,
66-
(state, { payload }) => void Object.assign(state, payload),
67-
)
68-
.addCase(
69-
setAmountWallet.fulfilled,
70-
(state, { payload }) => void Object.assign(state, payload),
71-
),
60+
void builder.addCase(
61+
setSwapWallet.fulfilled,
62+
(state, { payload }) => void Object.assign(state, payload),
63+
),
7264
})
7365

7466
export default slice.reducer

‎src/view/approval/index.tsx

+15-10
Original file line numberDiff line numberDiff line change
@@ -84,16 +84,16 @@ const Approval = () => {
8484
return (
8585
<Modal visible={visible} footer={null} closable={false}>
8686
<Row gutter={[24, 24]}>
87+
<Col span={24}>
88+
<Typography.Title level={4}>
89+
<Space>
90+
<IconSax variant="Bulk" name="Warning2" />
91+
<span>For demostration only!</span>
92+
</Space>
93+
</Typography.Title>
94+
</Col>
8795
<Col span={24}>
8896
<Row gutter={[8, 8]}>
89-
<Col span={24}>
90-
<Typography.Title level={4}>
91-
<Space>
92-
<IconSax variant="Bulk" name="Warning2" />
93-
<span>For demostration only!</span>
94-
</Space>
95-
</Typography.Title>
96-
</Col>
9797
<Col span={24}>
9898
<Typography.Text>
9999
The prototype is to propose a zero-knowledge Automated Market
@@ -128,8 +128,13 @@ const Approval = () => {
128128
</Row>
129129
</Col>
130130
<Col span={24}>
131-
<Button type="primary" onClick={initSwap} block>
132-
Undestand
131+
<Button
132+
type="primary"
133+
onClick={initSwap}
134+
icon={<IconSax variant="Bulk" name="TickCircle" />}
135+
block
136+
>
137+
Understand
133138
</Button>
134139
</Col>
135140
</Row>

‎src/view/header/debug/index.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,13 @@ const Debug = () => {
1818
<Fragment>
1919
<Button
2020
type="text"
21-
icon={<IconSax variant="Bulk" name="ShieldSearch" />}
21+
icon={
22+
<IconSax
23+
style={{ fontSize: 20 }}
24+
variant="Bulk"
25+
name="ShieldSearch"
26+
/>
27+
}
2228
onClick={() => setVisible(true)}
2329
/>
2430
<Drawer

‎src/view/liquidity/addLiquidity.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const AddLiquidity = () => {
111111
>
112112
<Row gutter={[16, 16]}>
113113
<Col span={24}>
114-
<Row gutter={[8, 8]} wrap={false}>
114+
<Row gutter={[8, 8]} wrap={false} align="middle">
115115
<Col flex="auto">
116116
<Typography.Title level={3} type="secondary">
117117
LP
@@ -123,7 +123,7 @@ const AddLiquidity = () => {
123123
</Row>
124124
</Col>
125125
<Col span={24}>
126-
<Row gutter={[8, 8]} wrap={false}>
126+
<Row gutter={[8, 8]} wrap={false} align="middle">
127127
<Col flex="auto">
128128
<Typography.Text type="secondary">
129129
Your Current LP

‎src/view/liquidity/amount.tsx

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Row, Col, Typography, Space } from 'antd'
2-
import TokenAvatar from 'components/tokenAvatar'
32
import NumericInput from 'components/numericInput'
43
import Balance from 'components/balance'
54

65
import { Wallet } from 'store/wallet.reducer'
76
import { useBalance } from 'hooks/useBalance'
7+
import TokenSelection from 'components/tokenSelection'
88

99
export type AmountProps = {
1010
wallet?: Wallet
@@ -16,16 +16,21 @@ const Amount = ({ wallet, value, onChange }: AmountProps) => {
1616
const balance = useBalance(wallet?.publicKey)
1717

1818
return (
19-
<Row gutter={[8, 8]} justify="end">
19+
<Row gutter={[0, 0]} justify="end">
2020
<Col span={24}>
2121
<NumericInput
22+
placeholder="Amount"
2223
size="large"
2324
value={value}
2425
onChange={onChange}
2526
max={balance}
2627
prefix={
27-
<TokenAvatar style={{ marginRight: 7 }} publicKey={wallet?.mint} />
28+
<TokenSelection
29+
style={{ marginRight: 7 }}
30+
publicKey={wallet?.mint}
31+
/>
2832
}
33+
bordered={false}
2934
/>
3035
</Col>
3136
<Col>

‎src/view/liquidity/removeLiquidity.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ const RemoveLiquidity = () => {
102102
>
103103
<Row gutter={[16, 16]}>
104104
<Col span={24}>
105-
<Row gutter={[8, 8]} wrap={false}>
105+
<Row gutter={[8, 8]} wrap={false} align="middle">
106106
<Col flex="auto">
107107
<TokenAvatar publicKey={wallet1.mint} />
108108
</Col>
@@ -112,7 +112,7 @@ const RemoveLiquidity = () => {
112112
</Row>
113113
</Col>
114114
<Col span={24}>
115-
<Row gutter={[8, 8]} wrap={false}>
115+
<Row gutter={[8, 8]} wrap={false} align="middle">
116116
<Col flex="auto">
117117
<TokenAvatar publicKey={wallet2.mint} />
118118
</Col>
@@ -122,7 +122,7 @@ const RemoveLiquidity = () => {
122122
</Row>
123123
</Col>
124124
<Col span={24}>
125-
<Row gutter={[8, 8]} wrap={false}>
125+
<Row gutter={[8, 8]} wrap={false} align="middle">
126126
<Col flex="auto">
127127
<Typography.Text type="secondary">
128128
Your Current LP

‎src/view/swap/index.tsx

+8-12
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,14 @@ import SwapReview from 'view/swap/swapReview'
44

55
const Swap = () => {
66
return (
7-
<Row gutter={[24, 24]}>
8-
<Col span={24}>
9-
<Row gutter={[24, 24]} justify="center">
10-
<Col lg={8} md={12} xs={24}>
11-
<Row gutter={[24, 24]}>
12-
<Col span={24}>
13-
<SwapForm />
14-
</Col>
15-
<Col span={24}>
16-
<SwapReview />
17-
</Col>
18-
</Row>
7+
<Row gutter={[24, 24]} justify="center">
8+
<Col lg={8} md={12} xs={24}>
9+
<Row gutter={[24, 24]}>
10+
<Col span={24}>
11+
<SwapForm />
12+
</Col>
13+
<Col span={24}>
14+
<SwapReview />
1915
</Col>
2016
</Row>
2117
</Col>

‎src/components/ask/index.tsx ‎src/view/swap/swapForm/ask.tsx

+34-18
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,66 @@
1-
import { AppDispatch, AppState } from 'store'
1+
import { useCallback } from 'react'
22
import { useDispatch, useSelector } from 'react-redux'
33

44
import { Col, Row, Space, Typography } from 'antd'
55
import TokenSelection from 'components/tokenSelection'
66
import Balance from 'components/balance'
77
import NumericInput from 'components/numericInput'
88

9-
import { setAmountWallet } from 'store/swap.reducer'
9+
import { AppDispatch, AppState } from 'store'
10+
import { Direction, setSwapWallet } from 'store/swap.reducer'
11+
import { PRECISION, usePrice } from 'hooks/usePrice'
12+
import { useBalance } from 'hooks/useBalance'
1013

1114
const Ask = () => {
12-
const { ask } = useSelector((state: AppState) => state.swap)
15+
const { direction, bid, ask } = useSelector((state: AppState) => state.swap)
1316
const dispatch = useDispatch<AppDispatch>()
1417

15-
const onChangeAmount = (value: any) => {
16-
dispatch(
17-
setAmountWallet({ type: 'ask', wallet: { ...ask, amount: value } }),
18-
)
19-
}
18+
const p = usePrice()
19+
const balance = useBalance(ask.publicKey)
20+
21+
const onAmount = useCallback(
22+
(askAmount) => {
23+
let bidAmount: number | '' = ''
24+
if (askAmount) {
25+
if (direction === Direction.AB)
26+
bidAmount = Number((BigInt(askAmount) * p) / PRECISION)
27+
else bidAmount = Number((BigInt(askAmount) * PRECISION) / p)
28+
}
29+
return dispatch(
30+
setSwapWallet({
31+
bid: { ...bid, amount: bidAmount },
32+
ask: { ...ask, amount: askAmount },
33+
}),
34+
)
35+
},
36+
[dispatch, bid, ask, direction, p],
37+
)
2038

2139
return (
2240
<Row gutter={[0, 0]} align="middle">
23-
<Col flex="auto">
41+
<Col>
2442
<TokenSelection publicKey={ask.mint}></TokenSelection>
2543
</Col>
26-
<Col>
44+
<Col flex="auto">
2745
<NumericInput
2846
bordered={false}
2947
style={{
3048
textAlign: 'right',
3149
fontSize: 24,
32-
maxWidth: 150,
3350
padding: 0,
3451
}}
3552
placeholder="0"
36-
value={ask.amount || ''}
37-
onChange={(value) => {
38-
onChangeAmount(value)
39-
}}
53+
value={ask.amount}
54+
onChange={onAmount}
55+
max={balance}
4056
/>
4157
</Col>
4258
<Col span={24}>
43-
<Row align="middle">
44-
<Col flex="auto">
59+
<Row justify="end">
60+
<Col>
4561
<Space className="caption">
4662
<Typography.Text type="secondary">Available:</Typography.Text>
47-
<Typography.Text type="secondary" style={{ cursor: 'pointer' }}>
63+
<Typography.Text>
4864
<Balance publicKey={ask.publicKey} />
4965
</Typography.Text>
5066
</Space>

‎src/view/swap/swapForm/bid.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { useCallback } from 'react'
2+
import { useDispatch, useSelector } from 'react-redux'
3+
4+
import { Col, Row, Space, Typography } from 'antd'
5+
import TokenSelection from 'components/tokenSelection'
6+
import Balance from 'components/balance'
7+
import NumericInput from 'components/numericInput'
8+
9+
import { AppDispatch, AppState } from 'store'
10+
import { Direction, setSwapWallet } from 'store/swap.reducer'
11+
import { PRECISION, usePrice } from 'hooks/usePrice'
12+
import { useBalance } from 'hooks/useBalance'
13+
14+
const Bid = () => {
15+
const { direction, bid, ask } = useSelector((state: AppState) => state.swap)
16+
const dispatch = useDispatch<AppDispatch>()
17+
18+
const p = usePrice()
19+
const balance = useBalance(bid.publicKey)
20+
21+
const onAmount = useCallback(
22+
(bidAmount) => {
23+
let askAmount: number | '' = ''
24+
if (bidAmount) {
25+
if (direction === Direction.AB)
26+
askAmount = Number((BigInt(bidAmount) * PRECISION) / p)
27+
else askAmount = Number((BigInt(bidAmount) * p) / PRECISION)
28+
}
29+
return dispatch(
30+
setSwapWallet({
31+
bid: { ...bid, amount: bidAmount },
32+
ask: { ...ask, amount: askAmount },
33+
}),
34+
)
35+
},
36+
[dispatch, bid, ask, direction, p],
37+
)
38+
39+
return (
40+
<Row gutter={[0, 0]} align="middle">
41+
<Col>
42+
<TokenSelection publicKey={bid.mint}></TokenSelection>
43+
</Col>
44+
<Col flex="auto">
45+
<NumericInput
46+
bordered={false}
47+
style={{
48+
textAlign: 'right',
49+
fontSize: 24,
50+
padding: 0,
51+
}}
52+
placeholder="0"
53+
value={bid.amount}
54+
onChange={onAmount}
55+
max={balance}
56+
/>
57+
</Col>
58+
<Col span={24}>
59+
<Row justify="end">
60+
<Col>
61+
<Space className="caption">
62+
<Typography.Text type="secondary">Available:</Typography.Text>
63+
<Typography.Text>
64+
<Balance publicKey={bid.publicKey} />
65+
</Typography.Text>
66+
</Space>
67+
</Col>
68+
</Row>
69+
</Col>
70+
</Row>
71+
)
72+
}
73+
export default Bid

‎src/view/swap/swapForm/index.tsx

+60-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,71 @@
1-
import { Card, Row, Col } from 'antd'
2-
import SwapInfo from 'view/swap/swapInfo'
1+
import { useCallback, useEffect } from 'react'
2+
import { useDispatch, useSelector } from 'react-redux'
3+
4+
import { Row, Col, Card, Button } from 'antd'
5+
import IconSax from 'components/iconsax'
6+
import Bid from './bid'
7+
import Ask from './ask'
8+
9+
import { AppState, AppDispatch } from 'store'
10+
import { Direction, setSwapWallet } from 'store/swap.reducer'
311

412
const SwapForm = () => {
13+
const { wallet1, wallet2 } = useSelector((state: AppState) => state.wallet)
14+
const { direction } = useSelector((state: AppState) => state.swap)
15+
const dispatch = useDispatch<AppDispatch>()
16+
17+
const switchToken = useCallback(() => {
18+
if (direction === Direction.AB)
19+
return dispatch(
20+
setSwapWallet({
21+
direction: Direction.BA,
22+
bid: { ...wallet2, amount: '' },
23+
ask: { ...wallet1, amount: '' },
24+
}),
25+
)
26+
return dispatch(
27+
setSwapWallet({
28+
direction: Direction.AB,
29+
bid: { ...wallet1, amount: '' },
30+
ask: { ...wallet2, amount: '' },
31+
}),
32+
)
33+
}, [direction, wallet1, wallet2, dispatch])
34+
35+
useEffect(() => {
36+
dispatch(
37+
setSwapWallet({
38+
direction: Direction.AB,
39+
bid: { ...wallet1, amount: '' },
40+
ask: { ...wallet2, amount: '' },
41+
}),
42+
)
43+
}, [dispatch, wallet1, wallet2])
44+
545
return (
646
<Card
747
bordered={false}
848
className="zkswap-card shadowed"
949
bodyStyle={{ padding: 0 }}
1050
>
11-
<Row>
12-
<Col span={24}>
13-
<SwapInfo />
51+
<Row gutter={[0, 0]} justify="center">
52+
<Col
53+
span={24}
54+
className="zkswap-bid"
55+
style={{ padding: '16px 24px 16px' }}
56+
>
57+
<Bid />
58+
</Col>
59+
<Col style={{ top: -12 }}>
60+
<Button
61+
className="btn-arrow-swap"
62+
size="small"
63+
icon={<IconSax name="ArrowSwapHorizontal" />}
64+
onClick={switchToken}
65+
/>
66+
</Col>
67+
<Col span={24} style={{ padding: '0 24px 24px' }}>
68+
<Ask />
1469
</Col>
1570
</Row>
1671
</Card>

‎src/view/swap/swapInfo/index.tsx

-59
This file was deleted.

‎src/view/swap/swapReview/price.tsx

+29-2
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,43 @@
1+
import { useState } from 'react'
2+
import { useSelector } from 'react-redux'
3+
14
import { Space, Button, Typography } from 'antd'
25
import IconSax from 'components/iconsax'
6+
import TokenName from 'components/tokenName'
7+
8+
import { AppState } from 'store'
9+
import { PRECISION, usePrice } from 'hooks/usePrice'
310

411
const Price = () => {
12+
const [inverse, setInverse] = useState(false)
13+
const { bid, ask } = useSelector((state: AppState) => state.swap)
14+
const p = usePrice()
15+
16+
const price = Number(p) / Number(PRECISION)
17+
const inversePrice = 1 / price
18+
519
return (
620
<Space>
721
<Button
822
type="text"
923
shape="circle"
1024
icon={<IconSax name="ArrowSwapHorizontal" />}
25+
onClick={() => setInverse(!inverse)}
1126
/>
12-
<Typography.Text>0</Typography.Text>
13-
<Typography.Text>SNTR / USDC</Typography.Text>
27+
<Typography.Text>{inverse ? price : inversePrice}</Typography.Text>
28+
{inverse ? (
29+
<Typography.Text>
30+
<TokenName publicKey={ask.publicKey} />
31+
{' / '}
32+
<TokenName publicKey={bid.publicKey} />
33+
</Typography.Text>
34+
) : (
35+
<Typography.Text>
36+
<TokenName publicKey={bid.publicKey} />
37+
{' / '}
38+
<TokenName publicKey={ask.publicKey} />
39+
</Typography.Text>
40+
)}
1441
</Space>
1542
)
1643
}

0 commit comments

Comments
 (0)
Please sign in to comment.