Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FE LiFi: Revoke approvals #2874

Merged
merged 5 commits into from
Jul 16, 2024
Merged

FE LiFi: Revoke approvals #2874

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8ebade8
Init lifi approval revoke page
aureliusbtc Jul 16, 2024
1244bde
get rid of victim address and use connected address
aureliusbtc Jul 16, 2024
5382c4e
Add some text
aureliusbtc Jul 16, 2024
84788c6
Only show approval data once connected
aureliusbtc Jul 16, 2024
8c6a56c
Multi-chain checker
aureliusbtc Jul 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 176 additions & 0 deletions packages/synapse-interface/pages/lifi/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import Grid from '@tw/Grid'
import { useEffect, useState } from 'react'
import { useAccount } from 'wagmi'

import { DEFAULT_FROM_CHAIN } from '@/constants/swap'
import { LandingPageWrapper } from '@layouts/LandingPageWrapper'
import StandardPageContainer from '@layouts/StandardPageContainer'
import { getErc20TokenAllowance } from '@/actions/getErc20TokenAllowance'
import { approveToken } from '@/utils/approveToken'
import { TransactionButton } from '@/components/buttons/TransactionButton'
import { useConnectModal } from '@rainbow-me/rainbowkit'

const LifiPage = () => {
const { address: currentAddress, chain, isConnected } = useAccount()
const [connectedChainId, setConnectedChainId] = useState(0)
const [address, setAddress] = useState(undefined)
const { openConnectModal } = useConnectModal()

useEffect(() => {
setConnectedChainId(chain?.id ?? DEFAULT_FROM_CHAIN)
}, [chain])

useEffect(() => {
setAddress(currentAddress)
}, [currentAddress])

const usdcAddress = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'
const usdtAddress = '0xdac17f958d2ee523a2206206994597c13d831ec7'
const wethAddress = '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2'

const [usdcAllowance, setUsdcAllowance] = useState<bigint>(0n)
const [usdtAllowance, setUsdtAllowance] = useState<bigint>(0n)
const [wethAllowance, setWethAllowance] = useState<bigint>(0n)

useEffect(() => {
const fetchAllowances = async () => {
if (address) {
const usdcAllowance = await getErc20TokenAllowance({
address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
chainId: connectedChainId,
tokenAddress: usdcAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style: Consider extracting the common parameters into a variable to avoid repetition.

})
setUsdcAllowance(usdcAllowance)

const usdtAllowance = await getErc20TokenAllowance({
address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
chainId: connectedChainId,
tokenAddress: usdtAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
})
setUsdtAllowance(usdtAllowance)

const wethAllowance = await getErc20TokenAllowance({
address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
chainId: connectedChainId,
tokenAddress: wethAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
})
setWethAllowance(wethAllowance)
}
}

fetchAllowances()
}, [address, connectedChainId])



return (
<LandingPageWrapper>
<StandardPageContainer
connectedChainId={connectedChainId}
address={address}
>
<div className="flex justify-between">
<div>
<div className="text-2xl text-white">
Revoke Li.fi Approvals
</div>
</div>
</div>
<div className="py-6">
<Grid
cols={{ xs: 1 }}
gap={6}
className="justify-center px-2 py-16 sm:px-6 md:px-8"
>
<div className="pb-3 place-self-center">
<div>
<div>USDC Allowance At Risk: {usdcAllowance.toString()}</div>
<div>USDT Allowance At Risk: {usdtAllowance.toString()}</div>
<div>WETH Allowance at Risk: {wethAllowance.toString()}</div>
</div>
</div>
{!isConnected && (
<div className="flex flex-col justify-center h-full p-10">
<TransactionButton
style={{
background:
'linear-gradient(90deg, rgba(128, 0, 255, 0.2) 0%, rgba(255, 0, 191, 0.2) 100%)',
border: '1px solid #9B6DD7',
borderRadius: '4px',
}}
label="Connect wallet"
pendingLabel="Connecting"
onClick={() =>
new Promise((resolve, reject) => {
try {
openConnectModal()
resolve(true)
} catch (e) {
reject(e)
}
})
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Logic: Using a promise here is redundant since openConnectModal is already a synchronous function.

/>
</div>
)}
{usdcAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke USDC Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
usdcAddress,
0n,
)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style: Wrap the approveToken call in a try/catch block to handle potential errors.

setUsdcAllowance(0n)
}}
/>
)}

{usdtAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke USDT Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
usdtAddress,
0n,
)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style: Wrap the approveToken call in a try/catch block to handle potential errors.

setUsdtAllowance(0n)
}}
/>
)}

{wethAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke WETH Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
wethAddress,
0n,
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Style: Wrap the approveToken call in a try/catch block to handle potential errors.

)
setWethAllowance(0n)
}}
/>
)}
</Grid>
</div>
</StandardPageContainer>
</LandingPageWrapper>
)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comprehensive review of the LifiPage component.

  • State Management and Hooks: The use of useState and useEffect appears appropriate. The state is managed locally and updates are triggered based on changes to relevant dependencies.
  • Blockchain Interactions: The component fetches token allowances and allows users to revoke approvals. It is crucial to ensure that these interactions are secure and efficient.
  • Conditional Rendering: The use of conditional rendering based on the wallet connection status and token allowances is correctly implemented.
  • Error Handling: Consider adding error handling for asynchronous operations, especially those interacting with the blockchain.
  • Code Duplication: The code for fetching token allowances is repeated for each token. This could be refactored into a more reusable function to reduce duplication and improve maintainability.
- const usdcAllowance = await getErc20TokenAllowance({
-   address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
-   chainId: connectedChainId,
-   tokenAddress: usdcAddress,
-   spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
- })
+ const fetchTokenAllowance = async (tokenAddress) => {
+   return await getErc20TokenAllowance({
+     address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
+     chainId: connectedChainid,
+     tokenAddress,
+     spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
+   });
+ }
+ const usdcAllowance = await fetchTokenAllowance(usdcAddress);
  • Performance Considerations: Ensure that the asynchronous functions do not block the UI or lead to performance issues.
  • Security Concerns: Verify that all blockchain interactions are secure, particularly in terms of handling user addresses and chain IDs.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const LifiPage = () => {
const { address: currentAddress, chain, isConnected } = useAccount()
const [connectedChainId, setConnectedChainId] = useState(0)
const [address, setAddress] = useState(undefined)
const { openConnectModal } = useConnectModal()
useEffect(() => {
setConnectedChainId(chain?.id ?? DEFAULT_FROM_CHAIN)
}, [chain])
useEffect(() => {
setAddress(currentAddress)
}, [currentAddress])
const usdcAddress = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'
const usdtAddress = '0xdac17f958d2ee523a2206206994597c13d831ec7'
const wethAddress = '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2'
const [usdcAllowance, setUsdcAllowance] = useState<bigint>(0n)
const [usdtAllowance, setUsdtAllowance] = useState<bigint>(0n)
const [wethAllowance, setWethAllowance] = useState<bigint>(0n)
useEffect(() => {
const fetchAllowances = async () => {
if (address) {
const usdcAllowance = await getErc20TokenAllowance({
address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
chainId: connectedChainId,
tokenAddress: usdcAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
})
setUsdcAllowance(usdcAllowance)
const usdtAllowance = await getErc20TokenAllowance({
address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
chainId: connectedChainId,
tokenAddress: usdtAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
})
setUsdtAllowance(usdtAllowance)
const wethAllowance = await getErc20TokenAllowance({
address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
chainId: connectedChainId,
tokenAddress: wethAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
})
setWethAllowance(wethAllowance)
}
}
fetchAllowances()
}, [address, connectedChainId])
return (
<LandingPageWrapper>
<StandardPageContainer
connectedChainId={connectedChainId}
address={address}
>
<div className="flex justify-between">
<div>
<div className="text-2xl text-white">
Revoke Li.fi Approvals
</div>
</div>
</div>
<div className="py-6">
<Grid
cols={{ xs: 1 }}
gap={6}
className="justify-center px-2 py-16 sm:px-6 md:px-8"
>
<div className="pb-3 place-self-center">
<div>
<div>USDC Allowance At Risk: {usdcAllowance.toString()}</div>
<div>USDT Allowance At Risk: {usdtAllowance.toString()}</div>
<div>WETH Allowance at Risk: {wethAllowance.toString()}</div>
</div>
</div>
{!isConnected && (
<div className="flex flex-col justify-center h-full p-10">
<TransactionButton
style={{
background:
'linear-gradient(90deg, rgba(128, 0, 255, 0.2) 0%, rgba(255, 0, 191, 0.2) 100%)',
border: '1px solid #9B6DD7',
borderRadius: '4px',
}}
label="Connect wallet"
pendingLabel="Connecting"
onClick={() =>
new Promise((resolve, reject) => {
try {
openConnectModal()
resolve(true)
} catch (e) {
reject(e)
}
})
}
/>
</div>
)}
{usdcAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke USDC Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
usdcAddress,
0n,
)
setUsdcAllowance(0n)
}}
/>
)}
{usdtAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke USDT Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
usdtAddress,
0n,
)
setUsdtAllowance(0n)
}}
/>
)}
{wethAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke WETH Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
wethAddress,
0n,
)
setWethAllowance(0n)
}}
/>
)}
</Grid>
</div>
</StandardPageContainer>
</LandingPageWrapper>
)
}
const LifiPage = () => {
const { address: currentAddress, chain, isConnected } = useAccount()
const [connectedChainId, setConnectedChainId] = useState(0)
const [address, setAddress] = useState(undefined)
const { openConnectModal } = useConnectModal()
useEffect(() => {
setConnectedChainId(chain?.id ?? DEFAULT_FROM_CHAIN)
}, [chain])
useEffect(() => {
setAddress(currentAddress)
}, [currentAddress])
const usdcAddress = '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'
const usdtAddress = '0xdac17f958d2ee523a2206206994597c13d831ec7'
const wethAddress = '0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2'
const [usdcAllowance, setUsdcAllowance] = useState<bigint>(0n)
const [usdtAllowance, setUsdtAllowance] = useState<bigint>(0n)
const [wethAllowance, setWethAllowance] = useState<bigint>(0n)
useEffect(() => {
const fetchTokenAllowance = async (tokenAddress) => {
return await getErc20TokenAllowance({
address: "0xbc6f5a4ed57f16af3db54da801aba8d1dc4ed675",
chainId: connectedChainId,
tokenAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
});
}
const fetchAllowances = async () => {
if (address) {
const usdcAllowance = await fetchTokenAllowance(usdcAddress);
setUsdcAllowance(usdcAllowance)
const usdtAllowance = await fetchTokenAllowance(usdtAddress);
setUsdtAllowance(usdtAllowance)
const wethAllowance = await fetchTokenAllowance(wethAddress);
setWethAllowance(wethAllowance)
}
}
fetchAllowances()
}, [address, connectedChainId])
return (
<LandingPageWrapper>
<StandardPageContainer
connectedChainId={connectedChainId}
address={address}
>
<div className="flex justify-between">
<div>
<div className="text-2xl text-white">
Revoke Li.fi Approvals
</div>
</div>
</div>
<div className="py-6">
<Grid
cols={{ xs: 1 }}
gap={6}
className="justify-center px-2 py-16 sm:px-6 md:px-8"
>
<div className="pb-3 place-self-center">
<div>
<div>USDC Allowance At Risk: {usdcAllowance.toString()}</div>
<div>USDT Allowance At Risk: {usdtAllowance.toString()}</div>
<div>WETH Allowance at Risk: {wethAllowance.toString()}</div>
</div>
</div>
{!isConnected && (
<div className="flex flex-col justify-center h-full p-10">
<TransactionButton
style={{
background:
'linear-gradient(90deg, rgba(128, 0, 255, 0.2) 0%, rgba(255, 0, 191, 0.2) 100%)',
border: '1px solid #9B6DD7',
borderRadius: '4px',
}}
label="Connect wallet"
pendingLabel="Connecting"
onClick={() =>
new Promise((resolve, reject) => {
try {
openConnectModal()
resolve(true)
} catch (e) {
reject(e)
}
})
}
/>
</div>
)}
{usdcAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke USDC Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
usdcAddress,
0n,
)
setUsdcAllowance(0n)
}}
/>
)}
{usdtAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke USDT Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
usdtAddress,
0n,
)
setUsdtAllowance(0n)
}}
/>
)}
{wethAllowance > 0n && (
<TransactionButton
className="btn btn-primary"
pendingLabel="Revoking..."
label="Revoke WETH Approval"
onClick={async () => {
await approveToken(
"0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
connectedChainId,
wethAddress,
0n,
)
setWethAllowance(0n)
}}
/>
)}
</Grid>
</div>
</StandardPageContainer>
</LandingPageWrapper>
)
}


export default LifiPage
Loading