Skip to content

Commit

Permalink
Don't show empty balances when account not connected
Browse files Browse the repository at this point in the history
  • Loading branch information
@ebma
ebma committed May 29, 2024
1 parent da30f2f commit 8333db6
Show file tree
Hide file tree
Showing 8 changed files with 168 additions and 114 deletions.
43 changes: 25 additions & 18 deletions src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { FormProvider } from 'react-hook-form';
import { AmountSelector } from '../../../common/AmountSelector';
import { calcSharePercentage } from '../../../../../helpers/calc';
import { TokenBalance } from '../../../common/TokenBalance';
import { useGlobalState } from '../../../../../GlobalStateProvider';

interface AddLiquidityProps {
data: NablaInstanceBackstopPool;
Expand All @@ -23,6 +24,8 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
const { toggle, onSubmit, mutation, depositQuery, balanceQuery, amountString, amountBigDecimal, form } =
useAddLiquidity(data.id, data.token.id, data.token.decimals, data.lpTokenDecimals);

const { walletAccount } = useGlobalState();

const {
formState: { errors },
} = form;
Expand All @@ -45,14 +48,16 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
</div>
<FormProvider {...form}>
<form onSubmit={onSubmit}>
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={data.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 dark:text-neutral-400 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={data.token.symbol}></TokenBalance>
</p>
</div>
{walletAccount && (
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={data.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 dark:text-neutral-400 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={data.token.symbol}></TokenBalance>
</p>
</div>
)}
<AmountSelector maxBalance={balanceQuery.data} formFieldName="amount" form={form} />
<Validation className="text-center mt-2" errors={errors} />
<div className="relative flex w-full flex-col gap-4 rounded-lg bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
Expand All @@ -62,17 +67,19 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
{stringifyBigWithSignificantDecimals(totalSupplyOfLpTokens, 2)} {data.symbol}
</div>
</div>
<div className="flex items-center justify-between">
<div>Your pool Share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
{walletAccount && (
<div className="flex items-center justify-between">
<div>Your pool Share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
</div>
</div>
</div>
)}
</div>
<div className="mt-8">
<TokenApproval
Expand Down
53 changes: 31 additions & 22 deletions src/components/nabla/Pools/Backstop/WithdrawLiquidity/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { TransactionSettingsDropdown } from '../../../common/TransactionSettings
import { PoolSelectorModal } from '../../../common/PoolSelectorModal';
import { TokenBalance } from '../../../common/TokenBalance';
import { AmountSelector } from '../../../common/AmountSelector';
import { useGlobalState } from '../../../../../GlobalStateProvider';

const WithdrawLiquidityBody = ({ nabla }: { nabla: NablaInstance }): JSX.Element | null => {
const [showTokenModal, setShowTokenModal] = useState(false);
Expand All @@ -34,6 +35,8 @@ const WithdrawLiquidityBody = ({ nabla }: { nabla: NablaInstance }): JSX.Element
updateStorage,
} = useWithdrawLiquidity(nabla);

const { walletAccount } = useGlobalState();

const {
register,
setValue,
Expand Down Expand Up @@ -81,14 +84,16 @@ const WithdrawLiquidityBody = ({ nabla }: { nabla: NablaInstance }): JSX.Element
<div className={hideCss}>
<FormProvider {...form}>
<form onSubmit={onSubmit}>
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={backstopPool.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 dark:text-neutral-400 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={tokenToReceive.symbol}></TokenBalance>
</p>
</div>
{walletAccount && (
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={backstopPool.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 dark:text-neutral-400 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={tokenToReceive.symbol}></TokenBalance>
</p>
</div>
)}
<AmountSelector maxBalance={depositQuery.data} formFieldName="amount" form={form}>
<div className="flex items-start justify-start pt-2">
<div className="flex-grow">
Expand All @@ -100,10 +105,12 @@ const WithdrawLiquidityBody = ({ nabla }: { nabla: NablaInstance }): JSX.Element
significantDecimals={2}
></TokenBalance>
</div>
<div className="text-neutral-500 text-sm dark:text-neutral-400 flex items-center justify-between flex-grow mr-2">
<div>Your current balance</div>
<TokenBalance query={balanceQuery} symbol={tokenToReceive.symbol}></TokenBalance>
</div>
{walletAccount && (
<div className="text-neutral-500 text-sm dark:text-neutral-400 flex items-center justify-between flex-grow mr-2">
<div>Your current balance</div>
<TokenBalance query={balanceQuery} symbol={tokenToReceive.symbol}></TokenBalance>
</div>
)}
</div>
<TransactionSettingsDropdown
setSlippage={(slippage) => {
Expand All @@ -128,17 +135,19 @@ const WithdrawLiquidityBody = ({ nabla }: { nabla: NablaInstance }): JSX.Element
{stringifyBigWithSignificantDecimals(totalSupplyOfLpTokens, 2)} {backstopPool.symbol}
</div>
</div>
<div className="flex items-center justify-between">
<div>Your backstop pool share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
{walletAccount && (
<div className="flex items-center justify-between">
<div>Your backstop pool share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
</div>
</div>
</div>
)}
</div>
<div className="mt-8">
<Button color="primary" className="w-full" type="submit" disabled={!submitEnabled}>
Expand Down
27 changes: 17 additions & 10 deletions src/components/nabla/Pools/Backstop/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ import { backstopPoolAbi } from '../../../../contracts/nabla/BackstopPool';
import { Erc20Balance } from '../../common/Erc20Balance';
import { BackstopPoolModals, LiquidityModalProps } from './BackstopPoolModals';
import { NablaFootnote } from '../../common/NablaFootnote';
import { useGlobalState } from '../../../../GlobalStateProvider';

const BackstopPoolsBody = (): JSX.Element | null => {
const toggle = useModalToggle<LiquidityModalProps>();
const { nabla, isLoading } = useNablaInstance();

const { walletAccount } = useGlobalState();

if (isLoading) return <Skeleton className="bg-neutral-200 h-48 w-full" />;
const pool = nabla?.backstopPool;
if (!pool) return <h3 className="text-center">No backstop pools</h3>;
Expand All @@ -22,16 +25,20 @@ const BackstopPoolsBody = (): JSX.Element | null => {
<div className="card-body p-4 md:p-6">
<div className="flex items-center justify-between gap-2 text-3xl">
<h2>My pool balance</h2>
<div>
<Erc20Balance
abi={backstopPoolAbi}
erc20ContractDefinition={{
contractAddress: pool.id,
decimals: pool.lpTokenDecimals,
symbol: pool.symbol,
}}
/>
</div>
{walletAccount ? (
<div>
<Erc20Balance
abi={backstopPoolAbi}
erc20ContractDefinition={{
contractAddress: pool.id,
decimals: pool.lpTokenDecimals,
symbol: pool.symbol,
}}
/>
</div>
) : (
<span>0</span>
)}
</div>
<div className="flex flex-col items-center gap-2 mt-4">
<Button
Expand Down
43 changes: 25 additions & 18 deletions src/components/nabla/Pools/Swap/AddLiquidity/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { TransactionProgress } from '../../../common/TransactionProgress';
import { TokenApproval } from '../../../common/TokenApproval';
import { TokenBalance } from '../../../common/TokenBalance';
import { AmountSelector } from '../../../common/AmountSelector';
import { useGlobalState } from '../../../../../GlobalStateProvider';

export interface AddLiquidityProps {
data: SwapPoolColumn;
Expand All @@ -23,6 +24,8 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
const { toggle, onSubmit, mutation, depositQuery, balanceQuery, amountString, amountBigDecimal, form } =
useAddLiquidity(data.id, data.token.id, data.token.decimals, data.lpTokenDecimals);

const { walletAccount } = useGlobalState();

const {
formState: { errors },
} = form;
Expand All @@ -45,14 +48,16 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
</div>
<FormProvider {...form}>
<form onSubmit={onSubmit}>
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={data.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 dark:text-neutral-400 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={data.token.symbol}></TokenBalance>
</p>
</div>
{walletAccount && (
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={data.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 dark:text-neutral-400 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={data.token.symbol}></TokenBalance>
</p>
</div>
)}
<AmountSelector maxBalance={balanceQuery.data} formFieldName="amount" form={form} />
<Validation className="text-center mt-2" errors={errors} />
<div className="relative flex w-full flex-col gap-4 rounded-lg bg-neutral-100 dark:bg-neutral-700 text-neutral-500 dark:text-neutral-300 p-4 mt-4">
Expand All @@ -62,17 +67,19 @@ const AddLiquidity = ({ data }: AddLiquidityProps): JSX.Element | null => {
{stringifyBigWithSignificantDecimals(totalSupplyOfLpTokens, 2)} {data.symbol}
</div>
</div>
<div className="flex items-center justify-between">
<div>Your pool Share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
{walletAccount && (
<div className="flex items-center justify-between">
<div>Your pool Share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
</div>
</div>
</div>
)}
</div>
<div className="mt-8">
<TokenApproval
Expand Down
43 changes: 25 additions & 18 deletions src/components/nabla/Pools/Swap/Redeem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { FormProvider } from 'react-hook-form';
import { TransactionSettingsDropdown } from '../../../common/TransactionSettingsDropdown';
import { TokenBalance } from '../../../common/TokenBalance';
import { AmountSelector } from '../../../common/AmountSelector';
import { useGlobalState } from '../../../../../GlobalStateProvider';

export type RedeemLiquidityValues = {
amount: number;
Expand All @@ -27,6 +28,8 @@ const Redeem = ({ data }: RedeemProps): JSX.Element | null => {
const { toggle, mutation, onSubmit, updateStorage, balanceQuery, depositQuery, amountString, form, withdrawalQuote } =
useRedeem(data);

const { walletAccount } = useGlobalState();

const {
register,
setValue,
Expand All @@ -51,14 +54,16 @@ const Redeem = ({ data }: RedeemProps): JSX.Element | null => {
</div>
<FormProvider {...form}>
<form onSubmit={onSubmit}>
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={data.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={data.backstopPool.token.symbol}></TokenBalance>
</p>
</div>
{walletAccount && (
<div className="flex justify-between align-end text-sm text-initial my-3">
<p>
Deposited: <TokenBalance query={depositQuery} symbol={data.symbol}></TokenBalance>
</p>
<p className="text-neutral-500 text-right">
Balance: <TokenBalance query={balanceQuery} symbol={data.backstopPool.token.symbol}></TokenBalance>
</p>
</div>
)}
<AmountSelector maxBalance={depositQuery.data} formFieldName="amount" form={form}>
<div className="flex items-center pt-2">
<div className="flex items-center justify-between flex-grow mr-2">
Expand Down Expand Up @@ -106,17 +111,19 @@ const Redeem = ({ data }: RedeemProps): JSX.Element | null => {
{stringifyBigWithSignificantDecimals(totalSupplyOfLpTokens, 2)} {data.symbol}
</div>
</div>
<div className="flex items-center justify-between">
<div>Your swap pool share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
{walletAccount && (
<div className="flex items-center justify-between">
<div>Your swap pool share</div>
<div>
{depositQuery.data === undefined ? (
<NumberLoader />
) : (
calcSharePercentage(totalSupplyOfLpTokens, depositQuery.data.preciseBigDecimal)
)}
%
</div>
</div>
</div>
)}
</div>
<div className="mt-2">
<div className="text-center">
Expand Down
Loading

0 comments on commit 8333db6

Please sign in to comment.