All Weather 前端需求

Problem

https://github.com/all-weather-protocol/all-weather-frontend

按優先級排序

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  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

自由發揮,會動就好

Created with Raphaël 2.2.0Input NumberCheck if the number is greater than minimum zap in amountshow the slippage somewhere (hardcoded)Number exceeds user's allowance?Approve (show the pop up component)Fetch RoutesDeposit (also, show the pop up component)show the error msg somewhere and remind the user to zap in moreyesnoyesno

Scopes

  • deposit 功能
  • input 欄位要看得清你要付多少 eth
  • 希望能在 8/30 前搞定

No-Go

除了input欄位跟美觀有關,其他美觀都不需要改xd

Resources

  1. github
  2. website
  3. 用 hardhat 去 deposit 能成功: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"
}
  1. 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