owned this note
owned this note
Published
Linked with GitHub
# All Weather 前端需求
## Problem
<https://github.com/all-weather-protocol/all-weather-frontend>
按優先級排序
1. Deposit 的交易，希望能 1-click 跳出 approve -> deposit 的交易視窗: in short 就是希望 user 只要點一次 deposit 按鈕，不用學什麼 approve 是啥意思用 js 讓 approve -> deposit 這兩個 transaction 依次序跳出來讓 user 簽但不知道怎麼做UI 隨意，主要是 transaction 能按順序跳出來就好xd
2. `Deposit` 的 input 欄位太短，如果 input `0.0001` eth 的話，後面幾會都看不到
3. 效能問題：每次在 input 欄位 `onChange`, 都會 send requests to my backend server. 但太多了，會等很久，只要能變快就算會浪費後端算力或多花錢也都能接受。以 UX 為主
## Solutions
自由發揮，會動就好
```flow
st=>start: Input Number
cond7=>condition: Check if the number is greater than minimum zap in amount
op6=>operation: show the slippage somewhere (hardcoded)
op8=>operation: show the error msg somewhere and remind the user to zap in more
e=>end: End
op=>operation: Approve (show the pop up component)
cond=>condition: Number exceeds user's allowance?
op2=>operation: Fetch Routes
op5=>operation: Deposit (also, show the pop up component)
st->cond7
op6->cond->e
cond(yes)->op
cond(no)->op2
op->op2->op5
cond7(yes)->op6
cond7(no)->op8
```
## Scopes
- [ ] deposit 功能
- [ ] input 欄位要看得清你要付多少 eth
- [ ] 希望能在 8/30 前搞定
## No-Go
除了input欄位跟美觀有關，其他美觀都不需要改xd
## Resources
1. [github](https://github.com/all-weather-protocol/all-weather-frontend/blob/main/pages/views/ZapInButton.jsx)
2. [website](https://all-weather-protocol.on.fleek.co/)
3. 用 hardhat 去 `deposit` 能成功：[zapIn.js](https://github.com/david30907d/all-weather-scaffold/blob/master/packages/hardhat/deploy/zapIn.js)
4. DepositData which works in hardhat
```
{
"amount": {
"type": "BigNumber",
"hex": "0x1550f7dca70000"
},
"receiver": "0x78000b0605E81ea9df54b33f72ebC61B5F5c8077",
"oneInchDataDpx": "0xe449022e0000000000000000000000000000000000000000000000000002a8131d217c000000000000000000000000000000000000000000000000000038c09912310a2900000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000001800000000000000000000000b52781c275431bd48d290a4318e338fe0df89eb98b1ccac8",
"glpMinLpOut": {
"type": "BigNumber",
"hex": "0x11ff2b3d7038afdc"
},
"glpGuessPtReceivedFromSy": {
"guessMin": {
"type": "BigNumber",
"hex": "0x05e61462dcdc0227"
},
"guessMax": {
"type": "BigNumber",
"hex": "0x09d4cca4c56eae41"
},
"guessOffchain": {
"type": "BigNumber",
"hex": "0x068dddc32e49c981"
},
"maxIteration": 13,
"eps": "1000000000000000"
},
"glpInput": {
"tokenIn": "0x82af49447d8a07e3bd95bd0d56f35241523fbab1",
"netTokenIn": {
"type": "BigNumber",
"hex": "0x0550263a42f800"
},
"tokenMintSy": "0x82af49447d8a07e3bd95bd0d56f35241523fbab1",
"bulk": "0x0000000000000000000000000000000000000000",
"pendleSwap": "0x0000000000000000000000000000000000000000",
"swapData": {
"swapType": 0,
"extRouter": "0x0000000000000000000000000000000000000000",
"extCalldata": [],
"needScale": false
}
},
"gdaiMinLpOut": {
"type": "BigNumber",
"hex": "0x07f55cd989b8aa7d"
},
"gdaiGuessPtReceivedFromSy": {
"guessMin": {
"type": "BigNumber",
"hex": "0x038dcd9e516f80e4"
},
"guessMax": {
"type": "BigNumber",
"hex": "0x05ec56b287b9d6d2"
},
"guessOffchain": {
"type": "BigNumber",
"hex": "0x03f2e47705268f37"
},
"maxIteration": 13,
"eps": "1000000000000000"
},
"gdaiInput": {
"tokenIn": "0xda10009cbd5d07dd0cecc66161fc93d7c9000da1",
"netTokenIn": {
"type": "BigNumber",
"hex": "0x1164fcfd54f65cc4"
},
"tokenMintSy": "0xda10009cbd5d07dd0cecc66161fc93d7c9000da1",
"bulk": "0x0000000000000000000000000000000000000000",
"pendleSwap": "0x0000000000000000000000000000000000000000",
"swapData": {
"swapType": 0,
"extRouter": "0x0000000000000000000000000000000000000000",
"extCalldata": [],
"needScale": false
}
},
"gdaiOneInchDataGDAI": "0xe449022e000000000000000000000000000000000000000000000000000550263a42f800000000000000000000000000000000000000000000000000210cad7aee3a7d0e0000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000000100000000000000000000000031fa55e03bad93c7f8affdd2ec616ebfde2460018b1ccac8",
"rethMinLpOut": {
"type": "BigNumber",
"hex": "0x025a6299f85626"
},
"rethGuessPtReceivedFromSy": {
"guessMin": {
"type": "BigNumber",
"hex": "0xffb226eb2cf6"
},
"guessMax": {
"type": "BigNumber",
"hex": "0x01aa28eb87f59b"
},
"guessOffchain": {
"type": "BigNumber",
"hex": "0x011c1b47aff912"
},
"maxIteration": 13,
"eps": "1000000000000000"
},
"rethInput": {
"tokenIn": "0xec70dcb4a1efa46b8f2d97c310c9c4790ba5ffa8",
"netTokenIn": {
"type": "BigNumber",
"hex": "0x04a39563ce6bd1"
},
"tokenMintSy": "0xec70dcb4a1efa46b8f2d97c310c9c4790ba5ffa8",
"bulk": "0x0000000000000000000000000000000000000000",
"pendleSwap": "0x0000000000000000000000000000000000000000",
"swapData": {
"swapType": 0,
"extRouter": "0x0000000000000000000000000000000000000000",
"extCalldata": [],
"needScale": false
}
},
"rethOneInchDataRETH": "0xe449022e000000000000000000000000000000000000000000000000000550263a42f8000000000000000000000000000000000000000000000000000004a39563ce6bd10000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000000100000000000000000000000009ba302a3f5ad2bf8853266e271b005a5b3716fe8b1ccac8"
}
```
4. DepositData which fails on Frontend side
```
ContractFunctionExecutionError: The contract function "deposit" reverted with the following reason:
SafeERC20: approve from non-zero to non-zero allowance
Contract Call:
address: 0x36bb138Eb364889317Fd324a8f4A1d4CB244A198
function: deposit((uint256 amount, address receiver, bytes oneInchDataDpx, uint256 glpMinLpOut, (uint256 guessMin, uint256 guessMax, uint256 guessOffchain, uint256 maxIteration, uint256 eps), (address tokenIn, uint256 netTokenIn, address tokenMintSy, address bulk, address pendleSwap, (uint8 swapType, address extRouter, bytes extCalldata, bool needScale)), uint256 gdaiMinLpOut, (uint256 guessMin, uint256 guessMax, uint256 guessOffchain, uint256 maxIteration, uint256 eps), (address tokenIn, uint256 netTokenIn, address tokenMintSy, address bulk, address pendleSwap, (uint8 swapType, address extRouter, bytes extCalldata, bool needScale)), bytes gdaiOneInchDataGDAI, uint256 rethMinLpOut, (uint256 guessMin, uint256 guessMax, uint256 guessOffchain, uint256 maxIteration, uint256 eps), (address tokenIn, uint256 netTokenIn, address tokenMintSy, address bulk, address pendleSwap, (uint8 swapType, address extRouter, bytes extCalldata, bool needScale)), bytes rethOneInchDataRETH))
args: ({"amount":{"type":"BigNumber","hex":"0x4a9b6384488000"},"receiver":"0x78000b0605E81ea9df54b33f72ebC61B5F5c8077","oneInchDataDpx":"0xe449022e00000000000000000000000000000000000000000000000000094c42e5f5320000000000000000000000000000000000000000000000000000c69527c8a66c1900000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000001800000000000000000000000b52781c275431bd48d290a4318e338fe0df89eb98b1ccac8","glpMinLpOut":{"type":"BigNumber","hex":"0x3ee8e449c870e10d"},"glpGuessPtReceivedFromSy":{"guessMin":{"type":"BigNumber","hex":"0x149eb41b7d43e277"},"guessMax":{"type":"BigNumber","hex":"0x225dd6d87b71241d"},"guessOffchain":{"type":"BigNumber","hex":"0x16e939e5a7a0c2be"},"maxIteration":13,"eps":{"type":"BigNumber","hex":"0x038d7ea4c68000"}},"glpInput":{"tokenIn":"0x82af49447d8a07e3bd95bd0d56f35241523fbab1","netTokenIn":{"type":"BigNumber","hex":"0x129885cbea6400"},"tokenMintSy":"0x82af49447d8a07e3bd95bd0d56f35241523fbab1","bulk":"0x0000000000000000000000000000000000000000","pendleSwap":"0x0000000000000000000000000000000000000000","swapData":{"swapType":0,"extRouter":"0x0000000000000000000000000000000000000000","extCalldata":[],"needScale":false}},"gdaiMinLpOut":{"type":"BigNumber","hex":"0x1d35c1a74d33bb81"},"gdaiGuessPtReceivedFromSy":{"guessMin":{"type":"BigNumber","hex":"0x0d0b30fbb5c761cc"},"guessMax":{"type":"BigNumber","hex":"0x15bd51a3844c4daa"},"guessOffchain":{"type":"BigNumber","hex":"0x0e7e366d02dd891c"},"maxIteration":13,"eps":"1000000000000000"},"gdaiInput":{"tokenIn":"0xda10009cbd5d07dd0cecc66161fc93d7c9000da1","netTokenIn":{"type":"BigNumber","hex":"0x3ccab9a237e1aa65"},"tokenMintSy":"0xd85e038593d7a098614721eae955ec2022b9b91b","bulk":"0x0000000000000000000000000000000000000000","pendleSwap":"0x38812c3ac3563bf200482ac9d096952d7cb55f9b","swapData":{"swapType":1,"extRouter":"0x6131b5fae19ea4f9d964eac0408e4408b66337b5","extCalldata":"0xe21fd0e90000000000000000000000000000000000000000000000000000000000000020000000000000000000000000a665a94de06acabbc4306e97a51df03c86ca37ce000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000a000000000000000000000000000000000000000000000000000000000000005a000000000000000000000000000000000000000000000000000000000000007e000000000000000000000000000000000000000000000000000000000000004e0000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000c0000000000000000000000000da10009cbd5d07dd0cecc66161fc93d7c9000da1000000000000000000000000d85e038593d7a098614721eae955ec2022b9b91b0000000000000000000000000000000001e4ef00d069e71d6ba041b0a16f7ea0000000000000000000000000000000000000000000000000000000007fffffff000000000000000000000000000000000000000000000000000000000000048000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000300000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000160000000000000000000000000000000000000000000000000000000000000026000000000000000000000000000000000000000000000000000000000000000408cc7a56b0000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000ba12222222228d8ba445958a75a0704d566bf2c85b0c1b84566708dd391ae0fece1a32e33682ee3d0000000000000000000003e1000000000000000000000000da10009cbd5d07dd0cecc66161fc93d7c9000da1000000000000000000000000ff970a61a04b1ca14834a43f5de4533ebddb5cc80000000000000000000000000000000000000000000000003ccab9a237e1aa6500000000000000000000000000000000000000000000000000000000000000408cc7a56b0000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000ba12222222228d8ba445958a75a0704d566bf2c80510ccf9eb3ab03c1508d3b9769e8ee2cfd6fdcf00000000000000000000005d000000000000000000000000ff970a61a04b1ca14834a43f5de4533ebddb5cc80000000000000000000000003f56e0c36d275367b8c502090edf38289b3dea0d000000000000000000000000000000000000000000000000000000000043dc6300000000000000000000000000000000000000000000000000000000000000408cc7a56b0000000000000000000000000000000000000000000000000000000200000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000ba12222222228d8ba445958a75a0704d566bf2c870ba7dc356b41c849e74c679932c852cc0331a900000000000000000000003570000000000000000000000003f56e0c36d275367b8c502090edf38289b3dea0d000000000000000000000000d85e038593d7a098614721eae955ec2022b9b91b000000000000000000000000000000000000000000000000410e05da168e218700000000000000000000000000000000000000000000000000000000000000200000000000000000000003de983a5c0e00000000000000003b0b46507f281644000000000000000000000000da10009cbd5d07dd0cecc66161fc93d7c9000da1000000000000000000000000d85e038593d7a098614721eae955ec2022b9b91b000000000000000000000000000000000000000000000000000000000000016000000000000000000000000000000000000000000000000000000000000001a000000000000000000000000000000000000000000000000000000000000001e000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000001e4ef00d069e71d6ba041b0a16f7ea00000000000000000000000000000000000000000000000003ccab9a237e1aa650000000000000000000000000000000000000000000000003523bf487270e0d6000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000002200000000000000000000000000000000000000000000000000000000000000001000000000000000000000000a665a94de06acabbc4306e97a51df03c86ca37ce00000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000003ccab9a237e1aa6500000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001f57b22536f75726365223a2250656e646c65222c22416d6f756e74496e555344223a22342e3337393335363835363735353731222c22416d6f756e744f7574555344223a22342e35383130393734353135323035313035222c22526566657272616c223a22222c22466c616773223a312c22496e74656772697479496e666f223a7b224b65794944223a2231222c225369676e6174757265223a2243452f7763562b57596f6f65474f6b79632b597662774a3256723268723367704b55384c4f63364c6c486b34383276686838386471354447474f55616a474452474950326a4a5962566a4f7931503744306b4532457a5a5463656f7454446a6b7a436b6b4a6a4634755a425a6659465a4f4d5249472b566b4a3361393237494c4b4d376571427a57563967616c5034466b7031414a3874544c363677644461456269577a665570653638746348464b61654a4569464f6e4152466e735a6853472f756a4f7867475032386159644530634d71686848536e4e485578473630796c54322f757758456d435842414b5a646d324d4c625032374b7a4f4962443075714d2f516c646f542f756c4e5545336657306362734c3356337955665474306173327968575346422f56797170434d6641487535424d5a7444654e42394e2b63706a62326d4d38343066533365444d43585342733564773d3d227d7d0000000000000000000000","needScale":false}},"gdaiOneInchDataGDAI":"0xe449022e00000000000000000000000000000000000000000000000000129885cbea640000000000000000000000000000000000000000000000000073812d8103c65d590000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000000100000000000000000000000031fa55e03bad93c7f8affdd2ec616ebfde2460018b1ccac8","rethMinLpOut":{"type":"BigNumber","hex":"0x083a05b4e4cb16"},"rethGuessPtReceivedFromSy":{"guessMin":{"type":"BigNumber","hex":"0x037deb67eb226b"},"guessMax":{"type":"BigNumber","hex":"0x05d1ddad328eb3"},"guessOffchain":{"type":"BigNumber","hex":"0x03e13e737709cd"},"maxIteration":13,"eps":"1000000000000000"},"rethInput":{"tokenIn":"0xec70dcb4a1efa46b8f2d97c310c9c4790ba5ffa8","netTokenIn":{"type":"BigNumber","hex":"0x103833a3d295b6"},"tokenMintSy":"0xec70dcb4a1efa46b8f2d97c310c9c4790ba5ffa8","bulk":"0x0000000000000000000000000000000000000000","pendleSwap":"0x0000000000000000000000000000000000000000","swapData":{"swapType":0,"extRouter":"0x0000000000000000000000000000000000000000","extCalldata":[],"needScale":false}},"rethOneInchDataRETH":"0xe449022e00000000000000000000000000000000000000000000000000129885cbea640000000000000000000000000000000000000000000000000000103833a3d295b60000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000000100000000000000000000000009ba302a3f5ad2bf8853266e271b005a5b3716fe8b1ccac8"})
sender: 0x78000b0605E81ea9df54b33f72ebC61B5F5c8077
Docs: https://viem.sh/docs/contract/simulateContract.html
Version: viem@1.1.7
at getContractError (getContractError.js:24:1)
at simulateContract (simulateContract.js:71:31)
at async prepareWriteContract (chunk-LAFZBYO7.js:2078:29)
at async writeContract (chunk-LAFZBYO7.js:2354:1)
console.error @ client.js:1
window.console.error @ next-dev.js:24
execute @ mutation.mjs:158
await in execute (async)
mutate @ mutationObserver.mjs:85
eval @ useMutation.mjs:19
eval @ index.js:1597
handleZapIn @ VM37289 ZapInButton.jsx:165
handleClick @ button.js:130
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
eval @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
```
Google Drive
Gist
Clipboard
Sign in with Wallet
