input

Author: tuphan-dn

public/manifest.json

@@ -4,18 +4,8 @@
   "icons": [
     {
       "src": "favicon.png",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "favicon.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "favicon.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "sizes": "32x32",
+      "type": "image/png"
     }
   ],
   "start_url": ".",

src/components/bid/index.tsx

@@ -5,7 +5,7 @@ export type TokenNameProps = {
 }
 
 const TokenName = ({ publicKey }: TokenNameProps) => {
-  const tokenName = publicKey?.toBase58().substring(0, 2) || '??'
+  const tokenName = publicKey?.toBase58().substring(0, 4) || '??'
   return <span>{tokenName}</span>
 }
 

src/components/tokenName.tsx

@@ -1,31 +1,22 @@
-import { Fragment } from 'react'
-
 import { Space, Typography } from 'antd'
-import { DownOutlined } from '@ant-design/icons'
+import IconSax from 'components/iconsax'
 import TokenAvatar from 'components/tokenAvatar'
 import TokenName from 'components/tokenName'
+import { CSSProperties } from 'react'
 
-const TokenSelection = ({ publicKey }: { publicKey?: any }) => {
+export type TokenSelectionProps = { publicKey?: any; style?: CSSProperties }
 
+const TokenSelection = ({ publicKey, style }: TokenSelectionProps) => {
   return (
-    <Fragment>
-      <Space
-        style={{ boxShadow: '0 4px 40px #2124332e' }}
-        className="token-select"
-      >
-        <TokenAvatar
-          publicKey={publicKey}
-          style={{ border: 'none' }}
-        ></TokenAvatar>
-
-        <Typography.Text type="secondary">
-          <TokenName publicKey={publicKey} />
-        </Typography.Text>
-        <Typography.Text type="secondary">
-          <DownOutlined style={{ fontSize: '10px' }} />
-        </Typography.Text>
-      </Space>
-    </Fragment>
+    <Space className="token-select shadowed" style={style}>
+      <TokenAvatar publicKey={publicKey} style={{ border: 'none' }} />
+      <Typography.Text type="secondary">
+        <TokenName publicKey={publicKey} />
+      </Typography.Text>
+      <Typography.Text type="secondary">
+        <IconSax variant="Bulk" name="ArrowDown2" />
+      </Typography.Text>
+    </Space>
   )
 }
 

src/components/tokenSelection/index.tsx

@@ -96,6 +96,7 @@ export const Deposit = {
     const HE1 = HybridEquality.prove(s1, r1_, srcAmountA, dstAmountA)
     const HE2 = HybridEquality.prove(s2, r2_, srcAmountB, dstAmountB)
     const HE3 = HybridEquality.prove(s3, r3_, dstAmountLP, srcAmountLP)
+
     return {
       srcAmountA,
       srcAmountB,
@@ -111,6 +112,7 @@ export const Deposit = {
       HE3,
     }
   },
+
   verify: (proof: DepositProof) => {
     let ok = true
     const {

src/helper/nizk/deposit.ts

@@ -1,4 +1,3 @@
-import { StrictMode } from 'react'
 import { render } from 'react-dom'
 import { HashRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
@@ -11,13 +10,11 @@ import reportWebVitals from 'reportWebVitals'
 import 'static/styles/index.less'
 
 render(
-  <StrictMode>
-    <Provider store={store}>
-      <HashRouter>
-        <App />
-      </HashRouter>
-    </Provider>
-  </StrictMode>,
+  <Provider store={store}>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </Provider>,
   document.getElementById('root'),
 )
 

src/index.tsx

@@ -11,30 +11,12 @@ export const devTools = (appName: string): any => {
   }
 }
 
-// BigInt Serialization Middleware
-// https://redux-toolkit.js.org/api/serializabilityMiddleware
-const isPlain = (val: any): boolean => {
-  const isPlainObject = (obj: object): boolean => {
-    if (obj === null) return false
-    const proto = Object.getPrototypeOf(obj)
-    return proto !== null && Object.getPrototypeOf(proto) === null
-  }
-  return (
-    typeof val === 'undefined' ||
-    val === null ||
-    typeof val === 'string' ||
-    typeof val === 'boolean' ||
-    typeof val === 'number' ||
-    Array.isArray(val) ||
-    isPlainObject(val) ||
-    typeof val === 'bigint'
-  )
-}
 BigInt.prototype.toJSON = function () {
   return this.toString() // https://github.com/GoogleChromeLabs/jsbi/issues/30
 }
+
 export const bigintSerializationMiddleware = {
   serializableCheck: {
-    isSerializable: isPlain,
+    isSerializable: () => true,
   },
 }

src/store/devTools.ts

@@ -14,7 +14,7 @@ export type SwapState = {
 export type Wallet = {
   publicKey?: PublicKey
   mint?: PublicKey
-  amount?: number
+  amount: number | ''
 }
 
 export enum Direction {
@@ -29,8 +29,12 @@ export enum Direction {
 const NAME = 'swap'
 const initialState: SwapState = {
   direction: Direction.AB,
-  bid: {},
-  ask: {},
+  bid: {
+    amount: '',
+  },
+  ask: {
+    amount: '',
+  },
 }
 
 /**
@@ -39,18 +43,11 @@ const initialState: SwapState = {
 
 export const setSwapWallet = createAsyncThunk(
   `${NAME}/setSwapWallet`,
-  async (state: SwapState) => {
+  async (state: Partial<SwapState>) => {
     return state
   },
 )
 
-export const setAmountWallet = createAsyncThunk(
-  `${NAME}/setAmountWallet`,
-  async ({ type, wallet }: { type: string; wallet: Wallet }) => {
-    return { [`${type}`]: wallet }
-  },
-)
-
 /**
  * Usual procedure
  */
@@ -60,15 +57,10 @@ const slice = createSlice({
   initialState,
   reducers: {},
   extraReducers: (builder) =>
-    void builder
-      .addCase(
-        setSwapWallet.fulfilled,
-        (state, { payload }) => void Object.assign(state, payload),
-      )
-      .addCase(
-        setAmountWallet.fulfilled,
-        (state, { payload }) => void Object.assign(state, payload),
-      ),
+    void builder.addCase(
+      setSwapWallet.fulfilled,
+      (state, { payload }) => void Object.assign(state, payload),
+    ),
 })
 
 export default slice.reducer

src/store/swap.reducer.ts

@@ -84,16 +84,16 @@ const Approval = () => {
   return (
     <Modal visible={visible} footer={null} closable={false}>
       <Row gutter={[24, 24]}>
+        <Col span={24}>
+          <Typography.Title level={4}>
+            <Space>
+              <IconSax variant="Bulk" name="Warning2" />
+              <span>For demostration only!</span>
+            </Space>
+          </Typography.Title>
+        </Col>
         <Col span={24}>
           <Row gutter={[8, 8]}>
-            <Col span={24}>
-              <Typography.Title level={4}>
-                <Space>
-                  <IconSax variant="Bulk" name="Warning2" />
-                  <span>For demostration only!</span>
-                </Space>
-              </Typography.Title>
-            </Col>
             <Col span={24}>
               <Typography.Text>
                 The prototype is to propose a zero-knowledge Automated Market
@@ -128,8 +128,13 @@ const Approval = () => {
           </Row>
         </Col>
         <Col span={24}>
-          <Button type="primary" onClick={initSwap} block>
-            Undestand
+          <Button
+            type="primary"
+            onClick={initSwap}
+            icon={<IconSax variant="Bulk" name="TickCircle" />}
+            block
+          >
+            Understand
           </Button>
         </Col>
       </Row>

src/view/approval/index.tsx

@@ -18,7 +18,13 @@ const Debug = () => {
     <Fragment>
       <Button
         type="text"
-        icon={<IconSax variant="Bulk" name="ShieldSearch" />}
+        icon={
+          <IconSax
+            style={{ fontSize: 20 }}
+            variant="Bulk"
+            name="ShieldSearch"
+          />
+        }
         onClick={() => setVisible(true)}
       />
       <Drawer