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

Don't show empty balances when account not connected #477

Merged
merged 6 commits into from
Jun 3, 2024
Merged

Don't show empty balances when account not connected #477

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8333db6
Don't show empty balances when account not connected
ebma May 29, 2024
81c72d7
Also remove 'My pool balance' when disconnected
ebma May 30, 2024
975ed21
Merge branch 'main' into 469-show-bsp-and-swap-balance-0-when-wallet-…
ebma Jun 3, 2024
b625168
Change OpenWallet button
ebma Jun 3, 2024
bc71c3f
Show `OpenWallet` button in Nabla components
ebma Jun 3, 2024
000204f
Make wallet connect dialog scrollable
ebma Jun 3, 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
43 changes: 25 additions & 18 deletions src/components/nabla/Pools/Backstop/AddLiquidity/index.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading