feat(trading): referrals (Mk1) (#4816)
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
This commit is contained in:
Art
GitHub
parent
b818e9b2a1
commit
44434a7d39
@ -24,6 +24,7 @@ NX_STOP_ORDERS=true
|
||||
NX_ICEBERG_ORDERS=true
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=true
|
||||
NX_REFERRALS=true
|
||||
|
||||
NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
|
||||
NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
|
||||
|
||||
@ -24,6 +24,7 @@ NX_STOP_ORDERS=false
|
||||
# NX_ICEBERG_ORDERS
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=false
|
||||
NX_REFERRALS=false
|
||||
|
||||
NX_TENDERMINT_URL=http://localhost:26617
|
||||
NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
|
||||
|
||||
@ -22,6 +22,7 @@ NX_STOP_ORDERS=true
|
||||
# NX_ICEBERG_ORDERS
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=true
|
||||
NX_REFERRALS=true
|
||||
|
||||
NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
|
||||
NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
|
||||
|
||||
@ -27,6 +27,7 @@ NX_STOP_ORDERS=true
|
||||
NX_ICEBERG_ORDERS=true
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=true
|
||||
NX_REFERRALS=false
|
||||
|
||||
NX_TENDERMINT_URL=https://be.vega.community
|
||||
NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
|
||||
|
||||
@ -24,6 +24,7 @@ NX_STOP_ORDERS=true
|
||||
NX_ICEBERG_ORDERS=true
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=false
|
||||
NX_REFERRALS=false
|
||||
|
||||
NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
|
||||
NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
|
||||
|
||||
@ -24,3 +24,4 @@ NX_STOP_ORDERS=true
|
||||
NX_ICEBERG_ORDERS=true
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=true
|
||||
NX_REFERRALS=true
|
||||
@ -24,6 +24,7 @@ NX_STOP_ORDERS=true
|
||||
NX_ICEBERG_ORDERS=true
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=true
|
||||
NX_REFERRALS=true
|
||||
|
||||
NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
|
||||
NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
|
||||
|
||||
@ -25,6 +25,7 @@ NX_STOP_ORDERS=true
|
||||
NX_ICEBERG_ORDERS=true
|
||||
# NX_PRODUCT_PERPETUALS
|
||||
NX_METAMASK_SNAPS=false
|
||||
NX_REFERRALS=false
|
||||
|
||||
NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
|
||||
NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket
|
||||
|
||||
@ -28,7 +28,6 @@ export const useColumnDefs = () => {
|
||||
{
|
||||
headerName: t('Market'),
|
||||
field: 'tradableInstrument.instrument.code',
|
||||
flex: 2,
|
||||
cellRenderer: ({
|
||||
value,
|
||||
data,
|
||||
@ -50,7 +49,6 @@ export const useColumnDefs = () => {
|
||||
{
|
||||
headerName: t('Description'),
|
||||
field: 'tradableInstrument.instrument.name',
|
||||
flex: 2,
|
||||
},
|
||||
{
|
||||
headerName: t('Trading mode'),
|
||||
|
||||
102
apps/trading/client-pages/referrals/apply-code-form.tsx
Normal file
102
apps/trading/client-pages/referrals/apply-code-form.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
import {
|
||||
Input,
|
||||
InputError,
|
||||
VegaIcon,
|
||||
VegaIconNames,
|
||||
} from '@vegaprotocol/ui-toolkit';
|
||||
import type { FieldValues } from 'react-hook-form';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import classNames from 'classnames';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Button } from './buttons';
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
|
||||
export const ApplyCodeForm = () => {
|
||||
const [finalized, setFinalized] = useState<boolean>(false);
|
||||
const { isReadOnly, pubKey, sendTx } = useVegaWallet();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
setError,
|
||||
} = useForm();
|
||||
const [params] = useSearchParams();
|
||||
|
||||
useEffect(() => {
|
||||
const code = params.get('code');
|
||||
if (code) setValue('code', code);
|
||||
}, [params, setValue]);
|
||||
|
||||
const onSubmit = ({ code }: FieldValues) => {
|
||||
if (isReadOnly || !pubKey || !code || code.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
sendTx(pubKey, {
|
||||
applyReferralCode: {
|
||||
id: code as string,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
setFinalized(true);
|
||||
})
|
||||
.catch((err) => {
|
||||
setError('code', {
|
||||
type: 'required',
|
||||
message: 'Your code has been rejected',
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
if (finalized) {
|
||||
return (
|
||||
<div className="w-1/2 mx-auto">
|
||||
<h3 className="mb-5 text-xl text-center uppercase calt flex flex-row gap-2 justify-center items-center">
|
||||
<span className="text-vega-green-500">
|
||||
<VegaIcon name={VegaIconNames.TICK} size={20} />
|
||||
</span>{' '}
|
||||
<span className="pt-1">Code applied</span>
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-1/2 mx-auto">
|
||||
<h3 className="mb-5 text-xl text-center uppercase calt">
|
||||
Apply a referral code
|
||||
</h3>
|
||||
<p className="mb-6 text-center">Enter a referral code</p>
|
||||
<form
|
||||
className={classNames('w-full flex flex-col gap-3', {
|
||||
'animate-shake': Boolean(errors.code),
|
||||
})}
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
>
|
||||
<label className="flex-grow">
|
||||
<span className="block mb-1 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
Your referral code
|
||||
</span>
|
||||
<Input
|
||||
hasError={Boolean(errors.code)}
|
||||
{...register('code', {
|
||||
required: 'You have to provide a code to apply it.',
|
||||
})}
|
||||
/>
|
||||
</label>
|
||||
<Button
|
||||
disabled={isReadOnly || !pubKey}
|
||||
className="w-full"
|
||||
type="submit"
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</form>
|
||||
{errors.code && (
|
||||
<InputError>{errors.code.message?.toString()}</InputError>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
83
apps/trading/client-pages/referrals/buttons.tsx
Normal file
83
apps/trading/client-pages/referrals/buttons.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
|
||||
import classNames from 'classnames';
|
||||
import type { ComponentProps, ButtonHTMLAttributes } from 'react';
|
||||
import { forwardRef } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
type RainbowButtonProps = {
|
||||
variant?: 'full' | 'border';
|
||||
};
|
||||
|
||||
export const RainbowButton = ({
|
||||
variant = 'full',
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: RainbowButtonProps & ButtonHTMLAttributes<HTMLButtonElement>) => (
|
||||
<button
|
||||
className={classNames(
|
||||
'bg-rainbow hover:bg-none hover:bg-rainbow enabled:hover:bg-vega-pink-500 rounded-lg overflow-hidden disabled:opacity-40',
|
||||
{
|
||||
'px-5 py-3 text-white': variant === 'full',
|
||||
'p-[0.125rem]': variant === 'border',
|
||||
},
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={classNames({
|
||||
'bg-white dark:bg-vega-cdark-900 text-black dark:text-white px-5 py-3 rounded-[0.35rem] overflow-hidden':
|
||||
variant === 'border',
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
|
||||
const RAINBOW_TAB_STYLE = classNames(
|
||||
'inline-block',
|
||||
'bg-vega-clight-500 dark:bg-vega-cdark-500 hover:bg-vega-clight-400 dark:hover:bg-vega-cdark-400',
|
||||
'data-[state="active"]:text-white data-[state="active"]:bg-rainbow data-[state="active"]:hover:bg-none data-[state="active"]:hover:bg-vega-pink-500 dark:data-[state="active"]:hover:bg-vega-pink-500',
|
||||
'[&.active]:text-white [&.active]:bg-rainbow [&.active]:hover:bg-none [&.active]:hover:bg-vega-pink-500 dark:[&.active]:hover:bg-vega-pink-500',
|
||||
'px-5 py-3',
|
||||
'first:rounded-tl-lg last:rounded-tr-lg'
|
||||
);
|
||||
|
||||
export const RainbowTabButton = forwardRef<
|
||||
HTMLButtonElement,
|
||||
ButtonHTMLAttributes<HTMLButtonElement>
|
||||
>(({ children, ...props }, ref) => (
|
||||
<button ref={ref} className={RAINBOW_TAB_STYLE} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
));
|
||||
RainbowTabButton.displayName = 'RainbowTabButton';
|
||||
|
||||
export const RainbowTabLink = ({
|
||||
to,
|
||||
children,
|
||||
...props
|
||||
}: ComponentProps<typeof NavLink>) => (
|
||||
<NavLink to={to} className={RAINBOW_TAB_STYLE} {...props}>
|
||||
{children}
|
||||
</NavLink>
|
||||
);
|
||||
|
||||
export const Button = forwardRef<
|
||||
HTMLButtonElement,
|
||||
ComponentProps<typeof TradingButton>
|
||||
>(({ children, intent, type, ...props }, ref) => {
|
||||
return (
|
||||
<TradingButton
|
||||
ref={ref}
|
||||
intent={intent || type === 'submit' ? Intent.Primary : Intent.None}
|
||||
type={type}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</TradingButton>
|
||||
);
|
||||
});
|
||||
Button.displayName = 'TradingButton';
|
||||
6
apps/trading/client-pages/referrals/constants.ts
Normal file
6
apps/trading/client-pages/referrals/constants.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export const BORDER_COLOR = 'border-vega-clight-500 dark:border-vega-cdark-500';
|
||||
export const GRADIENT =
|
||||
'bg-gradient-to-b from-vega-clight-800 dark:from-vega-cdark-800 to-transparent';
|
||||
|
||||
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';
|
||||
225
apps/trading/client-pages/referrals/create-code-form.tsx
Normal file
225
apps/trading/client-pages/referrals/create-code-form.tsx
Normal file
@ -0,0 +1,225 @@
|
||||
import {
|
||||
useVegaWallet,
|
||||
useVegaWalletDialogStore,
|
||||
determineId,
|
||||
} from '@vegaprotocol/wallet';
|
||||
import { RainbowButton } from './buttons';
|
||||
import { useState } from 'react';
|
||||
import {
|
||||
CopyWithTooltip,
|
||||
Dialog,
|
||||
ExternalLink,
|
||||
InputError,
|
||||
Intent,
|
||||
TradingAnchorButton,
|
||||
TradingButton,
|
||||
VegaIcon,
|
||||
VegaIconNames,
|
||||
} from '@vegaprotocol/ui-toolkit';
|
||||
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
|
||||
import { DApp, TokenStaticLinks, useLinks } from '@vegaprotocol/environment';
|
||||
import { useStakeAvailable } from './hooks/use-stake-available';
|
||||
|
||||
export const CreateCodeContainer = () => {
|
||||
const { stakeAvailable, requiredStake } = useStakeAvailable();
|
||||
if (stakeAvailable == null || requiredStake == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<CreateCodeForm
|
||||
currentStakeAvailable={stakeAvailable}
|
||||
requiredStake={requiredStake}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const CreateCodeForm = ({
|
||||
currentStakeAvailable,
|
||||
requiredStake,
|
||||
}: {
|
||||
currentStakeAvailable: bigint;
|
||||
requiredStake: bigint;
|
||||
}) => {
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const openWalletDialog = useVegaWalletDialogStore(
|
||||
(store) => store.openVegaWalletDialog
|
||||
);
|
||||
const { pubKey } = useVegaWallet();
|
||||
|
||||
return (
|
||||
<div className="w-1/2 mx-auto">
|
||||
<h3 className="mb-5 text-xl text-center uppercase calt">
|
||||
Create a referral code
|
||||
</h3>
|
||||
<p className="mb-6 text-center">
|
||||
Generate a referral code to share with your friends and start earning
|
||||
commission.
|
||||
</p>
|
||||
<div className="mb-5">
|
||||
<div className="text-center">
|
||||
<RainbowButton
|
||||
variant="border"
|
||||
onClick={() => {
|
||||
if (pubKey) {
|
||||
setDialogOpen(true);
|
||||
} else {
|
||||
openWalletDialog();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{pubKey ? 'Create a referral code' : 'Connect wallet'}
|
||||
</RainbowButton>
|
||||
</div>
|
||||
</div>
|
||||
<Dialog
|
||||
title="Create a referral code"
|
||||
open={dialogOpen}
|
||||
onChange={() => setDialogOpen(false)}
|
||||
size="small"
|
||||
>
|
||||
<CreateCodeDialog
|
||||
currentStakeAvailable={currentStakeAvailable}
|
||||
setDialogOpen={setDialogOpen}
|
||||
requiredStake={requiredStake}
|
||||
/>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CreateCodeDialog = ({
|
||||
setDialogOpen,
|
||||
currentStakeAvailable,
|
||||
requiredStake,
|
||||
}: {
|
||||
setDialogOpen: (open: boolean) => void;
|
||||
currentStakeAvailable: bigint;
|
||||
requiredStake: bigint;
|
||||
}) => {
|
||||
const createLink = useLinks(DApp.Governance);
|
||||
const { isReadOnly, pubKey, sendTx } = useVegaWallet();
|
||||
const [err, setErr] = useState<string | null>(null);
|
||||
const [code, setCode] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<
|
||||
'idle' | 'loading' | 'success' | 'error'
|
||||
>('idle');
|
||||
|
||||
const onSubmit = () => {
|
||||
if (isReadOnly || !pubKey) {
|
||||
setErr('Not connected');
|
||||
} else {
|
||||
setErr(null);
|
||||
setStatus('loading');
|
||||
setCode(null);
|
||||
sendTx(pubKey, {
|
||||
createReferralSet: {
|
||||
isTeam: false,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (!res) {
|
||||
setErr(`Invalid response: ${JSON.stringify(res)}`);
|
||||
return;
|
||||
}
|
||||
const code = determineId(res.signature);
|
||||
setCode(code);
|
||||
setStatus('success');
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err.message.includes('user rejected')) {
|
||||
setStatus('idle');
|
||||
return;
|
||||
}
|
||||
setStatus('error');
|
||||
setErr(err.message);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const getButtonProps = () => {
|
||||
if (status === 'idle' || status === 'error') {
|
||||
return {
|
||||
children: 'Generate code',
|
||||
onClick: () => onSubmit(),
|
||||
};
|
||||
}
|
||||
|
||||
if (status === 'loading') {
|
||||
return {
|
||||
children: 'Confirm in wallet...',
|
||||
disabled: true,
|
||||
};
|
||||
}
|
||||
|
||||
if (status === 'success') {
|
||||
return {
|
||||
children: 'Close',
|
||||
intent: Intent.Success,
|
||||
onClick: () => setDialogOpen(false),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// TODO: Add when network parameters are updated
|
||||
if (
|
||||
currentStakeAvailable === BigInt(0) ||
|
||||
currentStakeAvailable < requiredStake
|
||||
) {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<p>
|
||||
You need at least{' '}
|
||||
{addDecimalsFormatNumber(requiredStake.toString(), 18)} VEGA staked to
|
||||
generate a referral code and participate in the referral program.
|
||||
</p>
|
||||
<TradingAnchorButton
|
||||
href={createLink(TokenStaticLinks.ASSOCIATE)}
|
||||
intent={Intent.Primary}
|
||||
target="_blank"
|
||||
>
|
||||
Stake some $VEGA now
|
||||
</TradingAnchorButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{(status === 'idle' || status === 'loading' || status === 'error') && (
|
||||
<p>
|
||||
Generate a referral code to share with your friends and start earning
|
||||
commission.
|
||||
</p>
|
||||
)}
|
||||
{status === 'success' && code && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex-1 min-w-0 p-2 text-sm rounded bg-vega-clight-700 dark:bg-vega-cdark-700">
|
||||
<p className="overflow-hidden whitespace-nowrap text-ellipsis">
|
||||
{code}
|
||||
</p>
|
||||
</div>
|
||||
<CopyWithTooltip text={code}>
|
||||
<TradingButton
|
||||
className="text-sm no-underline"
|
||||
icon={<VegaIcon name={VegaIconNames.COPY} />}
|
||||
>
|
||||
<span>Copy</span>
|
||||
</TradingButton>
|
||||
</CopyWithTooltip>
|
||||
</div>
|
||||
)}
|
||||
<TradingButton
|
||||
fill={true}
|
||||
intent={Intent.Primary}
|
||||
{...getButtonProps()}
|
||||
/>
|
||||
{err && <InputError>{err}</InputError>}
|
||||
{/* TODO: Add links */}
|
||||
<div className="flex justify-center pt-5 mt-2 text-sm border-t gap-4 text-default border-default">
|
||||
<ExternalLink>About the referral program</ExternalLink>
|
||||
<ExternalLink>Disclaimer</ExternalLink>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
77
apps/trading/client-pages/referrals/error-boundary.tsx
Normal file
77
apps/trading/client-pages/referrals/error-boundary.tsx
Normal file
@ -0,0 +1,77 @@
|
||||
import { isRouteErrorResponse, useNavigate, useRouteError } from 'react-router';
|
||||
import { RainbowButton } from './buttons';
|
||||
import { AnimatedDudeWithWire } from './graphics/dude';
|
||||
import { LayoutWithSky } from './layout';
|
||||
import { Routes } from '../../lib/links';
|
||||
|
||||
export const ErrorBoundary = () => {
|
||||
const error = useRouteError();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const title = isRouteErrorResponse(error)
|
||||
? `${error.status} ${error.statusText}`
|
||||
: 'Something went wrong';
|
||||
|
||||
const code = isRouteErrorResponse(error) ? error.status : 0;
|
||||
|
||||
const messages: Record<number, string> = {
|
||||
0: 'An unknown error occurred.',
|
||||
404: "The page you're looking for doesn't exists.",
|
||||
};
|
||||
|
||||
return (
|
||||
<LayoutWithSky className="pt-32">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
|
||||
>
|
||||
<AnimatedDudeWithWire className="animate-spin" />
|
||||
</div>
|
||||
<h1 className="text-6xl font-alpha calt mb-10">{title}</h1>
|
||||
|
||||
{Object.keys(messages).includes(code.toString()) ? (
|
||||
<p className="text-lg mb-10">{messages[code]}</p>
|
||||
) : null}
|
||||
|
||||
<p className="text-lg mb-10">
|
||||
<RainbowButton
|
||||
onClick={() => navigate('..')}
|
||||
variant="border"
|
||||
className="text-xs"
|
||||
>
|
||||
Go back and try again
|
||||
</RainbowButton>
|
||||
</p>
|
||||
</LayoutWithSky>
|
||||
);
|
||||
};
|
||||
|
||||
export const NotFound = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="pt-32">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
|
||||
>
|
||||
<AnimatedDudeWithWire className="animate-spin" />
|
||||
</div>
|
||||
<h1 className="text-6xl font-alpha calt mb-10">{'Not found'}</h1>
|
||||
|
||||
<p className="text-lg mb-10">
|
||||
{"The page you're looking for doesn't exists."}
|
||||
</p>
|
||||
|
||||
<p className="text-lg mb-10">
|
||||
<RainbowButton
|
||||
onClick={() => navigate(Routes.REFERRALS)}
|
||||
variant="border"
|
||||
className="text-xs"
|
||||
>
|
||||
Go back and try again
|
||||
</RainbowButton>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
70
apps/trading/client-pages/referrals/graphics/dude.tsx
Normal file
70
apps/trading/client-pages/referrals/graphics/dude.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import classNames from 'classnames';
|
||||
import type { HTMLAttributes } from 'react';
|
||||
|
||||
export const Dude = ({ className }: HTMLAttributes<SVGElement>) => {
|
||||
return (
|
||||
<svg
|
||||
width="41"
|
||||
height="47"
|
||||
viewBox="0 0 41 47"
|
||||
fill="none"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
d="M21.1895 0.298767L5.08827 27.4101L8.96133 29.7103L4.36099 37.4564L8.23404 39.7566L12.8344 32.0105L16.7074 34.3107L12.1071 42.0568L15.9801 44.3569L20.5805 36.6108L24.4535 38.911L40.5547 11.7996L21.1895 0.298767Z"
|
||||
className="fill-black dark:fill-white"
|
||||
/>
|
||||
<path
|
||||
d="M35.9346 15.1683L20.4424 5.96765L14.3086 16.2958L29.8008 25.4965L35.9346 15.1683Z"
|
||||
className="fill-white dark:fill-black"
|
||||
/>
|
||||
<path
|
||||
d="M25.646 17.7895L23.064 16.2561L21.5305 18.8381L24.1126 20.3716L25.646 17.7895Z"
|
||||
className="fill-black dark:fill-white"
|
||||
/>
|
||||
<path
|
||||
d="M29.7612 16.7412L27.1792 15.2077L25.6458 17.7898L28.2278 19.3232L29.7612 16.7412Z"
|
||||
className="fill-black dark:fill-white"
|
||||
/>
|
||||
<path
|
||||
d="M33.877 15.6925L31.2949 14.159L29.7615 16.7411L32.3435 18.2745L33.877 15.6925Z"
|
||||
className="fill-black dark:fill-white"
|
||||
/>
|
||||
<path
|
||||
d="M29.0342 26.7874L26.4521 25.2539L24.9187 27.836L27.5007 29.3694L29.0342 26.7874Z"
|
||||
fill="#FF077F"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const Wire = ({ className }: HTMLAttributes<SVGElement>) => {
|
||||
return (
|
||||
<svg
|
||||
width="157"
|
||||
height="88"
|
||||
viewBox="0 0 157 88"
|
||||
fill="none"
|
||||
className={className}
|
||||
>
|
||||
<path
|
||||
d="M109.398 6.12235C127.37 -3.81898 146.791 1.45045 153.465 14.307C160.138 27.1636 154.195 43.9948 140.438 52.1164C126.68 60.238 105.767 54.9998 84.9212 43.464C64.0752 31.9281 32.2412 6.42016 18.8175 24.185C6.90871 40.719 41.9332 68.4495 29.2664 82.7049C23.187 88.4974 11.1379 88.2645 0.968295 80.3398"
|
||||
className="stroke-black dark:stroke-white"
|
||||
strokeWidth="1.5"
|
||||
strokeMiterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const AnimatedDudeWithWire = ({ className }: { className?: string }) => (
|
||||
<div className="relative">
|
||||
<Wire className="absolute top-[25px]" />
|
||||
<Dude
|
||||
className={classNames(
|
||||
'absolute left-[96px] animate-[wave_20s_ease-in-out_infinite]',
|
||||
className
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@ -0,0 +1,133 @@
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
import { getNumberFormat } from '@vegaprotocol/utils';
|
||||
import { addDays } from 'date-fns';
|
||||
import sortBy from 'lodash/sortBy';
|
||||
import omit from 'lodash/omit';
|
||||
|
||||
// TODO: Generate query
|
||||
// eslint-disable-next-line
|
||||
const REFERRAL_PROGRAM_QUERY = gql`
|
||||
query ReferralProgram {
|
||||
currentReferralProgram {
|
||||
id
|
||||
version
|
||||
endOfProgramTimestamp
|
||||
windowLength
|
||||
endedAt
|
||||
benefitTiers {
|
||||
minimumEpochs
|
||||
minimumRunningNotionalTakerVolume
|
||||
referralDiscountFactor
|
||||
referralRewardFactor
|
||||
}
|
||||
stakingTiers {
|
||||
minimumStakedTokens
|
||||
referralRewardMultiplier
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const STAKING_TIERS_MAPPING: Record<number, string> = {
|
||||
1: 'Tradestarter',
|
||||
2: 'Mid level degen',
|
||||
3: 'Reward hoarder',
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const MOCK = {
|
||||
data: {
|
||||
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',
|
||||
referralRewardFactor: '0.05',
|
||||
},
|
||||
{
|
||||
minimumEpochs: 5,
|
||||
minimumRunningNotionalTakerVolume: '10000',
|
||||
referralDiscountFactor: '0.001',
|
||||
referralRewardFactor: '0.001',
|
||||
},
|
||||
],
|
||||
stakingTiers: [
|
||||
{
|
||||
minimumStakedTokens: '10000',
|
||||
referralRewardMultiplier: '1',
|
||||
},
|
||||
{
|
||||
minimumStakedTokens: '20000',
|
||||
referralRewardMultiplier: '2',
|
||||
},
|
||||
{
|
||||
minimumStakedTokens: '30000',
|
||||
referralRewardMultiplier: '3',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
loading: false,
|
||||
error: undefined,
|
||||
};
|
||||
|
||||
export const useReferralProgram = () => {
|
||||
const { data, loading, error } = useQuery(REFERRAL_PROGRAM_QUERY, {
|
||||
fetchPolicy: 'cache-and-network',
|
||||
});
|
||||
|
||||
if (!data) {
|
||||
return {
|
||||
benefitTiers: [],
|
||||
stakingTiers: [],
|
||||
details: undefined,
|
||||
loading,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
const benefitTiers = sortBy(data.currentReferralProgram.benefitTiers, (t) =>
|
||||
Number(t.referralRewardFactor)
|
||||
)
|
||||
.reverse()
|
||||
.map((t, i) => {
|
||||
return {
|
||||
tier: i + 1,
|
||||
commission: Number(t.referralRewardFactor) * 100 + '%',
|
||||
discount: Number(t.referralDiscountFactor) * 100 + '%',
|
||||
volume: getNumberFormat(0).format(
|
||||
Number(t.minimumRunningNotionalTakerVolume)
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
const stakingTiers = sortBy(
|
||||
data.currentReferralProgram.stakingTiers,
|
||||
(t) => t.referralRewardMultiplier
|
||||
).map((t, i) => {
|
||||
return {
|
||||
tier: i + 1,
|
||||
label: STAKING_TIERS_MAPPING[i + 1],
|
||||
...t,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
benefitTiers,
|
||||
stakingTiers,
|
||||
details: omit(data.currentReferralProgram, 'benefitTiers', 'stakingTiers'),
|
||||
loading,
|
||||
error,
|
||||
};
|
||||
};
|
||||
114
apps/trading/client-pages/referrals/hooks/use-referral.ts
Normal file
114
apps/trading/client-pages/referrals/hooks/use-referral.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
import { removePaginationWrapper } from '@vegaprotocol/utils';
|
||||
|
||||
const REFERRER_QUERY = gql`
|
||||
query ReferralSets($partyId: ID!) {
|
||||
referralSets(referrer: $partyId) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
referrer
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const REFEREE_QUERY = gql`
|
||||
query ReferralSets($partyId: ID!) {
|
||||
referralSets(referee: $partyId) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
referrer
|
||||
createdAt
|
||||
updatedAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const REFEREES_QUERY = gql`
|
||||
query ReferralSets($code: ID!) {
|
||||
referralSetReferees(id: $code) {
|
||||
edges {
|
||||
node {
|
||||
referralSetId
|
||||
refereeId
|
||||
joinedAt
|
||||
atEpoch
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// TODO: generate types after perps work is merged
|
||||
export type ReferralData = {
|
||||
code: string;
|
||||
referees: Array<{
|
||||
refereeId: string;
|
||||
joinedAt: string;
|
||||
atEpoch: number;
|
||||
}>;
|
||||
};
|
||||
|
||||
export const useReferral = (
|
||||
pubKey: string | null,
|
||||
role: 'referrer' | 'referee'
|
||||
) => {
|
||||
const query = {
|
||||
referrer: REFERRER_QUERY,
|
||||
referee: REFEREE_QUERY,
|
||||
};
|
||||
|
||||
const {
|
||||
data: referralData,
|
||||
loading: referralLoading,
|
||||
error: referralError,
|
||||
} = useQuery(query[role], {
|
||||
variables: {
|
||||
partyId: pubKey,
|
||||
},
|
||||
skip: !pubKey,
|
||||
fetchPolicy: 'cache-and-network',
|
||||
});
|
||||
|
||||
// A user can only have 1 active referral program at a time
|
||||
const referral = referralData?.referralSets.edges.length
|
||||
? referralData.referralSets.edges[0].node
|
||||
: undefined;
|
||||
|
||||
const {
|
||||
data: refereesData,
|
||||
loading: refereesLoading,
|
||||
error: refereesError,
|
||||
} = useQuery(REFEREES_QUERY, {
|
||||
variables: {
|
||||
code: referral?.id,
|
||||
},
|
||||
skip: !referral?.id,
|
||||
fetchPolicy: 'cache-and-network',
|
||||
});
|
||||
|
||||
const referees = removePaginationWrapper(
|
||||
refereesData?.referralSetReferees.edges
|
||||
);
|
||||
|
||||
const data =
|
||||
referral && refereesData
|
||||
? {
|
||||
code: referral.id,
|
||||
referees,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
return {
|
||||
data: data as ReferralData | undefined,
|
||||
loading: referralLoading || refereesLoading,
|
||||
error: referralError || refereesError,
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,34 @@
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
|
||||
const STAKE_QUERY = gql`
|
||||
query CreateCode($partyId: ID!) {
|
||||
party(id: $partyId) {
|
||||
stakingSummary {
|
||||
currentStakeAvailable
|
||||
}
|
||||
}
|
||||
networkParameter(key: "referralProgram.minStakedVegaTokens") {
|
||||
value
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const useStakeAvailable = () => {
|
||||
const { pubKey } = useVegaWallet();
|
||||
const { data } = useQuery(STAKE_QUERY, {
|
||||
variables: { partyId: pubKey || '' },
|
||||
skip: !pubKey,
|
||||
// TODO: remove when network params available
|
||||
errorPolicy: 'ignore',
|
||||
});
|
||||
|
||||
return {
|
||||
stakeAvailable: data
|
||||
? BigInt(data.party?.stakingSummary.currentStakeAvailable || '0')
|
||||
: undefined,
|
||||
requiredStake: data
|
||||
? BigInt(data.networkParameter?.value || '0')
|
||||
: undefined,
|
||||
};
|
||||
};
|
||||
52
apps/trading/client-pages/referrals/how-it-works-table.tsx
Normal file
52
apps/trading/client-pages/referrals/how-it-works-table.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import { Table } from './table';
|
||||
|
||||
export const HowItWorksTable = () => (
|
||||
<Table
|
||||
className="bg-none bg-vega-clight-800 dark:bg-vega-cdark-800"
|
||||
noHeader
|
||||
noCollapse
|
||||
columns={[{ name: 'number', className: 'pr-0' }, { name: 'step' }]}
|
||||
data={[
|
||||
{
|
||||
number: (
|
||||
<span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
1
|
||||
</span>
|
||||
),
|
||||
step: 'Referrers generate a code assigned to their key via an on chain transaction',
|
||||
},
|
||||
{
|
||||
number: (
|
||||
<span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
2
|
||||
</span>
|
||||
),
|
||||
step: 'Anyone with the referral link can apply it to their key(s) of choice via an on chain transaction',
|
||||
},
|
||||
{
|
||||
number: (
|
||||
<span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
3
|
||||
</span>
|
||||
),
|
||||
step: 'Discounts are applied automatically during trading based on the key(s) used',
|
||||
},
|
||||
{
|
||||
number: (
|
||||
<span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
4
|
||||
</span>
|
||||
),
|
||||
step: 'Referrers earn commission based on a percentage of the taker fees their referees pay',
|
||||
},
|
||||
{
|
||||
number: (
|
||||
<span className="text-2xl calt text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
5
|
||||
</span>
|
||||
),
|
||||
step: 'The commission is taken from the infrastructure fee, maker fee, and liquidity provider fee, not from the referee',
|
||||
},
|
||||
]}
|
||||
></Table>
|
||||
);
|
||||
31
apps/trading/client-pages/referrals/landing-banner.tsx
Normal file
31
apps/trading/client-pages/referrals/landing-banner.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import classNames from 'classnames';
|
||||
import { AnimatedDudeWithWire } from './graphics/dude';
|
||||
|
||||
export const LandingBanner = () => {
|
||||
return (
|
||||
<div className={classNames('relative mb-20')}>
|
||||
<div className="">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
|
||||
>
|
||||
<AnimatedDudeWithWire />
|
||||
</div>
|
||||
<div className="pt-32 sm:w-[50%]">
|
||||
<h1 className="text-6xl font-alpha calt mb-10">
|
||||
Earn commission & stake rewards
|
||||
</h1>
|
||||
<p className="text-lg mb-10">
|
||||
Invite friends and earn commission in the form of Vega rewards from
|
||||
the trading fees they pay. Stake those rewards to earn multipliers
|
||||
on future rewards.
|
||||
</p>
|
||||
<p className="text-lg">
|
||||
Any friends that join using the code will receive discounts off
|
||||
trading fees.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
35
apps/trading/client-pages/referrals/layout.tsx
Normal file
35
apps/trading/client-pages/referrals/layout.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import classNames from 'classnames';
|
||||
import type { HTMLAttributes } from 'react';
|
||||
import { SKY_BACKGROUND } from './constants';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
|
||||
export const Layout = ({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: HTMLAttributes<HTMLDivElement>) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'max-w-[1440px]',
|
||||
'mx-auto px-16 md:px-32 pb-32',
|
||||
'relative z-0',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children || <Outlet />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const LayoutWithSky = ({
|
||||
className,
|
||||
...props
|
||||
}: HTMLAttributes<HTMLDivElement>) => {
|
||||
return (
|
||||
<div className={classNames('h-full overflow-auto', SKY_BACKGROUND)}>
|
||||
<Layout className={className} {...props} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
113
apps/trading/client-pages/referrals/referral-statistics.tsx
Normal file
113
apps/trading/client-pages/referrals/referral-statistics.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
import { Tile } from './tile';
|
||||
import {
|
||||
CopyWithTooltip,
|
||||
Input,
|
||||
VegaIcon,
|
||||
VegaIconNames,
|
||||
} from '@vegaprotocol/ui-toolkit';
|
||||
import { Button, RainbowButton } from './buttons';
|
||||
|
||||
import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
|
||||
import type { ReferralData } from './hooks/use-referral';
|
||||
import { useReferral } from './hooks/use-referral';
|
||||
import { CreateCodeContainer } from './create-code-form';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const CodeTile = ({
|
||||
code,
|
||||
as,
|
||||
}: {
|
||||
code: string;
|
||||
as: 'referrer' | 'referee';
|
||||
}) => {
|
||||
return (
|
||||
<Tile variant="rainbow">
|
||||
<h3 className="mb-1 text-lg calt">Your referral code</h3>
|
||||
{as === 'referrer' && (
|
||||
<p className="mb-3 text-sm text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
Share this code with friends
|
||||
</p>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<Input size={1} readOnly value={code} />
|
||||
<CopyWithTooltip text={code}>
|
||||
<Button
|
||||
className="text-sm no-underline"
|
||||
icon={<VegaIcon name={VegaIconNames.COPY} />}
|
||||
>
|
||||
<span>Copy</span>
|
||||
</Button>
|
||||
</CopyWithTooltip>
|
||||
</div>
|
||||
</Tile>
|
||||
);
|
||||
};
|
||||
|
||||
export const ReferralStatistics = () => {
|
||||
const openWalletDialog = useVegaWalletDialogStore(
|
||||
(store) => store.openVegaWalletDialog
|
||||
);
|
||||
const { pubKey } = useVegaWallet();
|
||||
|
||||
const { data: referee } = useReferral(pubKey, 'referee');
|
||||
const { data: referrer } = useReferral(pubKey, 'referrer');
|
||||
|
||||
if (!pubKey) {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<RainbowButton variant="border" onClick={() => openWalletDialog()}>
|
||||
Connect wallet
|
||||
</RainbowButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (referee?.code) {
|
||||
return <Statistics data={referee} as="referee" />;
|
||||
}
|
||||
|
||||
if (referrer?.code) {
|
||||
return <Statistics data={referrer} as="referrer" />;
|
||||
}
|
||||
|
||||
return <CreateCodeContainer />;
|
||||
};
|
||||
|
||||
const Statistics = ({
|
||||
data,
|
||||
as,
|
||||
}: {
|
||||
data: ReferralData;
|
||||
as: 'referrer' | 'referee';
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames('grid grid-cols-1 grid-rows-1 gap-5 mx-auto', {
|
||||
'md:w-1/2': as === 'referee',
|
||||
'md:w-2/3': as === 'referrer',
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classNames('grid grid-rows-1 gap-5', {
|
||||
'grid-cols-2': as === 'referrer',
|
||||
'grid-cols-1': as === 'referee',
|
||||
})}
|
||||
>
|
||||
{as === 'referrer' && data?.referees && (
|
||||
<Tile className="py-3 h-full">
|
||||
<div className="absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]">
|
||||
<h3 className="mb-1 text-6xl text-center">
|
||||
{data.referees.length}
|
||||
</h3>
|
||||
<p className="text-sm text-center text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
{data.referees.length === 1
|
||||
? 'Trader referred'
|
||||
: 'Total traders referred'}
|
||||
</p>
|
||||
</div>
|
||||
</Tile>
|
||||
)}
|
||||
<CodeTile code={data?.code} as={as} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
50
apps/trading/client-pages/referrals/referrals.tsx
Normal file
50
apps/trading/client-pages/referrals/referrals.tsx
Normal file
@ -0,0 +1,50 @@
|
||||
import {
|
||||
TradingAnchorButton,
|
||||
VegaIcon,
|
||||
VegaIconNames,
|
||||
} from '@vegaprotocol/ui-toolkit';
|
||||
import { HowItWorksTable } from './how-it-works-table';
|
||||
import { LandingBanner } from './landing-banner';
|
||||
import { TiersContainer } from './tiers';
|
||||
import { RainbowTabLink } from './buttons';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import { Routes } from '../../lib/links';
|
||||
|
||||
export const Referrals = () => {
|
||||
return (
|
||||
<>
|
||||
<LandingBanner />
|
||||
<div>
|
||||
<div className="flex justify-center">
|
||||
<RainbowTabLink end to={Routes.REFERRALS}>
|
||||
Your referrals
|
||||
</RainbowTabLink>
|
||||
<RainbowTabLink to={Routes.REFERRALS_APPLY_CODE}>
|
||||
Apply a code
|
||||
</RainbowTabLink>
|
||||
</div>
|
||||
<div className="py-16 border-t border-b border-vega-cdark-500">
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TiersContainer />
|
||||
|
||||
<div className="mt-10 mb-5 text-center">
|
||||
<h2 className="text-2xl">How it works</h2>
|
||||
</div>
|
||||
<div className="md:w-[60%] mx-auto">
|
||||
<HowItWorksTable />
|
||||
<div className="mt-5">
|
||||
<TradingAnchorButton
|
||||
className="mx-auto w-max"
|
||||
href="https://docs.vega.xyz/"
|
||||
target="_blank"
|
||||
>
|
||||
Read the terms <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
|
||||
</TradingAnchorButton>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
116
apps/trading/client-pages/referrals/table.tsx
Normal file
116
apps/trading/client-pages/referrals/table.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
import { Tooltip, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
|
||||
import classNames from 'classnames';
|
||||
import type { HTMLAttributes } from 'react';
|
||||
import { BORDER_COLOR, GRADIENT } from './constants';
|
||||
|
||||
type TableColumnDefinition = {
|
||||
displayName?: string;
|
||||
name: string;
|
||||
tooltip?: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type TableProps = {
|
||||
columns: TableColumnDefinition[];
|
||||
data: Record<TableColumnDefinition['name'] | 'className', React.ReactNode>[];
|
||||
noHeader?: boolean;
|
||||
noCollapse?: boolean;
|
||||
};
|
||||
|
||||
const INNER_BORDER_STYLE = `border-b ${BORDER_COLOR}`;
|
||||
|
||||
export const Table = ({
|
||||
columns,
|
||||
data,
|
||||
noHeader = false,
|
||||
noCollapse = false,
|
||||
className,
|
||||
...props
|
||||
}: TableProps & HTMLAttributes<HTMLTableElement>) => {
|
||||
const header = (
|
||||
<thead className={classNames({ 'max-md:hidden': !noCollapse })}>
|
||||
<tr>
|
||||
{columns.map(({ displayName, name, tooltip }) => (
|
||||
<th
|
||||
key={name}
|
||||
col-id={name}
|
||||
className={classNames(
|
||||
'px-5 py-3 text-sm text-vega-clight-100 dark:text-vega-cdark-100',
|
||||
INNER_BORDER_STYLE
|
||||
)}
|
||||
>
|
||||
<span className="flex flex-row gap-2 items-center">
|
||||
<span>{displayName}</span>
|
||||
{tooltip ? (
|
||||
<Tooltip description={tooltip}>
|
||||
<button className="text-vega-clight-400 dark:text-vega-cdark-400 no-underline decoration-transparent w-[12px] h-[12px] inline-flex">
|
||||
<VegaIcon size={12} name={VegaIconNames.INFO} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</span>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
);
|
||||
return (
|
||||
<table
|
||||
className={classNames(
|
||||
'w-full',
|
||||
'border-separate border rounded-md border-spacing-0',
|
||||
BORDER_COLOR,
|
||||
GRADIENT,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{!noHeader && header}
|
||||
<tbody>
|
||||
{data.map((d, i) => (
|
||||
<tr
|
||||
key={i}
|
||||
className={classNames(d['className'] as string, {
|
||||
'max-md:flex flex-col w-full': !noCollapse,
|
||||
})}
|
||||
>
|
||||
{columns.map(({ name, displayName, className }, j) => (
|
||||
<td
|
||||
className={classNames(
|
||||
'px-5 py-3 text-base',
|
||||
{
|
||||
'max-md:flex max-md:flex-col max-md:justify-between':
|
||||
!noCollapse,
|
||||
},
|
||||
INNER_BORDER_STYLE,
|
||||
{
|
||||
'border-none': i === data.length - 1 && noCollapse,
|
||||
'md:border-none': i === data.length - 1,
|
||||
'max-md:border-none':
|
||||
i === data.length - 1 && j === columns.length - 1,
|
||||
},
|
||||
className
|
||||
)}
|
||||
key={`${i}-${name}`}
|
||||
>
|
||||
{/** display column name in mobile view */}
|
||||
{!noCollapse &&
|
||||
!noHeader &&
|
||||
displayName &&
|
||||
displayName.length > 0 && (
|
||||
<span
|
||||
aria-hidden
|
||||
className="md:hidden font-mono text-xs px-0 text-vega-clight-100 dark:text-vega-cdark-100"
|
||||
>
|
||||
{displayName}
|
||||
</span>
|
||||
)}
|
||||
<span>{d[name]}</span>
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
32
apps/trading/client-pages/referrals/tag.tsx
Normal file
32
apps/trading/client-pages/referrals/tag.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import type { HTMLAttributes } from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
type TagProps = {
|
||||
color?: 'yellow' | 'green' | 'blue' | 'purple' | 'pink' | 'orange' | 'none';
|
||||
};
|
||||
export const Tag = ({
|
||||
color = 'none',
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: TagProps & HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={classNames(
|
||||
'mt-3 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-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',
|
||||
'border-vega-orange-500 text-vega-orange-500': color === 'orange',
|
||||
'border-vega-clight-100 text-vega-clight-100 dark:border-vega-cdark-100 dark:text-vega-cdark-100':
|
||||
color === 'none',
|
||||
},
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
172
apps/trading/client-pages/referrals/tiers.tsx
Normal file
172
apps/trading/client-pages/referrals/tiers.tsx
Normal file
@ -0,0 +1,172 @@
|
||||
import { 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 } from 'react';
|
||||
|
||||
const Loading = ({ variant }: { variant: 'large' | 'inline' }) => (
|
||||
<div
|
||||
className={classNames(
|
||||
'bg-vega-clight-800 dark:bg-vega-cdark-800 rounded-lg animate-pulse',
|
||||
{
|
||||
'w-full h-20': variant === 'large',
|
||||
}
|
||||
)}
|
||||
></div>
|
||||
);
|
||||
|
||||
const StakingTier = ({
|
||||
tier,
|
||||
label,
|
||||
referralRewardMultiplier,
|
||||
minimumStakedTokens,
|
||||
}: {
|
||||
tier: number;
|
||||
label: string;
|
||||
referralRewardMultiplier: string;
|
||||
minimumStakedTokens: string;
|
||||
}) => {
|
||||
const color: Record<number, ComponentProps<typeof Tag>['color']> = {
|
||||
1: 'green',
|
||||
2: 'blue',
|
||||
3: 'pink',
|
||||
};
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'overflow-hidden',
|
||||
'border rounded-md w-full',
|
||||
BORDER_COLOR
|
||||
)}
|
||||
>
|
||||
<div aria-hidden>
|
||||
{tier < 4 && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={`/${tier}x.png`}
|
||||
alt={`${referralRewardMultiplier}x multiplier`}
|
||||
width={768}
|
||||
height={400}
|
||||
className="w-full"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className={classNames('p-3', GRADIENT)}>
|
||||
<h3 className="mb-3 text-xl">{label}</h3>
|
||||
<p className="text-base text-vega-clight-100 dark:text-vega-cdark-100">
|
||||
Stake a minimum of {minimumStakedTokens} $VEGA tokens
|
||||
</p>
|
||||
<Tag color={color[tier]}>
|
||||
Reward multiplier {referralRewardMultiplier}x
|
||||
</Tag>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const TiersContainer = () => {
|
||||
const { benefitTiers, stakingTiers, details, loading } = useReferralProgram();
|
||||
|
||||
const ends = details?.endOfProgramTimestamp
|
||||
? getDateTimeFormat().format(new Date(details.endOfProgramTimestamp))
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-row items-baseline justify-between mt-10 mb-5">
|
||||
<h2 className="text-2xl">Referral tiers</h2>
|
||||
{ends && (
|
||||
<span className="text-base">
|
||||
<span className="text-vega-clight-200 dark:text-vega-cdark-200">
|
||||
Program ends:
|
||||
</span>{' '}
|
||||
{ends}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-20">
|
||||
{loading || !benefitTiers || benefitTiers.length === 0 ? (
|
||||
<Loading variant="large" />
|
||||
) : (
|
||||
<TiersTable data={benefitTiers} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row items-baseline justify-between mb-5">
|
||||
<h2 className="text-2xl">Staking multipliers</h2>
|
||||
</div>
|
||||
<div className="flex flex-col mb-20 justify-items-stretch md:flex-row gap-5">
|
||||
{loading || !stakingTiers || stakingTiers.length === 0 ? (
|
||||
<>
|
||||
<Loading variant="large" />
|
||||
<Loading variant="large" />
|
||||
<Loading variant="large" />
|
||||
</>
|
||||
) : (
|
||||
<StakingTiers data={stakingTiers} />
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const StakingTiers = ({
|
||||
data,
|
||||
}: {
|
||||
data: ReturnType<typeof useReferralProgram>['stakingTiers'];
|
||||
}) => (
|
||||
<>
|
||||
{data.map(
|
||||
({ tier, label, referralRewardMultiplier, minimumStakedTokens }, i) => (
|
||||
<StakingTier
|
||||
key={i}
|
||||
tier={tier}
|
||||
label={label}
|
||||
referralRewardMultiplier={referralRewardMultiplier}
|
||||
minimumStakedTokens={minimumStakedTokens}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const TiersTable = ({
|
||||
data,
|
||||
}: {
|
||||
data: Array<{
|
||||
tier: number;
|
||||
commission: string;
|
||||
discount: string;
|
||||
volume: string;
|
||||
}>;
|
||||
}) => {
|
||||
return (
|
||||
<Table
|
||||
columns={[
|
||||
{ name: 'tier', displayName: 'Tier' },
|
||||
{
|
||||
name: 'commission',
|
||||
displayName: 'Referrer commission',
|
||||
tooltip: 'A percentage of commission earned by the referrer',
|
||||
},
|
||||
{ name: 'discount', displayName: 'Referrer trading discount' },
|
||||
{ name: 'volume', displayName: 'Min. trading volume' },
|
||||
]}
|
||||
data={data.map((d) => ({
|
||||
...d,
|
||||
className: classNames({
|
||||
'from-vega-pink-400 dark:from-vega-pink-600 to-20% bg-highlight':
|
||||
d.tier === 1,
|
||||
'from-vega-purple-400 dark:from-vega-purple-600 to-20% bg-highlight':
|
||||
d.tier === 2,
|
||||
'from-vega-blue-400 dark:from-vega-blue-600 to-20% bg-highlight':
|
||||
d.tier === 3,
|
||||
'from-vega-orange-400 dark:from-vega-orange-600 to-20% bg-highlight':
|
||||
d.tier > 3,
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
};
|
||||
39
apps/trading/client-pages/referrals/tile.tsx
Normal file
39
apps/trading/client-pages/referrals/tile.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import classNames from 'classnames';
|
||||
import type { HTMLAttributes } from 'react';
|
||||
import { BORDER_COLOR, GRADIENT } from './constants';
|
||||
|
||||
type TileProps = {
|
||||
variant?: 'rainbow' | 'default';
|
||||
};
|
||||
|
||||
export const Tile = ({
|
||||
variant = 'default',
|
||||
className,
|
||||
children,
|
||||
}: TileProps & HTMLAttributes<HTMLDivElement>) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
{
|
||||
'bg-rainbow p-[0.125rem]': variant === 'rainbow',
|
||||
[`border-2 ${BORDER_COLOR} p-0`]: variant === 'default',
|
||||
},
|
||||
'rounded-lg overflow-hidden relative'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={classNames(
|
||||
{
|
||||
'bg-white dark:bg-vega-cdark-900 text-black dark:text-white rounded-[0.35rem] overflow-hidden':
|
||||
variant === 'rainbow',
|
||||
},
|
||||
'p-6',
|
||||
GRADIENT,
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -5,6 +5,7 @@ import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
|
||||
import { VegaWalletContext } from '@vegaprotocol/wallet';
|
||||
import { Navbar } from './navbar';
|
||||
import { useGlobalStore } from '../../stores';
|
||||
import { ENV, FLAGS } from '@vegaprotocol/environment';
|
||||
|
||||
jest.mock('@vegaprotocol/proposals', () => ({
|
||||
ProtocolUpgradeCountdown: () => null,
|
||||
@ -47,6 +48,14 @@ describe('Navbar', () => {
|
||||
|
||||
beforeAll(() => {
|
||||
useGlobalStore.setState({ marketId });
|
||||
const mockedFLAGS = jest.mocked(FLAGS);
|
||||
mockedFLAGS.REFERRALS = true;
|
||||
const mockedENV = jest.mocked(ENV);
|
||||
mockedENV.VEGA_TOKEN_URL = 'governance';
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('should be properly rendered', () => {
|
||||
@ -57,6 +66,7 @@ describe('Navbar', () => {
|
||||
['/markets/all', 'Markets'],
|
||||
[`/markets/${marketId}`, 'Trading'],
|
||||
['/portfolio', 'Portfolio'],
|
||||
['/referrals', 'Referrals'],
|
||||
[expect.stringContaining('governance'), 'Governance'],
|
||||
];
|
||||
|
||||
@ -89,6 +99,7 @@ describe('Navbar', () => {
|
||||
['/markets/all', 'Markets'],
|
||||
[`/markets/${marketId}`, 'Trading'],
|
||||
['/portfolio', 'Portfolio'],
|
||||
['/referrals', 'Referrals'],
|
||||
[expect.stringContaining('governance'), 'Governance'],
|
||||
];
|
||||
const links = menu.getAllByRole('link');
|
||||
|
||||
@ -6,6 +6,7 @@ import {
|
||||
Networks,
|
||||
DApp,
|
||||
useLinks,
|
||||
FLAGS,
|
||||
} from '@vegaprotocol/environment';
|
||||
import { t } from '@vegaprotocol/i18n';
|
||||
import { useGlobalStore } from '../../stores';
|
||||
@ -140,10 +141,6 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
|
||||
const { VEGA_ENV, VEGA_NETWORKS, GITHUB_FEEDBACK_URL } = useEnvironment();
|
||||
const marketId = useGlobalStore((store) => store.marketId);
|
||||
|
||||
// If we have a stored marketId make Trade link go to that market
|
||||
// otherwise always go to /markets/all
|
||||
const tradingPath = marketId ? Links.MARKET(marketId) : Links.MARKETS();
|
||||
|
||||
return (
|
||||
<div className="lg:flex lg:h-full gap-3">
|
||||
<NavbarList>
|
||||
@ -174,7 +171,7 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
|
||||
</NavbarLink>
|
||||
</NavbarItem>
|
||||
<NavbarItem>
|
||||
<NavbarLink to={tradingPath} onClick={onClick}>
|
||||
<NavbarLink to={Links.MARKET(marketId || '')} onClick={onClick}>
|
||||
{t('Trading')}
|
||||
</NavbarLink>
|
||||
</NavbarItem>
|
||||
@ -183,6 +180,13 @@ const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
|
||||
{t('Portfolio')}
|
||||
</NavbarLink>
|
||||
</NavbarItem>
|
||||
{FLAGS.REFERRALS && (
|
||||
<NavbarItem>
|
||||
<NavbarLink to={Links.REFERRALS()} onClick={onClick}>
|
||||
{t('Referrals')}
|
||||
</NavbarLink>
|
||||
</NavbarItem>
|
||||
)}
|
||||
<NavbarItem>
|
||||
<NavbarLinkExternal to={useLinks(DApp.Governance)()}>
|
||||
{t('Governance')}
|
||||
|
||||
@ -13,6 +13,10 @@ export const Routes = {
|
||||
DEPOSIT: '/portfolio/assets/deposit',
|
||||
WITHDRAW: '/portfolio/assets/withdraw',
|
||||
TRANSFER: '/portfolio/assets/transfer',
|
||||
REFERRALS: '/referrals',
|
||||
REFERRALS_APPLY_CODE: '/referrals/apply-code',
|
||||
REFERRALS_CREATE_CODE: '/referrals/create-code',
|
||||
TEAMS: '/teams',
|
||||
} as const;
|
||||
|
||||
type ConsoleLinks = {
|
||||
@ -32,4 +36,8 @@ export const Links: ConsoleLinks = {
|
||||
DEPOSIT: () => Routes.DEPOSIT,
|
||||
WITHDRAW: () => Routes.WITHDRAW,
|
||||
TRANSFER: () => Routes.TRANSFER,
|
||||
REFERRALS: () => Routes.REFERRALS,
|
||||
REFERRALS_APPLY_CODE: () => Routes.REFERRALS_APPLY_CODE,
|
||||
REFERRALS_CREATE_CODE: () => Routes.REFERRALS_CREATE_CODE,
|
||||
TEAMS: () => Routes.TEAMS,
|
||||
};
|
||||
|
||||
@ -14,6 +14,14 @@ import { Deposit } from '../client-pages/deposit';
|
||||
import { Withdraw } from '../client-pages/withdraw';
|
||||
import { Transfer } from '../client-pages/transfer';
|
||||
import { Routes } from '../lib/links';
|
||||
import { LayoutWithSky } from '../client-pages/referrals/layout';
|
||||
import { Referrals } from '../client-pages/referrals/referrals';
|
||||
import { ReferralStatistics } from '../client-pages/referrals/referral-statistics';
|
||||
import { ApplyCodeForm } from '../client-pages/referrals/apply-code-form';
|
||||
import { CreateCodeContainer } from '../client-pages/referrals/create-code-form';
|
||||
import { NotFound as ReferralNotFound } from '../client-pages/referrals/error-boundary';
|
||||
import { compact } from 'lodash';
|
||||
import { FLAGS } from '@vegaprotocol/environment';
|
||||
|
||||
// These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM
|
||||
// Using dynamic imports is a workaround for this until pennant is published as ESM
|
||||
@ -26,8 +34,8 @@ const NotFound = () => (
|
||||
</Splash>
|
||||
);
|
||||
|
||||
export const routerConfig: RouteObject[] = [
|
||||
// Pages that dont use the LayoutWithSidebar must come first
|
||||
export const routerConfig: RouteObject[] = compact([
|
||||
// Pages that don't use the LayoutWithSidebar must come first
|
||||
// to ensure they are matched before the catch all route '/*'
|
||||
{
|
||||
path: 'disclaimer',
|
||||
@ -35,7 +43,36 @@ export const routerConfig: RouteObject[] = [
|
||||
id: Routes.DISCLAIMER,
|
||||
children: [{ index: true, element: <Disclaimer /> }],
|
||||
},
|
||||
|
||||
// Referrals routing (the pages should be available if the feature flag is on)
|
||||
FLAGS.REFERRALS
|
||||
? {
|
||||
path: Routes.REFERRALS,
|
||||
element: <LayoutWithSky />,
|
||||
children: [
|
||||
{
|
||||
element: <Referrals />,
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <ReferralStatistics />,
|
||||
},
|
||||
{
|
||||
path: Routes.REFERRALS_CREATE_CODE,
|
||||
element: <CreateCodeContainer />,
|
||||
},
|
||||
{
|
||||
path: Routes.REFERRALS_APPLY_CODE,
|
||||
element: <ApplyCodeForm />,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
element: <ReferralNotFound />,
|
||||
},
|
||||
],
|
||||
}
|
||||
: undefined,
|
||||
// All other pages will use the sidebar
|
||||
{
|
||||
path: '/*',
|
||||
@ -93,7 +130,6 @@ export const routerConfig: RouteObject[] = [
|
||||
element: <Liquidity />,
|
||||
id: Routes.LIQUIDITY,
|
||||
},
|
||||
|
||||
// NotFound page is here so its caught within parent '/*' route
|
||||
{
|
||||
path: '*',
|
||||
@ -101,7 +137,7 @@ export const routerConfig: RouteObject[] = [
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
]);
|
||||
|
||||
export const ClientRouter = () => {
|
||||
const routes = useRoutes(routerConfig);
|
||||
|
||||
BIN
apps/trading/public/1x.png
Normal file
BIN
apps/trading/public/1x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 614 KiB |
BIN
apps/trading/public/2x.png
Normal file
BIN
apps/trading/public/2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 572 KiB |
BIN
apps/trading/public/3x.png
Normal file
BIN
apps/trading/public/3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
BIN
apps/trading/public/sky-dark.png
Normal file
BIN
apps/trading/public/sky-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 947 KiB |
BIN
apps/trading/public/sky-light.png
Normal file
BIN
apps/trading/public/sky-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 947 KiB |
@ -13,7 +13,37 @@ module.exports = {
|
||||
],
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: theme,
|
||||
extend: {
|
||||
...theme,
|
||||
colors: {
|
||||
transparent: 'transparent',
|
||||
current: 'currentColor',
|
||||
...theme.colors,
|
||||
},
|
||||
backgroundImage: {
|
||||
...theme.backgroundImage,
|
||||
rainbow:
|
||||
'linear-gradient(103.47deg, #FF077F 1.68%, #8028FF 47.49%, #0075FF 100%)',
|
||||
'rainbow-shifted':
|
||||
'linear-gradient(103.47deg, #0075FF 1.68%, #8028FF 47.49%, #FF077F 100%)',
|
||||
highlight:
|
||||
'linear-gradient(170deg, var(--tw-gradient-from), transparent var(--tw-gradient-to-position))',
|
||||
},
|
||||
keyframes: {
|
||||
...theme.keyframes,
|
||||
shake: {
|
||||
'0%': { transform: 'translateX(0)' },
|
||||
'25%': { transform: 'translateX(5px)' },
|
||||
'50%': { transform: 'translateX(-5px)' },
|
||||
'75%': { transform: 'translateX(5px)' },
|
||||
'100%': { transform: 'translateX(0)' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
...theme.animation,
|
||||
shake: 'shake 200ms linear',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [vegaCustomClasses],
|
||||
};
|
||||
|
||||
@ -414,6 +414,9 @@ function compileFeatureFlags(): FeatureFlags {
|
||||
process.env['NX_METAMASK_SNAPS']
|
||||
) as string
|
||||
),
|
||||
REFERRALS: TRUTHY.includes(
|
||||
windowOrDefault('NX_REFERRALS', process.env['NX_REFERRALS']) as string
|
||||
),
|
||||
};
|
||||
const EXPLORER_FLAGS = {
|
||||
EXPLORER_ASSETS: TRUTHY.includes(
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import trim from 'lodash/trim';
|
||||
import { useCallback } from 'react';
|
||||
import { Networks } from '../types';
|
||||
import { useEnvironment } from './use-environment';
|
||||
import { ENV, useEnvironment } from './use-environment';
|
||||
import { stripFullStops } from '@vegaprotocol/utils';
|
||||
|
||||
const VEGA_DOCS_URL =
|
||||
@ -84,8 +84,7 @@ export const DocsLinks = VEGA_DOCS_URL
|
||||
: undefined;
|
||||
|
||||
export const useLinks = (dapp: DApp, network?: Net) => {
|
||||
const { VEGA_ENV, VEGA_EXPLORER_URL, VEGA_TOKEN_URL, VEGA_CONSOLE_URL } =
|
||||
useEnvironment();
|
||||
const { VEGA_ENV, VEGA_EXPLORER_URL, VEGA_TOKEN_URL, VEGA_CONSOLE_URL } = ENV;
|
||||
const fallback = {
|
||||
[DApp.Explorer]: VEGA_EXPLORER_URL,
|
||||
[DApp.Governance]: VEGA_TOKEN_URL,
|
||||
@ -175,4 +174,5 @@ export const ExternalLinks = {
|
||||
export const TokenStaticLinks = {
|
||||
PROPOSAL_PAGE: ':tokenUrl/proposals/:proposalId',
|
||||
UPDATE_PROPOSAL_PAGE: ':tokenUrl/proposals/propose/update-market',
|
||||
ASSOCIATE: 'token/associate',
|
||||
};
|
||||
|
||||
@ -23,6 +23,7 @@ export type CosmicElevatorFlags = Pick<
|
||||
| 'SUCCESSOR_MARKETS'
|
||||
| 'PRODUCT_PERPETUALS'
|
||||
| 'METAMASK_SNAPS'
|
||||
| 'REFERRALS'
|
||||
>;
|
||||
export type Configuration = z.infer<typeof tomlConfigSchema>;
|
||||
export const CUSTOM_NODE_KEY = 'custom' as const;
|
||||
|
||||
@ -78,6 +78,7 @@ const COSMIC_ELEVATOR_FLAGS = {
|
||||
ICEBERG_ORDERS: z.optional(z.boolean()),
|
||||
PRODUCT_PERPETUALS: z.optional(z.boolean()),
|
||||
METAMASK_SNAPS: z.optional(z.boolean()),
|
||||
REFERRALS: z.optional(z.boolean()),
|
||||
};
|
||||
|
||||
const EXPLORER_FLAGS = {
|
||||
|
||||
@ -395,6 +395,24 @@ export interface TransferBody {
|
||||
transfer: Transfer;
|
||||
}
|
||||
|
||||
export type ApplyReferralCode = {
|
||||
applyReferralCode: {
|
||||
id: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type CreateReferralSet = {
|
||||
createReferralSet: {
|
||||
isTeam: boolean;
|
||||
team?: {
|
||||
name: string;
|
||||
teamUrl?: string;
|
||||
avatarUrl?: string;
|
||||
closed: boolean;
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
export type Transaction =
|
||||
| StopOrdersSubmissionBody
|
||||
| StopOrdersCancellationBody
|
||||
@ -408,7 +426,9 @@ export type Transaction =
|
||||
| ProposalSubmissionBody
|
||||
| BatchMarketInstructionSubmissionBody
|
||||
| TransferBody
|
||||
| LiquidityProvisionSubmission;
|
||||
| LiquidityProvisionSubmission
|
||||
| ApplyReferralCode
|
||||
| CreateReferralSet;
|
||||
|
||||
export const isWithdrawTransaction = (
|
||||
transaction: Transaction
|
||||
|
||||
@ -213,7 +213,7 @@
|
||||
"style-loader": "^3.3.0",
|
||||
"stylus": "^0.55.0",
|
||||
"stylus-loader": "^7.1.0",
|
||||
"tailwindcss": "3.2.7",
|
||||
"tailwindcss": "3.3.3",
|
||||
"ts-jest": "29.1.0",
|
||||
"ts-node": "10.9.1",
|
||||
"tslib": "^2.3.0",
|
||||
|
||||
222
yarn.lock
222
yarn.lock
@ -7,6 +7,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd"
|
||||
integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==
|
||||
|
||||
"@alloc/quick-lru@^5.2.0":
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
|
||||
integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
|
||||
|
||||
"@ampproject/remapping@^2.1.0", "@ampproject/remapping@^2.2.0":
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
|
||||
@ -9856,16 +9861,7 @@ acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
|
||||
resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
|
||||
integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
|
||||
|
||||
acorn-node@^1.8.2:
|
||||
version "1.8.2"
|
||||
resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
|
||||
integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
|
||||
dependencies:
|
||||
acorn "^7.0.0"
|
||||
acorn-walk "^7.0.0"
|
||||
xtend "^4.0.2"
|
||||
|
||||
acorn-walk@^7.0.0, acorn-walk@^7.2.0:
|
||||
acorn-walk@^7.2.0:
|
||||
version "7.2.0"
|
||||
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
|
||||
integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
|
||||
@ -9875,7 +9871,7 @@ acorn-walk@^8.0.2, acorn-walk@^8.1.1, acorn-walk@^8.2.0:
|
||||
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
|
||||
integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
|
||||
|
||||
acorn@^7.0.0, acorn@^7.4.1:
|
||||
acorn@^7.4.1:
|
||||
version "7.4.1"
|
||||
resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
|
||||
integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
|
||||
@ -10126,6 +10122,11 @@ any-observable@^0.3.0:
|
||||
resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
|
||||
integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
|
||||
|
||||
any-promise@^1.0.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
|
||||
integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
|
||||
|
||||
anymatch@^3.0.3, anymatch@~3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
|
||||
@ -13199,11 +13200,6 @@ define-properties@^1.2.0:
|
||||
has-property-descriptors "^1.0.0"
|
||||
object-keys "^1.1.1"
|
||||
|
||||
defined@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
|
||||
integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==
|
||||
|
||||
defu@^6.1.2:
|
||||
version "6.1.2"
|
||||
resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.2.tgz#1217cba167410a1765ba93893c6dbac9ed9d9e5c"
|
||||
@ -13315,15 +13311,6 @@ detect-port@^1.3.0, detect-port@^1.5.1:
|
||||
address "^1.0.1"
|
||||
debug "4"
|
||||
|
||||
detective@^5.2.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
|
||||
integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
|
||||
dependencies:
|
||||
acorn-node "^1.8.2"
|
||||
defined "^1.0.0"
|
||||
minimist "^1.2.6"
|
||||
|
||||
didyoumean@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
|
||||
@ -15557,6 +15544,18 @@ glob@7.1.4:
|
||||
once "^1.3.0"
|
||||
path-is-absolute "^1.0.0"
|
||||
|
||||
glob@7.1.6:
|
||||
version "7.1.6"
|
||||
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
|
||||
integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
|
||||
dependencies:
|
||||
fs.realpath "^1.0.0"
|
||||
inflight "^1.0.4"
|
||||
inherits "2"
|
||||
minimatch "^3.0.4"
|
||||
once "^1.3.0"
|
||||
path-is-absolute "^1.0.0"
|
||||
|
||||
glob@7.1.7, glob@~7.1.1:
|
||||
version "7.1.7"
|
||||
resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
|
||||
@ -16628,6 +16627,13 @@ is-core-module@^2.11.0:
|
||||
dependencies:
|
||||
has "^1.0.3"
|
||||
|
||||
is-core-module@^2.13.0:
|
||||
version "2.13.0"
|
||||
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.0.tgz#bb52aa6e2cbd49a30c2ba68c42bf3435ba6072db"
|
||||
integrity sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==
|
||||
dependencies:
|
||||
has "^1.0.3"
|
||||
|
||||
is-core-module@^2.5.0, is-core-module@^2.8.1:
|
||||
version "2.10.0"
|
||||
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
|
||||
@ -17670,6 +17676,11 @@ jest@29.4.3:
|
||||
import-local "^3.0.2"
|
||||
jest-cli "^29.4.3"
|
||||
|
||||
jiti@^1.18.2:
|
||||
version "1.20.0"
|
||||
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.20.0.tgz#2d823b5852ee8963585c8dd8b7992ffc1ae83b42"
|
||||
integrity sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==
|
||||
|
||||
js-sha3@0.8.0, js-sha3@^0.8.0:
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/js-sha3/-/js-sha3-0.8.0.tgz#b9b7a5da73afad7dedd0f8c463954cbde6818840"
|
||||
@ -18115,7 +18126,7 @@ lilconfig@^2.0.3, lilconfig@^2.1.0:
|
||||
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
|
||||
integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
|
||||
|
||||
lilconfig@^2.0.5, lilconfig@^2.0.6:
|
||||
lilconfig@^2.0.5:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
|
||||
integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
|
||||
@ -19505,6 +19516,15 @@ mute-stream@0.0.8:
|
||||
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
|
||||
integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
|
||||
|
||||
mz@^2.7.0:
|
||||
version "2.7.0"
|
||||
resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
|
||||
integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
|
||||
dependencies:
|
||||
any-promise "^1.0.0"
|
||||
object-assign "^4.0.1"
|
||||
thenify-all "^1.0.0"
|
||||
|
||||
nanoid@3.3.3:
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
|
||||
@ -19857,7 +19877,7 @@ nx@16.4.0:
|
||||
"@nx/nx-win32-arm64-msvc" "16.4.0"
|
||||
"@nx/nx-win32-x64-msvc" "16.4.0"
|
||||
|
||||
object-assign@^4.1.0, object-assign@^4.1.1:
|
||||
object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
|
||||
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
|
||||
@ -20597,6 +20617,11 @@ pino@7.11.0:
|
||||
sonic-boom "^2.2.1"
|
||||
thread-stream "^0.15.1"
|
||||
|
||||
pirates@^4.0.1:
|
||||
version "4.0.6"
|
||||
resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
|
||||
integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
|
||||
|
||||
pirates@^4.0.4, pirates@^4.0.5:
|
||||
version "4.0.5"
|
||||
resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
|
||||
@ -20746,7 +20771,16 @@ postcss-discard-overridden@^6.0.0:
|
||||
resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz#49c5262db14e975e349692d9024442de7cd8e234"
|
||||
integrity sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==
|
||||
|
||||
postcss-import@^14.1.0, postcss-import@~14.1.0:
|
||||
postcss-import@^15.1.0:
|
||||
version "15.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
|
||||
integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
|
||||
dependencies:
|
||||
postcss-value-parser "^4.0.0"
|
||||
read-cache "^1.0.0"
|
||||
resolve "^1.1.7"
|
||||
|
||||
postcss-import@~14.1.0:
|
||||
version "14.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
|
||||
integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
|
||||
@ -20755,14 +20789,14 @@ postcss-import@^14.1.0, postcss-import@~14.1.0:
|
||||
read-cache "^1.0.0"
|
||||
resolve "^1.1.7"
|
||||
|
||||
postcss-js@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
|
||||
integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
|
||||
postcss-js@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
|
||||
integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
|
||||
dependencies:
|
||||
camelcase-css "^2.0.1"
|
||||
|
||||
postcss-load-config@^3.0.0, postcss-load-config@^3.1.4:
|
||||
postcss-load-config@^3.0.0:
|
||||
version "3.1.4"
|
||||
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
|
||||
integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
|
||||
@ -20770,6 +20804,14 @@ postcss-load-config@^3.0.0, postcss-load-config@^3.1.4:
|
||||
lilconfig "^2.0.5"
|
||||
yaml "^1.10.2"
|
||||
|
||||
postcss-load-config@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
|
||||
integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
|
||||
dependencies:
|
||||
lilconfig "^2.0.5"
|
||||
yaml "^2.1.1"
|
||||
|
||||
postcss-loader@^6.1.1:
|
||||
version "6.2.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-6.2.1.tgz#0895f7346b1702103d30fdc66e4d494a93c008ef"
|
||||
@ -20930,12 +20972,12 @@ postcss-modules@^4.0.0:
|
||||
postcss-modules-values "^4.0.0"
|
||||
string-hash "^1.1.1"
|
||||
|
||||
postcss-nested@6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.0.tgz#1572f1984736578f360cffc7eb7dca69e30d1735"
|
||||
integrity sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==
|
||||
postcss-nested@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.0.1.tgz#f83dc9846ca16d2f4fa864f16e9d9f7d0961662c"
|
||||
integrity sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==
|
||||
dependencies:
|
||||
postcss-selector-parser "^6.0.10"
|
||||
postcss-selector-parser "^6.0.11"
|
||||
|
||||
postcss-normalize-charset@^5.1.0:
|
||||
version "5.1.0"
|
||||
@ -21108,14 +21150,6 @@ postcss-reduce-transforms@^6.0.0:
|
||||
dependencies:
|
||||
postcss-value-parser "^4.2.0"
|
||||
|
||||
postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
|
||||
version "6.0.10"
|
||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
|
||||
integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
|
||||
dependencies:
|
||||
cssesc "^3.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
|
||||
version "6.0.13"
|
||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz#d05d8d76b1e8e173257ef9d60b706a8e5e99bf1b"
|
||||
@ -21124,6 +21158,14 @@ postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.5, postcss-selecto
|
||||
cssesc "^3.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
|
||||
version "6.0.10"
|
||||
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
|
||||
integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
|
||||
dependencies:
|
||||
cssesc "^3.0.0"
|
||||
util-deprecate "^1.0.2"
|
||||
|
||||
postcss-svgo@^5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-5.1.0.tgz#0a317400ced789f233a28826e77523f15857d80d"
|
||||
@ -21182,7 +21224,7 @@ postcss@8.4.21:
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
postcss@^8.0.9, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.24:
|
||||
postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.24:
|
||||
version "8.4.24"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
|
||||
integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
|
||||
@ -21191,6 +21233,15 @@ postcss@^8.0.9, postcss@^8.4.14, postcss@^8.4.21, postcss@^8.4.24:
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
postcss@^8.4.23:
|
||||
version "8.4.29"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.29.tgz#33bc121cf3b3688d4ddef50be869b2a54185a1dd"
|
||||
integrity sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==
|
||||
dependencies:
|
||||
nanoid "^3.3.6"
|
||||
picocolors "^1.0.0"
|
||||
source-map-js "^1.0.2"
|
||||
|
||||
preact@10.4.1:
|
||||
version "10.4.1"
|
||||
resolved "https://registry.yarnpkg.com/preact/-/preact-10.4.1.tgz#9b3ba020547673a231c6cf16f0fbaef0e8863431"
|
||||
@ -22360,6 +22411,15 @@ resolve@^1.17.0:
|
||||
path-parse "^1.0.7"
|
||||
supports-preserve-symlinks-flag "^1.0.0"
|
||||
|
||||
resolve@^1.22.2:
|
||||
version "1.22.6"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.6.tgz#dd209739eca3aef739c626fea1b4f3c506195362"
|
||||
integrity sha512-njhxM7mV12JfufShqGy3Rz8j11RPdLy4xi15UurGJeoHLfJpVXKdh3ueuOqbYUcDZnffr6X739JBo5LzyahEsw==
|
||||
dependencies:
|
||||
is-core-module "^2.13.0"
|
||||
path-parse "^1.0.7"
|
||||
supports-preserve-symlinks-flag "^1.0.0"
|
||||
|
||||
resolve@^2.0.0-next.3, resolve@^2.0.0-next.4:
|
||||
version "2.0.0-next.4"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
|
||||
@ -23702,6 +23762,19 @@ stylus@^0.59.0:
|
||||
sax "~1.2.4"
|
||||
source-map "^0.7.3"
|
||||
|
||||
sucrase@^3.32.0:
|
||||
version "3.34.0"
|
||||
resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"
|
||||
integrity sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==
|
||||
dependencies:
|
||||
"@jridgewell/gen-mapping" "^0.3.2"
|
||||
commander "^4.0.0"
|
||||
glob "7.1.6"
|
||||
lines-and-columns "^1.1.6"
|
||||
mz "^2.7.0"
|
||||
pirates "^4.0.1"
|
||||
ts-interface-checker "^0.1.9"
|
||||
|
||||
superstruct@^0.14.2:
|
||||
version "0.14.2"
|
||||
resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.14.2.tgz#0dbcdf3d83676588828f1cf5ed35cda02f59025b"
|
||||
@ -23827,34 +23900,33 @@ table@6.8.0:
|
||||
string-width "^4.2.3"
|
||||
strip-ansi "^6.0.1"
|
||||
|
||||
tailwindcss@3.2.7:
|
||||
version "3.2.7"
|
||||
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.7.tgz#5936dd08c250b05180f0944500c01dce19188c07"
|
||||
integrity sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==
|
||||
tailwindcss@3.3.3:
|
||||
version "3.3.3"
|
||||
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
|
||||
integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
|
||||
dependencies:
|
||||
"@alloc/quick-lru" "^5.2.0"
|
||||
arg "^5.0.2"
|
||||
chokidar "^3.5.3"
|
||||
color-name "^1.1.4"
|
||||
detective "^5.2.1"
|
||||
didyoumean "^1.2.2"
|
||||
dlv "^1.1.3"
|
||||
fast-glob "^3.2.12"
|
||||
glob-parent "^6.0.2"
|
||||
is-glob "^4.0.3"
|
||||
lilconfig "^2.0.6"
|
||||
jiti "^1.18.2"
|
||||
lilconfig "^2.1.0"
|
||||
micromatch "^4.0.5"
|
||||
normalize-path "^3.0.0"
|
||||
object-hash "^3.0.0"
|
||||
picocolors "^1.0.0"
|
||||
postcss "^8.0.9"
|
||||
postcss-import "^14.1.0"
|
||||
postcss-js "^4.0.0"
|
||||
postcss-load-config "^3.1.4"
|
||||
postcss-nested "6.0.0"
|
||||
postcss "^8.4.23"
|
||||
postcss-import "^15.1.0"
|
||||
postcss-js "^4.0.1"
|
||||
postcss-load-config "^4.0.1"
|
||||
postcss-nested "^6.0.1"
|
||||
postcss-selector-parser "^6.0.11"
|
||||
postcss-value-parser "^4.2.0"
|
||||
quick-lru "^5.1.1"
|
||||
resolve "^1.22.1"
|
||||
resolve "^1.22.2"
|
||||
sucrase "^3.32.0"
|
||||
|
||||
tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
|
||||
version "2.2.1"
|
||||
@ -24017,6 +24089,20 @@ text-table@^0.2.0:
|
||||
resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
|
||||
integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
|
||||
|
||||
thenify-all@^1.0.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
|
||||
integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
|
||||
dependencies:
|
||||
thenify ">= 3.1.0 < 4"
|
||||
|
||||
"thenify@>= 3.1.0 < 4":
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
|
||||
integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
|
||||
dependencies:
|
||||
any-promise "^1.0.0"
|
||||
|
||||
thread-stream@^0.15.1:
|
||||
version "0.15.2"
|
||||
resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-0.15.2.tgz#fb95ad87d2f1e28f07116eb23d85aba3bc0425f4"
|
||||
@ -24181,6 +24267,11 @@ ts-dedent@^2.0.0, ts-dedent@^2.2.0:
|
||||
resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
|
||||
integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
|
||||
|
||||
ts-interface-checker@^0.1.9:
|
||||
version "0.1.13"
|
||||
resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
|
||||
integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
|
||||
|
||||
ts-invariant@^0.10.3:
|
||||
version "0.10.3"
|
||||
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
|
||||
@ -25399,7 +25490,7 @@ xmlchars@^2.2.0:
|
||||
resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
|
||||
integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
|
||||
|
||||
xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1:
|
||||
xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
|
||||
integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
|
||||
@ -25439,6 +25530,11 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
|
||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
|
||||
integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
|
||||
|
||||
yaml@^2.1.1:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.2.tgz#f522db4313c671a0ca963a75670f1c12ea909144"
|
||||
integrity sha512-N/lyzTPaJasoDmfV7YTrYCI0G/3ivm/9wdG0aHuheKowWQwGTsK0Eoiw6utmzAnI6pkJa0DUVygvp3spqqEKXg==
|
||||
|
||||
yargs-parser@20.2.4:
|
||||
version "20.2.4"
|
||||
resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user