[Withdraw CoW AMM]: Create withdraw pool hook UI #9
Conversation
…ns' into pedro/cow-370-create-withdraw-pool-hook-ui-2
yvesfracari
changed the title
| items={connectedChainAirdrops.map((airdrop) => { | ||
| return { value: airdrop.name, id: airdrop.name } | ||
| })} |
| setSelectedItem={({ id }) => | ||
| setSelectedAirdrop(connectedChainAirdrops.find((airdrop) => airdrop.name === id)) | ||
| } |
| return ( | ||
| <> | ||
| <p> | ||
| Reduce or withdraw liquidity from a pool before a token swap integrating the process{' '} |
There was a problem hiding this comment.
I assume this is a CoW AMM pool, not any AMM pool right? would just indicate it in the copy
| token: new Token(1115511, '0x912ce59144191c1204e64559fe8253a0e49e6548', 18, 'ARB', 'Arbitrum'), | ||
| fiatAmount: '2765252315984615', | ||
| balance: '100000000000000000', |
There was a problem hiding this comment.
🤔 maybe I don't have context here, but I assume we hardcoding this data here for testing purposes, right? Should we add a comment to come back to this in the future and remove it?
| import { IMinimalPool } from '../types' | ||
|
|
||
| export function useUserPools(user?: string): IMinimalPool[] { | ||
| // TODO: replace with real data |
| items={pools.map((pool) => ({ value: pool.symbol, id: pool.id }))} | ||
| text={selectedPool?.symbol || 'Choose a pool to remove liquidity from..'} | ||
| setSelectedItem={({ id }) => setSelectedPool(pools.find((pool) => pool.id === id))} |
There was a problem hiding this comment.
same as above, would use useMemo/useCb combo here
| [SupportedChainId.SEPOLIA]: [PRE_BUILD, AIRDROP_HOOK_APP, PRE_WITHDRAW_COW_AMM], | ||
| [SupportedChainId.SEPOLIA]: [PRE_BUILD, AIRDROP_HOOK_APP], |
There was a problem hiding this comment.
is this correct? We have two Sepolia keys here
| display: inline-block; | ||
| border-radius: 50%; | ||
| line-height: 0; | ||
| box-shadow: 0 2px 10px 0 ${({ theme }) => (theme.darkMode ? '#496e9f' : '#bfd6f7')}; |
There was a problem hiding this comment.
are colors usually hard coded in this project?
| {poolBalance.map((poolBalance, index) => ( | ||
| <PoolBalancePreview key={index} id={`${label}-${index}`} poolBalance={poolBalance} /> | ||
| ))} |
There was a problem hiding this comment.
I think you should avoid using the index as key, in many cases it can cause a lot of trouble.
https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/
| text-align: center; | ||
| display: flex; | ||
| flex-direction: row; |
There was a problem hiding this comment.
Not a big deal, but I think that flex's direction on React it's row by default.
| justify-content: space-between; | ||
| cursor: pointer; | ||
| background-color: inherit; | ||
| padding: 0.5rem; |
There was a problem hiding this comment.
Just curious, there's some reason to use rem here and px on other places?
Screenshare.-.2024-09-17.4_30_16.PM.mp4