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

FE LiFi: Revoke approvals #2874

Merged
merged 5 commits into from
Jul 16, 2024
Merged

FE LiFi: Revoke approvals #2874

Changes from 4 commits
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
184 changes: 184 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,184 @@
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: currentAddress,
chainId: connectedChainId,
tokenAddress: usdcAddress,
spender: "0x1231deb6f5749ef6ce6943a275a1d3e7486f4eae",
})
setUsdcAllowance(usdcAllowance)

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

const wethAllowance = await getErc20TokenAllowance({
address: currentAddress,
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>
<h3>Li.fi / Jumper is investigating an ongoing exploit, and users should revoke approvals <a className="underline" target="_blank" href="https://x.com/lifiprotocol/status/1813196697641570635">- Li.fi Tweet</a></h3>
<br />
<h3> Check to see if you have any approvals at risk below:</h3>
<br />
{isConnected && (
<>
<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 to check for approvals"
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>
)
}

export default LifiPage
Loading