Feat/304 token scss to tailwind - part 1 (#327)
* Converted app.scss * Made a start converting styles.scss * commenting out unused colours - test for now * restoring font-family * Added correct text colour and height to top level elements * Eth connect button styling * Truncated wallet key on staking screen (had been causing overflow) * Tranches Scss to tailwind * Withdraw form Scss to tailwind * Part way done with staking Scss to tailwind * Removed redundant containerClass prop from epoch-countdown * Cleanup of colors part 1 * Ran prettier * Changes from the MR - removed epoch-countdown styles (apart from blueprint, which has moved to styles.scss) * Changes from mr - removed extra button size classes (to be replaced with a prop later) * Changes from mr - allow Tailwind's default list styles. Added role="list" for accessibility * Border-box applied via wildcard again * MR tweaks * Removing the eslint warning for using role="list" on unstyled lists * Correctly naming the jsx-ally plugin in the eslintrc file so that rules were correctly applied * Removed redundant 'list-none' classes as Tailwind applies this by default for lists
This commit is contained in:
Sam Keen
GitHub
parent
1bb7c23c6e
commit
6eb52c9a65
@ -1,7 +1,7 @@
|
||||
{
|
||||
"root": true,
|
||||
"ignorePatterns": ["**/*"],
|
||||
"plugins": ["@nrwl/nx", "eslint-plugin-unicorn"],
|
||||
"plugins": ["@nrwl/nx", "eslint-plugin-unicorn", "jsx-a11y"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
|
||||
@ -33,6 +33,13 @@
|
||||
"message": "Import the specific methods you need from lodash e.g. `import get from 'lodash/get'`. This helps with bundle sizing."
|
||||
}
|
||||
],
|
||||
"jsx-a11y/no-redundant-roles": [
|
||||
"error",
|
||||
{
|
||||
"ul": ["list"],
|
||||
"ol": ["list"]
|
||||
}
|
||||
],
|
||||
"curly": "warn"
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
@import './styles/colors';
|
||||
|
||||
.app {
|
||||
max-width: 1300px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-rows: min-content 1fr min-content;
|
||||
min-height: 100%;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
border-left: 1px solid $white;
|
||||
border-right: 1px solid $white;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import './i18n';
|
||||
import './app.scss';
|
||||
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
@ -35,7 +34,7 @@ function App() {
|
||||
<AppLoader>
|
||||
<BalanceManager>
|
||||
<>
|
||||
<div className="app dark">
|
||||
<div className="app dark max-w-[1300px] mx-auto my-0 grid grid-rows-[min-content_1fr_min-content] min-h-full lg:border-l-1 lg:border-r-1 lg:border-white font-sans text-body lg:text-body-large text-white-80">
|
||||
<AppBanner />
|
||||
<TemplateSidebar sidebar={sideBar}>
|
||||
<AppRouter />
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
@import '../../styles/colors';
|
||||
|
||||
.epoch-countdown {
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
||||
.bp3-progress-bar {
|
||||
border: 1px solid $white;
|
||||
border-radius: 0;
|
||||
height: 21px;
|
||||
|
||||
.bp3-progress-meter {
|
||||
border-radius: 0;
|
||||
|
||||
.bp3-dark & {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
h3:first-child {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__time-range {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './epoch-countdown.scss';
|
||||
|
||||
import { Intent, ProgressBar } from '@blueprintjs/core';
|
||||
import { format, formatDistanceStrict } from 'date-fns';
|
||||
import * as React from 'react';
|
||||
@ -12,14 +10,12 @@ export interface EpochCountdownProps {
|
||||
id: string;
|
||||
startDate: Date;
|
||||
endDate: Date;
|
||||
containerClass?: string;
|
||||
}
|
||||
|
||||
export function EpochCountdown({
|
||||
id,
|
||||
startDate,
|
||||
endDate,
|
||||
containerClass,
|
||||
}: EpochCountdownProps) {
|
||||
const { t } = useTranslation();
|
||||
const [now, setNow] = React.useState(Date.now());
|
||||
@ -61,15 +57,12 @@ export function EpochCountdown({
|
||||
}, [endDate]);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="epoch-countdown"
|
||||
className={`${containerClass} epoch-countdown`}
|
||||
>
|
||||
<div className="epoch-countdown__title">
|
||||
<h3>
|
||||
<div data-testid="epoch-countdown" className="epoch-countdown pt-20">
|
||||
<div className="flex items-end">
|
||||
<h3 className="flex-1 font-normal mb-4">
|
||||
{t('Epoch')} {id}
|
||||
</h3>
|
||||
<p>
|
||||
<p className="text-ui-small mb-4">
|
||||
{endsIn
|
||||
? t('Next epoch in {{endText}}', { endText: endsIn })
|
||||
: t('Awaiting next epoch')}
|
||||
@ -81,10 +74,14 @@ export function EpochCountdown({
|
||||
stripes={false}
|
||||
intent={Intent.NONE}
|
||||
/>
|
||||
<div className="epoch-countdown__time-range">
|
||||
<div className="flex mt-4 text-ui-small">
|
||||
<p>{format(startDate, DATE_FORMAT_DETAILED)}</p>
|
||||
<div className="epoch-countdown__arrow">
|
||||
<img alt="arrow" src={arrow} />
|
||||
<div className="flex-1 text-center">
|
||||
<img
|
||||
className="inline-block w-[5px] rotate-180"
|
||||
alt="arrow"
|
||||
src={arrow}
|
||||
/>
|
||||
</div>
|
||||
<p>{format(endDate, DATE_FORMAT_DETAILED)}</p>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,6 @@ export const EthConnectPrompt = ({ children }: EthConnectPrompProps) => {
|
||||
isOpen: true,
|
||||
})
|
||||
}
|
||||
className="fill"
|
||||
data-testid="connect-to-eth-btn"
|
||||
>
|
||||
{t('connectEthWallet')}
|
||||
|
||||
@ -23,7 +23,7 @@ export const EthWalletContainer = ({ children }: EthWalletContainerProps) => {
|
||||
if (!account) {
|
||||
return (
|
||||
<Button
|
||||
className="eth-wallet-container fill"
|
||||
className="eth-wallet-container"
|
||||
data-testid="connect-to-eth-btn"
|
||||
onClick={() =>
|
||||
appDispatch({
|
||||
|
||||
@ -164,14 +164,10 @@ const ConnectedKey = () => {
|
||||
)}
|
||||
<WalletCardActions>
|
||||
<Link style={{ flex: 1 }} to={`${Routes.STAKING}/associate`}>
|
||||
<Button variant="primary" className="h-auto py-12 w-full">
|
||||
{t('associate')}
|
||||
</Button>
|
||||
<Button variant="primary">{t('associate')}</Button>
|
||||
</Link>
|
||||
<Link style={{ flex: 1 }} to={`${Routes.STAKING}/disassociate`}>
|
||||
<Button variant="primary" className="h-auto py-12 w-full">
|
||||
{t('disassociate')}
|
||||
</Button>
|
||||
<Button variant="primary">{t('disassociate')}</Button>
|
||||
</Link>
|
||||
</WalletCardActions>
|
||||
</>
|
||||
|
||||
@ -22,7 +22,6 @@ export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
|
||||
return (
|
||||
<p>
|
||||
<Button
|
||||
className="w-full py-12 h-auto text-h5"
|
||||
onClick={() =>
|
||||
appDispatch({
|
||||
type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
|
||||
|
||||
@ -73,7 +73,6 @@ const VegaWalletNotConnected = () => {
|
||||
isOpen: true,
|
||||
})
|
||||
}
|
||||
className="fill w-full py-12 h-auto"
|
||||
variant="secondary"
|
||||
data-testid="connect-vega"
|
||||
>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="bg-black w-full h-full">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" href="//static.vega.xyz/fonts.css" />
|
||||
@ -20,9 +20,9 @@
|
||||
<title>Vega Token dApp</title>
|
||||
<link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
|
||||
</head>
|
||||
<body>
|
||||
<body class="h-full">
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root" className="bp3-dark"></div>
|
||||
<div id="root" class="bp3-dark h-full"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
@ -62,11 +62,7 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
)}
|
||||
</p>
|
||||
<Link to={Routes.VESTING}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
data-test-id="check-vesting-page-btn"
|
||||
className="fill py-12 h-auto w-full"
|
||||
>
|
||||
<Button variant="secondary" data-test-id="check-vesting-page-btn">
|
||||
{t('Check to see if you can redeem unlocked VEGA tokens')}
|
||||
</Button>
|
||||
</Link>
|
||||
@ -106,9 +102,7 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
)}
|
||||
</p>
|
||||
<Link to={Routes.STAKING}>
|
||||
<Button variant="secondary" className="py-12 h-auto w-full">
|
||||
{t('Nominate a validator')}
|
||||
</Button>
|
||||
<Button variant="secondary">{t('Nominate a validator')}</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
@ -120,7 +114,7 @@ const Home = ({ name }: RouteChildProps) => {
|
||||
</p>
|
||||
<p>
|
||||
<Link to={Routes.GOVERNANCE}>
|
||||
<Button variant="secondary" className="py-12 h-auto w-full">
|
||||
<Button variant="secondary">
|
||||
{t('View Governance proposals')}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
@ -130,7 +130,6 @@ export const RewardsIndex = () => {
|
||||
data.epoch.timestamps.start &&
|
||||
data.epoch.timestamps.expiry && (
|
||||
<EpochCountdown
|
||||
containerClass="staking-node__epoch"
|
||||
// eslint-disable-next-line
|
||||
id={data!.epoch.id}
|
||||
startDate={new Date(data.epoch.timestamps.start)}
|
||||
@ -147,7 +146,7 @@ export const RewardsIndex = () => {
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
className="mt-12 w-full py-12 h-auto text-h5"
|
||||
className="mt-12"
|
||||
onClick={() =>
|
||||
appDispatch({
|
||||
type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
|
||||
|
||||
@ -18,7 +18,6 @@ export const ConnectToVega = () => {
|
||||
isOpen: true,
|
||||
})
|
||||
}
|
||||
className="w-full py-12 h-auto text-h5"
|
||||
data-test-id="connect-to-vega-wallet-btn"
|
||||
>
|
||||
{t('connectVegaWallet')}
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
@import '../../styles/colors';
|
||||
@import '../../styles/fonts';
|
||||
|
||||
.node-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
margin-top: 24px;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
word-break: break-all;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
table {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border-collapse: collapse;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
tr {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
flex: 1;
|
||||
word-break: break-word;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $text-color-deemphasise;
|
||||
font-weight: normal;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
td {
|
||||
font-family: $font-mono;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__item-name {
|
||||
margin-right: 3px;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&__item-id {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './node-list.scss';
|
||||
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
import { Callout, Intent } from '@vegaprotocol/ui-toolkit';
|
||||
import React from 'react';
|
||||
@ -47,6 +45,26 @@ export const NODES_QUERY = gql`
|
||||
}
|
||||
`;
|
||||
|
||||
const NodeListItemName = ({ children }: { children: React.ReactNode }) => (
|
||||
<span className="mr-4 underline">{children}</span>
|
||||
);
|
||||
|
||||
const NodeListTr = ({ children }: { children: React.ReactNode }) => (
|
||||
<tr className="flex">{children}</tr>
|
||||
);
|
||||
|
||||
const NodeListTh = ({ children }: { children: React.ReactNode }) => (
|
||||
<th className="flex-1 break-words py-1 pr-4 pl-0 text-white-60 font-normal">
|
||||
{children}
|
||||
</th>
|
||||
);
|
||||
|
||||
const NodeListTd = ({ children }: { children: React.ReactNode }) => (
|
||||
<td className="flex-1 break-words py-1 px-4 font-mono text-right">
|
||||
{children}
|
||||
</td>
|
||||
);
|
||||
|
||||
interface NodeListProps {
|
||||
epoch: Staking_epoch | undefined;
|
||||
party: Staking_party | null | undefined;
|
||||
@ -121,13 +139,12 @@ export const NodeList = ({ epoch, party }: NodeListProps) => {
|
||||
<>
|
||||
{epoch && epoch.timestamps.start && epoch.timestamps.expiry && (
|
||||
<EpochCountdown
|
||||
containerClass="staking-node__epoch"
|
||||
id={epoch.id}
|
||||
startDate={new Date(epoch.timestamps.start)}
|
||||
endDate={new Date(epoch.timestamps.expiry)}
|
||||
/>
|
||||
)}
|
||||
<ul className="node-list">
|
||||
<ul role="list" className="mt-24">
|
||||
{nodes.map((n, i) => {
|
||||
return <NodeListItem key={i} {...n} />;
|
||||
})}
|
||||
@ -156,36 +173,34 @@ export const NodeListItem = ({
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<li data-testid="node-list-item">
|
||||
<li
|
||||
className="break-words flex flex-col justify-between mb-16 last:mb-0"
|
||||
data-testid="node-list-item"
|
||||
>
|
||||
<Link to={id}>
|
||||
{name ? (
|
||||
<span className="node-list__item-name">{name}</span>
|
||||
<NodeListItemName>{name}</NodeListItemName>
|
||||
) : (
|
||||
<>
|
||||
<span className="node-list__item-name">
|
||||
{t('validatorTitleFallback')}
|
||||
</span>
|
||||
<span
|
||||
className="node-list__item-id text-muted"
|
||||
title={`${t('id')}: ${id}`}
|
||||
>
|
||||
<NodeListItemName>{t('validatorTitleFallback')}</NodeListItemName>
|
||||
<span className="uppercase text-muted" title={`${t('id')}: ${id}`}>
|
||||
{truncateMiddle(id)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
<table>
|
||||
<table className="flex-1 text-body border-collapse mt-4">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>{t('Total stake')}</th>
|
||||
<td>{formatNumber(stakedOnNode, 2)}</td>
|
||||
<td>{stakedTotalPercentage}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{t('Your stake')}</th>
|
||||
<td>{formatNumber(userStake, 2)}</td>
|
||||
<td>{userStakePercentage}</td>
|
||||
</tr>
|
||||
<NodeListTr>
|
||||
<NodeListTh>{t('Total stake')}</NodeListTh>
|
||||
<NodeListTd>{formatNumber(stakedOnNode, 2)}</NodeListTd>
|
||||
<NodeListTd>{stakedTotalPercentage}</NodeListTd>
|
||||
</NodeListTr>
|
||||
<NodeListTr>
|
||||
<NodeListTh>{t('Your stake')}</NodeListTh>
|
||||
<NodeListTd>{formatNumber(userStake, 2)}</NodeListTd>
|
||||
<NodeListTd>{userStakePercentage}</NodeListTd>
|
||||
</NodeListTr>
|
||||
</tbody>
|
||||
</table>
|
||||
</li>
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
.staking-node {
|
||||
&__epoch {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
&__callout-container {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './staking-node.scss';
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useParams } from 'react-router-dom';
|
||||
@ -113,7 +111,6 @@ export const StakingNode = ({ vegaKey, data }: StakingNodeProps) => {
|
||||
/>
|
||||
{data?.epoch.timestamps.start && data?.epoch.timestamps.expiry && (
|
||||
<EpochCountdown
|
||||
containerClass="staking-node__epoch"
|
||||
id={data.epoch.id}
|
||||
startDate={new Date(data?.epoch.timestamps.start)}
|
||||
endDate={new Date(data?.epoch.timestamps.expiry)}
|
||||
|
||||
@ -18,6 +18,7 @@ import type { Staking as StakingQueryResult } from './__generated__/Staking';
|
||||
import { ConnectToVega } from './connect-to-vega';
|
||||
import { NodeList } from './node-list';
|
||||
import { useVegaWallet } from '@vegaprotocol/wallet';
|
||||
import { truncateMiddle } from '../../lib/truncate-middle';
|
||||
|
||||
export const Staking = ({ data }: { data?: StakingQueryResult }) => {
|
||||
const { t } = useTranslation();
|
||||
@ -73,7 +74,11 @@ export const StakingStepConnectWallets = () => {
|
||||
{t('Connected Ethereum address')}
|
||||
<EtherscanLink address={account} text={account} />
|
||||
</p>
|
||||
<p>{t('stakingVegaWalletConnected', { key: keypair.pub })}</p>
|
||||
<p>
|
||||
{t('stakingVegaWalletConnected', {
|
||||
key: truncateMiddle(keypair.pub),
|
||||
})}
|
||||
</p>
|
||||
</Callout>
|
||||
);
|
||||
}
|
||||
@ -108,7 +113,6 @@ export const StakingStepConnectWallets = () => {
|
||||
isOpen: true,
|
||||
})
|
||||
}
|
||||
className="fill"
|
||||
data-testid="connect-to-eth-btn"
|
||||
>
|
||||
{t('connectEthWallet')}
|
||||
@ -120,7 +124,7 @@ export const StakingStepConnectWallets = () => {
|
||||
<Callout
|
||||
iconName="tick"
|
||||
intent={Intent.Success}
|
||||
title={`Vega wallet connected: ${keypair.pub}`}
|
||||
title={`Vega wallet connected: ${truncateMiddle(keypair.pub)}`}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
.validator-table__cell {
|
||||
word-break: break-all;
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './validator-table.scss';
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@ -9,6 +7,10 @@ import { BigNumber } from '../../lib/bignumber';
|
||||
import { formatNumber } from '../../lib/format-number';
|
||||
import type { Staking_nodes } from './__generated__/Staking';
|
||||
|
||||
const ValidatorTableCell = ({ children }: { children: React.ReactNode }) => (
|
||||
<span className="break-words">{children}</span>
|
||||
);
|
||||
|
||||
export interface ValidatorTableProps {
|
||||
node: Staking_nodes;
|
||||
stakedTotal: string;
|
||||
@ -35,11 +37,11 @@ export const ValidatorTable = ({
|
||||
<KeyValueTable data-testid="validator-table">
|
||||
<KeyValueTableRow>
|
||||
<span>{t('id')}:</span>
|
||||
<span className="validator-table__cell">{node.id}</span>
|
||||
<ValidatorTableCell>{node.id}</ValidatorTableCell>
|
||||
</KeyValueTableRow>
|
||||
<KeyValueTableRow>
|
||||
<span>{t('VEGA ADDRESS / PUBLIC KEY')}</span>
|
||||
<span className="validator-table__cell">{node.pubkey}</span>
|
||||
<ValidatorTableCell>{node.pubkey}</ValidatorTableCell>
|
||||
</KeyValueTableRow>
|
||||
<KeyValueTableRow>
|
||||
<span>{t('ABOUT THIS VALIDATOR')}</span>
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
@import '../../styles/colors';
|
||||
|
||||
.tranche-label {
|
||||
margin-right: 5px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
background-color: $black;
|
||||
border-style: solid;
|
||||
margin-left: 5px;
|
||||
padding: 3px;
|
||||
border-width: 2px;
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './tranche-label.scss';
|
||||
|
||||
import { ADDRESSES, EthereumChainIds } from '../../config';
|
||||
import type { EthereumChainId } from '../../config';
|
||||
|
||||
@ -39,7 +37,10 @@ export const TrancheLabel = ({ contract, chainId, id }: TrancheLabelProps) => {
|
||||
return (
|
||||
<>
|
||||
{TRANCHE_LABELS[id].map((t, i) => (
|
||||
<strong className="tranche-label" key={`tranche-${id}-${i}`}>
|
||||
<strong
|
||||
className="inline-block mx-4 p-4 border-2 border-solid bg-black text-white uppercase"
|
||||
key={`tranche-${id}-${i}`}
|
||||
>
|
||||
{t}
|
||||
</strong>
|
||||
))}
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
@import '../../styles/colors';
|
||||
@import '../../styles/fonts';
|
||||
|
||||
.tranche {
|
||||
&__user-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
&--item {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
border-left: 1px solid $white;
|
||||
border-right: 1px solid $white;
|
||||
|
||||
&-contents {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0 5px;
|
||||
font-family: $font-mono;
|
||||
padding: 2px 5px 2px 5px;
|
||||
color: $text-color-deemphasise;
|
||||
}
|
||||
}
|
||||
|
||||
&__redeemed {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0 5px;
|
||||
padding: 2px 5px 2px 5px;
|
||||
:last-child {
|
||||
font-family: $font-mono;
|
||||
color: $text-color-deemphasise;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './tranche.scss';
|
||||
|
||||
import type { Tranche as ITranche } from '@vegaprotocol/smart-contracts-sdk';
|
||||
import { useWeb3React } from '@web3-react/core';
|
||||
import React from 'react';
|
||||
@ -17,6 +15,16 @@ import { TrancheItem } from '../redemption/tranche-item';
|
||||
import { Routes } from '../router-config';
|
||||
import { TrancheLabel } from './tranche-label';
|
||||
|
||||
const TrancheProgressContents = ({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) => (
|
||||
<div className="flex justify-between gap-4 font-mono py-2 px-4 text-white-60">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Tranche = () => {
|
||||
const tranches = useOutletContext<ITranche[]>();
|
||||
const { t } = useTranslation();
|
||||
@ -54,27 +62,32 @@ export const Tranche = () => {
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<div className="tranche__redeemed" data-test-id="redeemed-tranche-tokens">
|
||||
<div
|
||||
className="flex justify-between gap-x-4 py-2 px-4"
|
||||
data-test-id="redeemed-tranche-tokens"
|
||||
>
|
||||
<span>{t('alreadyRedeemed')}</span>
|
||||
<span>{formatNumber(tranche.total_removed)}</span>
|
||||
<span className="font-mono text-white-60">
|
||||
{formatNumber(tranche.total_removed)}
|
||||
</span>
|
||||
</div>
|
||||
<h2>{t('Holders')}</h2>
|
||||
{tranche.users.length ? (
|
||||
<ul className="tranche__user-list">
|
||||
<ul role="list">
|
||||
{tranche.users.map((user, i) => {
|
||||
const unlocked = user.remaining_tokens.times(lockedData?.unlocked);
|
||||
const locked = user.remaining_tokens.times(lockedData?.locked);
|
||||
return (
|
||||
<li className="tranche__user-list--item" key={i}>
|
||||
<li className="pb-4" key={i}>
|
||||
<EtherscanLink address={user.address} text={user.address} />
|
||||
<div className="tranche__progress-contents">
|
||||
<TrancheProgressContents>
|
||||
<span>{t('Locked')}</span>
|
||||
<span>{t('Unlocked')}</span>
|
||||
</div>
|
||||
<div className="tranche__progress-contents">
|
||||
</TrancheProgressContents>
|
||||
<TrancheProgressContents>
|
||||
<span>{formatNumber(locked)}</span>
|
||||
<span>{formatNumber(unlocked)}</span>
|
||||
</div>
|
||||
</TrancheProgressContents>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,101 +0,0 @@
|
||||
@import '../../styles/colors';
|
||||
|
||||
.tranches {
|
||||
&__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&__list-item {
|
||||
border-bottom: 1px solid $white;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
&__list-item-container {
|
||||
color: $gray3;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button-link {
|
||||
color: $vega-yellow3;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
&__item-title {
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
margin-right: 15px;
|
||||
|
||||
> span {
|
||||
background-color: $white;
|
||||
color: $black;
|
||||
padding: 2px 4px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
> strong {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $vega-yellow3;
|
||||
|
||||
> span {
|
||||
background-color: $vega-yellow3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__progress {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
flex-flow: column nowrap;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__progress-item {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__progress-numbers {
|
||||
min-width: 85px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__progress-title {
|
||||
min-width: 70px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&__message {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
&__secondary-header {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './tranches.scss';
|
||||
|
||||
import { useOutletContext } from 'react-router-dom';
|
||||
import type { Tranche } from '@vegaprotocol/smart-contracts-sdk';
|
||||
import { useWeb3React } from '@web3-react/core';
|
||||
@ -32,7 +30,7 @@ export const Tranches = () => {
|
||||
<VestingChart />
|
||||
<p>{t('chartBelow')}</p>
|
||||
{tranches?.length ? (
|
||||
<ul className="tranches__list">
|
||||
<ul role="list">
|
||||
{(showAll ? tranches : filteredTranches).map((tranche) => {
|
||||
return (
|
||||
<React.Fragment key={tranche.tranche_id}>
|
||||
@ -57,7 +55,7 @@ export const Tranches = () => {
|
||||
) : (
|
||||
<p>{t('No tranches')}</p>
|
||||
)}
|
||||
<section className="tranches__message">
|
||||
<section className="text-center mt-32">
|
||||
<Button variant="inline-link" onClick={() => setShowAll(!showAll)}>
|
||||
{showAll
|
||||
? t(
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
.withdraw-form {
|
||||
margin: 40px 0;
|
||||
svg.icon {
|
||||
margin-top: 2px;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
import './withdraw-form.scss';
|
||||
|
||||
import { Callout, FormGroup, Intent, Select } from '@vegaprotocol/ui-toolkit';
|
||||
import { ethers } from 'ethers';
|
||||
import React from 'react';
|
||||
@ -76,7 +74,7 @@ export const WithdrawForm = ({
|
||||
|
||||
return (
|
||||
<form
|
||||
className="withdraw-form"
|
||||
className="my-40"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (!valid || !addressValid) return;
|
||||
|
||||
@ -8,46 +8,14 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
$bg-color-default: rgba(133, 152, 166, 0.25);
|
||||
$color-default: #bfccd6;
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
background-color: $black;
|
||||
color: $text-color;
|
||||
font-family: $font-main;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
|
||||
@media (min-width: 960px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO replace with blueprint themeing
|
||||
// TYPOGRAPHY
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 15px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
p {
|
||||
word-break: break-word;
|
||||
line-height: 1.4;
|
||||
@ -84,3 +52,19 @@ a,
|
||||
.bp3-dark .bp3-input {
|
||||
background-color: $dark-gray4;
|
||||
}
|
||||
|
||||
.epoch-countdown {
|
||||
.bp3-progress-bar {
|
||||
border: 1px solid $white;
|
||||
border-radius: 0;
|
||||
height: 21px;
|
||||
|
||||
.bp3-progress-meter {
|
||||
border-radius: 0;
|
||||
|
||||
.bp3-dark & {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,65 +35,14 @@ $vega-green: #00f780;
|
||||
|
||||
$vega-green3: #26ff8a;
|
||||
$vega-red3: #ff261a;
|
||||
$vega-blue3: #48aff0;
|
||||
$vega-yellow3: #daff0d;
|
||||
$vega-orange3: #ff7a1a;
|
||||
$vega-yellow4: #edff22;
|
||||
|
||||
$vega-red1: darken($vega-red3, 38%);
|
||||
$vega-green1: darken($vega-green3, 38%);
|
||||
$vega-yellow1: darken($vega-yellow3, 38%);
|
||||
$vega-orange1: darken($vega-orange3, 38%);
|
||||
|
||||
/* === TEXT COLORS === */
|
||||
$text-color: #c7c7c7;
|
||||
$text-color-inverse: #1a1821;
|
||||
$text-color-deemphasise: #8a9ba8;
|
||||
$text-color-emphasise: #f5f8fa;
|
||||
$text-color-error: $vega-red3;
|
||||
|
||||
/* === BUY/SELL BUTTONS === */
|
||||
$button-sell-hover: #893939;
|
||||
$button-sell-active: #ff5e5e;
|
||||
$button-buy-hover: #0a4023;
|
||||
$button-buy-active: #00ffb2;
|
||||
|
||||
/* === MISC BLUEPRINT COLOR OVERRIDES === */
|
||||
$pt-intent-danger: $vega-red3;
|
||||
|
||||
$input-background: #3f3f3f;
|
||||
|
||||
// App background
|
||||
$pt-dark-app-background-color: $dark-gray2;
|
||||
|
||||
// Card
|
||||
$dark-card-background-color: $dark-gray2;
|
||||
|
||||
// Menu
|
||||
$dark-menu-background-color: $dark-gray2;
|
||||
|
||||
// Navbar
|
||||
$dark-navbar-background-color: $black;
|
||||
|
||||
// Popover
|
||||
$dark-popover-background-color: $dark-gray2;
|
||||
|
||||
//overlay-backdrop
|
||||
.bp3-overlay-backdrop {
|
||||
background-color: rgba(73, 73, 73, 0.7);
|
||||
}
|
||||
|
||||
// Text helpers
|
||||
.text-deemphasise {
|
||||
color: $text-color-deemphasise;
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: $text-color-error;
|
||||
}
|
||||
|
||||
// hover row
|
||||
$row-hover-background-color: $dark-gray5;
|
||||
|
||||
// backdrop
|
||||
$backdrop-black: rgba(0, 0, 0, 0.6);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user