From 57dc51fe0cdf57725265dd21482acc6786a6e20c Mon Sep 17 00:00:00 2001 From: Spacebean Date: Mon, 21 Oct 2024 17:20:42 -0400 Subject: [PATCH 1/3] feat: transfers --- .../Common/Form/AddressInputField.tsx | 6 +- .../ui/src/components/Nav/SettingsDialog.tsx | 2 +- .../src/components/Silo/Actions/Transfer.tsx | 86 ++++--- .../components/Silo/Token/DepositsTable.tsx | 239 +++++++++--------- .../Silo/Token/TokenDepositsContext.tsx | 11 +- 5 files changed, 194 insertions(+), 150 deletions(-) diff --git a/projects/ui/src/components/Common/Form/AddressInputField.tsx b/projects/ui/src/components/Common/Form/AddressInputField.tsx index cf826493f7..8c5bd27fb4 100644 --- a/projects/ui/src/components/Common/Form/AddressInputField.tsx +++ b/projects/ui/src/components/Common/Form/AddressInputField.tsx @@ -19,11 +19,11 @@ import { ethers } from 'ethers'; import useChainId from '~/hooks/chain/useChainId'; import useAccount from '~/hooks/ledger/useAccount'; import { CHAIN_INFO } from '~/constants'; +import Row from '~/components/Common/Row'; +import { FC } from '~/types'; import OutputField from './OutputField'; import BorderEffect from './BorderEffect'; import { trimAddress } from '../../../util'; -import Row from '~/components/Common/Row'; -import { FC } from '~/types'; export type AddressInputFieldProps = Partial & { name: string; @@ -153,7 +153,7 @@ const AddressInputFieldInner: FC = ({ color="primary" /> - + void }> = ({ color="primary" /> - + & { token: Token; - siloBalance: TokenSiloBalance | undefined; season: BigNumber; plantAndDoX: PlantAndDoX | undefined; + max: BigNumber; + transferrableDeposits: { + [k: string]: Deposit; + }; } > = ({ // Formik @@ -76,7 +74,8 @@ const TransferForm: FC< isSubmitting, // Custom token: whitelistedToken, - siloBalance, + max, + transferrableDeposits, season, plantAndDoX, }) => { @@ -100,9 +99,11 @@ const TransferForm: FC< // Results const withdrawResult = useMemo(() => { - const amount = BEAN.amount(values.tokens[0].amount?.toString() || '0'); - const deposits = siloBalance?.deposits || []; - + const amount = whitelistedToken.amount( + values.tokens[0].amount?.toString() || '0' + ); + const deposits = Object.values(transferrableDeposits); + if (max.eq(0)) return null; if (!isUsingPlant && (amount.lte(0) || !deposits.length)) return null; if (isUsingPlant && plantAndDoX?.getAmount().lte(0)) return null; @@ -115,12 +116,12 @@ const TransferForm: FC< season.toNumber() ); }, [ - BEAN, + max, isUsingPlant, plantAndDoX, sdk.silo.siloWithdraw, season, - siloBalance?.deposits, + transferrableDeposits, values.tokens, whitelistedToken, ]); @@ -131,8 +132,8 @@ const TransferForm: FC< ); // derived - const depositedBalance = siloBalance?.amount; - const isReady = withdrawResult && !withdrawResult.amount.lt(0); + // const depositedBalance = siloBalance?.amount; + const isReady = withdrawResult && !withdrawResult?.amount.lt(0); // Input props const InputProps = useMemo( @@ -205,13 +206,13 @@ const TransferForm: FC< - {depositedBalance?.gt(0) && ( + {max?.gt(0) && ( <> @@ -317,11 +318,7 @@ const TransferForm: FC< - {!depositedBalance || depositedBalance.eq(0) - ? 'Nothing to Transfer' - : 'Transfer'} + {!max || max.eq(0) ? 'Nothing to Transfer' : 'Transfer'} @@ -344,13 +339,35 @@ const TransferPropProvider: FC<{ }> = ({ token }) => { const sdk = useSdk(); const account = useAccount(); + const { + selected: selectedDeposits, + depositsById, + clear, + } = useTokenDepositsContext(); + + const { max, transferrableDeposits } = useMemo(() => { + const entries = Object.entries(depositsById).filter(([key, _]) => + selectedDeposits.has(key) + ); + + const transferrable = Object.fromEntries(entries); + + const maxAmount = Object.values(transferrable).reduce( + (acc, deposit) => acc.add(deposit.amount), + TokenValue.ZERO + ); + + return { + max: transform(maxAmount, 'bnjs', token), + transferrableDeposits: transferrable, + }; + }, [selectedDeposits, depositsById, token]); /// Beanstalk const season = useSeason(); /// Farmer const [refetchSilo] = useFetchBeanstalkSilo(); - const siloBalance = useFarmerSiloBalanceSdk(token); /// Form const middleware = useFormMiddleware(); @@ -388,7 +405,9 @@ const TransferPropProvider: FC<{ throw new Error('Please enter a valid recipient address.'); } - if (!siloBalance?.deposits) { + const deposits = Object.values(transferrableDeposits); + + if (!deposits?.length) { throw new Error('No balances found'); } @@ -412,7 +431,7 @@ const TransferPropProvider: FC<{ if (totalAmount.lte(0)) throw new Error('Invalid amount.'); const transferTxn = new TransferFarmStep(sdk, token, account, [ - ...siloBalance.deposits, + ...Object.values(transferrableDeposits), ]); transferTxn.build( @@ -456,6 +475,7 @@ const TransferPropProvider: FC<{ txToast.success(receipt); formActions.resetForm(); + clear(); } catch (err) { if (txToast) { if (err instanceof Error) { @@ -481,7 +501,6 @@ const TransferPropProvider: FC<{ [ middleware, account, - siloBalance?.deposits, token, sdk, season, @@ -489,6 +508,8 @@ const TransferPropProvider: FC<{ txnBundler, refetch, refetchSilo, + clear, + transferrableDeposits, ] ); @@ -497,7 +518,8 @@ const TransferPropProvider: FC<{ {(formikProps: FormikProps) => ( ( - - {/* Deposit */} - - Deposit Owner - - - {trimAddress(account)} - - - - Deposit Id - {trimDepositId(row.key)} - - {/* Deposit Amount */} - - Value - +}) => { + const sdk = useSdk(); + return ( + + {/* Deposit */} + + Deposit Owner - - - {formatTV(row.amount, 2, BigNumberJS.ROUND_HALF_CEIL)} + + {trimAddress(account)} + + + + Deposit Id + {trimDepositId(row.key)} + + {/* Deposit Amount */} + + Value + + + + + {formatTV(row.amount, 2, BigNumberJS.ROUND_HALF_CEIL)} + + + + + + + + {/* Deposit Stalk */} + + + Stalk + + + + {formatTV(row.stalk.total, 2, BigNumberJS.ROUND_HALF_CEIL)} + + + + + + At time of Deposit + + + {formatTV(row.stalk.base, 2, BigNumberJS.ROUND_HALF_CEIL)} + + + + + Grown since Deposit + + + {formatTV(row.stalk.grown, 2, BigNumberJS.ROUND_HALF_CEIL)} - - - - - {/* Deposit Stalk */} - - Stalk - - + Seed + + - {formatTV(row.stalk.total, 2, BigNumberJS.ROUND_HALF_CEIL)} + {formatTV(row.seeds, 2, BigNumberJS.ROUND_HALF_CEIL)} - - - At time of Deposit - - ({ + button: { + [t.breakpoints.down('sm')]: { + width: '100%', + }, + 'img, svg': { + height: '16px', + width: 'auto', + }, + }, + })} + > + - - Seed - - - - {formatTV(row.seeds, 2, BigNumberJS.ROUND_HALF_CEIL)} - - - - ({ - button: { - [t.breakpoints.down('sm')]: { - width: '100%', - }, - 'img, svg': { - height: '16px', - width: 'auto', - }, - }, - })} - > - - - - - -); + ); +}; // ---------- Components ---------- diff --git a/projects/ui/src/components/Silo/Token/TokenDepositsContext.tsx b/projects/ui/src/components/Silo/Token/TokenDepositsContext.tsx index cb0ed715bd..e07cbc61f5 100644 --- a/projects/ui/src/components/Silo/Token/TokenDepositsContext.tsx +++ b/projects/ui/src/components/Silo/Token/TokenDepositsContext.tsx @@ -9,14 +9,16 @@ import React, { SyntheticEvent, useCallback, useContext, + useEffect, useMemo, useState, } from 'react'; import useTabs from '~/hooks/display/useTabs'; import useFarmerSiloBalanceSdk from '~/hooks/farmer/useFarmerSiloBalanceSdk'; +import useAccount from '~/hooks/ledger/useAccount'; import { exists } from '~/util/UI'; -export type TokenDepositsSelectType = 'single' | 'multi'; +export type TokenDepositsSelectType = 'single' | 'multi' | 'none'; export type SiloTokenSlug = 'token' | 'transfer' | 'lambda' | 'anti-lambda'; @@ -71,6 +73,7 @@ export const TokenDepositsProvider = (props: { children: React.ReactNode; token: ERC20Token; }) => { + const account = useAccount(); const [selected, setSelected] = useState>(new Set()); const [slugIndex, setSlugIndex] = useTabs(SLUGS, 'content', 0); @@ -130,6 +133,12 @@ export const TokenDepositsProvider = (props: { [setSlugIndex] ); + useEffect(() => { + if (account) { + clear(); + } + }, [account, clear]); + return ( Date: Mon, 21 Oct 2024 19:33:14 -0400 Subject: [PATCH 2/3] feat: remove etherscanlinks --- .../Create/useWhitelistedWellComponents.ts | 5 +-- .../components/Frame/ContractInfoMarquee.tsx | 35 ++++++++++++--- .../src/components/TxnToast/ToastAlert.tsx | 6 ++- .../components/Well/Activity/eventRender.tsx | 3 +- .../src/components/Well/OtherSection.tsx | 20 ++++----- projects/dex-ui/src/utils/chain.ts | 20 ++++++++- .../Common/Connection/WalletButton.tsx | 2 +- .../ui/src/components/Common/FarmerChip.tsx | 45 ++++++++++--------- .../Common/Form/SmartSubmitButton.tsx | 4 +- .../ui/src/components/History/EventItem.tsx | 5 ++- .../PodsV2/Tables/columns/market-columns.tsx | 45 ++++++++++--------- 11 files changed, 120 insertions(+), 70 deletions(-) diff --git a/projects/dex-ui/src/components/Create/useWhitelistedWellComponents.ts b/projects/dex-ui/src/components/Create/useWhitelistedWellComponents.ts index 89b832f3b0..ec81d5d586 100644 --- a/projects/dex-ui/src/components/Create/useWhitelistedWellComponents.ts +++ b/projects/dex-ui/src/components/Create/useWhitelistedWellComponents.ts @@ -10,6 +10,7 @@ import CyrfinLogo from "src/assets/images/cyrfin-logo.svg"; import HalbornLogo from "src/assets/images/halborn-logo.png"; import { AddressMap } from "src/types"; import { toAddressMap } from "src/utils/addresses"; +import { explorerUrl } from "src/utils/chain"; import useSdk from "src/utils/sdk/useSdk"; import { usePumps } from "src/wells/pump/usePumps"; import { useWellImplementations } from "src/wells/useWellImplementations"; @@ -51,8 +52,6 @@ export type WellComponentInfo = { info: ComponentInfo[]; links: { explorer?: string; - // arbiscan?: string; - // etherscan?: string; github?: string; learnMore?: string; }; @@ -179,7 +178,7 @@ const getComponentWithUpdateLinks = ( chainId: ChainId, address: string ) => { - const explorer = `https://${ChainResolver.isL2Chain(chainId) ? "arbiscan" : "etherscan"}.io/address/${address}`; + const explorer = explorerUrl(chainId) + `/address/${address}`; return { ...wellComponent, diff --git a/projects/dex-ui/src/components/Frame/ContractInfoMarquee.tsx b/projects/dex-ui/src/components/Frame/ContractInfoMarquee.tsx index cf32c7f54d..beafc8789f 100644 --- a/projects/dex-ui/src/components/Frame/ContractInfoMarquee.tsx +++ b/projects/dex-ui/src/components/Frame/ContractInfoMarquee.tsx @@ -2,15 +2,14 @@ import React from "react"; import styled, { keyframes } from "styled-components"; +import { ChainId } from "@beanstalk/sdk-core"; + +import { explorerUrl, useResolvedChainId } from "src/utils/chain"; + type ContractMarqueeInfo = Record; const CarouselData: ContractMarqueeInfo = { - ADDRESS: [ - { - display: "0xBA51AAAA95aeEFc1292515b36D86C51dC7877773", - url: "https://etherscan.io/address/0xBA51AAAA95aeEFc1292515b36D86C51dC7877773" - } - ], + ADDRESS: [], AUDIT: [ { display: "HALBORN", url: "/halborn-basin-audit.pdf" }, { display: "CYFRIN", url: "/cyfrin-basin-audit.pdf" }, @@ -19,13 +18,35 @@ const CarouselData: ContractMarqueeInfo = { V1: [{ display: "WHITEPAPER", url: "/basin.pdf" }] }; +const ethCarouselAddresses = { + display: import.meta.env.VITE_AQUIFER_ADDRESS_ETH, + url: `${explorerUrl(ChainId.ETH_MAINNET)}/address/${import.meta.env.VITE_AQUIFER_ADDRESS_ETH}` +}; + +const arbCarouselAddresses = { + display: import.meta.env.VITE_AQUIFER_ADDRESS_ARBITRUM, + url: `${explorerUrl(ChainId.ARBITRUM_MAINNET)}/address/${import.meta.env.VITE_AQUIFER_ADDRESS_ARBITRUM}` +}; + +const CarouselInfo = (chainId: ChainId) => { + const data = { ...CarouselData }; + + const aquiferStruct = + chainId === ChainId.ARBITRUM_MAINNET ? arbCarouselAddresses : ethCarouselAddresses; + + data.ADDRESS[0] = aquiferStruct; + + return data; +}; + const speedPerItem = 16; // approx same speed as TokenMarque const itemGap = 24; const numItems = 4; const singleItemWidth = 1112.06; export const ContractInfoMarquee = () => { - const data = Object.entries(CarouselData); + const chainId = useResolvedChainId(); + const data = Object.entries(CarouselInfo(chainId)); const totalItemWidth = numItems * singleItemWidth; const totalGapWidth = numItems * itemGap; diff --git a/projects/dex-ui/src/components/TxnToast/ToastAlert.tsx b/projects/dex-ui/src/components/TxnToast/ToastAlert.tsx index 591fe179ef..6b41aa347e 100644 --- a/projects/dex-ui/src/components/TxnToast/ToastAlert.tsx +++ b/projects/dex-ui/src/components/TxnToast/ToastAlert.tsx @@ -4,6 +4,7 @@ import toast from "react-hot-toast"; import styled from "styled-components"; import { ImageButton } from "src/components/ImageButton"; +import { explorerName, explorerUrl, useSdkChainId } from "src/utils/chain"; import { Copy, X } from "../Icons"; import { BodyCaps, BodyS, LinksTextLink } from "../Typography"; @@ -30,14 +31,15 @@ export function ToastAlert({ id?: any; }) { const handleClick = useCallback(() => (id !== null ? dismissErrors(id) : dismissErrors()), [id]); + const chainId = useSdkChainId(); return ( {desc} {hash && ( - - View on Etherscan + + View on {explorerName(chainId)} )} diff --git a/projects/dex-ui/src/components/Well/Activity/eventRender.tsx b/projects/dex-ui/src/components/Well/Activity/eventRender.tsx index c1f9d37b44..0a6a38e6f7 100644 --- a/projects/dex-ui/src/components/Well/Activity/eventRender.tsx +++ b/projects/dex-ui/src/components/Well/Activity/eventRender.tsx @@ -6,6 +6,7 @@ import styled from "styled-components"; import { TokenValue } from "@beanstalk/sdk"; import { size } from "src/breakpoints"; +import { explorerUrl } from "src/utils/chain"; import { AddEvent, EVENT_TYPE, @@ -92,7 +93,7 @@ export const renderEvent = ( diff --git a/projects/dex-ui/src/components/Well/OtherSection.tsx b/projects/dex-ui/src/components/Well/OtherSection.tsx index cee1d4062e..4b45a94ff1 100644 --- a/projects/dex-ui/src/components/Well/OtherSection.tsx +++ b/projects/dex-ui/src/components/Well/OtherSection.tsx @@ -97,10 +97,10 @@ const OtherSectionContent: FC = ({ well }) => { {wellTokenDetail} Well - {well.address} + {well.address} - + {well.address.substr(0, 5) + "..." + well.address.substr(well.address.length - 5)} @@ -110,10 +110,10 @@ const OtherSectionContent: FC = ({ well }) => { Well LP Token - {displayTokenSymbol(well.lpToken as Token)} - {well.address} + {well.address} - + {well.address.substr(0, 5) + "..." + well.address.substr(well.address.length - 5)} @@ -128,8 +128,8 @@ const OtherSectionContent: FC = ({ well }) => { = ({ well }) => { = ({ well }) => { {tableItem.name} - + {tableItem.address} - + {tableItem.address.substr(0, 5) + "..." + tableItem.address.substr(tableItem.address.length - 5)} diff --git a/projects/dex-ui/src/utils/chain.ts b/projects/dex-ui/src/utils/chain.ts index 11dab86413..657f4116ab 100644 --- a/projects/dex-ui/src/utils/chain.ts +++ b/projects/dex-ui/src/utils/chain.ts @@ -1,4 +1,4 @@ -import { ChainResolver } from "@beanstalk/sdk-core"; +import { ChainId, ChainResolver } from "@beanstalk/sdk-core"; import useSdk from "./sdk/useSdk"; @@ -17,3 +17,21 @@ export function useResolvedChainId() { return ChainResolver.resolveToMainnetChainId(sdkChainId); } + +export const explorerUrl = (chainId: ChainId) => { + switch (ChainResolver.resolveToMainnetChainId(chainId)) { + case ChainId.ARBITRUM_MAINNET: + return `https://arbiscan.io`; + default: + return `https://etherscan.io`; + } +}; + +export const explorerName = (chainId: ChainId) => { + switch (ChainResolver.resolveToMainnetChainId(chainId)) { + case ChainId.ARBITRUM_MAINNET: + return "Arbiscan"; + default: + return "Etherscan"; + } +}; diff --git a/projects/ui/src/components/Common/Connection/WalletButton.tsx b/projects/ui/src/components/Common/Connection/WalletButton.tsx index 87b1012de5..14352783f8 100644 --- a/projects/ui/src/components/Common/Connection/WalletButton.tsx +++ b/projects/ui/src/components/Common/Connection/WalletButton.tsx @@ -133,7 +133,7 @@ const WalletButton: FC<{ showFullText?: boolean } & ButtonProps> = ({ Etherscan diff --git a/projects/ui/src/components/Common/FarmerChip.tsx b/projects/ui/src/components/Common/FarmerChip.tsx index 995adfb940..a97dd57bd7 100644 --- a/projects/ui/src/components/Common/FarmerChip.tsx +++ b/projects/ui/src/components/Common/FarmerChip.tsx @@ -1,29 +1,34 @@ import React from 'react'; import { Button, Typography } from '@mui/material'; import { IconSize } from '~/components/App/muiTheme'; -import AddressIcon from './AddressIcon'; import Row from '~/components/Common/Row'; import { FC } from '~/types'; +import { CHAIN_INFO } from '~/constants'; +import { useResolvedChainId } from '~/hooks/chain/useChainId'; +import AddressIcon from './AddressIcon'; -const FarmerChip: FC<{ account: string }> = ({ account }) => ( - -); +const FarmerChip: FC<{ account: string }> = ({ account }) => { + const chainId = useResolvedChainId(); + return ( + + ); +}; export default FarmerChip; diff --git a/projects/ui/src/components/Common/Form/SmartSubmitButton.tsx b/projects/ui/src/components/Common/Form/SmartSubmitButton.tsx index 3ebf7c2fa4..07c9c1f933 100644 --- a/projects/ui/src/components/Common/Form/SmartSubmitButton.tsx +++ b/projects/ui/src/components/Common/Form/SmartSubmitButton.tsx @@ -71,7 +71,7 @@ const SmartSubmitButton: FC< loading?: boolean; } & ButtonProps > = ({ contract, tokens, mode = 'auto', nowApproving, children, ...props }) => { - const { explorer } = useChainConstant(CHAIN_INFO); // fallback to mainnet + const { explorer, explorerName } = useChainConstant(CHAIN_INFO); // fallback to mainnet const { values, setFieldValue } = useFormikContext< FormState | FormStateNew >(); @@ -253,7 +253,7 @@ const SmartSubmitButton: FC< before executing this transaction. - View on Etherscan:{' '} + View on {explorerName}:{' '} = ({ event, account }) => { let amountOut; const siloTokens = useTokenMap(SILO_WHITELIST); + const chainInfo = useChainConstant(CHAIN_INFO); const processTokenEvent = ( e: EventManager.Event, @@ -209,7 +212,7 @@ const EventItem: FC = ({ event, account }) => { textDecoration: 'none', '&:hover': { textDecoration: 'underline' }, }} - href={`https://etherscan.io/tx/${event.transactionHash}`} + href={`${chainInfo.explorer}/tx/${event.transactionHash}`} target="_blank" rel="noreferrer" > diff --git a/projects/ui/src/components/Market/PodsV2/Tables/columns/market-columns.tsx b/projects/ui/src/components/Market/PodsV2/Tables/columns/market-columns.tsx index 9fb0d4d45c..d3218356ab 100644 --- a/projects/ui/src/components/Market/PodsV2/Tables/columns/market-columns.tsx +++ b/projects/ui/src/components/Market/PodsV2/Tables/columns/market-columns.tsx @@ -27,11 +27,10 @@ import { PodListing, PodOrder, PricingType } from '~/state/farmer/market'; import { displayBN, displayFullBN, MinBN } from '~/util'; import Row from '~/components/Common/Row'; import TokenIcon from '~/components/Common/TokenIcon'; -import { BEAN, PODS } from '~/constants/tokens'; +import { ARB, BEAN, PODS } from '~/constants/tokens'; import { ZERO_BN } from '~/constants'; import { BeanstalkPalette, FontSize } from '~/components/App/muiTheme'; import { FarmerMarketOrder } from '~/hooks/farmer/market/useFarmerMarket2'; -import etherscanIcon from '~/img/beanstalk/interface/nav/etherscan.svg'; import EntityIcon from '~/components/Market/PodsV2/Common/EntityIcon'; import { MarketEvent } from '~/hooks/beanstalk/useMarketActivityData'; import { FC } from '~/types'; @@ -143,7 +142,7 @@ export const MarketColumns = { <> {params.row[hashKey] ? ( {params.formattedValue} @@ -162,12 +161,12 @@ export const MarketColumns = { ) : ( - {params.formattedValue} + {params.formattedValue} )} ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ pricePerPod: (flex: number, align?: 'left' | 'right') => ({ @@ -186,7 +185,7 @@ export const MarketColumns = { ) : ( '-' ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ placeInLine: ( @@ -237,7 +236,7 @@ export const MarketColumns = { ); }, - } as GridColumns[number]), + }) as GridColumns[number], /** */ expiry: (flex: number, align?: 'left' | 'right') => @@ -280,7 +279,7 @@ export const MarketColumns = { ); }, - } as GridColumns[number]), + }) as GridColumns[number], }, /** "MARKET ACTVITY" */ @@ -306,7 +305,7 @@ export const MarketColumns = { ) : ( '-' ), - } as GridColumns[number]), + }) as GridColumns[number], }, /** "YOUR ORDERS" */ @@ -340,7 +339,7 @@ export const MarketColumns = { ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ amountPods: (flex: number, align?: 'left' | 'right') => @@ -360,7 +359,7 @@ export const MarketColumns = { ) : ( '-' ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ fillPct: (flex: number, align?: 'left' | 'right') => @@ -423,7 +422,7 @@ export const MarketColumns = { ); }, - } as GridColumns[number]), + }) as GridColumns[number], /** */ amountBeans: (flex: number, align?: 'left' | 'right') => @@ -443,7 +442,7 @@ export const MarketColumns = { ) : ( '-' ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ status: (flex: number, align?: 'left' | 'right') => @@ -464,11 +463,13 @@ export const MarketColumns = { return ( - {key === 'cancelled_partial' ? `CANCELLED (PARTIAL)` : params.value.toString().toUpperCase()} + {key === 'cancelled_partial' + ? `CANCELLED (PARTIAL)` + : params.value.toString().toUpperCase()} ); }, - } as GridColumns[number]), + }) as GridColumns[number], }, /** "BUY NOW" (Pod Listings) */ @@ -487,7 +488,7 @@ export const MarketColumns = { {params.value} ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ placeInLine: ( @@ -520,7 +521,7 @@ export const MarketColumns = { ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ remainingAmount: (flex: number, align?: 'left' | 'right') => @@ -540,7 +541,7 @@ export const MarketColumns = { ), - } as GridColumns[number]), + }) as GridColumns[number], }, /** "SELL NOW" (Pod Orders) */ @@ -559,7 +560,7 @@ export const MarketColumns = { {params.value.substring(0, 8)} ), - } as GridColumns[number]), + }) as GridColumns[number], /** */ podAmountRemaining: (flex: number, align?: 'left' | 'right') => @@ -589,7 +590,7 @@ export const MarketColumns = { ), - } as GridColumns[number]), + }) as GridColumns[number], /** For orders, place in line is a range from 0 - maxPlaceInLine. */ maxPlaceInLine: (flex: number, align?: 'left' | 'right') => @@ -618,6 +619,6 @@ export const MarketColumns = { ), - } as GridColumns[number]), + }) as GridColumns[number], }, }; From 10835d346ef9e5c94ad1bc55b89130bb37a3b2ad Mon Sep 17 00:00:00 2001 From: Spacebean Date: Mon, 21 Oct 2024 23:46:50 -0400 Subject: [PATCH 3/3] feat: update deposits table --- .../components/Silo/Token/DepositsTable.tsx | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/projects/ui/src/components/Silo/Token/DepositsTable.tsx b/projects/ui/src/components/Silo/Token/DepositsTable.tsx index 75c42170c9..70a023f210 100644 --- a/projects/ui/src/components/Silo/Token/DepositsTable.tsx +++ b/projects/ui/src/components/Silo/Token/DepositsTable.tsx @@ -30,10 +30,9 @@ import { } from '~/components/App/muiTheme'; import Row from '~/components/Common/Row'; import AddressIcon from '~/components/Common/AddressIcon'; -import NorthEastIcon from '@mui/icons-material/NorthEast'; import { useAppSelector } from '~/state'; import { minimizeWindowIcon } from '~/img/icon'; -import { Link } from 'react-router-dom'; +import { useResolvedChainId } from '~/hooks/chain/useChainId'; import useSdk from '~/hooks/sdk'; import { TokenDepositsContextType, @@ -255,7 +254,9 @@ const SingleTokenDepositDialogContent = ({ account: string; setSlug: TokenDepositsContextType['setSlug']; }) => { + const chainId = useResolvedChainId(); const sdk = useSdk(); + return ( {/* Deposit */} @@ -339,20 +340,18 @@ const SingleTokenDepositDialogContent = ({ ({ + sx={{ button: { - [t.breakpoints.down('sm')]: { - width: '100%', - }, + width: '100%', 'img, svg': { height: '16px', width: 'auto', }, }, - })} + }} > - + View on OpenSea + */} );