From d071b3790d64cb5f67c283081cc49bcb5b48b89f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Thu, 14 Nov 2024 16:37:23 -0300 Subject: [PATCH 1/4] feat(request): add slippage cost to request pay view --- .../Request/Pay/Views/Initial.view.tsx | 50 +++++++++++++++---- 1 file changed, 41 insertions(+), 9 deletions(-) diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index 3d06d7d11..7ef757a10 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -51,7 +51,6 @@ async function createXChainUnsignedTx({ ? interfaces.EPeanutLinkType.native : interfaces.EPeanutLinkType.erc20, fromTokenDecimals: tokenData.decimals as number, - // @ts-ignore // TODO: fix this linkDetails: requestLink, }) return xchainUnsignedTxs @@ -91,11 +90,20 @@ export const InitialView = ({ const [estimatedFromValue, setEstimatedFromValue] = useState('0') const [tokenRequestedLogoURI, setTokenRequestedLogoURI] = useState(undefined) const [tokenRequestedSymbol, setTokenRequestedSymbol] = useState('') + const [slippagePercentage, setSlippagePercentage] = useState(undefined) + const [xChainUnsignedTxs, setXChainUnsignedTxs] = useState( + undefined + ) const calculatedFee = useMemo(() => { return isXChain ? txFee : formatTokenAmount(estimatedGasCost, 3) }, [isXChain, estimatedGasCost, txFee]) + const calculatedSlippage = useMemo(() => { + if (!selectedTokenData?.price || !slippagePercentage) return null + return ((slippagePercentage / 100) * selectedTokenData.price * Number(estimatedFromValue)).toFixed(2) + }, [slippagePercentage, selectedTokenData, estimatedFromValue]) + const isButtonDisabled = useMemo(() => { return ( viewState === ViewState.LOADING || @@ -132,14 +140,25 @@ export const InitialView = ({ requestLink: requestLinkData, senderAddress: address!, }) - const { feeEstimation, estimatedFromAmount } = txData + const { + feeEstimation, + estimatedFromAmount, + slippagePercentage, + unsignedTxs: _xChainUnsignedTxs, + } = txData setEstimatedFromValue(estimatedFromAmount) + console.log('slippage', slippagePercentage) + console.dir(txData) + setSlippagePercentage(slippagePercentage) + setXChainUnsignedTxs(_xChainUnsignedTxs) clearError() setTxFee(Number(feeEstimation).toFixed(2)) setViewState(ViewState.READY_TO_PAY) } catch (error) { setErrorState({ showError: true, errorMessage: ERR_NO_ROUTE }) setIsFeeEstimationError(true) + setSlippagePercentage(undefined) + setXChainUnsignedTxs(undefined) setTxFee('0') } } @@ -165,6 +184,8 @@ export const InitialView = ({ useEffect(() => { setLoadingState('Loading') clearError() + setSlippagePercentage(undefined) + setXChainUnsignedTxs(undefined) const isXChain = selectedChainID !== requestLinkData.chainId || !areTokenAddressesEqual(selectedTokenAddress, requestLinkData.tokenAddress) @@ -284,20 +305,15 @@ export const InitialView = ({ setTransactionHash(hash ?? '') onNext() } else { + if (!xChainUnsignedTxs) return await checkUserHasEnoughBalance({ tokenValue: estimatedFromValue }) if (selectedTokenData!.chainId !== String(currentChain?.id)) { await switchNetwork(selectedTokenData!.chainId) } setLoadingState('Sign in wallet') - const xchainUnsignedTxs = await createXChainUnsignedTx({ - tokenData: selectedTokenData!, - requestLink: requestLinkData, - senderAddress: address ?? '', - }) - const { unsignedTxs } = xchainUnsignedTxs const hash = await sendTransactions({ - preparedDepositTxs: { unsignedTxs }, + preparedDepositTxs: { unsignedTxs: xChainUnsignedTxs }, feeOptions: undefined, }) setLoadingState('Executing transaction') @@ -405,6 +421,22 @@ export const InitialView = ({ )} + + {null !== calculatedSlippage && ( +
+
+ + +
+ +
+ )} +
From 88597a04c7a5a1b6d6e610e79ae70c49eb93e3df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Thu, 14 Nov 2024 16:38:35 -0300 Subject: [PATCH 2/4] WIP chore: bump peanut-sdk --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1f840dc76..9229f0b81 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@headlessui/tailwindcss": "^0.2.1", "@safe-global/safe-apps-sdk": "^9.1.0", "@sentry/nextjs": "^8.30.0", - "@squirrel-labs/peanut-sdk": "^0.5.8", + "@squirrel-labs/peanut-sdk": "^0.5.9", "@tanstack/react-query": "^5.56.2", "@typeform/embed-react": "^3.20.0", "@vercel/analytics": "^1.3.1", From b6cd953b531d0630d69491bc8d3c61ed800c8265 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Tue, 19 Nov 2024 10:20:21 -0300 Subject: [PATCH 3/4] refactor: remove console.log on Pay InitialView --- src/components/Request/Pay/Views/Initial.view.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Request/Pay/Views/Initial.view.tsx b/src/components/Request/Pay/Views/Initial.view.tsx index 7ef757a10..2657d1e28 100644 --- a/src/components/Request/Pay/Views/Initial.view.tsx +++ b/src/components/Request/Pay/Views/Initial.view.tsx @@ -147,8 +147,6 @@ export const InitialView = ({ unsignedTxs: _xChainUnsignedTxs, } = txData setEstimatedFromValue(estimatedFromAmount) - console.log('slippage', slippagePercentage) - console.dir(txData) setSlippagePercentage(slippagePercentage) setXChainUnsignedTxs(_xChainUnsignedTxs) clearError() From 3a651e8709267d95258441280ae0ef3bf4aa4dde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juan=20Jos=C3=A9=20Ram=C3=ADrez?= Date: Tue, 19 Nov 2024 10:21:53 -0300 Subject: [PATCH 4/4] build: bump peanut-sdk --- package.json | 2 +- pnpm-lock.yaml | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 9229f0b81..b05df5bd7 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@headlessui/tailwindcss": "^0.2.1", "@safe-global/safe-apps-sdk": "^9.1.0", "@sentry/nextjs": "^8.30.0", - "@squirrel-labs/peanut-sdk": "^0.5.9", + "@squirrel-labs/peanut-sdk": "^0.5.10", "@tanstack/react-query": "^5.56.2", "@typeform/embed-react": "^3.20.0", "@vercel/analytics": "^1.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2fd05ad3b..05a9e439d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,8 +36,8 @@ importers: specifier: ^8.30.0 version: 8.30.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.26.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.53.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.26.0(@opentelemetry/api@1.9.0))(encoding@0.1.13)(next@14.2.13(@babel/core@7.25.2)(@opentelemetry/api@1.9.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(webpack@5.94.0) '@squirrel-labs/peanut-sdk': - specifier: ^0.5.8 - version: 0.5.8(bufferutil@4.0.8)(utf-8-validate@5.0.10) + specifier: ^0.5.10 + version: 0.5.10(bufferutil@4.0.8)(utf-8-validate@5.0.10) '@tanstack/react-query': specifier: ^5.56.2 version: 5.56.2(react@18.3.1) @@ -2836,8 +2836,8 @@ packages: '@spruceid/siwe-parser@2.1.2': resolution: {integrity: sha512-d/r3S1LwJyMaRAKQ0awmo9whfXeE88Qt00vRj91q5uv5ATtWIQEGJ67Yr5eSZw5zp1/fZCXZYuEckt8lSkereQ==} - '@squirrel-labs/peanut-sdk@0.5.8': - resolution: {integrity: sha512-we6gjREiN4rBx7f9V8KGi49JtWMRILkaMXjN+tgubYrQL08RLAUDpkUJ2S9AxLI1IQU+RVrraUtTOemj4peDDQ==} + '@squirrel-labs/peanut-sdk@0.5.10': + resolution: {integrity: sha512-ejIuMe1hGMnuwGEVbRHoEcLtbw5Mvv9XXubFrWP3Al5BbfiyNFMI3Fa0oker2/zfLp+RerENvKEg8ZESKYmkLg==} '@stablelib/aead@1.0.1': resolution: {integrity: sha512-q39ik6sxGHewqtO0nP4BuSe3db5G1fEJE8ukvngS2gLkBXyy6E7pLubhbYgnkDFv6V8cWaxcE4Xn0t6LWcJkyg==} @@ -4882,6 +4882,7 @@ packages: eslint@8.57.0: resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options. hasBin: true esniff@2.0.1: @@ -12700,7 +12701,7 @@ snapshots: uri-js: 4.4.1 valid-url: 1.0.9 - '@squirrel-labs/peanut-sdk@0.5.8(bufferutil@4.0.8)(utf-8-validate@5.0.10)': + '@squirrel-labs/peanut-sdk@0.5.10(bufferutil@4.0.8)(utf-8-validate@5.0.10)': dependencies: ethersv5: ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@5.0.10) jest-summary-reporter: 0.0.2