Feat/629 Clean up Token styling (#650)
* frontend-monorepo-629: Made nav consistent with TFE and added focus-visible states * frontend-monorepo-629: Header icons working * frontend-monorepo-629: Tweak of header spacing * frontend-monorepo-629: Text styles and spacing on all routes bar governance * frontend-monorepo-629: Minor tweaks to font styles * frontend-monorepo-629: Removed import from older solution * frontend-monorepo-629: Evened up wallet padding to better suit the new button shadow styles * frontend-monorepo-629: White text and mono font where needed in the eth wallet * frontend-monorepo-629: Set only page header to use alpha lyrae * frontend-monorepo-629: More use of mono font for balances and some text alignment * frontend-monorepo-629: Keypair name element only rendered when name present * frontend-monorepo-629: Stopped header title overflow on small screens * frontend-monorepo-629: Button height established with padding to allow longer button text without overflow * frontend-monorepo-629: Mobile wallet title/key alignment improved for mobile * frontend-monorepo-629: Associated vega in wallet dark mode on * frontend-monorepo-629: Removed redundant classes on eth wallet connect button * frontend-monorepo-629: Vega wallet spacing tweaks
This commit is contained in:
Sam Keen
GitHub
parent
7e0ca3790c
commit
b3ce40da7f
@ -7,7 +7,7 @@ import { ENV } from '../../config/env';
|
||||
export const AppFooter = () => {
|
||||
return (
|
||||
<footer className="p-12 text-ui">
|
||||
<p className="mb-8">Version: {ENV.commit || 'development'}</p>
|
||||
<p>Version: {ENV.commit || 'development'}</p>
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey="footerLinksText"
|
||||
|
||||
@ -9,7 +9,10 @@ interface BulletHeaderProps {
|
||||
export const BulletHeader = ({ tag, children, style }: BulletHeaderProps) => {
|
||||
return React.createElement(
|
||||
tag,
|
||||
{ className: 'mt-24 pt-8 pb-20 uppercase text-white', style },
|
||||
{
|
||||
className: 'mt-24 py-8 border-t border-white uppercase text-white',
|
||||
style,
|
||||
},
|
||||
<>
|
||||
<span className="inline-block w-[12px] h-[12px] mr-12 bg-white" />
|
||||
{children}
|
||||
|
||||
@ -9,9 +9,7 @@ export const ConnectedVegaKey = ({ pubKey }: { pubKey: string | null }) => {
|
||||
<strong data-testid="connected-vega-key-label">
|
||||
{pubKey ? t('Connected Vega key') : <ConnectToVega />}
|
||||
</strong>
|
||||
<p className="mb-12" data-testid="connected-vega-key">
|
||||
{pubKey}
|
||||
</p>
|
||||
<p data-testid="connected-vega-key">{pubKey}</p>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -74,19 +74,24 @@ const AssociatedAmounts = ({
|
||||
light={false}
|
||||
/>
|
||||
{vestingAssociationByVegaKey.length ? (
|
||||
<>
|
||||
<hr style={{ borderStyle: 'dashed', color: Colors.text }} />
|
||||
<WalletCardRow label="Associated with Vega keys" bold={true} />
|
||||
<div>
|
||||
<hr style={{ borderStyle: 'dashed' }} />
|
||||
<WalletCardRow
|
||||
label="Associated with Vega keys"
|
||||
bold={true}
|
||||
dark={true}
|
||||
/>
|
||||
{vestingAssociationByVegaKey.map(([key, amount]) => {
|
||||
return (
|
||||
<WalletCardRow
|
||||
key={key}
|
||||
label={removeLeadingAddressSymbol(key)}
|
||||
value={amount}
|
||||
dark={true}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
@ -192,9 +197,9 @@ export const EthWallet = () => {
|
||||
return (
|
||||
<WalletCard dark={true}>
|
||||
<WalletCardHeader>
|
||||
<h1 className="text-h3 uppercase">{t('ethereumKey')}</h1>
|
||||
<h1 className="m-0">{t('ethereumKey')}</h1>
|
||||
{account && (
|
||||
<div className="px-4 text-right">
|
||||
<div className="place-self-end font-mono px-4 pb-2">
|
||||
<div className="font-mono">{truncateMiddle(account)}</div>
|
||||
{pendingTxs && (
|
||||
<div>
|
||||
@ -222,7 +227,6 @@ export const EthWallet = () => {
|
||||
) : (
|
||||
<Button
|
||||
variant={'secondary'}
|
||||
className="w-full px-28 border h-28"
|
||||
onClick={() =>
|
||||
appDispatch({
|
||||
type: AppStateActionType.SET_ETH_WALLET_OVERLAY,
|
||||
|
||||
@ -7,9 +7,7 @@ export const Heading = ({ title }: HeadingProps) => {
|
||||
|
||||
return (
|
||||
<header className="my-0 mx-auto">
|
||||
<h1 className="font-alpha calt text-h3 text-white uppercase mb-4">
|
||||
{title}
|
||||
</h1>
|
||||
<h1 className="font-alpha calt">{title}</h1>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1 +1 @@
|
||||
export { Heading } from './heading';
|
||||
export * from './heading';
|
||||
|
||||
@ -14,7 +14,7 @@ const ProgressContents = ({
|
||||
children: React.ReactNode;
|
||||
}) => (
|
||||
<div
|
||||
className={classnames('flex justify-between py-2 font-mono', {
|
||||
className={classnames('flex justify-between py-2 font-mono mb-2', {
|
||||
'gap-0 px-0 text-black': light,
|
||||
'gap-y-0 gap-x-4': !light,
|
||||
})}
|
||||
@ -93,7 +93,7 @@ export const LockedProgress = ({
|
||||
}, [total, unlocked]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mb-8">
|
||||
<div
|
||||
className={classnames('flex border', {
|
||||
'border-black': light,
|
||||
@ -122,6 +122,6 @@ export const LockedProgress = ({
|
||||
<span>{formatNumber(locked, decimals)}</span>
|
||||
<span>{formatNumber(unlocked, decimals)}</span>
|
||||
</ProgressContents>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,7 +5,8 @@ import debounce from 'lodash/debounce';
|
||||
import React from 'react';
|
||||
import * as Dialog from '@radix-ui/react-dialog';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
import vegaWhite from '../../images/vega_white.png';
|
||||
|
||||
import { Flags } from '../../config';
|
||||
import {
|
||||
@ -16,6 +17,69 @@ import { Routes } from '../../routes/router-config';
|
||||
import { EthWallet } from '../eth-wallet';
|
||||
import { VegaWallet } from '../vega-wallet';
|
||||
|
||||
const Fish = () => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="33"
|
||||
height="20"
|
||||
viewBox="0 0 200 116"
|
||||
fill="none"
|
||||
data-testid="fairground-icon"
|
||||
>
|
||||
<g clipPath="url(#clip0)">
|
||||
<path
|
||||
d="M70.5918 32.8569L70.5918 22.7932L60.5254 22.7932L60.5254 32.8569L70.5918 32.8569Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M80.6641 83.2006L80.6641 73.1377L70.5977 73.1377L70.5977 83.2006L80.6641 83.2006Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M70.5918 93.2409L70.5918 83.1772L60.5254 83.1772L60.5254 93.2409L70.5918 93.2409Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M100.797 93.2636L100.797 73.1377L90.7305 73.1377L90.7305 93.2636L100.797 93.2636Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M90.7285 103.33L90.7285 93.2671L80.662 93.2671L80.662 103.33L90.7285 103.33Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M90.7285 22.8026L90.7285 12.74L80.662 12.74L80.662 22.8026L90.7285 22.8026Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M110.869 12.6108L110.869 2.54785L100.803 2.54785L100.803 12.6108L110.869 12.6108Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M120.934 103.326L120.934 73.1377L110.867 73.1377L110.867 103.326L120.934 103.326Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M110.869 113.384L110.869 103.321L100.803 103.321L100.803 113.384L110.869 113.384Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M161.328 52.9855L161.328 42.9226L151.262 42.9226L151.262 52.9855L161.328 52.9855Z"
|
||||
fill="black"
|
||||
/>
|
||||
<path
|
||||
d="M20.133 83.187L30.3354 83.187L30.3354 73.124L40.4017 73.124L40.4017 63.0613L50.4681 63.0613L50.4681 73.124L60.5345 73.124L60.5345 63.0613L70.6008 63.0613L80.6672 63.0613L131.135 63.0613L131.135 113.376L161.334 113.376L161.334 103.313L171.4 103.313L171.4 93.25L181.467 93.25L181.467 83.187L191.533 83.187L191.533 63.0613L181.467 63.0613L181.467 73.1241L171.4 73.1241L171.4 83.187L161.334 83.187L161.334 73.1241L171.4 73.1241L171.4 63.0613L161.334 63.0613L151.268 63.0613L141.201 63.0613L141.201 52.9983L141.201 32.8726L161.334 32.8726L171.4 32.8726L171.4 63.0613L181.467 63.0613L181.467 52.9983L191.533 52.9983L191.533 32.8726L181.467 32.8726L181.467 22.8096L171.4 22.8096L171.4 12.7467L161.334 12.7467L161.334 2.54785L141.201 2.54785L131.135 2.54785L131.135 52.9983L120.933 52.9983L120.933 12.7467L110.866 12.7467L110.866 52.9983L100.8 52.9983L100.8 22.8096L90.7336 22.8096L90.7336 52.9983L80.6672 52.9983L80.6672 32.8726L70.6008 32.8726L70.6008 52.9983L60.5345 52.9983L60.5345 42.9354L50.4681 42.9354L50.4681 52.9983L40.4017 52.9983L40.4017 42.9354L30.3354 42.9354L30.3354 32.8726L20.133 32.8726L20.133 22.8096L0.000308081 22.8096L0.000307201 42.9354L10.0666 42.9354L10.0666 52.9983L20.133 52.9983L20.133 63.0613L10.0666 63.0613L10.0666 73.124L0.000305881 73.124L0.000305002 93.25L20.133 93.25L20.133 83.187Z"
|
||||
fill="black"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="200" height="116" fill="none" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Nav = () => {
|
||||
const [windowWidth, setWindowWidth] = React.useState(window.innerWidth);
|
||||
const isDesktop = windowWidth > 959;
|
||||
@ -35,7 +99,7 @@ export const Nav = () => {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`p-16 ${
|
||||
className={`px-16 py-8 ${
|
||||
inverted
|
||||
? 'bg-clouds bg-no-repeat bg-cover bg-vega-yellow'
|
||||
: 'border-b-white border-b-1'
|
||||
@ -46,7 +110,7 @@ export const Nav = () => {
|
||||
{!isDesktop && <NavHeader fairground={inverted} />}
|
||||
<div className="flex gap-12 lg:flex-auto">
|
||||
{isDesktop ? (
|
||||
<NavLinks isDesktop={isDesktop} />
|
||||
<NavLinks isDesktop={isDesktop} isInverted={inverted} />
|
||||
) : (
|
||||
<NavDrawer inverted={inverted} />
|
||||
)}
|
||||
@ -60,15 +124,24 @@ const NavHeader = ({ fairground }: { fairground: boolean }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="h-[30px] inline-flex items-center lg:h-40 uppercase">
|
||||
<h1
|
||||
data-testid="header-title"
|
||||
className={`text-h3 font-alpha uppercase calt mb-2 ${
|
||||
fairground ? 'text-black' : 'text-white'
|
||||
}`}
|
||||
>
|
||||
{fairground ? t('fairgroundTitle') : t('title')}
|
||||
</h1>
|
||||
<div className="flex items-center gap-8">
|
||||
<Link to="/">
|
||||
{fairground ? (
|
||||
<Fish />
|
||||
) : (
|
||||
<img alt="Vega" src={vegaWhite} height={30} width={30} />
|
||||
)}
|
||||
</Link>
|
||||
<div className="h-[30px] inline-flex items-center lg:h-40 uppercase">
|
||||
<h1
|
||||
data-testid="header-title"
|
||||
className={`text-h4 sm:text-h3 font-alpha uppercase calt mb-2 ${
|
||||
fairground ? 'text-black' : 'text-white'
|
||||
}`}
|
||||
>
|
||||
{fairground ? t('fairgroundTitle') : t('title')}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -135,7 +208,13 @@ const NavDrawer = ({ inverted }: { inverted: boolean }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const NavLinks = ({ isDesktop }: { isDesktop: boolean }) => {
|
||||
const NavLinks = ({
|
||||
isDesktop,
|
||||
isInverted,
|
||||
}: {
|
||||
isDesktop: boolean;
|
||||
isInverted?: boolean;
|
||||
}) => {
|
||||
const { appDispatch } = useAppState();
|
||||
const { t } = useTranslation();
|
||||
const linkProps = {
|
||||
@ -163,18 +242,21 @@ const NavLinks = ({ isDesktop }: { isDesktop: boolean }) => {
|
||||
{...linkProps}
|
||||
to={route}
|
||||
key={route}
|
||||
className={({ isActive }) => {
|
||||
const linkClasses = classNames(
|
||||
'no-underline hover:no-underline',
|
||||
className={({ isActive }) =>
|
||||
classNames(
|
||||
'no-underline hover:no-underline focus-visible:outline-none focus-visible:border-none focus-visible:shadow-inset-white',
|
||||
{
|
||||
'bg-vega-yellow text-black hover:text-black': isActive,
|
||||
'bg-black text-white': !isActive,
|
||||
'bg-vega-yellow text-black': !isInverted && isActive,
|
||||
'bg-transparent text-white hover:text-vega-yellow':
|
||||
!isInverted && !isActive,
|
||||
'bg-black text-white': isInverted && isActive,
|
||||
'bg-transparent text-black hover:text-white':
|
||||
isInverted && !isActive,
|
||||
'py-2 px-12': isDesktop,
|
||||
'border-t border-white p-20': !isDesktop,
|
||||
}
|
||||
);
|
||||
return linkClasses;
|
||||
}}
|
||||
)
|
||||
}
|
||||
>
|
||||
{text}
|
||||
</NavLink>
|
||||
|
||||
@ -23,12 +23,8 @@ export const TransactionComplete = ({
|
||||
intent={Intent.Success}
|
||||
title={heading || t('Complete')}
|
||||
>
|
||||
{body && (
|
||||
<p className="mb-8" data-testid="transaction-complete-body">
|
||||
{body}
|
||||
</p>
|
||||
)}
|
||||
<p className="mb-8">
|
||||
{body && <p data-testid="transaction-complete-body">{body}</p>}
|
||||
<p>
|
||||
<Link
|
||||
title={t('View transaction on Etherscan')}
|
||||
target="_blank"
|
||||
|
||||
@ -20,11 +20,9 @@ export const TransactionError = ({
|
||||
|
||||
return (
|
||||
<Callout iconName="error" intent={Intent.Danger}>
|
||||
<p className="mb-8">
|
||||
{error ? error.message : t('Something went wrong')}
|
||||
</p>
|
||||
<p>{error ? error.message : t('Something went wrong')}</p>
|
||||
{hash ? (
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
<Link
|
||||
title={t('View transaction on Etherscan')}
|
||||
href={`${ETHERSCAN_URL}/tx/${hash}`}
|
||||
|
||||
@ -38,12 +38,8 @@ export const TransactionPending = ({
|
||||
}, [heading, remainingConfirmations, t]);
|
||||
return (
|
||||
<Callout icon={<Loader size="small" />} title={title}>
|
||||
{body && (
|
||||
<p className="mb-8" data-testid="transaction-pending-body">
|
||||
{body}
|
||||
</p>
|
||||
)}
|
||||
<p className="mb-8">
|
||||
{body && <p data-testid="transaction-pending-body">{body}</p>}
|
||||
<p>
|
||||
<Link
|
||||
title={t('View transaction on Etherscan')}
|
||||
target="_blank"
|
||||
|
||||
@ -5,18 +5,18 @@ import { Links } from '../../config';
|
||||
export const DownloadWalletPrompt = () => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<div className="mt-8">
|
||||
<h3>{t('getWallet')}</h3>
|
||||
<p>
|
||||
<>
|
||||
<h3 className="mt-12 mb-4">{t('getWallet')}</h3>
|
||||
<p className="mb-4">
|
||||
<Link className="text-deemphasise" href={Links.WALLET_GUIDE}>
|
||||
{t('readGuide')}
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<p className="mb-4">
|
||||
<Link className="text-deemphasise" href={Links.WALLET_RELEASES}>
|
||||
{t('downloadWallet')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -40,14 +40,16 @@ export const VegaWallet = () => {
|
||||
<section className="vega-wallet">
|
||||
<WalletCard dark={true}>
|
||||
<WalletCardHeader dark={true}>
|
||||
<div>
|
||||
<h1 className="text-h3 uppercase">{t('vegaWallet')}</h1>
|
||||
<span className="text-h6">{keypair && `(${keypair.name})`}</span>
|
||||
</div>
|
||||
<h1 className="col-start-1 m-0">{t('vegaWallet')}</h1>
|
||||
{keypair && (
|
||||
<span className="font-mono px-8">
|
||||
{truncateMiddle(keypair.pub)}
|
||||
</span>
|
||||
<>
|
||||
<div className="sm:row-start-2 sm:col-start-1 sm:col-span-2 text-h6 mb-12">
|
||||
{keypair.name}
|
||||
</div>
|
||||
<span className="sm:col-start-2 place-self-end font-mono pb-2 px-4">
|
||||
{truncateMiddle(keypair.pub)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</WalletCardHeader>
|
||||
<WalletCardContent>{child}</WalletCardContent>
|
||||
@ -128,6 +130,7 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
|
||||
<WalletCardActions>
|
||||
<Button
|
||||
variant="inline-link"
|
||||
className="mt-4"
|
||||
onClick={() =>
|
||||
appDispatch({
|
||||
type: AppStateActionType.SET_VEGA_WALLET_MANAGE_OVERLAY,
|
||||
|
||||
@ -29,10 +29,14 @@ interface WalletCardProps {
|
||||
}
|
||||
|
||||
export const WalletCard = ({ dark, children }: WalletCardProps) => {
|
||||
const className = classNames('text-ui border border-white', 'p-8', {
|
||||
'bg-black text-white': dark,
|
||||
'bg-white text-black': !dark,
|
||||
});
|
||||
const className = classNames(
|
||||
'text-ui border border-white',
|
||||
'pt-4 pl-8 pr-12 pb-12',
|
||||
{
|
||||
'bg-black text-white': dark,
|
||||
'bg-white text-black': !dark,
|
||||
}
|
||||
);
|
||||
return <div className={className}>{children}</div>;
|
||||
};
|
||||
|
||||
@ -43,7 +47,9 @@ interface WalletCardHeaderProps {
|
||||
|
||||
export const WalletCardHeader = ({ children }: WalletCardHeaderProps) => {
|
||||
return (
|
||||
<div className="flex gap-4 justify-between items-center">{children}</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-[auto_1fr] gap-4">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -145,23 +151,23 @@ export const WalletCardAsset = ({
|
||||
}`}
|
||||
/>
|
||||
<div>
|
||||
<div className="flex font-medium">
|
||||
<div className="flex font-medium align-center">
|
||||
<h1
|
||||
className={`text-h5 px-8 uppercase ${
|
||||
className={`text-h5 mb-0 px-8 uppercase leading-none ${
|
||||
dark ? 'text-white' : 'text-black'
|
||||
}`}
|
||||
>
|
||||
{name}
|
||||
</h1>
|
||||
<h2
|
||||
className={`text-h5 uppercase ${
|
||||
className={`text-h5 mb-0 uppercase leading-none ${
|
||||
dark ? 'text-white-60' : 'text-black-60'
|
||||
}`}
|
||||
>
|
||||
{subheading || symbol}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="px-8 text-h5 basis-full">
|
||||
<div className="px-8 text-h5 basis-full font-mono">
|
||||
<span>{integers}.</span>
|
||||
<span className={dark ? 'text-white-60' : 'text-black-60'}>
|
||||
{decimalsPlaces}
|
||||
|
||||
@ -79,7 +79,7 @@ export const Web3Content = ({ children, appChainId }: Web3ContentProps) => {
|
||||
return (
|
||||
<Splash>
|
||||
<div className="flex flex-col items-center gap-12">
|
||||
<p className="mb-12">This app only works on chain ID: {appChainId}</p>
|
||||
<p>This app only works on chain ID: {appChainId}</p>
|
||||
<Button onClick={() => connector.deactivate()}>Disconnect</Button>
|
||||
</div>
|
||||
</Splash>
|
||||
|
||||
@ -10,7 +10,7 @@ export const ProposalTermsJson = ({
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<section>
|
||||
<h2 className="text-h4 text-white mb-8">{t('proposalTerms')}</h2>
|
||||
<h2>{t('proposalTerms')}</h2>
|
||||
<SyntaxHighlighter data={terms} />
|
||||
</section>
|
||||
);
|
||||
|
||||
@ -23,10 +23,10 @@ export const ProposalsList = ({ proposals }: ProposalsListProps) => {
|
||||
return (
|
||||
<>
|
||||
<Heading title={t('pageTitleGovernance')} />
|
||||
<p className="mb-8">{t('proposedChangesToVegaNetwork')}</p>
|
||||
<p className="mb-8">{t('vegaTokenHoldersCanVote')}</p>
|
||||
<p className="mb-8">{t('requiredMajorityDescription')}</p>
|
||||
<h2 className="text-h4 text-white">{t('proposals')}</h2>
|
||||
<p>{t('proposedChangesToVegaNetwork')}</p>
|
||||
<p>{t('vegaTokenHoldersCanVote')}</p>
|
||||
<p>{t('requiredMajorityDescription')}</p>
|
||||
<h2>{t('proposals')}</h2>
|
||||
<ul>
|
||||
{proposals.map((proposal) => (
|
||||
<ProposalListItem proposal={proposal} />
|
||||
|
||||
@ -45,7 +45,7 @@ export const VoteDetails = ({ proposal }: VoteDetailsProps) => {
|
||||
return (
|
||||
<section>
|
||||
<h3 className="text-h4 text-white mb-8">{t('votes')}</h3>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
<span>
|
||||
<CurrentProposalStatus proposal={proposal} />
|
||||
</span>
|
||||
@ -90,7 +90,7 @@ export const VoteDetails = ({ proposal }: VoteDetailsProps) => {
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
{t('participation')}
|
||||
{': '}
|
||||
{participationMet ? (
|
||||
|
||||
@ -42,13 +42,13 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
/>
|
||||
</HomeSection>
|
||||
<HomeSection>
|
||||
<h2 className="text-h4 text-white">{t('Token Vesting')}</h2>
|
||||
<p className="mb-8">
|
||||
<h2>{t('Token Vesting')}</h2>
|
||||
<p>
|
||||
{t(
|
||||
'The vesting contract holds VEGA tokens until they have become unlocked.'
|
||||
)}
|
||||
</p>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey="Tokens are held in different <trancheLink>Tranches</trancheLink>. Each tranche has its own schedule for how the tokens are unlocked."
|
||||
components={{
|
||||
@ -62,7 +62,7 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
{t(
|
||||
'Once unlocked they can be redeemed from the contract so that you can transfer them between wallets.'
|
||||
)}
|
||||
@ -74,13 +74,13 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
</Link>
|
||||
</HomeSection>
|
||||
<HomeSection>
|
||||
<h2 className="text-h4 text-white">{t('Use your Vega tokens')}</h2>
|
||||
<p className="mb-8">
|
||||
<h2 className="uppercase">{t('Use your Vega tokens')}</h2>
|
||||
<p>
|
||||
{t(
|
||||
'To use your tokens on the Vega network they need to be associated with a Vega wallet/key.'
|
||||
)}
|
||||
</p>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
{t(
|
||||
'This can happen both while held in the vesting contract as well as when redeemed.'
|
||||
)}
|
||||
@ -109,8 +109,8 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
<div className="flex gap-40">
|
||||
<div className="flex-1">
|
||||
<HomeSection>
|
||||
<h2 className="text-h4 text-white">{t('Staking')}</h2>
|
||||
<p className="mb-8">
|
||||
<h2>{t('Staking')}</h2>
|
||||
<p>
|
||||
{t(
|
||||
'VEGA token holders can nominate a validator node and receive staking rewards.'
|
||||
)}
|
||||
@ -129,8 +129,8 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<HomeSection>
|
||||
<h2 className="text-h4 text-white">{t('Governance')}</h2>
|
||||
<p className="mb-8">
|
||||
<h2>{t('Governance')}</h2>
|
||||
<p>
|
||||
{t(
|
||||
'VEGA token holders can vote on proposed changes to the network and create proposals.'
|
||||
)}
|
||||
@ -155,5 +155,5 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
export default Home;
|
||||
|
||||
export const HomeSection = ({ children }: { children: React.ReactNode }) => {
|
||||
return <section className="mb-20">{children}</section>;
|
||||
return <section className="mb-28">{children}</section>;
|
||||
};
|
||||
|
||||
@ -37,7 +37,7 @@ export const TokenDetailsCirculating = ({
|
||||
}) => {
|
||||
const totalCirculating = sumCirculatingTokens(tranches);
|
||||
return (
|
||||
<span data-testid="circulating-supply">
|
||||
<span data-testid="circulating-supply" className="font-mono">
|
||||
{formatNumber(totalCirculating, 2)}
|
||||
</span>
|
||||
);
|
||||
|
||||
@ -42,13 +42,13 @@ export const TokenDetails = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<KeyValueTable className={'token-details'}>
|
||||
<KeyValueTable className={'token-details text-white'}>
|
||||
<KeyValueTableRow>
|
||||
{t('Token address').toUpperCase()}
|
||||
<Link
|
||||
data-testid="token-address"
|
||||
title={t('View on Etherscan (opens in a new tab)')}
|
||||
className="font-mono"
|
||||
className="font-mono text-white text-right"
|
||||
href={`${ETHERSCAN_URL}/address/${token.address}`}
|
||||
>
|
||||
{token.address}
|
||||
@ -59,7 +59,7 @@ export const TokenDetails = ({
|
||||
<Link
|
||||
data-testid="token-contract"
|
||||
title={t('View on Etherscan (opens in a new tab)')}
|
||||
className="font-mono"
|
||||
className="font-mono text-white text-right"
|
||||
href={`${ETHERSCAN_URL}/address/${config.token_vesting_contract.address}`}
|
||||
>
|
||||
{config.token_vesting_contract.address}
|
||||
@ -67,7 +67,9 @@ export const TokenDetails = ({
|
||||
</KeyValueTableRow>
|
||||
<KeyValueTableRow>
|
||||
{t('Total supply').toUpperCase()}
|
||||
<span data-testid="total-supply">{formatNumber(totalSupply, 2)}</span>
|
||||
<span className="font-mono" data-testid="total-supply">
|
||||
{formatNumber(totalSupply, 2)}
|
||||
</span>
|
||||
</KeyValueTableRow>
|
||||
<KeyValueTableRow>
|
||||
{t('Circulating supply').toUpperCase()}
|
||||
@ -75,7 +77,9 @@ export const TokenDetails = ({
|
||||
</KeyValueTableRow>
|
||||
<KeyValueTableRow>
|
||||
{t('Staked on Vega validator').toUpperCase()}
|
||||
<span data-testid="staked">{formatNumber(totalStaked, 2)}</span>
|
||||
<span data-testid="staked" className="font-mono">
|
||||
{formatNumber(totalStaked, 2)}
|
||||
</span>
|
||||
</KeyValueTableRow>
|
||||
</KeyValueTable>
|
||||
);
|
||||
|
||||
@ -55,16 +55,18 @@ export const RedemptionInformation = () => {
|
||||
if (!filteredTranches.length) {
|
||||
return (
|
||||
<section data-testid="redemption-page">
|
||||
<p className="mb-12" data-testid="redemption-no-balance">
|
||||
<Trans
|
||||
i18nKey="noVestingTokens"
|
||||
components={{
|
||||
tranchesLink: (
|
||||
<Link className="underline text-white" to={Routes.TRANCHES} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
<div className="mb-20">
|
||||
<p data-testid="redemption-no-balance">
|
||||
<Trans
|
||||
i18nKey="noVestingTokens"
|
||||
components={{
|
||||
tranchesLink: (
|
||||
<Link className="underline text-white" to={Routes.TRANCHES} />
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<AddLockedTokenAddress />
|
||||
</section>
|
||||
);
|
||||
@ -92,9 +94,7 @@ export const RedemptionInformation = () => {
|
||||
vested={totalVestedBalance}
|
||||
/>
|
||||
</div>
|
||||
{filteredTranches.length ? (
|
||||
<h2 className="text-h4 text-white mb-12">{t('Tranche breakdown')}</h2>
|
||||
) : null}
|
||||
{filteredTranches.length ? <h2>{t('Tranche breakdown')}</h2> : null}
|
||||
{zeroTranche && (
|
||||
<Tranche0Table
|
||||
trancheId={0}
|
||||
@ -133,7 +133,7 @@ export const RedemptionInformation = () => {
|
||||
iconName="hand-up"
|
||||
intent={Intent.Warning}
|
||||
>
|
||||
<p className="mb-12">{t('Find out more about Staking.')}</p>
|
||||
<p>{t('Find out more about Staking.')}</p>
|
||||
<Link to="/staking" className="underline text-white">
|
||||
{t('Stake VEGA tokens')}
|
||||
</Link>
|
||||
|
||||
@ -68,7 +68,7 @@ const RedemptionRouter = () => {
|
||||
if (!account) {
|
||||
return (
|
||||
<EthConnectPrompt>
|
||||
<p data-testid="eth-connect-prompt" className="mb-8">
|
||||
<p data-testid="eth-connect-prompt">
|
||||
{t(
|
||||
"Use the Ethereum wallet you want to send your tokens to. You'll also need enough Ethereum to pay gas."
|
||||
)}
|
||||
|
||||
@ -73,7 +73,7 @@ export const RedeemFromTranche = () => {
|
||||
!trancheBalance
|
||||
) {
|
||||
return (
|
||||
<section data-testid="redemption-page">
|
||||
<section data-testid="redemption-page" className="mb-28">
|
||||
<p data-testid="redemption-no-balance">
|
||||
<Trans
|
||||
i18nKey="noVestingTokens"
|
||||
@ -99,7 +99,7 @@ export const RedeemFromTranche = () => {
|
||||
}
|
||||
completeBody={
|
||||
<>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
{t(
|
||||
'You have redeemed {{redeemedAmount}} VEGA tokens from this tranche. They are now free to transfer from your Ethereum wallet.',
|
||||
{
|
||||
@ -107,7 +107,7 @@ export const RedeemFromTranche = () => {
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
{t(
|
||||
'The VEGA token address is {{address}}, make sure you add this to your wallet to see your tokens',
|
||||
{
|
||||
|
||||
@ -109,8 +109,8 @@ export const RewardsIndex = () => {
|
||||
return (
|
||||
<section className="rewards">
|
||||
<Heading title={t('pageTitleRewards')} />
|
||||
<p className="mb-8">{t('rewardsPara1')}</p>
|
||||
<p className="mb-8">{t('rewardsPara2')}</p>
|
||||
<p>{t('rewardsPara1')}</p>
|
||||
<p>{t('rewardsPara2')}</p>
|
||||
{payoutDuration ? (
|
||||
<div className="my-24">
|
||||
<Callout
|
||||
|
||||
@ -64,7 +64,7 @@ export const RewardInfo = ({
|
||||
|
||||
return (
|
||||
<div className="mt-24">
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
{t('Connected Vega key')}: {currVegaKey.pub}
|
||||
</p>
|
||||
{vegaTokenRewards.length ? (
|
||||
|
||||
@ -13,7 +13,7 @@ export const AssociateInfo = ({ pubKey }: { pubKey: string | null }) => {
|
||||
{t('What Vega key is going to control your stake?')}
|
||||
</h2>
|
||||
<ConnectedVegaKey pubKey={pubKey} />
|
||||
<h2 className="text-h4 text-white" data-testid="associate-amount-header">
|
||||
<h2 data-testid="associate-amount-header">
|
||||
{t('How much would you like to associate?')}
|
||||
</h2>
|
||||
</>
|
||||
|
||||
@ -62,13 +62,13 @@ export const AssociateTransaction = ({
|
||||
if (derivedTxState === TxState.Pending) {
|
||||
return (
|
||||
<Callout icon={<Loader size="small" />} title={title}>
|
||||
<p data-testid="transaction-pending-body" className="mb-8">
|
||||
<p data-testid="transaction-pending-body">
|
||||
{t('Associating {{amount}} VEGA tokens with Vega key {{vegaKey}}', {
|
||||
amount,
|
||||
vegaKey: truncateMiddle(vegaKey),
|
||||
})}
|
||||
</p>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
<Link
|
||||
title={t('View transaction on Etherscan')}
|
||||
href={`${ETHERSCAN_URL}/tx/${state.txData.hash}`}
|
||||
@ -77,7 +77,7 @@ export const AssociateTransaction = ({
|
||||
{t('View on Etherscan (opens in a new tab)')}
|
||||
</Link>
|
||||
</p>
|
||||
<p data-testid="transaction-pending-footer" className="mb-8">
|
||||
<p data-testid="transaction-pending-footer">
|
||||
{t('pendingAssociationText', {
|
||||
confirmations: requiredConfirmations,
|
||||
})}
|
||||
|
||||
@ -60,24 +60,20 @@ export const DisassociatePage = ({
|
||||
|
||||
return (
|
||||
<section className="disassociate-page" data-testid="disassociate-page">
|
||||
<p className="mb-12">
|
||||
<p>
|
||||
{t(
|
||||
'Use this form to disassociate VEGA tokens with a Vega key. This returns them to either the Ethereum wallet that used the Staking bridge or the vesting contract.'
|
||||
)}
|
||||
</p>
|
||||
<p className="mb-12">
|
||||
<p>
|
||||
<span className="text-vega-red">{t('Warning')}:</span>{' '}
|
||||
{t(
|
||||
'Any Tokens that have been nominated to a node will sacrifice any Rewards they are due for the current epoch. If you do not wish to sacrifices fees you should remove stake from a node at the end of an epoch before disassocation.'
|
||||
)}
|
||||
</p>
|
||||
<h2 className="text-h4 text-white mb-8">
|
||||
{t('What Vega wallet are you removing Tokens from?')}
|
||||
</h2>
|
||||
<h2>{t('What Vega wallet are you removing Tokens from?')}</h2>
|
||||
<ConnectedVegaKey pubKey={vegaKey.pub} />
|
||||
<h2 className="text-h4 text-white mb-8">
|
||||
{t('What tokens would you like to return?')}
|
||||
</h2>
|
||||
<h2>{t('What tokens would you like to return?')}</h2>
|
||||
<StakingMethodRadio
|
||||
setSelectedStakingMethod={setSelectedStakingMethod}
|
||||
selectedStakingMethod={selectedStakingMethod}
|
||||
|
||||
@ -223,7 +223,7 @@ export const StakingForm = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2 className="text-h4 mb-8">{t('Manage your stake')}</h2>
|
||||
<h2>{t('Manage your stake')}</h2>
|
||||
<FormGroup>
|
||||
<RadioGroup
|
||||
onChange={(value) => {
|
||||
@ -254,9 +254,7 @@ export const StakingForm = ({
|
||||
<>
|
||||
{action === Actions.Add ? (
|
||||
<>
|
||||
<h2 className="text-h4 mb-8">
|
||||
{t('How much to Add in next epoch?')}
|
||||
</h2>
|
||||
<h2>{t('How much to Add in next epoch?')}</h2>
|
||||
<p>
|
||||
{t('minimumNomination', {
|
||||
minTokens: minTokensWithDecimals,
|
||||
|
||||
@ -96,10 +96,7 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2
|
||||
data-test-id="validator-node-title"
|
||||
className="text-h4 break-word mb-8"
|
||||
>
|
||||
<h2 data-test-id="validator-node-title" className="text-h4 break-word">
|
||||
{nodeInfo.name
|
||||
? t('validatorTitle', { nodeName: nodeInfo.name })
|
||||
: t('validatorTitle', { nodeName: t('validatorTitleFallback') })}
|
||||
|
||||
@ -19,17 +19,19 @@ import { NodeList } from './node-list';
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
import { truncateMiddle } from '../../lib/truncate-middle';
|
||||
|
||||
const stakingBulletStyles = { marginBottom: '12px', fontSize: '18px' };
|
||||
|
||||
export const Staking = ({ data }: { data?: StakingQueryResult }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="mb-24">
|
||||
<p className="mb-12">{t('stakingDescription1')}</p>
|
||||
<p className="mb-12">{t('stakingDescription2')}</p>
|
||||
<p className="mb-12">{t('stakingDescription3')}</p>
|
||||
<p className="mb-12">{t('stakingDescription4')}</p>
|
||||
<p className="mb-12">
|
||||
<p>{t('stakingDescription1')}</p>
|
||||
<p>{t('stakingDescription2')}</p>
|
||||
<p>{t('stakingDescription3')}</p>
|
||||
<p>{t('stakingDescription4')}</p>
|
||||
<p>
|
||||
<Link
|
||||
href={Links.STAKING_GUIDE}
|
||||
className="text-white underline"
|
||||
@ -41,11 +43,15 @@ export const Staking = ({ data }: { data?: StakingQueryResult }) => {
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<BulletHeader tag="h2">{t('stakingStep1')}</BulletHeader>
|
||||
<BulletHeader tag="h2" style={stakingBulletStyles}>
|
||||
{t('stakingStep1')}
|
||||
</BulletHeader>
|
||||
<StakingStepConnectWallets />
|
||||
</section>
|
||||
<section>
|
||||
<BulletHeader tag="h2">{t('stakingStep1')}</BulletHeader>
|
||||
<BulletHeader tag="h2" style={stakingBulletStyles}>
|
||||
{t('stakingStep2')}
|
||||
</BulletHeader>
|
||||
<StakingStepAssociate
|
||||
associated={
|
||||
new BigNumber(
|
||||
@ -55,7 +61,9 @@ export const Staking = ({ data }: { data?: StakingQueryResult }) => {
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<BulletHeader tag="h2">{t('stakingStep3')}</BulletHeader>
|
||||
<BulletHeader tag="h2" style={stakingBulletStyles}>
|
||||
{t('stakingStep3')}
|
||||
</BulletHeader>
|
||||
<StakingStepSelectNode data={data} />
|
||||
</section>
|
||||
</>
|
||||
@ -82,7 +90,7 @@ export const StakingStepConnectWallets = () => {
|
||||
{truncateMiddle(account)}
|
||||
</Link>
|
||||
</p>
|
||||
<p>
|
||||
<p className="mb-8">
|
||||
{t('stakingVegaWalletConnected', {
|
||||
key: truncateMiddle(keypair.pub),
|
||||
})}
|
||||
@ -93,7 +101,7 @@ export const StakingStepConnectWallets = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey="stakingStep1Text"
|
||||
components={{
|
||||
@ -116,7 +124,7 @@ export const StakingStepConnectWallets = () => {
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mb-8">
|
||||
<p>
|
||||
<Button
|
||||
onClick={() =>
|
||||
appDispatch({
|
||||
|
||||
@ -17,7 +17,7 @@ export const YourStake = ({
|
||||
|
||||
return (
|
||||
<div data-testid="your-stake">
|
||||
<h2 className="text-h4 mb-8">{t('Your stake')}</h2>
|
||||
<h2>{t('Your stake')}</h2>
|
||||
<KeyValueTable>
|
||||
<KeyValueTableRow>
|
||||
{t('Your Stake On Node (This Epoch)')}
|
||||
|
||||
@ -67,7 +67,7 @@ export const Tranche = () => {
|
||||
{formatNumber(tranche.total_removed)}
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-h4 text-white mb-8">{t('Holders')}</h2>
|
||||
<h2>{t('Holders')}</h2>
|
||||
{tranche.users.length ? (
|
||||
<ul role="list">
|
||||
{tranche.users.map((user, i) => {
|
||||
|
||||
@ -29,10 +29,10 @@ export const Tranches = () => {
|
||||
|
||||
return (
|
||||
<section>
|
||||
<h2 className="text-h4">{t('chartTitle')}</h2>
|
||||
<p className="mb-12">{t('chartAbove')}</p>
|
||||
<h2>{t('chartTitle')}</h2>
|
||||
<p>{t('chartAbove')}</p>
|
||||
<VestingChart />
|
||||
<p className="mb-12">{t('chartBelow')}</p>
|
||||
<p>{t('chartBelow')}</p>
|
||||
{tranches?.length ? (
|
||||
<ul role="list">
|
||||
{(showAll ? tranches : filteredTranches).map((tranche) => {
|
||||
|
||||
@ -23,7 +23,7 @@ const Withdraw = () => {
|
||||
return (
|
||||
<>
|
||||
<Heading title={t('withdrawPageHeading')} />
|
||||
<p className="mb-8">{t('withdrawPageText')}</p>
|
||||
<p>{t('withdrawPageText')}</p>
|
||||
<div className="mb-24">
|
||||
<VegaWalletContainer>
|
||||
{(currVegaKey) => <WithdrawContainer currVegaKey={currVegaKey} />}
|
||||
@ -141,7 +141,7 @@ export const WithdrawContainer = ({ currVegaKey }: WithdrawContainerProps) => {
|
||||
title={t('pendingWithdrawalsCalloutTitle')}
|
||||
intent={Intent.Warning}
|
||||
>
|
||||
<p className="mb-8">{t('pendingWithdrawalsCalloutText')}</p>
|
||||
<p>{t('pendingWithdrawalsCalloutText')}</p>
|
||||
<p>
|
||||
<Link to={Routes.WITHDRAWALS} className="underline text-white">
|
||||
{t('pendingWithdrawalsCalloutButton')}
|
||||
|
||||
@ -74,7 +74,7 @@ const WithdrawPendingContainer = () => {
|
||||
return (
|
||||
<>
|
||||
<h2>{t('withdrawalsPreparedWarningHeading')}</h2>
|
||||
<p className="mb-8">{t('withdrawalsText')}</p>
|
||||
<p>{t('withdrawalsText')}</p>
|
||||
<p className="mb-28">{t('withdrawalsPreparedWarningText')}</p>
|
||||
<ul role="list">
|
||||
{withdrawals.map((w) => (
|
||||
|
||||
@ -1,3 +1,15 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
h1 {
|
||||
@apply text-h3 text-white uppercase mb-12;
|
||||
}
|
||||
h2 {
|
||||
@apply text-h4 text-white mb-8;
|
||||
}
|
||||
p {
|
||||
@apply mb-12;
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,6 +47,7 @@ export const getButtonClasses = (
|
||||
const commonButtonClasses = classnames(
|
||||
'relative disabled:static',
|
||||
'text-ui font-semibold focus-visible:outline-none border no-underline hover:no-underline',
|
||||
'py-[3px]',
|
||||
{
|
||||
'shadow-none': !boxShadow,
|
||||
'shadow-[3px_3px_0_0] focus-visible:shadow-vega-pink dark:focus-visible:shadow-vega-yellow active:top-[1px] active:left-[1px] active:shadow-[2px_2px_0_0]':
|
||||
@ -73,7 +74,7 @@ export const getButtonClasses = (
|
||||
const standardButtonBorderWidth = `${
|
||||
borderWidthProvided ? borderWidthProvided : 'border'
|
||||
}`;
|
||||
const buttonHeight = `${heightProvided ? heightProvided : 'h-28'}`;
|
||||
const buttonHeight = `${heightProvided ? heightProvided : ''}`;
|
||||
|
||||
const primaryClasses = [
|
||||
sharedClasses,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user