Compare commits

...
Author SHA1 Message Date
Matthew Russell 2221e9faca fix(trading): referrals page final commission value and onboarding dialog (#5474) 2023-12-08 09:14:59 +00:00
Ben 7c0139e107 chore(trading): e2e test fix (#5466) 2023-12-07 11:12:56 +00:00
Witoldandbwallacee a157ff1e05 fix(trading): amend formula for max leverage calc (#5462)
Co-authored-by: bwallacee <ben@vega.xyz>
2023-12-06 09:58:59 -08:00
Art 2e9fa0c52e chore(trading): referrals text and ui tweaks, bug fixes (#5408) 2023-12-06 17:51:39 +00:00
Ben c0790c1e93 chore(trading): update market-sim (#5463) 2023-12-06 16:31:44 +00:00
Bartłomiej Głownia 13c1044f8e chore(i18n): sync json translation files with locize (#5444) 2023-12-06 14:58:17 +00:00
Matthew Russell cf9f313e4c feat(trading): error boundaries for panes, sidebars, pages (#5438) 2023-12-06 13:31:40 +00:00
Art f56d34fe6e fix(environment): node switcher on mobile (#5455) 2023-12-06 13:31:08 +00:00
m.rayandcandida-d 1379366caa chore(trading): update LP table tooltips (#5442)
Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com>
2023-12-06 13:30:22 +00:00
Art 8958c12fe3 fix(governance): markdown link styling, referral details type error, contracts provider error (#5460) 2023-12-06 14:18:44 +01:00
m.ray fef13874db chore(trading): update generic data provider (#5431) 2023-12-06 12:32:51 +00:00
Edd 40f02ecf89 feat(explorer): add type details to orders in tx list and details (#5432) 2023-12-06 10:45:35 +00:00
Bartłomiej Głownia 41cd6b1455 fix(trading): avoid funding LineChart recreate instance on FundingContainer re-render (#5454) 2023-12-06 10:37:44 +00:00
68 changed files with 1234 additions and 512 deletions
+1
View File
@@ -77,6 +77,7 @@
"fixStyle": "inline-type-imports"
}
],
"@typescript-eslint/no-useless-constructor": 0,
"curly": ["error", "multi-line"]
}
},
@@ -6,6 +6,7 @@ import { Time } from '../time';
import { sideText, statusText, tifFull, tifShort } from './lib/order-labels';
import SizeInMarket from '../size-in-market/size-in-market';
import { TxOrderPeggedReference } from '../txs/details/order/tx-order-peg';
import { OrderTypeMapping } from '@vegaprotocol/types';
export interface DeterministicOrderDetailsProps {
id: string;
@@ -69,7 +70,7 @@ const DeterministicOrderDetails = ({
<span className="mx-5 text-base">@</span>
<PriceInMarket price={o.price} marketId={o.market.id} />
</h2>
<p className="text-gray-200">
<p className="text-gray-400 dark:text-gray-600">
In <MarketLink id={o.market.id} /> at <Time date={o.createdAt} />.
</p>
{o.peggedOrder ? (
@@ -83,13 +84,12 @@ const DeterministicOrderDetails = ({
/>
</p>
) : null}
{o.reference ? (
<p className="text-gray-500 mt-4">
<span>{t('Reference')}</span>: {o.reference}
</p>
) : null}
<div className="grid md:grid-cols-4 gap-x-6 mt-4">
<div className="grid md:grid-cols-5 gap-x-6 mt-4">
<div className="mb-12 md:mb-0">
<h2 className="text-2xl font-bold text-dark mb-4">
{t('Status')}
@@ -114,6 +114,16 @@ const DeterministicOrderDetails = ({
{o.version}
</h5>
</div>
{o.type ? (
<div className="">
<h2 className="text-2xl font-bold text-dark mb-4">
{t('Type')}
</h2>
<h5 className="text-lg font-medium text-gray-500 mb-0">
{OrderTypeMapping[o.type]}
</h5>
</div>
) : null}
</div>
</div>
</div>
@@ -80,6 +80,12 @@ export function getLabelForOrderType(
if (command.orderSubmission.icebergOpts) {
return 'Iceberg';
}
if (command.orderSubmission.type === 'TYPE_MARKET') {
return 'Market order';
}
if (command.orderSubmission.type === 'TYPE_LIMIT') {
return 'Limit order';
}
}
return 'Order';
}
@@ -49,12 +49,8 @@ export const ContractsProvider = ({ children }: { children: JSX.Element }) => {
? activeProvider
: defaultProvider;
if (
account &&
activeProvider &&
typeof activeProvider.getSigner === 'function'
) {
signer = provider.getSigner();
if (account && provider && typeof provider.getSigner === 'function') {
signer = provider.getSigner(account);
}
const tokenVestingAddress =
@@ -54,8 +54,8 @@ export const ProposalReferralProgramDetails = ({
return null;
}
const benefitTiers = proposal?.terms?.change?.benefitTiers;
const stakingTiers = proposal?.terms?.change?.stakingTiers;
const benefitTiers = proposal?.terms?.change?.benefitTiers.slice();
const stakingTiers = proposal?.terms?.change?.stakingTiers.slice();
const windowLength = proposal?.terms?.change?.windowLength;
const endOfProgramTimestamp = proposal?.terms?.change?.endOfProgram;
+4
View File
@@ -104,6 +104,10 @@
list-style: circle;
}
.react-markdown-container a {
text-decoration: underline;
}
.jsondiffpatch-delta,
.jsondiffpatch-delta pre {
font-family: 'Roboto Mono', monospace !important;
+11 -6
View File
@@ -1,8 +1,9 @@
import { useEffect } from 'react';
import { titlefy } from '@vegaprotocol/utils';
import { ErrorBoundary } from '../../components/error-boundary';
import { FeesContainer } from '../../components/fees-container';
import { useT } from '../../lib/use-t';
import { usePageTitleStore } from '../../stores';
import { titlefy } from '@vegaprotocol/utils';
import { useEffect } from 'react';
export const Fees = () => {
const t = useT();
@@ -10,13 +11,17 @@ export const Fees = () => {
const { updateTitle } = usePageTitleStore((store) => ({
updateTitle: store.updateTitle,
}));
useEffect(() => {
updateTitle(titlefy([title]));
}, [updateTitle, title]);
return (
<div className="container p-4 mx-auto">
<h1 className="px-4 pb-4 text-2xl">{title}</h1>
<FeesContainer />
</div>
<ErrorBoundary feature="fees">
<div className="container p-4 mx-auto">
<h1 className="px-4 pb-4 text-2xl">{title}</h1>
<FeesContainer />
</div>
</ErrorBoundary>
);
};
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { LiquidityContainer } from '../../components/liquidity-container';
import { useT } from '../../lib/use-t';
import { ErrorBoundary } from '../../components/error-boundary';
const enum LiquidityTabs {
Active = 'active',
@@ -58,19 +59,28 @@ export const LiquidityViewContainer = ({
name={t('My liquidity provision')}
hidden={!pubKey}
>
<LiquidityContainer
marketId={marketId}
filter={{ partyId: pubKey || undefined }}
/>
<ErrorBoundary feature="liquidity-party">
<LiquidityContainer
marketId={marketId}
filter={{ partyId: pubKey || undefined }}
/>
</ErrorBoundary>
</Tab>
<Tab id={LiquidityTabs.Active} name={t('Active')}>
<LiquidityContainer marketId={marketId} filter={{ active: true }} />
<ErrorBoundary feature="liquidity-active">
<LiquidityContainer
marketId={marketId}
filter={{ active: true }}
/>
</ErrorBoundary>
</Tab>
<Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
<LiquidityContainer
marketId={marketId}
filter={{ active: false }}
/>
<ErrorBoundary feature="liquidity-inactive">
<LiquidityContainer
marketId={marketId}
filter={{ active: false }}
/>
</ErrorBoundary>
</Tab>
</Tabs>
</div>
+47 -16
View File
@@ -20,6 +20,7 @@ import {
} from '../../components/market-banner';
import { FLAGS } from '@vegaprotocol/environment';
import { useT } from '../../lib/use-t';
import { ErrorBoundary } from '../../components/error-boundary';
interface TradeGridProps {
market: Market | null;
@@ -62,28 +63,38 @@ const MainGrid = memo(
name={t('Chart')}
menu={<TradingViews.candles.menu />}
>
<TradingViews.candles.component marketId={marketId} />
<ErrorBoundary feature="chart">
<TradingViews.candles.component marketId={marketId} />
</ErrorBoundary>
</Tab>
<Tab id="depth" name={t('Depth')}>
<TradingViews.depth.component marketId={marketId} />
<ErrorBoundary feature="depth">
<TradingViews.depth.component marketId={marketId} />
</ErrorBoundary>
</Tab>
<Tab id="liquidity" name={t('Liquidity')}>
<TradingViews.liquidity.component marketId={marketId} />
<ErrorBoundary feature="liquidity">
<TradingViews.liquidity.component marketId={marketId} />
</ErrorBoundary>
</Tab>
{market &&
market.tradableInstrument.instrument.product.__typename ===
'Perpetual' ? (
<Tab id="funding-history" name={t('Funding history')}>
<TradingViews.funding.component marketId={marketId} />
<ErrorBoundary feature="funding-history">
<TradingViews.funding.component marketId={marketId} />
</ErrorBoundary>
</Tab>
) : null}
{market &&
market.tradableInstrument.instrument.product.__typename ===
'Perpetual' ? (
<Tab id="funding-payments" name={t('Funding payments')}>
<TradingViews.fundingPayments.component
marketId={marketId}
/>
<ErrorBoundary feature="funding-payments">
<TradingViews.fundingPayments.component
marketId={marketId}
/>
</ErrorBoundary>
</Tab>
) : null}
</Tabs>
@@ -96,10 +107,14 @@ const MainGrid = memo(
<TradeGridChild>
<Tabs storageKey="console-trade-grid-main-right">
<Tab id="orderbook" name={t('Orderbook')}>
<TradingViews.orderbook.component marketId={marketId} />
<ErrorBoundary feature="orderbook">
<TradingViews.orderbook.component marketId={marketId} />
</ErrorBoundary>
</Tab>
<Tab id="trades" name={t('Trades')}>
<TradingViews.trades.component marketId={marketId} />
<ErrorBoundary feature="trades">
<TradingViews.trades.component marketId={marketId} />
</ErrorBoundary>
</Tab>
</Tabs>
</TradeGridChild>
@@ -118,31 +133,43 @@ const MainGrid = memo(
name={t('Positions')}
menu={<TradingViews.positions.menu />}
>
<TradingViews.positions.component />
<ErrorBoundary feature="positions">
<TradingViews.positions.component />
</ErrorBoundary>
</Tab>
<Tab
id="open-orders"
name={t('Open')}
menu={<TradingViews.activeOrders.menu />}
>
<TradingViews.activeOrders.component />
<ErrorBoundary feature="activeOrders">
<TradingViews.activeOrders.component />
</ErrorBoundary>
</Tab>
<Tab id="closed-orders" name={t('Closed')}>
<TradingViews.closedOrders.component />
<ErrorBoundary feature="closedOrders">
<TradingViews.closedOrders.component />
</ErrorBoundary>
</Tab>
<Tab id="rejected-orders" name={t('Rejected')}>
<TradingViews.rejectedOrders.component />
<ErrorBoundary feature="rejectedOrders">
<TradingViews.rejectedOrders.component />
</ErrorBoundary>
</Tab>
<Tab
id="orders"
name={t('All')}
menu={<TradingViews.orders.menu />}
>
<TradingViews.orders.component />
<ErrorBoundary feature="orders">
<TradingViews.orders.component />
</ErrorBoundary>
</Tab>
{FLAGS.STOP_ORDERS ? (
<Tab id="stop-orders" name={t('Stop orders')}>
<TradingViews.stopOrders.component />
<ErrorBoundary feature="stop-orders">
<TradingViews.stopOrders.component />
</ErrorBoundary>
</Tab>
) : null}
<Tab id="fills" name={t('Fills')}>
@@ -153,7 +180,11 @@ const MainGrid = memo(
name={t('Collateral')}
menu={<TradingViews.collateral.menu />}
>
<TradingViews.collateral.component pinnedAsset={pinnedAsset} />
<ErrorBoundary feature="collateral">
<TradingViews.collateral.component
pinnedAsset={pinnedAsset}
/>
</ErrorBoundary>
</Tab>
</Tabs>
</TradeGridChild>
@@ -1,19 +1,20 @@
import type { PinnedAsset } from '@vegaprotocol/accounts';
import type { Market } from '@vegaprotocol/markets';
import { type PinnedAsset } from '@vegaprotocol/accounts';
import { type Market } from '@vegaprotocol/markets';
import { OracleBanner } from '@vegaprotocol/markets';
import type { TradingView } from './trade-views';
import { TradingViews } from './trade-views';
import { useState } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import classNames from 'classnames';
import { FLAGS } from '@vegaprotocol/environment';
import { Splash } from '@vegaprotocol/ui-toolkit';
import { useT } from '../../lib/use-t';
import {
MarketSuccessorBanner,
MarketSuccessorProposalBanner,
MarketTerminationBanner,
} from '../../components/market-banner';
import { FLAGS } from '@vegaprotocol/environment';
import { useT } from '../../lib/use-t';
import { Splash } from '@vegaprotocol/ui-toolkit';
import { ErrorBoundary } from '../../components/error-boundary';
import { type TradingView } from './trade-views';
import { TradingViews } from './trade-views';
interface TradePanelsProps {
market: Market | null;
@@ -34,7 +35,11 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
// Watch out here, we don't know what component is being rendered
// so watch out for clashes in props
return <Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
return (
<ErrorBoundary feature={view}>
<Component marketId={market?.id} pinnedAsset={pinnedAsset} />;
</ErrorBoundary>
);
};
const renderMenu = () => {
@@ -15,6 +15,7 @@ import {
useLinks,
} from '@vegaprotocol/environment';
import { useT } from '../../lib/use-t';
import { ErrorBoundary } from '../../components/error-boundary';
export const MarketsPage = () => {
const t = useT();
@@ -34,7 +35,9 @@ export const MarketsPage = () => {
<div className="h-full my-1 border rounded-sm border-default">
<Tabs storageKey="console-markets">
<Tab id="open-markets" name={t('Open markets')}>
<OpenMarkets />
<ErrorBoundary feature="markets-open">
<OpenMarkets />
</ErrorBoundary>
</Tab>
<Tab
id="proposed-markets"
@@ -49,10 +52,14 @@ export const MarketsPage = () => {
</TradingAnchorButton>
}
>
<Proposed />
<ErrorBoundary feature="markets-proposed">
<Proposed />
</ErrorBoundary>
</Tab>
<Tab id="closed-markets" name={t('Closed markets')}>
<Closed />
<ErrorBoundary feature="markets-closed">
<Closed />
</ErrorBoundary>
</Tab>
</Tabs>
</div>
@@ -25,6 +25,7 @@ import { DepositsMenu } from '../../components/deposits-menu';
import { WithdrawalsMenu } from '../../components/withdrawals-menu';
import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
import { useT } from '../../lib/use-t';
import { ErrorBoundary } from '../../components/error-boundary';
const WithdrawalsIndicator = () => {
const { ready } = useIncompleteWithdrawals();
@@ -72,19 +73,29 @@ export const Portfolio = () => {
name={t('Positions')}
menu={<PositionsMenu />}
>
<PositionsContainer allKeys />
<ErrorBoundary feature="portfolio-positions">
<PositionsContainer allKeys />
</ErrorBoundary>
</Tab>
<Tab id="orders" name={t('Orders')}>
<OrdersContainer />
<ErrorBoundary feature="portfolio-orders">
<OrdersContainer />
</ErrorBoundary>
</Tab>
<Tab id="fills" name={t('Fills')}>
<FillsContainer />
<ErrorBoundary feature="portfolio-fills">
<FillsContainer />
</ErrorBoundary>
</Tab>
<Tab id="funding-payments" name={t('Funding payments')}>
<FundingPaymentsContainer />
<ErrorBoundary feature="portfolio-funding-payments">
<FundingPaymentsContainer />
</ErrorBoundary>
</Tab>
<Tab id="ledger-entries" name={t('Ledger entries')}>
<LedgerContainer />
<ErrorBoundary feature="portfolio-ledger">
<LedgerContainer />
</ErrorBoundary>
</Tab>
</Tabs>
</PortfolioGridChild>
@@ -101,10 +112,14 @@ export const Portfolio = () => {
name={t('Collateral')}
menu={<AccountsMenu />}
>
<AccountsContainer />
<ErrorBoundary feature="portfolio-accounts">
<AccountsContainer />
</ErrorBoundary>
</Tab>
<Tab id="deposits" name={t('Deposits')} menu={<DepositsMenu />}>
<DepositsContainer />
<ErrorBoundary feature="portfolio-deposit">
<DepositsContainer />
</ErrorBoundary>
</Tab>
<Tab
id="withdrawals"
@@ -112,7 +127,9 @@ export const Portfolio = () => {
indicator={<WithdrawalsIndicator />}
menu={<WithdrawalsMenu />}
>
<WithdrawalsContainer />
<ErrorBoundary feature="portfolio-deposit">
<WithdrawalsContainer />
</ErrorBoundary>
</Tab>
</Tabs>
</PortfolioGridChild>
@@ -13,12 +13,15 @@ import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { RainbowButton } from './buttons';
import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
import { useReferral } from './hooks/use-referral';
import { useIsInReferralSet, useReferral } from './hooks/use-referral';
import { Routes } from '../../lib/links';
import { useTransactionEventSubscription } from '@vegaprotocol/web3';
import { Statistics, useStats } from './referral-statistics';
import { useReferralProgram } from './hooks/use-referral-program';
import { useT } from '../../lib/use-t';
import { useFundsAvailable } from './hooks/use-funds-available';
import { ViewType, useSidebar } from '../../components/sidebar';
import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
const RELOAD_DELAY = 3000;
@@ -32,20 +35,23 @@ const validateCode = (value: string, t: ReturnType<typeof useT>) => {
return true;
};
export const ApplyCodeFormContainer = () => {
export const ApplyCodeFormContainer = ({
onSuccess,
}: {
onSuccess?: () => void;
}) => {
const { pubKey } = useVegaWallet();
const { data: referee } = useReferral({ pubKey, role: 'referee' });
const { data: referrer } = useReferral({ pubKey, role: 'referrer' });
const isInReferralSet = useIsInReferralSet(pubKey);
// go to main page if the current pubkey is already a referrer or referee
if (referee || referrer) {
// Navigate to the index page when already in the referral set.
if (isInReferralSet) {
return <Navigate to={Routes.REFERRALS} />;
}
return <ApplyCodeForm />;
return <ApplyCodeForm onSuccess={onSuccess} />;
};
export const ApplyCodeForm = () => {
export const ApplyCodeForm = ({ onSuccess }: { onSuccess?: () => void }) => {
const t = useT();
const program = useReferralProgram();
const navigate = useNavigate();
@@ -54,10 +60,15 @@ export const ApplyCodeForm = () => {
);
const [status, setStatus] = useState<
'requested' | 'failed' | 'successful' | null
'requested' | 'no-funds' | 'successful' | null
>(null);
const txHash = useRef<string | null>(null);
const { isReadOnly, pubKey, sendTx } = useVegaWallet();
const { isEligible, requiredFunds } = useFundsAvailable();
const currentRouteId = useGetCurrentRouteId();
const setViews = useSidebar((s) => s.setViews);
const {
register,
handleSubmit,
@@ -65,6 +76,7 @@ export const ApplyCodeForm = () => {
setValue,
setError,
watch,
clearErrors,
} = useForm();
const [params] = useSearchParams();
@@ -73,6 +85,38 @@ export const ApplyCodeForm = () => {
code: validateCode(codeField, t) ? codeField : undefined,
});
/**
* Validates if a connected party can apply a code (min funds span protection)
*/
const validateFundsAvailable = useCallback(() => {
if (requiredFunds && !isEligible) {
const err = t(
'To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.',
{
requiredFunds,
}
);
return err;
}
return true;
}, [isEligible, requiredFunds, t]);
useEffect(() => {
if (codeField) {
const err = validateFundsAvailable();
if (err !== true) {
setStatus('no-funds');
setError('code', {
type: 'required',
message: err,
});
} else {
setStatus(null);
clearErrors('code');
}
}
}, [clearErrors, codeField, isEligible, setError, validateFundsAvailable]);
/**
* Validates the set a user tries to apply to.
*/
@@ -167,10 +211,11 @@ export const ApplyCodeForm = () => {
useEffect(() => {
if (status === 'successful') {
setTimeout(() => {
if (onSuccess) onSuccess();
navigate(Routes.REFERRALS);
}, RELOAD_DELAY);
}
}, [navigate, status]);
}, [navigate, onSuccess, status]);
// show "code applied" message when successfully applied
if (status === 'successful') {
@@ -207,6 +252,18 @@ export const ApplyCodeForm = () => {
};
}
if (status === 'no-funds') {
return {
disabled: false,
children: t('Deposit funds'),
type: 'button' as ButtonHTMLAttributes<HTMLButtonElement>['type'],
onClick: ((event) => {
event.preventDefault();
setViews({ type: ViewType.Deposit }, currentRouteId);
}) as MouseEventHandler,
};
}
if (status === 'requested') {
return {
disabled: true,
@@ -236,7 +293,9 @@ export const ApplyCodeForm = () => {
{t('Apply a referral code')}
</h3>
<p className="mb-4 text-center text-base">
{t('Enter a referral code to get trading discounts.')}
{t(
'Apply a referral code to access the discount benefits of the current program.'
)}
</p>
<form
className={classNames('flex w-full flex-col gap-4', {
@@ -251,8 +310,10 @@ export const ApplyCodeForm = () => {
{...register('code', {
required: t('You have to provide a code to apply it.'),
validate: (value) => {
const err = validateCode(value, t);
if (err !== true) return err;
const codeErr = validateCode(value, t);
if (codeErr !== true) return codeErr;
const fundsErr = validateFundsAvailable();
if (fundsErr !== true) return fundsErr;
return validateSet();
},
})}
@@ -6,6 +6,8 @@ export const SKY_BACKGROUND =
'bg-[url(/sky-light.png)] dark:bg-[url(/sky-dark.png)] bg-[40%_0px] bg-[length:1440px] bg-no-repeat bg-local';
// TODO: Update the links to use the correct referral related pages
export const REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
export const ABOUT_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
export const REFERRAL_DOCS_LINK =
'https://docs.vega.xyz/mainnet/concepts/trading-on-vega/discounts-rewards#referral-program';
export const ABOUT_REFERRAL_DOCS_LINK =
'https://docs.vega.xyz/mainnet/concepts/trading-on-vega/discounts-rewards#referral-program';
export const DISCLAIMER_REFERRAL_DOCS_LINK = 'https://docs.vega.xyz/';
@@ -19,14 +19,22 @@ import {
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
import { useStakeAvailable } from './hooks/use-stake-available';
import {
ABOUT_REFERRAL_DOCS_LINK,
DISCLAIMER_REFERRAL_DOCS_LINK,
} from './constants';
import { useReferral } from './hooks/use-referral';
import { ABOUT_REFERRAL_DOCS_LINK } from './constants';
import { useIsInReferralSet, useReferral } from './hooks/use-referral';
import { useT } from '../../lib/use-t';
import { Navigate } from 'react-router-dom';
import { Routes } from '../../lib/links';
import { useReferralProgram } from './hooks/use-referral-program';
export const CreateCodeContainer = () => {
const { pubKey } = useVegaWallet();
const isInReferralSet = useIsInReferralSet(pubKey);
// Navigate to the index page when already in the referral set.
if (isInReferralSet) {
return <Navigate to={Routes.REFERRALS} />;
}
return <CreateCodeForm />;
};
@@ -48,7 +56,7 @@ export const CreateCodeForm = () => {
</h3>
<p className="mb-4 text-center text-base">
{t(
'Generate a referral code to share with your friends and start earning commission.'
'Generate a referral code to share with your friends and access the commission benefits of the current program.'
)}
</p>
@@ -98,10 +106,7 @@ const CreateCodeDialog = ({
const { stakeAvailable: currentStakeAvailable, requiredStake } =
useStakeAvailable();
const { data: referralSets } = useReferral({
pubKey,
role: 'referrer',
});
const { details: programDetails } = useReferralProgram();
const onSubmit = () => {
if (isReadOnly || !pubKey) {
@@ -201,7 +206,7 @@ const CreateCodeDialog = ({
);
}
if (!referralSets) {
if (!programDetails) {
return (
<div className="flex flex-col gap-4">
{(status === 'idle' || status === 'loading' || status === 'error') && (
@@ -237,7 +242,9 @@ const CreateCodeDialog = ({
intent={Intent.Primary}
onClick={() => onSubmit()}
{...getButtonProps()}
></TradingButton>
>
{t('Yes')}
</TradingButton>
{status === 'idle' && (
<TradingButton
fill={true}
@@ -255,9 +262,6 @@ const CreateCodeDialog = ({
<ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
{t('About the referral program')}
</ExternalLink>
<ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
{t('Disclaimer')}
</ExternalLink>
</div>
</div>
);
@@ -268,7 +272,7 @@ const CreateCodeDialog = ({
{(status === 'idle' || status === 'loading' || status === 'error') && (
<p>
{t(
'Generate a referral code to share with your friends and start earning commission.'
'Generate a referral code to share with your friends and access the commission benefits of the current program.'
)}
</p>
)}
@@ -299,9 +303,6 @@ const CreateCodeDialog = ({
<ExternalLink href={ABOUT_REFERRAL_DOCS_LINK}>
{t('About the referral program')}
</ExternalLink>
<ExternalLink href={DISCLAIMER_REFERRAL_DOCS_LINK}>
{t('Disclaimer')}
</ExternalLink>
</div>
</div>
);
@@ -53,7 +53,7 @@ export const NotFound = () => {
const navigate = useNavigate();
return (
<div className="pt-32">
<LayoutWithSky className="pt-32">
<div
aria-hidden
className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
@@ -75,6 +75,6 @@ export const NotFound = () => {
{t('Go back and try again')}
</RainbowButton>
</p>
</div>
</LayoutWithSky>
);
};
@@ -0,0 +1,20 @@
query FundsAvailable($partyId: ID!) {
party(id: $partyId) {
accountsConnection {
edges {
node {
balance
asset {
decimals
symbol
id
}
}
}
}
}
networkParameter(key: "spam.protection.applyReferral.min.funds") {
key
value
}
}
@@ -0,0 +1,63 @@
import * as Types from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type FundsAvailableQueryVariables = Types.Exact<{
partyId: Types.Scalars['ID'];
}>;
export type FundsAvailableQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', balance: string, asset: { __typename?: 'Asset', decimals: number, symbol: string, id: string } } } | null> | null } | null } | null, networkParameter?: { __typename?: 'NetworkParameter', key: string, value: string } | null };
export const FundsAvailableDocument = gql`
query FundsAvailable($partyId: ID!) {
party(id: $partyId) {
accountsConnection {
edges {
node {
balance
asset {
decimals
symbol
id
}
}
}
}
}
networkParameter(key: "spam.protection.applyReferral.min.funds") {
key
value
}
}
`;
/**
* __useFundsAvailableQuery__
*
* To run a query within a React component, call `useFundsAvailableQuery` and pass it any options that fit your needs.
* When your component renders, `useFundsAvailableQuery` returns an object from Apollo Client that contains loading, error, and data properties
* you can use to render your UI.
*
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
*
* @example
* const { data, loading, error } = useFundsAvailableQuery({
* variables: {
* partyId: // value for 'partyId'
* },
* });
*/
export function useFundsAvailableQuery(baseOptions: Apollo.QueryHookOptions<FundsAvailableQuery, FundsAvailableQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<FundsAvailableQuery, FundsAvailableQueryVariables>(FundsAvailableDocument, options);
}
export function useFundsAvailableLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<FundsAvailableQuery, FundsAvailableQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<FundsAvailableQuery, FundsAvailableQueryVariables>(FundsAvailableDocument, options);
}
export type FundsAvailableQueryHookResult = ReturnType<typeof useFundsAvailableQuery>;
export type FundsAvailableLazyQueryHookResult = ReturnType<typeof useFundsAvailableLazyQuery>;
export type FundsAvailableQueryResult = Apollo.QueryResult<FundsAvailableQuery, FundsAvailableQueryVariables>;
@@ -0,0 +1,46 @@
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useFundsAvailableQuery } from './__generated__/FundsAvailable';
import compact from 'lodash/compact';
import sum from 'lodash/sum';
/**
* Gets the funds for given public key and required min for
* the referral program.
*
* (Uses currently connected public key if left empty)
*/
export const useFundsAvailable = (pubKey?: string) => {
const { pubKey: currentPubKey } = useVegaWallet();
const partyId = pubKey || currentPubKey;
const { data, stopPolling } = useFundsAvailableQuery({
variables: { partyId: partyId || '' },
skip: !partyId,
fetchPolicy: 'network-only',
errorPolicy: 'ignore',
pollInterval: 5000,
});
const fundsAvailable = data
? compact(data.party?.accountsConnection?.edges?.map((e) => e?.node))
: undefined;
const requiredFunds = data
? BigInt(data.networkParameter?.value || '0')
: undefined;
const sumOfFunds = sum(
fundsAvailable?.filter((fa) => fa.balance).map((fa) => BigInt(fa.balance))
);
if (requiredFunds && sumOfFunds >= requiredFunds) {
stopPolling();
}
return {
fundsAvailable,
requiredFunds,
isEligible:
fundsAvailable != null &&
requiredFunds != null &&
sumOfFunds >= requiredFunds,
};
};
@@ -1,14 +1,8 @@
import { getNumberFormat } from '@vegaprotocol/utils';
import { addDays } from 'date-fns';
import sortBy from 'lodash/sortBy';
import omit from 'lodash/omit';
import { useReferralProgramQuery } from './__generated__/CurrentReferralProgram';
const STAKING_TIERS_MAPPING: Record<number, string> = {
1: 'Tradestarter',
2: 'Mid level degen',
3: 'Reward hoarder',
};
import BigNumber from 'bignumber.js';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const MOCK = {
@@ -16,46 +10,76 @@ const MOCK = {
currentReferralProgram: {
id: 'abc',
version: 1,
endOfProgramTimestamp: addDays(new Date(), 10).toISOString(),
windowLength: 10,
benefitTiers: [
{
minimumEpochs: 5,
minimumRunningNotionalTakerVolume: '30000',
referralDiscountFactor: '0.01',
referralRewardFactor: '0.01',
},
{
minimumEpochs: 5,
minimumRunningNotionalTakerVolume: '20000',
referralDiscountFactor: '0.05',
minimumEpochs: 1,
minimumRunningNotionalTakerVolume: '100000',
referralDiscountFactor: '0.1',
referralRewardFactor: '0.05',
},
{
minimumEpochs: 5,
minimumRunningNotionalTakerVolume: '10000',
referralDiscountFactor: '0.001',
referralRewardFactor: '0.001',
minimumEpochs: 1,
minimumRunningNotionalTakerVolume: '1000000',
referralDiscountFactor: '0.1',
referralRewardFactor: '0.075',
},
{
minimumEpochs: 1,
minimumRunningNotionalTakerVolume: '5000000',
referralDiscountFactor: '0.1',
referralRewardFactor: '0.1',
},
{
minimumEpochs: 1,
minimumRunningNotionalTakerVolume: '25000000',
referralDiscountFactor: '0.1',
referralRewardFactor: '0.125',
},
{
minimumEpochs: 1,
minimumRunningNotionalTakerVolume: '75000000',
referralDiscountFactor: '0.1',
referralRewardFactor: '0.15',
},
{
minimumEpochs: 1,
minimumRunningNotionalTakerVolume: '150000000',
referralDiscountFactor: '0.07',
referralRewardFactor: '0.175',
},
],
stakingTiers: [
{
minimumStakedTokens: '10000',
referralRewardMultiplier: '1',
minimumStakedTokens: '100000000000000000000',
referralRewardMultiplier: '1.025',
},
{
minimumStakedTokens: '20000',
referralRewardMultiplier: '2',
minimumStakedTokens: '1000000000000000000000',
referralRewardMultiplier: '1.05',
},
{
minimumStakedTokens: '30000',
referralRewardMultiplier: '3',
minimumStakedTokens: '5000000000000000000000',
referralRewardMultiplier: '1.1',
},
{
minimumStakedTokens: '50000000000000000000000',
referralRewardMultiplier: '1.2',
},
{
minimumStakedTokens: '250000000000000000000000',
referralRewardMultiplier: '1.25',
},
{
minimumStakedTokens: '500000000000000000000000',
referralRewardMultiplier: '1.3',
},
],
endOfProgramTimestamp: '2024-12-31T01:00:00Z',
windowLength: 30,
},
loading: false,
error: undefined,
},
loading: false,
error: undefined,
};
export const useReferralProgram = () => {
@@ -79,9 +103,9 @@ export const useReferralProgram = () => {
return {
tier: i + 1, // sorted in asc order, hence first is the lowest tier
rewardFactor: Number(t.referralRewardFactor),
commission: Number(t.referralRewardFactor) * 100 + '%',
commission: BigNumber(t.referralRewardFactor).times(100).toFixed(2) + '%',
discountFactor: Number(t.referralDiscountFactor),
discount: Number(t.referralDiscountFactor) * 100 + '%',
discount: BigNumber(t.referralDiscountFactor).times(100).toFixed(2) + '%',
minimumVolume: Number(t.minimumRunningNotionalTakerVolume),
volume: getNumberFormat(0).format(
Number(t.minimumRunningNotionalTakerVolume)
@@ -90,13 +114,11 @@ export const useReferralProgram = () => {
};
});
const stakingTiers = sortBy(
data.currentReferralProgram.stakingTiers,
(t) => t.referralRewardMultiplier
const stakingTiers = sortBy(data.currentReferralProgram.stakingTiers, (t) =>
parseFloat(t.referralRewardMultiplier)
).map((t, i) => {
return {
tier: i + 1,
label: STAKING_TIERS_MAPPING[i + 1],
...t,
};
});
@@ -75,10 +75,7 @@ export const useReferralToasts = () => {
data-testid="toast-apply-code"
size="xs"
onClick={() => {
const matched = matchPath(
Routes.REFERRALS_APPLY_CODE,
pathname
);
const matched = matchPath(Routes.REFERRALS, pathname);
if (!matched) navigate(Routes.REFERRALS_APPLY_CODE);
updateToast(NON_ELIGIBLE_REFERRAL_SET_TOAST_ID + epoch, {
hidden: true,
@@ -2,7 +2,10 @@ import { removePaginationWrapper } from '@vegaprotocol/utils';
import { useCallback } from 'react';
import { useRefereesQuery } from './__generated__/Referees';
import compact from 'lodash/compact';
import type { ReferralSetsQueryVariables } from './__generated__/ReferralSets';
import type {
ReferralSetsQuery,
ReferralSetsQueryVariables,
} from './__generated__/ReferralSets';
import { useReferralSetsQuery } from './__generated__/ReferralSets';
import { useStakeAvailable } from './use-stake-available';
@@ -118,3 +121,36 @@ export const useReferral = (args: UseReferralArgs) => {
refetch,
};
};
const retrieveReferralSetData = (data: ReferralSetsQuery | undefined) =>
data?.referralSets.edges && data.referralSets.edges.length > 0
? data.referralSets.edges[0]?.node
: undefined;
export const useIsInReferralSet = (pubKey: string | null) => {
const [asRefereeVariables, asRefereeSkip] = prepareVariables({
pubKey,
role: 'referee',
});
const [asReferrerVariables, asReferrerSkip] = prepareVariables({
pubKey,
role: 'referrer',
});
const { data: asRefereeData } = useReferralSetsQuery({
variables: asRefereeVariables,
skip: asRefereeSkip,
fetchPolicy: 'cache-and-network',
});
const { data: asReferrerData } = useReferralSetsQuery({
variables: asReferrerVariables,
skip: asReferrerSkip,
fetchPolicy: 'cache-and-network',
});
return Boolean(
retrieveReferralSetData(asRefereeData) ||
retrieveReferralSetData(asReferrerData)
);
};
@@ -13,7 +13,6 @@ export const useStakeAvailable = (pubKey?: string) => {
const { data } = useStakeAvailableQuery({
variables: { partyId: partyId || '' },
skip: !partyId,
// TODO: remove when network params available
errorPolicy: 'ignore',
});
@@ -15,11 +15,16 @@ export const LandingBanner = () => {
</div>
<div className="pt-20 sm:w-[50%]">
<h1 className="text-6xl font-alpha calt mb-10">
{t('Earn commission & stake rewards')}
{t('Vega community referral program')}
</h1>
<p className="text-lg mb-1">
{t(
'Referral programs can be proposed and created via community governance.'
)}
</p>
<p className="text-lg mb-10">
{t(
'Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
'Once live, users can generate referral codes to share with their friends and earn commission on their trades, while referred traders can access fee discounts based on the running volume of the group.'
)}
</p>
</div>
@@ -275,30 +275,34 @@ jest.mock('@vegaprotocol/wallet', () => {
});
describe('ReferralStatistics', () => {
it('displays create code when no data has been found for given pubkey', () => {
it('displays apply code when no data has been found for given pubkey', () => {
const { queryByTestId } = render(
<MockedProvider mocks={[]} showWarnings={false}>
<ReferralStatistics />
</MockedProvider>
<MemoryRouter>
<MockedProvider mocks={[]} showWarnings={false}>
<ReferralStatistics />
</MockedProvider>
</MemoryRouter>
);
expect(queryByTestId('referral-create-code-form')).toBeInTheDocument();
expect(queryByTestId('referral-apply-code-form')).toBeInTheDocument();
});
it('displays referrer stats when given pubkey is a referrer', async () => {
const { queryByTestId } = render(
<MockedProvider
mocks={[
programMock,
referralSetAsReferrerMock,
noReferralSetAsRefereeMock,
stakeAvailableMock,
refereesMock,
]}
showWarnings={false}
>
<ReferralStatistics />
</MockedProvider>
<MemoryRouter>
<MockedProvider
mocks={[
programMock,
referralSetAsReferrerMock,
noReferralSetAsRefereeMock,
stakeAvailableMock,
refereesMock,
]}
showWarnings={false}
>
<ReferralStatistics />
</MockedProvider>
</MemoryRouter>
);
await waitFor(() => {
@@ -10,7 +10,6 @@ import {
import { useVegaWallet } from '@vegaprotocol/wallet';
import { DEFAULT_AGGREGATION_DAYS, useReferral } from './hooks/use-referral';
import { CreateCodeContainer } from './create-code-form';
import classNames from 'classnames';
import { Table } from './table';
import {
@@ -26,34 +25,39 @@ import compact from 'lodash/compact';
import { useReferralProgram } from './hooks/use-referral-program';
import { useStakeAvailable } from './hooks/use-stake-available';
import sortBy from 'lodash/sortBy';
import { useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useCurrentEpochInfoQuery } from './hooks/__generated__/Epoch';
import BigNumber from 'bignumber.js';
import { DocsLinks } from '@vegaprotocol/environment';
import { useT, ns } from '../../lib/use-t';
import { Trans } from 'react-i18next';
import { ApplyCodeForm } from './apply-code-form';
import { ApplyCodeForm, ApplyCodeFormContainer } from './apply-code-form';
export const ReferralStatistics = () => {
const { pubKey } = useVegaWallet();
const program = useReferralProgram();
const { data: referee } = useReferral({
const { data: referee, refetch: refereeRefetch } = useReferral({
pubKey,
role: 'referee',
aggregationEpochs: program.details?.windowLength,
});
const { data: referrer } = useReferral({
const { data: referrer, refetch: referrerRefetch } = useReferral({
pubKey,
role: 'referrer',
aggregationEpochs: program.details?.windowLength,
});
const refetch = useCallback(() => {
refereeRefetch();
referrerRefetch();
}, [refereeRefetch, referrerRefetch]);
if (referee?.code) {
return (
<>
<Statistics data={referee} program={program} as="referee" />;
<Statistics data={referee} program={program} as="referee" />
{!referee.isEligible && <ApplyCodeForm />}
</>
);
@@ -62,13 +66,13 @@ export const ReferralStatistics = () => {
if (referrer?.code) {
return (
<>
<Statistics data={referrer} program={program} as="referrer" />;
<Statistics data={referrer} program={program} as="referrer" />
<RefereesTable data={referrer} program={program} />
</>
);
}
return <CreateCodeContainer />;
return <ApplyCodeFormContainer onSuccess={refetch} />;
};
export const useStats = ({
@@ -81,7 +85,9 @@ export const useStats = ({
as?: 'referrer' | 'referee';
}) => {
const { benefitTiers } = program;
const { data: epochData } = useCurrentEpochInfoQuery();
const { data: epochData } = useCurrentEpochInfoQuery({
fetchPolicy: 'network-only',
});
const { data: statsData } = useReferralSetStatsQuery({
variables: {
code: data?.code || '',
@@ -115,7 +121,7 @@ export const useStats = ({
: 1;
const finalCommissionValue = isNaN(multiplier)
? baseCommissionValue
: multiplier * baseCommissionValue;
: new BigNumber(multiplier).times(baseCommissionValue).toNumber();
const discountFactorValue = refereeStats?.discountFactor
? Number(refereeStats.discountFactor)
@@ -174,6 +180,7 @@ export const Statistics = ({
discountFactorValue,
currentBenefitTierValue,
epochsValue,
nextBenefitTierValue,
nextBenefitTierVolumeValue,
nextBenefitTierEpochsValue,
} = useStats({ data, program, as });
@@ -207,6 +214,7 @@ export const Statistics = ({
).toString(),
}
)}
overrideWithNoProgram={!details}
>
{baseCommissionValue * 100}%
</StatTile>
@@ -229,22 +237,28 @@ export const Statistics = ({
})}
</span>
}
overrideWithNoProgram={!details}
>
{multiplier || t('None')}
</StatTile>
);
const baseCommissionFormatted = BigNumber(baseCommissionValue)
.times(100)
.toString();
const finalCommissionFormatted = new BigNumber(finalCommissionValue)
.times(100)
.toString();
const finalCommissionTile = (
<StatTile
title={t('Final commission rate')}
description={
!isNaN(multiplier)
? `(${baseCommissionValue * 100}% ⨉ ${multiplier} = ${
finalCommissionValue * 100
}%)`
? `(${baseCommissionFormatted}% ⨉ ${multiplier} = ${finalCommissionFormatted}%)`
: undefined
}
overrideWithNoProgram={!details}
>
{finalCommissionValue * 100}%
{finalCommissionFormatted}%
</StatTile>
);
const numberOfTradersValue = data.referees.length;
@@ -264,6 +278,7 @@ export const Statistics = ({
title={t('myVolume', 'My volume (last {{count}} epochs)', {
count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
})}
overrideWithNoProgram={!details}
>
{compactNumFormat.format(referrerVolumeValue)}
</StatTile>
@@ -274,7 +289,7 @@ export const Statistics = ({
.reduce((all, r) => all.plus(r), new BigNumber(0));
const totalCommissionTile = (
<StatTile
title={t('totalCommission', 'Total commission (last {{count}}} epochs)', {
title={t('totalCommission', 'Total commission (last {{count}} epochs)', {
count: details?.windowLength || DEFAULT_AGGREGATION_DAYS,
})}
description={<QUSDTooltip />}
@@ -301,15 +316,25 @@ export const Statistics = ({
);
const currentBenefitTierTile = (
<StatTile title={t('Current tier')}>
<StatTile
title={t('Current tier')}
description={
nextBenefitTierValue?.tier
? t('(Next tier: {{nextTier}})', {
nextTier: nextBenefitTierValue?.tier,
})
: undefined
}
overrideWithNoProgram={!details}
>
{isApplyCodePreview
? currentBenefitTierValue?.tier || benefitTiers[0]?.tier || 'None'
: currentBenefitTierValue?.tier || 'None'}
</StatTile>
);
const discountFactorTile = (
<StatTile title={t('Discount')}>
{isApplyCodePreview
<StatTile title={t('Discount')} overrideWithNoProgram={!details}>
{isApplyCodePreview && benefitTiers.length >= 1
? benefitTiers[0].discountFactor * 100
: discountFactorValue * 100}
%
@@ -324,6 +349,7 @@ export const Statistics = ({
count: details?.windowLength,
}
)}
overrideWithNoProgram={!details}
>
{compactNumFormat.format(runningVolumeValue)}
</StatTile>
@@ -332,14 +358,14 @@ export const Statistics = ({
<StatTile title={t('Epochs in set')}>{epochsValue}</StatTile>
);
const nextTierVolumeTile = (
<StatTile title={t('Volume to next tier')}>
<StatTile title={t('Volume to next tier')} overrideWithNoProgram={!details}>
{nextBenefitTierVolumeValue <= 0
? '0'
: compactNumFormat.format(nextBenefitTierVolumeValue)}
</StatTile>
);
const nextTierEpochsTile = (
<StatTile title={t('Epochs to next tier')}>
<StatTile title={t('Epochs to next tier')} overrideWithNoProgram={!details}>
{nextBenefitTierEpochsValue <= 0 ? '0' : nextBenefitTierEpochsValue}
</StatTile>
);
@@ -461,6 +487,7 @@ export const RefereesTable = ({
count:
details?.windowLength || DEFAULT_AGGREGATION_DAYS,
}}
components={[<QUSDTooltip key="qusd" />]}
ns={ns}
/>
),
@@ -4,11 +4,10 @@ import {
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
import { HowItWorksTable } from './how-it-works-table';
import { LandingBanner } from './landing-banner';
import { TiersContainer } from './tiers';
import { TabLink } from './buttons';
import { Outlet } from 'react-router-dom';
import { Outlet, useMatch } from 'react-router-dom';
import { Routes } from '../../lib/links';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useReferral } from './hooks/use-referral';
@@ -18,15 +17,17 @@ import { usePageTitleStore } from '../../stores';
import { useEffect } from 'react';
import { titlefy } from '@vegaprotocol/utils';
import { useT } from '../../lib/use-t';
import { ErrorBoundary } from '../../components/error-boundary';
const Nav = () => {
const t = useT();
const match = useMatch(Routes.REFERRALS_APPLY_CODE);
return (
<div className="flex justify-center border-b border-vega-cdark-500">
<TabLink end to={Routes.REFERRALS}>
{t('I want a code')}
<TabLink end to={match ? Routes.REFERRALS_APPLY_CODE : Routes.REFERRALS}>
{t('Apply code')}
</TabLink>
<TabLink to={Routes.REFERRALS_APPLY_CODE}>{t('I have a code')}</TabLink>
<TabLink to={Routes.REFERRALS_CREATE_CODE}>{t('Create code')}</TabLink>
</div>
);
};
@@ -65,7 +66,7 @@ export const Referrals = () => {
}, [updateTitle, t]);
return (
<>
<ErrorBoundary feature="referrals">
<LandingBanner />
{showNav && <Nav />}
@@ -95,18 +96,16 @@ export const Referrals = () => {
<h2 className="text-2xl">{t('How it works')}</h2>
</div>
<div className="md:w-[60%] mx-auto">
<HowItWorksTable />
<div className="mt-5">
<TradingAnchorButton
className="mx-auto w-max"
href={REFERRAL_DOCS_LINK}
target="_blank"
>
{t('Read the terms')}{' '}
<VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
{t('Read the docs')} <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
</TradingAnchorButton>
</div>
</div>
</>
</ErrorBoundary>
);
};
+4 -2
View File
@@ -14,8 +14,10 @@ export const Tag = ({
className={classNames(
'w-max border rounded-[1rem] py-[0.125rem] px-2 text-xs',
{
'border-vega-yellow-500 text-vega-yellow-500': color === 'yellow',
'border-vega-green-500 text-vega-green-500': color === 'green',
'border-vega-yellow-550 text-vega-yellow-550 dark:border-vega-yellow-500 dark:text-vega-yellow-500':
color === 'yellow',
'border-vega-green-550 text-vega-green-550 dark:border-vega-green-500 dark:text-vega-green-500':
color === 'green',
'border-vega-blue-500 text-vega-blue-500': color === 'blue',
'border-vega-purple-500 text-vega-purple-500': color === 'purple',
'border-vega-pink-500 text-vega-pink-500': color === 'pink',
+196 -88
View File
@@ -1,20 +1,43 @@
import { getDateTimeFormat } from '@vegaprotocol/utils';
import {
addDecimalsFormatNumber,
getDateTimeFormat,
} from '@vegaprotocol/utils';
import { useReferralProgram } from './hooks/use-referral-program';
import { Table } from './table';
import classNames from 'classnames';
import { BORDER_COLOR, GRADIENT } from './constants';
import { Tag } from './tag';
import type { ComponentProps, ReactNode } from 'react';
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
import { ExternalLink, truncateMiddle } from '@vegaprotocol/ui-toolkit';
import {
DApp,
DocsLinks,
TOKEN_PROPOSAL,
TOKEN_PROPOSALS,
useLinks,
} from '@vegaprotocol/environment';
import { useT, ns } from '../../lib/use-t';
import { Trans } from 'react-i18next';
// rainbow-ish order
const TIER_COLORS: Array<ComponentProps<typeof Tag>['color']> = [
'pink',
'orange',
'yellow',
'green',
'blue',
'purple',
];
const getTierColor = (tier: number) => {
const tiers = Object.keys(TIER_COLORS).length;
let index = Math.abs(tier - 1);
if (tier >= tiers) {
index = index % tiers;
}
return TIER_COLORS[index];
};
const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
<div
className={classNames(
@@ -28,51 +51,63 @@ const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
const StakingTier = ({
tier,
label,
referralRewardMultiplier,
minimumStakedTokens,
}: {
tier: number;
label: string;
referralRewardMultiplier: string;
minimumStakedTokens: string;
}) => {
const t = useT();
const color: Record<number, ComponentProps<typeof Tag>['color']> = {
1: 'green',
2: 'blue',
3: 'pink',
};
const minimum = addDecimalsFormatNumber(minimumStakedTokens, 18);
// TODO: Decide what to do with the multiplier images
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const multiplierImage = (
<div
aria-hidden
className={classNames(
'w-full max-w-[80px] h-full min-h-[80px]',
'bg-cover bg-right-bottom',
{
"bg-[url('/1x.png')]": tier === 1,
"bg-[url('/2x.png')]": tier === 2,
"bg-[url('/3x.png')]": tier === 3,
}
)}
>
<span className="sr-only">{`${referralRewardMultiplier}x multiplier`}</span>
</div>
);
return (
<div
className={classNames(
'overflow-hidden',
'border rounded-md w-full',
'flex flex-row',
'bg-white dark:bg-vega-cdark-900',
GRADIENT,
BORDER_COLOR
)}
>
<div aria-hidden className="max-w-[120px]">
{tier < 4 && (
// eslint-disable-next-line @next/next/no-img-element
<img
src={`/${tier}x.png`}
alt={`${referralRewardMultiplier}x multiplier`}
width={240}
height={240}
className="w-full h-full"
/>
<div
className={classNames(
'p-3 flex flex-row min-h-[80px] h-full items-center'
)}
</div>
<div className={classNames('p-3')}>
<Tag color={color[tier]}>Multiplier {referralRewardMultiplier}x</Tag>
<h3 className="mt-1 mb-1 text-base">{label}</h3>
<p className="text-sm text-vega-clight-100 dark:text-vega-cdark-100">
{t('Stake a minimum of {{minimumStakedTokens}} $VEGA tokens', {
minimumStakedTokens,
})}
</p>
>
<div>
<Tag color={getTierColor(tier)}>
{t('Multiplier')} {referralRewardMultiplier}x
</Tag>
<p className="mt-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
<Trans
defaults="Stake a minimum of <0>{{minimum}}</0> $VEGA tokens"
values={{ minimum }}
components={[<b key={minimum}></b>]}
/>
</p>
</div>
</div>
</div>
);
@@ -91,21 +126,29 @@ export const TiersContainer = () => {
if ((!loading && !details) || error) {
return (
<div className="text-base px-5 py-10 text-center">
<div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20 text-sm text-center">
<Trans
defaults="There are currently no active referral programs. Check the <0>Governance App</0> to see if there are any proposals in progress and vote."
components={[
<ExternalLink href={governanceLink(TOKEN_PROPOSALS)} key="link">
<ExternalLink
href={governanceLink(TOKEN_PROPOSALS)}
key="link"
className="underline"
>
{t('Governance App')}
</ExternalLink>,
]}
ns={ns}
/>
/>{' '}
<Trans
defaults="You can propose a new program via the <0>Docs</0>."
defaults="Use the <0>docs</0> tutorial to propose a new program."
components={[
<ExternalLink href={DocsLinks?.REFERRALS} key="link">
{t('Docs')}
<ExternalLink
href={DocsLinks?.REFERRALS}
key="link"
className="underline"
>
{t('docs')}
</ExternalLink>,
]}
ns={ns}
@@ -116,47 +159,93 @@ export const TiersContainer = () => {
return (
<>
{/* Benefit tiers */}
<div className="flex flex-col items-baseline justify-between mt-10 mb-5">
<h2 className="text-2xl">{t('Referral tiers')}</h2>
<h2 className="text-3xl mt-10">{t('Current Program Details')}</h2>
{details?.id && (
<p>
<Trans
defaults="As a result of <0>{{proposal}}</0> the program below is currently active on the Vega network."
values={{ proposal: truncateMiddle(details.id) }}
components={[
<ExternalLink
key="referral-program-proposal-link"
href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
className="underline"
>
proposal
</ExternalLink>,
]}
/>
</p>
)}
{/* Meta */}
<div className="mt-10 flex flex-row items-baseline justify-between text-xs text-vega-clight-100 dark:text-vega-cdark-100 font-alpha calt">
{details?.id && (
<span>
{t('Proposal ID:')}{' '}
<ExternalLink
href={governanceLink(TOKEN_PROPOSAL.replace(':id', details.id))}
>
<span>{truncateMiddle(details.id)}</span>
</ExternalLink>
</span>
)}
{ends && (
<span className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
<span>
{t('Program ends:')} {ends}
</span>
)}
</div>
<div className="mb-20">
{loading || !benefitTiers || benefitTiers.length === 0 ? (
<Loading variant="large" />
) : (
<TiersTable
windowLength={details?.windowLength}
data={benefitTiers.map((bt) => ({
...bt,
tierElement: (
<div className="rounded-full bg-vega-clight-900 dark:bg-vega-cdark-900 p-1 w-8 h-8 text-center">
{bt.tier}
</div>
),
}))}
/>
)}
</div>
{/* Staking tiers */}
<div className="flex flex-row items-baseline justify-between mb-5">
<h2 className="text-2xl">{t('Staking multipliers')}</h2>
</div>
<div className="mb-20 flex flex-col justify-items-stretch lg:flex-row gap-5">
{loading || !stakingTiers || stakingTiers.length === 0 ? (
<>
{/* Container */}
<div className="bg-vega-clight-800 dark:bg-vega-cdark-800 text-black dark:text-white rounded-lg p-6 mt-1 mb-20">
{/* Benefit tiers */}
<div className="flex flex-col mb-5">
<h3 className="text-2xl calt">{t('Benefit tiers')}</h3>
<p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
{t(
'Members of a referral group can access the increasing commission and discount benefits defined in the program based on their combined running volume.'
)}
</p>
</div>
<div className="mb-10">
{loading || !benefitTiers || benefitTiers.length === 0 ? (
<Loading variant="large" />
<Loading variant="large" />
<Loading variant="large" />
</>
) : (
<StakingTiers data={stakingTiers} />
)}
) : (
<TiersTable
windowLength={details?.windowLength}
data={benefitTiers.map((bt) => ({
...bt,
tierElement: (
<div className="rounded-full bg-vega-clight-900 dark:bg-vega-cdark-900 p-1 w-8 h-8 text-center">
{bt.tier}
</div>
),
}))}
/>
)}
</div>
{/* Staking tiers */}
<div className="flex flex-col mb-5">
<h3 className="text-2xl calt">{t('Staking multipliers')}</h3>
<p className="text-sm text-vega-clight-200 dark:text-vega-cdark-200">
{t(
'Referrers can access the commission multipliers defined in the program by staking VEGA tokens in the amounts shown.'
)}
</p>
</div>
<div className="gap-5 grid lg:grid-cols-3">
{loading || !stakingTiers || stakingTiers.length === 0 ? (
<>
<Loading variant="large" />
<Loading variant="large" />
<Loading variant="large" />
</>
) : (
<StakingTiers data={stakingTiers} />
)}
</div>
</div>
</>
);
@@ -168,17 +257,14 @@ const StakingTiers = ({
data: ReturnType<typeof useReferralProgram>['stakingTiers'];
}) => (
<>
{data.map(
({ tier, label, referralRewardMultiplier, minimumStakedTokens }, i) => (
<StakingTier
key={i}
tier={tier}
label={label}
referralRewardMultiplier={referralRewardMultiplier}
minimumStakedTokens={minimumStakedTokens}
/>
)
)}
{data.map(({ tier, referralRewardMultiplier, minimumStakedTokens }, i) => (
<StakingTier
key={i}
tier={tier}
referralRewardMultiplier={referralRewardMultiplier}
minimumStakedTokens={minimumStakedTokens}
/>
))}
</>
);
@@ -203,9 +289,17 @@ const TiersTable = ({
{
name: 'commission',
displayName: t('Referrer commission'),
tooltip: t('A percentage of commission earned by the referrer'),
tooltip: t(
"The proportion of the referee's taker fees to be rewarded to the referrer"
),
},
{
name: 'discount',
displayName: t('Referee trading discount'),
tooltip: t(
"The proportion of the referee's taker fees to be discounted"
),
},
{ name: 'discount', displayName: t('Referrer trading discount') },
{
name: 'volume',
displayName: t(
@@ -215,20 +309,34 @@ const TiersTable = ({
count: windowLength,
}
),
tooltip: t('The minimum running notional for the given benefit tier'),
},
{
name: 'epochs',
displayName: t('Min. epochs'),
tooltip: t(
'The minimum number of epochs the party needs to be in the referral set to be eligible for the benefit'
),
},
{ name: 'epochs', displayName: t('Min. epochs') },
]}
className="bg-white dark:bg-vega-cdark-900"
data={data.map((d) => ({
...d,
className: classNames({
'from-vega-pink-400 dark:from-vega-pink-600 to-20% bg-highlight':
d.tier >= 3,
'from-vega-purple-400 dark:from-vega-purple-600 to-20% bg-highlight':
d.tier === 2,
'from-vega-yellow-400 dark:from-vega-yellow-600 to-20% bg-highlight':
'yellow' === getTierColor(d.tier),
'from-vega-green-400 dark:from-vega-green-600 to-20% bg-highlight':
'green' === getTierColor(d.tier),
'from-vega-blue-400 dark:from-vega-blue-600 to-20% bg-highlight':
d.tier === 1,
'blue' === getTierColor(d.tier),
'from-vega-purple-400 dark:from-vega-purple-600 to-20% bg-highlight':
'purple' === getTierColor(d.tier),
'from-vega-pink-400 dark:from-vega-pink-600 to-20% bg-highlight':
'pink' === getTierColor(d.tier),
'from-vega-orange-400 dark:from-vega-orange-600 to-20% bg-highlight':
d.tier == 0,
'orange' === getTierColor(d.tier),
'from-vega-clight-200 dark:from-vega-cdark-200 to-20% bg-highlight':
'none' === getTierColor(d.tier),
}),
}))}
/>
+24 -1
View File
@@ -34,8 +34,17 @@ type StatTileProps = {
title: string;
description?: ReactNode;
children?: ReactNode;
overrideWithNoProgram?: boolean;
};
export const StatTile = ({ title, description, children }: StatTileProps) => {
export const StatTile = ({
title,
description,
children,
overrideWithNoProgram = false,
}: StatTileProps) => {
if (overrideWithNoProgram) {
return <NoProgramTile title={title} />;
}
return (
<Tile>
<h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
@@ -51,6 +60,20 @@ export const StatTile = ({ title, description, children }: StatTileProps) => {
);
};
export const NoProgramTile = ({ title }: Pick<StatTileProps, 'title'>) => {
const t = useT();
return (
<Tile title={title}>
<h3 className="mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100 calt">
{title}
</h3>
<div className="text-xs text-vega-clight-300 dark:text-vega-cdark-300 leading-[3rem]">
{t('No active program')}
</div>
</Tile>
);
};
const FADE_OUT_STYLE = classNames(
'after:w-5 after:h-full after:absolute after:top-0 after:right-0',
'after:bg-gradient-to-l after:from-vega-clight-800 after:dark:from-vega-cdark-800 after:to-transparent'
@@ -1,8 +1,9 @@
import { useEffect } from 'react';
import { titlefy } from '@vegaprotocol/utils';
import { useT } from '../../lib/use-t';
import { RewardsContainer } from '../../components/rewards-container';
import { usePageTitleStore } from '../../stores';
import { titlefy } from '@vegaprotocol/utils';
import { useEffect } from 'react';
import { ErrorBoundary } from '../../components/error-boundary';
export const Rewards = () => {
const t = useT();
@@ -14,9 +15,11 @@ export const Rewards = () => {
updateTitle(titlefy([title]));
}, [updateTitle, title]);
return (
<div className="container mx-auto p-4">
<h1 className="px-4 pb-4 text-2xl">{title}</h1>
<RewardsContainer />
</div>
<ErrorBoundary feature="rewards">
<div className="container mx-auto p-4">
<h1 className="px-4 pb-4 text-2xl">{title}</h1>
<RewardsContainer />
</div>
</ErrorBoundary>
);
};
@@ -0,0 +1,79 @@
import { render, screen } from '@testing-library/react';
import { ErrorBoundary } from './error-boundary';
import { localLoggerFactory } from '@vegaprotocol/logger';
jest.mock('@vegaprotocol/logger', () => ({
localLoggerFactory: jest.fn(),
}));
describe('ErrorBoundary', () => {
const mockLogError = jest.fn();
const originalConsoleError = console.error;
const mockLoggerFactory = localLoggerFactory as jest.Mock;
beforeAll(() => {
console.error = () => {};
});
afterAll(() => {
console.error = originalConsoleError;
});
beforeEach(() => {
mockLoggerFactory.mockImplementation(() => ({
error: mockLogError,
}));
});
afterEach(() => {
mockLogError.mockClear();
});
it('renders children', () => {
render(
<ErrorBoundary feature="feature">
<div data-testid="child" />
</ErrorBoundary>
);
expect(screen.getByTestId('child')).toBeInTheDocument();
});
it('renders fallback ui and logs an error', () => {
const error = new Error('bork!');
const BorkedComponent = () => {
throw error;
};
render(
<ErrorBoundary feature="test-feature">
<BorkedComponent />
</ErrorBoundary>
);
expect(screen.getByText('Something went wrong')).toBeInTheDocument();
expect(mockLogError).toHaveBeenCalledTimes(1);
expect(mockLogError).toHaveBeenCalledWith(
error.message,
expect.stringContaining('componentStack')
);
});
it('renders fallback render prop if error', () => {
const error = new Error('bork!');
const BorkedComponent = () => {
throw error;
};
render(
<ErrorBoundary
feature="test-feature"
fallback={<div data-testid="custom-ui" />}
>
<BorkedComponent />
</ErrorBoundary>
);
expect(screen.getByTestId('custom-ui')).toBeInTheDocument();
});
});
@@ -0,0 +1,53 @@
import { localLoggerFactory, type LocalLogger } from '@vegaprotocol/logger';
import { Component, type ErrorInfo, type ReactNode } from 'react';
import { useT } from '../../lib/use-t';
interface ErrorBoundaryProps {
children: ReactNode;
feature: string;
fallback?: ReactNode;
}
interface ErrorBoundaryState {
hasError: boolean;
}
export class ErrorBoundary extends Component<
ErrorBoundaryProps,
ErrorBoundaryState
> {
logger: LocalLogger | null = null;
constructor(props: ErrorBoundaryProps) {
super(props);
this.logger = localLoggerFactory({ application: props.feature });
this.state = {
hasError: false,
};
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error: Error, info: ErrorInfo) {
if (this.logger) {
this.logger.error(error.message, JSON.stringify(info));
}
}
render() {
if (this.state.hasError) {
return this.props.fallback || <DefaultFallback />;
}
return this.props.children;
}
}
const DefaultFallback = () => {
const t = useT();
return <p className="text-xs">{t('Something went wrong')}</p>;
};
@@ -0,0 +1 @@
export { ErrorBoundary } from './error-boundary';
@@ -40,6 +40,9 @@ const DateRange = {
RANGE_ALL: 'All',
};
const priceFormat = (fundingRate: number) =>
`${(fundingRate * 100).toFixed(4)}%`;
export const FundingContainer = ({ marketId }: { marketId: string }) => {
const t = useT();
const { theme } = useThemeSwitcher();
@@ -82,7 +85,7 @@ export const FundingContainer = ({ marketId }: { marketId: string }) => {
<LineChart
data={values}
theme={theme}
priceFormat={(fundingRate) => `${(fundingRate * 100).toFixed(4)}%`}
priceFormat={priceFormat}
yAxisTickFormat="%"
/>
);
+24 -11
View File
@@ -16,6 +16,7 @@ import { GetStarted } from '../welcome-dialog';
import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
import { useT } from '../../lib/use-t';
import { ErrorBoundary } from '../error-boundary';
export enum ViewType {
Order = 'Order',
@@ -163,12 +164,14 @@ export const SidebarContent = () => {
if (params.marketId) {
return (
<ContentWrapper>
<DealTicketContainer
marketId={params.marketId}
onDeposit={(assetId) =>
setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
}
/>
<ErrorBoundary feature="deal-ticket">
<DealTicketContainer
marketId={params.marketId}
onDeposit={(assetId) =>
setViews({ type: ViewType.Deposit, assetId }, currentRouteId)
}
/>
</ErrorBoundary>
<GetStarted />
</ContentWrapper>
);
@@ -181,7 +184,9 @@ export const SidebarContent = () => {
if (params.marketId) {
return (
<ContentWrapper>
<MarketInfoAccordionContainer marketId={params.marketId} />
<ErrorBoundary feature="market-info">
<MarketInfoAccordionContainer marketId={params.marketId} />
</ErrorBoundary>
</ContentWrapper>
);
} else {
@@ -192,7 +197,9 @@ export const SidebarContent = () => {
if (view.type === ViewType.Deposit) {
return (
<ContentWrapper title={t('Deposit')}>
<DepositContainer assetId={view.assetId} />
<ErrorBoundary feature="deposit">
<DepositContainer assetId={view.assetId} />
</ErrorBoundary>
</ContentWrapper>
);
}
@@ -200,7 +207,9 @@ export const SidebarContent = () => {
if (view.type === ViewType.Withdraw) {
return (
<ContentWrapper title={t('Withdraw')}>
<WithdrawContainer assetId={view.assetId} />
<ErrorBoundary feature="withdraw">
<WithdrawContainer assetId={view.assetId} />
</ErrorBoundary>
</ContentWrapper>
);
}
@@ -208,7 +217,9 @@ export const SidebarContent = () => {
if (view.type === ViewType.Transfer) {
return (
<ContentWrapper title={t('Transfer')}>
<TransferContainer assetId={view.assetId} />
<ErrorBoundary feature="transfer">
<TransferContainer assetId={view.assetId} />
</ErrorBoundary>
</ContentWrapper>
);
}
@@ -216,7 +227,9 @@ export const SidebarContent = () => {
if (view.type === ViewType.Settings) {
return (
<ContentWrapper title={t('Settings')}>
<Settings />
<ErrorBoundary feature="settings">
<Settings />
</ErrorBoundary>
</ContentWrapper>
);
}
@@ -10,6 +10,7 @@ import { positionsDataProvider } from '@vegaprotocol/positions';
import { useGlobalStore } from '../../stores';
const ONBOARDING_STORAGE_KEY = 'vega_onboarding';
export const useOnboardingStore = create<{
dialogOpen: boolean;
walletDialogOpen: boolean;
@@ -20,7 +21,7 @@ export const useOnboardingStore = create<{
}>()(
persist(
(set) => ({
dialogOpen: true,
dialogOpen: false,
walletDialogOpen: false,
dismissed: false,
dismiss: () => set({ dismissed: true }),
@@ -1,18 +1,23 @@
import { useEffect } from 'react';
import { useMatch } from 'react-router-dom';
import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
import { useEnvironment } from '@vegaprotocol/environment';
import { WelcomeDialogContent } from './welcome-dialog-content';
import { useOnboardingStore } from './use-get-onboarding-step';
import { VegaConnectDialog } from '@vegaprotocol/wallet';
import { Connectors } from '../../lib/vega-connectors';
import { RiskMessage } from './risk-message';
import { useT } from '../../lib/use-t';
import { Links } from '../../lib/links';
import { RiskMessage } from './risk-message';
import { WelcomeDialogContent } from './welcome-dialog-content';
import { useOnboardingStore } from './use-get-onboarding-step';
export const WelcomeDialog = () => {
const isReferrals = useMatch(Links.REFERRALS());
const t = useT();
const { VEGA_ENV } = useEnvironment();
const dismissed = useOnboardingStore((store) => store.dismissed);
const dialogOpen = useOnboardingStore((store) => store.dialogOpen);
const dismiss = useOnboardingStore((store) => store.dismiss);
const setDialogOpen = useOnboardingStore((store) => store.setDialogOpen);
const walletDialogOpen = useOnboardingStore(
(store) => store.walletDialogOpen
);
@@ -20,6 +25,12 @@ export const WelcomeDialog = () => {
(store) => store.setWalletDialogOpen
);
useEffect(() => {
if (dismissed) return;
if (isReferrals) return;
setDialogOpen(true);
}, [dismissed, isReferrals, setDialogOpen]);
const content = walletDialogOpen ? (
<VegaConnectDialog
connectors={Connectors}
@@ -31,7 +42,12 @@ export const WelcomeDialog = () => {
<WelcomeDialogContent />
);
const onClose = walletDialogOpen ? () => setWalletDialogOpen(false) : dismiss;
const onClose = walletDialogOpen
? () => setWalletDialogOpen(false)
: () => {
setDialogOpen(false);
dismiss();
};
const title = walletDialogOpen ? null : (
<span className="font-alpha calt" data-testid="welcome-title">
+1 -1
View File
@@ -1,2 +1,2 @@
CONSOLE_IMAGE_NAME=vegaprotocol/trading:latest
VEGA_VERSION=v0.73.6
VEGA_VERSION=v0.73.8
+1 -1
View File
@@ -1,2 +1,2 @@
CONSOLE_IMAGE_NAME=vegaprotocol/trading:develop
VEGA_VERSION=v0.73.6
VEGA_VERSION=v0.73.8
+1 -1
View File
@@ -1,2 +1,2 @@
CONSOLE_IMAGE_NAME=vegaprotocol/trading:main
VEGA_VERSION=v0.73.6
VEGA_VERSION=v0.73.8
+4 -4
View File
@@ -1159,9 +1159,9 @@ profile = ["pytest-profiling", "snakeviz"]
[package.source]
type = "git"
url = "https://github.com/vegaprotocol/vega-market-sim.git"
reference = "HEAD"
resolved_reference = "fbcb974b2055bbc80169cdfd69987f087f9969fb"
url = "https://github.com/vegaprotocol/vega-market-sim.git/"
reference = "fix/genesis_panic"
resolved_reference = "7ab04931924380db8000544b7f3d65fcb39b5467"
[[package]]
name = "websocket-client"
@@ -1342,4 +1342,4 @@ files = [
[metadata]
lock-version = "2.0"
python-versions = ">=3.9,<3.11"
content-hash = "d1231fe591b774e34b8f94a54cd02e4d7dae924c57785263841c3b0b0feed505"
content-hash = "68ed0de55290a3b929d47eb7f7b031fb7e172261c7bbeb4f554b7c27a4462754"
+2 -3
View File
@@ -31,7 +31,7 @@ initial_spread: float = 0.1
market_name = "BTC:DAI_2023"
@pytest.mark.usefixtures("vega", "page", "simple_market", "risk_accepted")
@pytest.mark.usefixtures("vega", "page", "simple_market", "risk_accepted", "auth")
def test_price_monitoring(simple_market, vega: VegaService, page: Page):
page.goto(f"/#/markets/all")
expect(page.locator(table_row_selector).locator(trading_mode_col)).to_have_text(
@@ -109,9 +109,8 @@ def test_price_monitoring(simple_market, vega: VegaService, page: Page):
expect(
page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
).to_have_text("100.00 (>100%)")
vega.forward("10s")
vega.wait_fn(1)
vega.wait_fn(10)
vega.wait_for_total_catchup()
expect(
page.get_by_test_id(liquidity_supplied).get_by_test_id(item_value)
@@ -197,10 +197,10 @@ def test_market_info_risk_factors(page: Page):
fields = [
["Long", "0.05153"],
["Short", "0.05422"],
["Max Leverage Long", "19.036"],
["Max Leverage Short", "18.111"],
["Max Initial Leverage Long", "12.691"],
["Max Initial Leverage Short", "12.074"],
["Max Leverage Long", "19.406"],
["Max Leverage Short", "18.445"],
["Max Initial Leverage Long", "12.937"],
["Max Initial Leverage Short", "12.297"],
]
validate_info_section(page, fields)
@@ -137,6 +137,6 @@ def test_perps_market_terminated(page: Page, vega: VegaService):
expect(page.get_by_test_id("market-trading-mode")).to_have_text("Trading modeNo trading")
expect(page.get_by_test_id("market-state")).to_have_text("StatusClosed")
expect(page.get_by_test_id("liquidity-supplied")).to_have_text("Liquidity supplied 0.00 (0.00%)")
expect(page.get_by_test_id("market-funding")).to_have_text("Funding Rate / Countdown-Unknown")
expect(page.get_by_test_id("index-price")).to_have_text("Index Price-")
expect(page.get_by_test_id("market-funding")).to_contain_text("Funding Rate / Countdown")
expect(page.get_by_test_id("index-price")).to_contain_text("Index Price")
expect(page.get_by_test_id("deal-ticket-error-message-summary")).to_have_text("This market is closed and not accepting orders")
@@ -153,7 +153,8 @@ interface DataProviderParams<
pagination?: {
getPageInfo: GetPageInfo<QueryData>;
append: Append<Data>;
first: number;
first?: number;
last?: number;
};
fetchPolicy?: FetchPolicy;
resetDelay?: number;
@@ -19,16 +19,27 @@ export const LayoutCell = ({
}: LayoutCellProps) => {
const t = useT();
const classes = [
'lg:text-right flex justify-between lg:block',
'lg:text-right flex lg:block justify-stretch gap-2',
'my-2 lg:my-0',
];
return (
<div className={classnames(classes)}>
{label && <span className="lg:hidden">{label}</span>}
{label && (
<>
<span className="lg:hidden text-xs text-vega-clight-200 dark:text-vega-cdark-200 whitespace-nowrap">
{label}
</span>
<span
/* separator */
aria-hidden
className="border-b border-dashed border-b-vega-clight-400 dark:border-b-vega-cdark-400 w-full h-[9px]"
></span>
</>
)}
<span
data-testid={dataTestId}
className={classnames('font-mono', {
className={classnames('font-mono text-xs lg:text-sm', {
'text-danger': !isLoading && hasError,
'text-muted': isLoading,
})}
@@ -89,30 +89,30 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
<span className="text-right">{t('Block')}</span>
<span className="text-right">{t('Subscription')}</span>
</LayoutRow>
<div>
{nodes.map((node, index) => {
return (
<LayoutRow key={node} dataTestId="node-row">
<ApolloWrapper url={node}>
<RowData
id={index.toString()}
url={node}
highestBlock={highestBlock}
onBlockHeight={handleHighestBlock}
/>
</ApolloWrapper>
</LayoutRow>
);
})}
<CustomRowWrapper
inputText={customUrlText}
setInputText={setCustomUrlText}
nodes={nodes}
highestBlock={highestBlock}
onBlockHeight={handleHighestBlock}
nodeRadio={nodeRadio}
/>
</div>
</div>
<div>
{nodes.map((node, index) => {
return (
<LayoutRow key={node} dataTestId="node-row">
<ApolloWrapper url={node}>
<RowData
id={index.toString()}
url={node}
highestBlock={highestBlock}
onBlockHeight={handleHighestBlock}
/>
</ApolloWrapper>
</LayoutRow>
);
})}
<CustomRowWrapper
inputText={customUrlText}
setInputText={setCustomUrlText}
nodes={nodes}
highestBlock={highestBlock}
onBlockHeight={handleHighestBlock}
nodeRadio={nodeRadio}
/>
</div>
</TradingRadioGroup>
<div className="mt-4">
+9 -8
View File
@@ -79,7 +79,6 @@
"Size": "Size",
"Size cannot be lower than {{sizeStep}}": "Size cannot be lower than {{sizeStep}}",
"sizeAtPrice-market": "market",
"Subtotal": "Subtotal",
"Stagnet": "Stagnet",
"Stop": "Stop",
"Stop Limit": "Stop Limit",
@@ -87,6 +86,7 @@
"Stop order will be triggered immediately": "Stop order will be triggered immediately",
"Strategy": "Strategy",
"Submit": "Submit",
"Subtotal": "Subtotal",
"terminated": "terminated",
"The expiry date that you have entered appears to be in the past": "The expiry date that you have entered appears to be in the past",
"The latest Vega code auto-deployed": "The latest Vega code auto-deployed",
@@ -104,9 +104,16 @@
"This market is in opening auction until it has reached enough liquidity to move into continuous trading.": "This market is in opening auction until it has reached enough liquidity to move into continuous trading.",
"This market may have sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.": "This market may have sufficient liquidity but there are not enough priced limit orders in the order book, which are required to deploy liquidity commitment pegged orders.",
"Time in force": "Time in force",
"TIME_IN_FORCE_FOK": "Fill or Kill (FOK)",
"TIME_IN_FORCE_GFA": "Good for Auction (GFA)",
"TIME_IN_FORCE_GFN": "Good for Normal (GFN)",
"TIME_IN_FORCE_GTC": "Good 'til Cancelled (GTC)",
"TIME_IN_FORCE_GTT": "Good 'til Time (GTT)",
"TIME_IN_FORCE_IOC": "Immediate or Cancel (IOC)",
"TIME_IN_FORCE_SELECTOR_LIQUIDITY_MONITORING_AUCTION": "This market is in auction until it reaches <0>sufficient liquidity</0>. Until the auction ends, you can only place GFA, GTT, or GTC limit orders.",
"TIME_IN_FORCE_SELECTOR_PRICE_MONITORING_AUCTION": "This market is in auction due to <0>high price volatility</0>. Until the auction ends, you can only place GFA, GTT, or GTC limit orders.",
"Total": "Total",
"Total fees": "Total fees",
"Total margin available": "Total margin available",
"TOTAL_MARGIN_AVAILABLE": "Total margin available = general {{assetSymbol}} balance ({{generalAccountBalance}} {{assetSymbol}}) + margin balance ({{marginAccountBalance}} {{assetSymbol}}) - maintenance level ({{marginMaintenance}} {{assetSymbol}}).",
"Trading terminated": "Trading terminated",
@@ -130,11 +137,5 @@
"You need to connect your own wallet to start trading on this market": "You need to connect your own wallet to start trading on this market",
"You need to provide a minimum visible size": "You need to provide a minimum visible size",
"You need to provide a peak size": "You need to provide a peak size",
"You need to provide a size": "You need to provide a size",
"TIME_IN_FORCE_FOK": "Fill or Kill (FOK)",
"TIME_IN_FORCE_GFA": "Good for Auction (GFA)",
"TIME_IN_FORCE_GFN": "Good for Normal (GFN)",
"TIME_IN_FORCE_GTC": "Good 'til Cancelled (GTC)",
"TIME_IN_FORCE_GTT": "Good 'til Time (GTT)",
"TIME_IN_FORCE_IOC": "Immediate or Cancel (IOC)"
"You need to provide a size": "You need to provide a size"
}
+1 -1
View File
@@ -2,9 +2,9 @@
"A release candidate for the staging environment": "A release candidate for the staging environment",
"Advanced": "Advanced",
"Block": "Block",
"blocksBehind": "{{count}} Blocks behind",
"blocksBehind_one": "{{count}} Block behind",
"blocksBehind_other": "{{count}} Blocks behind",
"blocksBehind": "{{count}} Blocks behind",
"Change node": "Change node",
"Check": "Check",
"Checking": "Checking",
+8 -8
View File
@@ -1,5 +1,5 @@
{
"Adjusted stake share": "Adjusted stake share",
"Adjusted stake": "Adjusted stake",
"Commitment ({{symbol}})": "Commitment ({{symbol}})",
"Commitment details": "Commitment details",
"Created": "Created",
@@ -7,14 +7,14 @@
"Fee": "Fee",
"Fees accrued this epoch": "Fees accrued this epoch",
"Last bond penalty": "Last bond penalty",
"Last epoch bond penalty.": "Last epoch bond penalty.",
"Last epoch fee penalty.": "Last epoch fee penalty.",
"Last epoch fraction of time on the book.": "Last epoch fraction of time on the book.",
"Penalty applied on a provider's bond penalty at the end of the last epoch. This percentage increased if an LP: had a shortfall and their bond needed to be used to cover it, did not meet the SLA, and/or reduced their commitment to the point that the market was below its target stake.": "Penalty applied on a provider's bond penalty at the end of the last epoch. This percentage increased if an LP: had a shortfall and their bond needed to be used to cover it, did not meet the SLA, and/or reduced their commitment to the point that the market was below its target stake.",
"Penalty applied on the fees a liquidity provider collected in the last epoch. This number increases if an LP did not meet the SLA, or if they met it but other LPs outscored them in the previous epoch.": "Penalty applied on the fees a liquidity provider collected in the last epoch. This percentage increased if an LP did not meet the SLA, or if they met it but other LPs outscored them in the previous epoch.",
"Fraction of time on the book at the end of the last epoch.": "Fraction of time on the book at the end of the last epoch.",
"Last epoch SLA details": "Last epoch SLA details",
"Last fee penalty": "Last fee penalty",
"Last time on the book": "Last time on the book",
"Last time on book": "Last time on book",
"Live liquidity data": "Live liquidity data",
"Live liquidity quality score (%)": "Live liquidity quality score (%)",
"Live liquidity score (%)": "Live liquidity score (%)",
"Live supplied liquidity": "Live supplied liquidity",
"Live time on book": "Live time on book",
"No liquidity provisions": "No liquidity provisions",
@@ -24,7 +24,7 @@
"Status": "Status",
"The amount committed to the market by this liquidity provider.": "The amount committed to the market by this liquidity provider.",
"The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.": "The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.",
"The average score of the liquidity provider.": "The average score of the liquidity provider.",
"The liquidity score of the provider, used to determine allocation of fees to the best performing LPs. Posting volume closer to the mid on both sides of the book will improve this score.": "The liquidity score of the provider, used to determine allocation of fees to the best performing LPs. Posting volume closer to the mid on both sides of the book will improve this score.",
"The current status of this liquidity provision.": "The current status of this liquidity provision.",
"The date and time this liquidity provision was created.": "The date and time this liquidity provision was created.",
"The date and time this liquidity provision was last updated.": "The date and time this liquidity provision was last updated.",
@@ -33,7 +33,7 @@
"The liquidity fees accrued by each provider, which will be distributed at the end of the epoch after applying any penalties.": "The liquidity fees accrued by each provider, which will be distributed at the end of the epoch after applying any penalties.",
"The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume.": "The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume.",
"The public key of the party making this commitment.": "The public key of the party making this commitment.",
"The virtual stake of the liquidity provider.": "The virtual stake of the liquidity provider.",
"The effective stake of the liquidity provider, adjusted for length of commitment and impact on equity like share.": "The effective stake of the liquidity provider, adjusted for length of commitment and impact on equity like share.",
"This LP's time on the book in the current epoch ({{currentEpoch}}) is less than 100%, so they could lose some fees to a better performing LP.": "This LP's time on the book in the current epoch ({{currentEpoch}}) is less than 100%, so they could lose some fees to a better performing LP.",
"This LP's time on the book in the current epoch ({{currentEpoch}}) is less than the minimum required ({{minimumRequired}}), so they could lose all fee revenue for this epoch.": "This LP's time on the book in the current epoch ({{currentEpoch}}) is less than the minimum required ({{minimumRequired}}), so they could lose all fee revenue for this epoch.",
"Updated": "Updated",
+6 -6
View File
@@ -32,9 +32,9 @@
"Insurance pool": "Insurance pool",
"Internal conditions": "Internal conditions",
"Invalid data source": "Invalid data source",
"involvedInMarkets": "Involved in {{count}} markets",
"involvedInMarkets_other": "Involved in {{count}} markets",
"involvedInMarkets_one": "Involved in {{count}} market",
"involvedInMarkets_other": "Involved in {{count}} markets",
"involvedInMarkets": "Involved in {{count}} markets",
"Key": "Key",
"Key details": "Key details",
"Liquidity": "Liquidity",
@@ -54,9 +54,9 @@
"Maximum fraction of an LP's accrued fees that an LP would lose to liquidity providers that achieved a higher SLA performance than them. This is a market parameter.": "Maximum fraction of an LP's accrued fees that an LP would lose to liquidity providers that achieved a higher SLA performance than them. This is a market parameter.",
"Maximum value that a proposed fee amount can be, which is submitted as part of the LP commitment transaction. Note that a value of 0.05 = 5%. This is a network parameter.": "Maximum value that a proposed fee amount can be, which is submitted as part of the LP commitment transaction. Note that a value of 0.05 = 5%. This is a network parameter.",
"Metadata": "Metadata",
"moreProofs": "And {{count}} more proofs",
"moreProofs_one": "And {{count}} more proof",
"moreProofs_other": "And {{count}} more proofs",
"moreProofs": "And {{count}} more proofs",
"Multiplier used to translate an LP's commitment amount to their liquidity obligation. This is a network parameter.": "Multiplier used to translate an LP's commitment amount to their liquidity obligation. This is a network parameter.",
"No data": "No data",
"No oracle proof for settlement data": "No oracle proof for settlement data",
@@ -69,16 +69,16 @@
"Oracle repository": "Oracle repository",
"Oracle status for this market is <0>{{status}}</0>. {{description}} <1>Show more</1>": "Oracle status for this market is <0>{{status}}</0>. {{description}} <1>Show more</1>",
"Oracle status: {{status}}. {{description}}": "Oracle status: {{status}}. {{description}}",
"oracleInMarkets": "Oracle in {{count}} markets",
"oracleInMarkets_one": "Oracle in {{count}} market",
"oracleInMarkets_other": "Oracle in {{count}} markets",
"oracleInMarkets": "Oracle in {{count}} markets",
"Price monitoring bounds {{index}}": "Price monitoring bounds {{index}}",
"Probability level for price projection, e.g. value of 0.95 will result in a price range such that over the specified projection horizon, the prices observed in the market should be in that range 95% of the time.": "Probability level for price projection, e.g. value of 0.95 will result in a price range such that over the specified projection horizon, the prices observed in the market should be in that range 95% of the time.",
"Probability level used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short": "Probability level used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short",
"Projection horizon measured as a year fraction used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short": "Projection horizon measured as a year fraction used in <0>Expected Shortfall</0> calculation when obtaining Risk Factor Long and Risk Factor Short",
"proofsOfOwnership": "{{count}} proofs of ownership",
"proofsOfOwnership_one": "{{count}} proof of ownership",
"proofsOfOwnership_other": "{{count}} proofs of ownership",
"proofsOfOwnership": "{{count}} proofs of ownership",
"Proposal": "Proposal",
"Propose a change to market": "Propose a change to market",
"Read more": "Read more",
@@ -135,9 +135,9 @@
"Updated": "Updated",
"Used to calculate the penalty to liquidity providers when they cannot support their open position with the assets in their margin and general accounts. This is a network parameter.": "Used to calculate the penalty to liquidity providers when they cannot support their open position with the assets in their margin and general accounts. This is a network parameter.",
"Verified since {{lastVerified}}": "Verified since {{lastVerified}}",
"verifyProofs": "Verify {{count}} proofs of ownership",
"verifyProofs_one": "Verify {{count}} proof of ownership",
"verifyProofs_other": "Verify {{count}} proofs of ownership",
"verifyProofs": "Verify {{count}} proofs of ownership",
"View governance proposal": "View governance proposal",
"View liquidity provision table": "View liquidity provision table",
"View on Etherscan": "View on Etherscan",
+2 -2
View File
@@ -7,8 +7,8 @@
"Changes have been proposed for this market.": "Changes have been proposed for this market.",
"Closing date": "Closing date",
"Confirm transaction in wallet": "Confirm transaction in wallet",
"Enactment date: {{date}}": "Enactment date: {{date}}",
"Enactment date": "Enactment date",
"Enactment date: {{date}}": "Enactment date: {{date}}",
"estimated time to protocol upgrade": "estimated time to protocol upgrade",
"estimating...": "estimating...",
"Market": "Market",
@@ -41,8 +41,8 @@
"Update <0>{{key}}</0> to {{value}}": "Update <0>{{key}}</0> to {{value}}",
"View details": "View details",
"View in block explorer": "View in block explorer",
"View proposal details": "View proposal details",
"View proposal": "View proposal",
"View proposal details": "View proposal details",
"Voting": "Voting",
"Your transaction has been confirmed": "Your transaction has been confirmed"
}
+30 -23
View File
@@ -6,6 +6,7 @@
"{{checkedAssets}} Assets": "{{checkedAssets}} Assets",
"{{distance}} ago": "{{distance}} ago",
"{{instrumentCode}} liquidity provision": "{{instrumentCode}} liquidity provision",
"<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>": "<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>",
"24h vol": "24h vol",
"24h volume": "24h volume",
"A percentage of commission earned by the referrer": "A percentage of commission earned by the referrer",
@@ -53,13 +54,11 @@
"Countdown": "Countdown",
"Create a referral code": "Create a referral code",
"Current tier": "Current tier",
"combinedVolume": "Combined volume (last {{count}} epochs)",
"combinedVolume_one": "Combined volume (last {{count}} epoch)",
"combinedVolume_other": "Combined volume (last {{count}} epochs)",
"Dark mode": "Dark mode",
"Date Joined": "Date Joined",
"Deposit": "Deposit",
"Deposit funds": "Deposit funds",
"Deposits": "Deposits",
"Depth": "Depth",
"Description": "Description",
"Disclaimer": "Disclaimer",
@@ -93,15 +92,15 @@
"Final commission rate": "Final commission rate",
"Find out more": "Find out more",
"Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.": "Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.",
"From epoch": "From epoch",
"Fully decentralised high performance peer-to-network trading.": "Fully decentralised high performance peer-to-network trading.",
"Funding": "Funding",
"Funding history": "Funding history",
"Funding payments": "Funding payments",
"Funding Payments": "Funding Payments",
"Funding payments": "Funding payments",
"Funding Rate": "Funding Rate",
"Funding rate": "Funding rate",
"Futures": "Futures",
"From epoch": "From epoch",
"Generate a referral code to share with your friends and start earning commission.": "Generate a referral code to share with your friends and start earning commission.",
"Generate code": "Generate code",
"Get started": "Get started",
@@ -142,14 +141,15 @@
"Market triggers cancellation or governance vote has passed to cancel": "Market triggers cancellation or governance vote has passed to cancel",
"Markets": "Markets",
"Menu": "Menu",
"Metamask Snap <0>quick start</0>": "Metamask Snap <0>quick start</0>",
"Min. epochs": "Min. epochs",
"Min. trading volume": "Min. trading volume",
"My current volume": "My current volume",
"My liquidity provision": "My liquidity provision",
"My trading fees": "My trading fees",
"minTradingVolume": "Min. trading volume (last {{count}} epochs)",
"minTradingVolume_one": "Min. trading volume (last {{count}} epoch)",
"minTradingVolume_other": "Min. trading volume (last {{count}} epochs)",
"My current volume": "My current volume",
"My liquidity provision": "My liquidity provision",
"My trading fees": "My trading fees",
"myVolume": "My volume (last {{count}} epochs)",
"myVolume_one": "My volume (last {{count}} epoch)",
"myVolume_other": "My volume (last {{count}} epochs)",
@@ -163,6 +163,7 @@
"No market": "No market",
"No markets": "No markets",
"No markets.": "No markets.",
"No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>": "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>",
"No open orders": "No open orders",
"No orders": "No orders",
"No party accepts any liability for any losses whatsoever.": "No party accepts any liability for any losses whatsoever.",
@@ -177,8 +178,8 @@
"Node: {{VEGA_URL}} is unsuitable": "Node: {{VEGA_URL}} is unsuitable",
"Non-custodial and pseudonymous": "Non-custodial and pseudonymous",
"None": "None",
"Number of traders": "Number of traders",
"Not connected": "Not connected",
"Number of traders": "Number of traders",
"Open": "Open",
"Open a position": "Open a position",
"Open markets": "Open markets",
@@ -188,6 +189,9 @@
"Orders": "Orders",
"Page not found": "Page not found",
"Parent of a market": "Parent of a market",
"pastEpochs": "Past {{count}} epochs",
"pastEpochs_one": "Past {{count}} epoch",
"pastEpochs_other": "Past {{count}} epochs",
"Perpetuals": "Perpetuals",
"Please choose another market from the <0>market list</0>": "Please choose another market from the <0>market list</0>",
"Please connect Vega wallet": "Please connect Vega wallet",
@@ -201,9 +205,6 @@
"Proposed markets": "Proposed markets",
"Providing liquidity": "Providing liquidity",
"Purpose built proof of stake blockchain": "Purpose built proof of stake blockchain",
"pastEpochs": "Past {{count}} epochs",
"pastEpochs_one": "Past {{count}} epoch",
"pastEpochs_other": "Past {{count}} epochs",
"qUSD": "qUSD",
"qUSD provides a rough USD equivalent of balances across all assets using the value of \"Quantum\" for that asset": "qUSD provides a rough USD equivalent of balances across all assets using the value of \"Quantum\" for that asset",
"Read the terms": "Read the terms",
@@ -213,6 +214,9 @@
"Referral benefits": "Referral benefits",
"Referral discount": "Referral discount",
"Referrals": "Referrals",
"referralStatisticsCommission": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
"referralStatisticsCommission_one": "Commission earned in <0>qUSD</0> (last {{count}} epoch)",
"referralStatisticsCommission_other": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
"Referrer commission": "Referrer commission",
"Referrer trading discount": "Referrer trading discount",
"Referrers earn commission based on a percentage of the taker fees their referees pay": "Referrers earn commission based on a percentage of the taker fees their referees pay",
@@ -224,9 +228,6 @@
"Rewards": "Rewards",
"Rewards history": "Rewards history",
"Rewards multipliers": "Rewards multipliers",
"referralStatisticsCommission": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
"referralStatisticsCommission_one": "Commission earned in <0>qUSD</0> (last {{count}} epoch)",
"referralStatisticsCommission_other": "Commission earned in <0>qUSD</0> (last {{count}} epochs)",
"runningNotionalOverEpochs": "Combined running notional over the {{count}} epochs",
"runningNotionalOverEpochs_one": "Combined running notional over the {{count}} epoch",
"runningNotionalOverEpochs_other": "Combined running notional over the {{count}} epochs",
@@ -259,7 +260,6 @@
"Successors to this market have been proposed": "Successors to this market have been proposed",
"Supplied stake": "Supplied stake",
"Suspended due to price or liquidity monitoring trigger": "Suspended due to price or liquidity monitoring trigger",
"to": "to",
"Target stake": "Target stake",
"The amount of fees paid to liquidity providers across the whole market during the last epoch {{epoch}}.": "The amount of fees paid to liquidity providers across the whole market during the last epoch {{epoch}}.",
"The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee": "The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee",
@@ -278,11 +278,16 @@
"This market URL is not available any more.": "This market URL is not available any more.",
"This timestamp is user curated metadata and does not drive any on-chain functionality.": "This timestamp is user curated metadata and does not drive any on-chain functionality.",
"Tier": "Tier",
"to": "to",
"To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.": "To protect the network from spam, you must have at least {{requiredFunds}} qUSD of any asset on the network to proceed.",
"Toast location": "Toast location",
"Total discount": "Total discount",
"Total distributed": "Total distributed",
"Total fee after discount": "Total fee after discount",
"Total fee before discount": "Total fee before discount",
"totalCommission": "Total commission (last {{count}}} epochs)",
"totalCommission_one": "Total commission (last {{count}}} epoch)",
"totalCommission_other": "Total commission (last {{count}}} epochs)",
"Trader": "Trader",
"Trades": "Trades",
"Trading": "Trading",
@@ -292,12 +297,13 @@
"Trading on Market {{name}} may stop. There are open proposals to close this market": "Trading on Market {{name}} may stop. There are open proposals to close this market",
"Trading on Market {{name}} will stop on {{date}}": "Trading on Market {{name}} will stop on {{date}}",
"Transfer": "Transfer",
"totalCommission": "Total commission (last {{count}}} epochs)",
"totalCommission_one": "Total commission (last {{count}}} epoch)",
"totalCommission_other": "Total commission (last {{count}}} epochs)",
"totalCommission": "Total commission (last {{count}} epochs)",
"totalCommission_one": "Total commission (last {{count}} epoch)",
"totalCommission_other": "Total commission (last {{count}} epochs)",
"Unknown": "Unknown",
"Unknown settlement date": "Unknown settlement date",
"Vega Reward pot": "Vega Reward pot",
"Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
"Vesting": "Vesting",
"Vesting {{assetSymbol}}": "Vesting {{assetSymbol}}",
"Vesting multiplier": "Vesting multiplier",
@@ -320,17 +326,18 @@
"We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>.": "We're sorry but we don't have an active referral programme currently running. You can propose a new programme <0>here</0>.",
"Welcome to Vega trading!": "Welcome to Vega trading!",
"Withdraw": "Withdraw",
"Withdrawals": "Withdrawals",
"You can opt out any time via settings": "You can opt out any time via settings",
"You may encounter bugs, loss of functionality or loss of assets.": "You may encounter bugs, loss of functionality or loss of assets.",
"You must be connected to the Vega wallet.": "You must be connected to the Vega wallet.",
"You need a <0>Vega wallet</0> to start trading in this market.": "You need a <0>Vega wallet</0> to start trading in this market.",
"You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.": "You need at least {{requiredStake}} VEGA staked to generate a referral code and participate in the referral program.",
"You will no longer be able to hold a position on this market when it closes in {{duration}}.": "You will no longer be able to hold a position on this market when it closes in {{duration}}.",
"youAreJoiningTheGroup": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.",
"youAreJoiningTheGroup_one": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epoch.",
"youAreJoiningTheGroup_other": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.",
"Your code has been rejected": "Your code has been rejected",
"Your identity is always anonymous on Vega": "Your identity is always anonymous on Vega",
"Your referral code": "Your referral code",
"Your tier": "Your tier",
"youAreJoiningTheGroup": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs.",
"youAreJoiningTheGroup_one": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epoch.",
"youAreJoiningTheGroup_other": "You are joining the group shown, but will not have access to benefits until you have completed at least {{count}} epochs."
"Your tier": "Your tier"
}
+1 -1
View File
@@ -4,8 +4,8 @@
"Collapse": "Collapse",
"Copied": "Copied",
"Dark mode": "Dark mode",
"Dismiss all toasts": "Dismiss all toasts",
"Dismiss all": "Dismiss all",
"Dismiss all toasts": "Dismiss all toasts",
"Exit view as": "Exit view as",
"Expand": "Expand",
"Light mode": "Light mode",
+11 -11
View File
@@ -1,15 +1,15 @@
{
"Expired on {{date}}": "Expired on {{date}}",
"Not time-based": "Not time-based",
"Expired": "Expired",
"Mark": "Mark",
"Required": "Required",
"Invalid Ethereum address": "Invalid Ethereum address",
"Invalid Vega key": "Invalid Vega key",
"Value is below minimum": "Value is below minimum",
"Value is above maximum": "Value is above maximum",
"Must be valid JSON": "Must be valid JSON",
"{{field}} accepts up to {{decimals}} decimal places": "{{field}} accepts up to {{decimals}} decimal places",
"{{field}} must be a multiple of {{step}} for this market": "{{field}} must be a multiple of {{step}} for this market",
"{{field}} must be whole numbers for this market": "{{field}} must be whole numbers for this market",
"{{field}} accepts up to {{decimals}} decimal places": "{{field}} accepts up to {{decimals}} decimal places"
"Expired": "Expired",
"Expired on {{date}}": "Expired on {{date}}",
"Invalid Ethereum address": "Invalid Ethereum address",
"Invalid Vega key": "Invalid Vega key",
"Mark": "Mark",
"Must be valid JSON": "Must be valid JSON",
"Not time-based": "Not time-based",
"Required": "Required",
"Value is above maximum": "Value is above maximum",
"Value is below minimum": "Value is below minimum"
}
+54 -54
View File
@@ -1,63 +1,63 @@
{
"About the Vega wallet": "About the Vega wallet",
"Supported browsers": "Supported browsers",
"Connect Vega wallet": "Connect Vega wallet",
"Get a Vega wallet": "Get a Vega wallet",
"Connect securely, deposit funds and approve or reject transactions with the Vega wallet": "Connect securely, deposit funds and approve or reject transactions with the Vega wallet",
"Connect": "Connect",
"Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
"your browser": "your browser",
"Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
"Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
"Metamask Snap <0>quick start</0>": "Metamask Snap <0>quick start</0>",
"Connect directly via Metamask with the Vega Snap for single key support without advanced features.": "Connect directly via Metamask with the Vega Snap for single key support without advanced features.",
"Connect via Vega MetaMask Snap": "Connect via Vega MetaMask Snap",
"Install Metamask with the Vega Snap for single key support without advanced features.": "Install Metamask with the Vega Snap for single key support without advanced features.",
"Install Vega MetaMask Snap": "Install Vega MetaMask Snap",
"No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>": "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>",
"Advanced / Other options...": "Advanced / Other options...",
"View as party": "View as party",
"Get the Vega Wallet": "Get the Vega Wallet",
"Custom wallet location": "Custom wallet location",
"Go back": "Go back",
"Connect the App/CLI": "Connect the App/CLI",
"Use the Desktop App/CLI": "Use the Desktop App/CLI",
"Enter a custom wallet location": "Enter a custom wallet location",
"<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>": "<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>",
"Verifying chain": "Verifying chain",
"Successfully connected": "Successfully connected",
"Connecting...": "Connecting...",
"Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.": "Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.",
"Understand the risk": "Understand the risk",
"Cancel": "Cancel",
"I agree": "I agree",
"Something went wrong": "Something went wrong",
"About the Vega wallet": "About the Vega wallet",
"Advanced / Other options...": "Advanced / Other options...",
"An unknown error occurred": "An unknown error occurred",
"Try again": "Try again",
"User rejected": "User rejected",
"The user rejected the wallet connection": "The user rejected the wallet connection",
"Wrong network": "Wrong network",
"No wallet detected": "No wallet detected",
"Vega browser extension not installed": "Vega browser extension not installed",
"Snap failed": "Snap failed",
"Could not connect to Vega MetaMask Snap": "Could not connect to Vega MetaMask Snap",
"No wallet application running at {{connectorUrl}}": "No wallet application running at {{connectorUrl}}",
"No Vega Wallet application running": "No Vega Wallet application running",
"Read the docs to troubleshoot": "Read the docs to troubleshoot",
"Connection in progress": "Connection in progress",
"Approve the connection from your Vega wallet app.": "Approve the connection from your Vega wallet app.",
"To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".": "To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".",
"SELECT A VEGA KEY": "SELECT A VEGA KEY",
"Select": "Select",
"Copy": "Copy",
"Disconnect all keys": "Disconnect all keys",
"Pubkey must be 64 characters in length": "Pubkey must be 64 characters in length",
"Pubkey must be be valid hex": "Pubkey must be be valid hex",
"VIEW AS VEGA USER": "VIEW AS VEGA USER",
"Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.": "Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.",
"Browse from the perspective of another Vega user in read-only mode.": "Browse from the perspective of another Vega user in read-only mode.",
"Required": "Required",
"Browse network": "Browse network",
"Cancel": "Cancel",
"Checking wallet version": "Checking wallet version",
"Checking your wallet is compatible with this app": "Checking your wallet is compatible with this app",
"Wrong Network": "Wrong Network"
"Connect": "Connect",
"Connect directly via Metamask with the Vega Snap for single key support without advanced features.": "Connect directly via Metamask with the Vega Snap for single key support without advanced features.",
"Connect securely, deposit funds and approve or reject transactions with the Vega wallet": "Connect securely, deposit funds and approve or reject transactions with the Vega wallet",
"Connect the App/CLI": "Connect the App/CLI",
"Connect Vega wallet": "Connect Vega wallet",
"Connect via Vega MetaMask Snap": "Connect via Vega MetaMask Snap",
"Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
"Connecting...": "Connecting...",
"Connection in progress": "Connection in progress",
"Copy": "Copy",
"Could not connect to Vega MetaMask Snap": "Could not connect to Vega MetaMask Snap",
"Custom wallet location": "Custom wallet location",
"Disconnect all keys": "Disconnect all keys",
"Enter a custom wallet location": "Enter a custom wallet location",
"Get a Vega wallet": "Get a Vega wallet",
"Get the Vega Wallet": "Get the Vega Wallet",
"Go back": "Go back",
"I agree": "I agree",
"Install Metamask with the Vega Snap for single key support without advanced features.": "Install Metamask with the Vega Snap for single key support without advanced features.",
"Install Vega MetaMask Snap": "Install Vega MetaMask Snap",
"Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
"Metamask Snap <0>quick start</0>": "Metamask Snap <0>quick start</0>",
"No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>": "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>",
"No Vega Wallet application running": "No Vega Wallet application running",
"No wallet application running at {{connectorUrl}}": "No wallet application running at {{connectorUrl}}",
"No wallet detected": "No wallet detected",
"Pubkey must be 64 characters in length": "Pubkey must be 64 characters in length",
"Pubkey must be be valid hex": "Pubkey must be be valid hex",
"Read the docs to troubleshoot": "Read the docs to troubleshoot",
"Required": "Required",
"Select": "Select",
"SELECT A VEGA KEY": "SELECT A VEGA KEY",
"Snap failed": "Snap failed",
"Something went wrong": "Something went wrong",
"Successfully connected": "Successfully connected",
"Supported browsers": "Supported browsers",
"The user rejected the wallet connection": "The user rejected the wallet connection",
"To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".": "To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".",
"Try again": "Try again",
"Understand the risk": "Understand the risk",
"Use the Desktop App/CLI": "Use the Desktop App/CLI",
"User rejected": "User rejected",
"Vega browser extension not installed": "Vega browser extension not installed",
"Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
"Verifying chain": "Verifying chain",
"View as party": "View as party",
"VIEW AS VEGA USER": "VIEW AS VEGA USER",
"Wrong Network": "Wrong Network",
"Wrong network": "Wrong network",
"your browser": "your browser"
}
+4 -4
View File
@@ -5,13 +5,13 @@
"Available to withdraw in {{availableTimestamp}}": "Available to withdraw in {{availableTimestamp}}",
"Balance available": "Balance available",
"Complete the withdrawal to release your funds": "Complete the withdrawal to release your funds",
"Complete withdrawal": "Complete withdrawal",
"Completed": "Completed",
"completeWithdrawals": "Complete these {{count}} withdrawals to release your funds",
"completeWithdrawals_one": "Complete these {{count}} withdrawal to release your funds",
"completeWithdrawals_other": "Complete these {{count}} withdrawals to release your funds",
"Complete withdrawal": "Complete withdrawal",
"Completed": "Completed",
"Connect Ethereum wallet to complete": "Connect Ethereum wallet to complete",
"Connect": "Connect",
"Connect Ethereum wallet to complete": "Connect Ethereum wallet to complete",
"Created": "Created",
"Delay time": "Delay time",
"Delayed (ready in {{readyIn}})": "Delayed (ready in {{readyIn}})",
@@ -40,9 +40,9 @@
"Verifying withdrawal approval": "Verifying withdrawal approval",
"View withdrawal details": "View withdrawal details",
"View withdrawals": "View withdrawals",
"Withdraw": "Withdraw",
"Withdraw {{amount}} {{symbol}}": "Withdraw {{amount}} {{symbol}}",
"Withdraw funds": "Withdraw funds",
"Withdraw": "Withdraw",
"Withdrawal ready": "Withdrawal ready",
"Withdrawals of {{threshold}} {{symbol}} or more will be delayed for {{delay}}.": "Withdrawals of {{threshold}} {{symbol}} or more will be delayed for {{delay}}.",
"Withdrawals ready": "Withdrawals ready",
@@ -93,13 +93,13 @@ describe('LiquidityTable', () => {
'Commitment ()',
'Obligation',
'Fee',
'Adjusted stake share',
'Adjusted stake',
'Share',
'Live supplied liquidity',
'Fees accrued this epoch',
'Live time on book',
'Live liquidity quality score (%)',
'Last time on the book',
'Live liquidity score (%)',
'Last time on book',
'Last fee penalty',
'Last bond penalty',
'Created',
+18 -8
View File
@@ -357,10 +357,12 @@ export const LiquidityTable = ({
},
},
{
headerName: t('Adjusted stake share'),
headerName: t('Adjusted stake'),
field: 'feeShare.virtualStake',
type: 'rightAligned',
headerTooltip: t('The virtual stake of the liquidity provider.'),
headerTooltip: t(
'The effective stake of the liquidity provider, adjusted for length of commitment and impact on equity like share.'
),
valueFormatter: assetDecimalsQuantumFormatter,
tooltipValueGetter: assetDecimalsFormatter,
@@ -427,10 +429,12 @@ export const LiquidityTable = ({
valueFormatter: percentageFormatter,
},
{
headerName: t('Live liquidity quality score (%)'),
headerName: t('Live liquidity score (%)'),
field: 'feeShare.averageScore',
type: 'rightAligned',
headerTooltip: t('The average score of the liquidity provider.'),
headerTooltip: t(
'The liquidity score of the provider, used to determine allocation of fees to the best performing LPs. Posting volume closer to the mid on both sides of the book will improve this score.'
),
valueFormatter: percentageFormatter,
},
],
@@ -440,24 +444,30 @@ export const LiquidityTable = ({
marryChildren: true,
children: [
{
headerName: t(`Last time on the book`),
headerName: t(`Last time on book`),
field: 'sla.lastEpochFractionOfTimeOnBook',
type: 'rightAligned',
headerTooltip: t('Last epoch fraction of time on the book.'),
headerTooltip: t(
'Fraction of time on the book at the end of the last epoch.'
),
valueFormatter: percentageFormatter,
},
{
headerName: t(`Last fee penalty`),
field: 'sla.lastEpochFeePenalty',
type: 'rightAligned',
headerTooltip: t('Last epoch fee penalty.'),
headerTooltip: t(
'Penalty applied on the fees a liquidity provider collected in the last epoch. This percentage increased if an LP did not meet the SLA, or if they met it but other LPs outscored them in the previous epoch.'
),
valueFormatter: percentageFormatter,
},
{
headerName: t(`Last bond penalty`),
field: 'sla.lastEpochBondPenalty',
type: 'rightAligned',
headerTooltip: t('Last epoch bond penalty.'),
headerTooltip: t(
`Penalty applied on a provider's bond penalty at the end of the last epoch. This percentage increased if an LP: had a shortfall and their bond needed to be used to cover it, did not meet the SLA, and/or reduced their commitment to the point that the market was below its target stake.`
),
valueFormatter: percentageFormatter,
},
],
+1
View File
@@ -10,6 +10,7 @@ export interface LoggerProps extends LoggerConf {
export const useLogger = ({ dsn, env, ...props }: LoggerProps) => {
const logger = useRef<LocalLogger | null>(null);
if (!logger.current) {
logger.current = localLoggerFactory(props);
if (dsn) {
+3 -2
View File
@@ -25,6 +25,7 @@ describe('LocalLogger', () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('logger should be properly instantiate', () => {
const logger = localLoggerFactory({});
expect(logger).toBeInstanceOf(LocalLogger);
@@ -50,7 +51,7 @@ describe('LocalLogger', () => {
logger[method]('test', 'test2');
// eslint-disable-next-line no-console
expect(console[consoleMethod]).toHaveBeenCalledWith(
`trading:${methodToLevel[i]}: `,
`trading:${methodToLevel[i]}:`,
'test',
'test2'
);
@@ -110,7 +111,7 @@ describe('LocalLogger', () => {
// eslint-disable-next-line no-console
expect(console.debug).toHaveBeenCalledWith(
'trading:debug: ',
'trading:debug:',
'test',
'test1'
);
+3 -1
View File
@@ -62,6 +62,7 @@ export class LocalLogger {
}
private tags: string[] = [];
private _application = 'trading';
constructor(conf: LoggerConf) {
if (conf.application) {
this._application = conf.application;
@@ -69,6 +70,7 @@ export class LocalLogger {
this.tags = [...(conf.tags || [])];
this._logLevel = conf.logLevel || this._logLevel;
}
public debug(...args: ConsoleArg[]) {
this._log('debug', 'debug', args);
}
@@ -101,7 +103,7 @@ export class LocalLogger {
) {
// eslint-disable-next-line no-console
console[logMethod].apply(console, [
`${this._application}:${level}: `,
`${this._application}:${level}:`,
...args,
]);
}
@@ -632,13 +632,9 @@ export const RiskFactorsInfoPanel = ({
const { short, long } = market.riskFactors;
const maxLeverageLong = new BigNumber(1).dividedBy(
new BigNumber(market.linearSlippageFactor).plus(long)
);
const maxLeverageLong = new BigNumber(1).dividedBy(long);
const maxLeverageShort = new BigNumber(1).dividedBy(
new BigNumber(market.linearSlippageFactor).plus(short)
);
const maxLeverageShort = new BigNumber(1).dividedBy(short);
const maxInitialLeverageLong = !market.tradableInstrument.marginCalculator
? undefined
+1 -1
View File
@@ -98,7 +98,7 @@ export const tradesProvider = makeDataProvider<
pagination: {
getPageInfo,
append,
first: MAX_TRADES,
last: MAX_TRADES,
},
fetchPolicy: 'no-cache',
getSubscriptionVariables: ({ marketId }) => ({ marketId }),
@@ -37,8 +37,6 @@ export function Dialog({
'w-full h-full'
);
const wrapperClasses = classNames(
// Positions the modal in the center of screen
'z-20 relative rounded top-[10vh]',
// Dimensions
'max-w-[90vw] p-4 md:p-8',
// Need to apply background and text colors again as content is rendered in a portal
@@ -72,27 +70,34 @@ export function Dialog({
onInteractOutside={onInteractOutside}
data-testid={dataTestId}
>
<div className={wrapperClasses}>
{onChange && (
<DialogPrimitives.Close
className="absolute p-2 top-0 right-0 md:top-2 md:right-2"
data-testid="dialog-close"
>
<VegaIcon name={VegaIconNames.CROSS} size={24} />
</DialogPrimitives.Close>
<div
className={classNames(
// Positions the modal in the center of screen
'z-20 relative rounded top-[5vw] pb-[5vw] lg:top-[10vh] lg:pb-[10vh]'
)}
<div className="flex gap-4 max-w-full">
{icon && <div className="fill-current">{icon}</div>}
<div data-testid="dialog-content" className="flex-1 max-w-full">
{title && (
<h1
className="text-xl uppercase mb-4 pr-2"
data-testid="dialog-title"
>
{title}
</h1>
)}
<div>{children}</div>
>
<div className={wrapperClasses}>
{onChange && (
<DialogPrimitives.Close
className="absolute p-2 top-0 right-0 md:top-2 md:right-2"
data-testid="dialog-close"
>
<VegaIcon name={VegaIconNames.CROSS} size={24} />
</DialogPrimitives.Close>
)}
<div className="flex gap-4 max-w-full">
{icon && <div className="fill-current">{icon}</div>}
<div data-testid="dialog-content" className="flex-1 max-w-full">
{title && (
<h1
className="text-xl uppercase mb-4 pr-2"
data-testid="dialog-title"
>
{title}
</h1>
)}
<div>{children}</div>
</div>
</div>
</div>
</div>
@@ -57,12 +57,20 @@ interface RadioProps {
value: string;
label: string;
disabled?: boolean;
className?: string;
}
export const TradingRadio = ({ id, value, label, disabled }: RadioProps) => {
export const TradingRadio = ({
id,
value,
label,
disabled,
className,
}: RadioProps) => {
const wrapperClasses = classNames(
'flex items-center gap-1.5 text-xs',
labelClasses
labelClasses,
className
);
const itemClasses = classNames(
'flex justify-center items-center',
@@ -205,9 +205,13 @@ const MultipleReadyToWithdrawToastContent = ({
<>
<ToastHeading>{t('Withdrawals ready')}</ToastHeading>
<p>
{t('Complete these {{count}} withdrawals to release your funds', {
count,
})}
{t(
'completeWithdrawals',
'Complete these {{count}} withdrawals to release your funds',
{
count,
}
)}
</p>
<p className="mt-2">
<Button