diff --git a/apps/token-e2e/src/integration/app.test.ts b/apps/token-e2e/src/integration/app.test.ts index 267fb2b73..d4ba0c282 100644 --- a/apps/token-e2e/src/integration/app.test.ts +++ b/apps/token-e2e/src/integration/app.test.ts @@ -6,7 +6,7 @@ describe('token', () => { it('should always have a header title based on environment', () => { cy.get('[data-testid="header-title"]', { timeout: 8000 }).should( 'have.text', - `${fairgroundSet ? 'Fairground token' : '$VEGA TOKEN'}` + `${fairgroundSet ? 'Fairground token' : 'VEGA TOKEN'}` ); }); }); diff --git a/apps/token/src/app.tsx b/apps/token/src/app.tsx index aaa961d8e..6d971b0b9 100644 --- a/apps/token/src/app.tsx +++ b/apps/token/src/app.tsx @@ -1,14 +1,12 @@ import './i18n'; - import React from 'react'; +import { ApolloProvider } from '@apollo/client'; import { BrowserRouter as Router } from 'react-router-dom'; - import { AppLoader } from './app-loader'; import { AppBanner } from './components/app-banner'; import { AppFooter } from './components/app-footer'; import { BalanceManager } from './components/balance-manager'; import { EthWallet } from './components/eth-wallet'; -import { GraphQlProvider } from './components/graphql-provider'; import { TemplateSidebar } from './components/page-templates/template-sidebar'; import { TransactionModal } from './components/transactions-modal'; import { VegaWallet } from './components/vega-wallet'; @@ -21,11 +19,12 @@ import { Connectors } from './lib/web3-connectors'; import { VegaWalletDialogs } from './components/vega-wallet-dialogs'; import { VegaWalletProvider } from '@vegaprotocol/wallet'; import { EnvironmentProvider } from '@vegaprotocol/react-helpers'; +import { client } from './lib/apollo-client'; function App() { const sideBar = React.useMemo(() => [, ], []); return ( - + @@ -55,7 +54,7 @@ function App() { - + ); } diff --git a/apps/token/src/components/app-footer/app-footer.tsx b/apps/token/src/components/app-footer/app-footer.tsx index 80d0e7469..3618b77c6 100644 --- a/apps/token/src/components/app-footer/app-footer.tsx +++ b/apps/token/src/components/app-footer/app-footer.tsx @@ -1,3 +1,4 @@ +import { Link } from '@vegaprotocol/ui-toolkit'; import { Trans } from 'react-i18next'; import { Links } from '../../config'; @@ -13,8 +14,12 @@ export const AppFooter = () => { i18nKey="footerLinksText" components={{ /* eslint-disable */ - feedbackLink: , - githubLink: , + feedbackLink: ( + + ), + githubLink: ( + + ), /* eslint-enable */ }} /> diff --git a/apps/token/src/components/bullet-header/bullet-header.tsx b/apps/token/src/components/bullet-header/bullet-header.tsx index eed46c796..9f76c2bb4 100644 --- a/apps/token/src/components/bullet-header/bullet-header.tsx +++ b/apps/token/src/components/bullet-header/bullet-header.tsx @@ -9,7 +9,7 @@ interface BulletHeaderProps { export const BulletHeader = ({ tag, children, style }: BulletHeaderProps) => { return React.createElement( tag, - { className: 'mt-24 pt-8 pb-20 uppercase', style }, + { className: 'mt-24 pt-8 pb-20 uppercase text-white', style }, <> {children} diff --git a/apps/token/src/components/eth-wallet-container/eth-wallet-container.tsx b/apps/token/src/components/eth-wallet-container/eth-wallet-container.tsx deleted file mode 100644 index 943c40bdf..000000000 --- a/apps/token/src/components/eth-wallet-container/eth-wallet-container.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { useWeb3React } from '@web3-react/core'; -import React from 'react'; -import { useTranslation } from 'react-i18next'; - -import { - AppStateActionType, - useAppState, -} from '../../contexts/app-state/app-state-context'; -import { Ethereum } from '../icons'; -import { Button } from '@vegaprotocol/ui-toolkit'; - -interface EthWalletContainerProps { - children: (address: string) => React.ReactElement; -} - -export const EthWalletContainer = ({ children }: EthWalletContainerProps) => { - const { t } = useTranslation(); - const { appDispatch } = useAppState(); - const { account } = useWeb3React(); - - if (!account) { - return ( - - ); - } - - return children(account); -}; diff --git a/apps/token/src/components/eth-wallet-container/index.ts b/apps/token/src/components/eth-wallet-container/index.ts deleted file mode 100644 index 669004a23..000000000 --- a/apps/token/src/components/eth-wallet-container/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './eth-wallet-container'; diff --git a/apps/token/src/components/eth-wallet/eth-wallet.tsx b/apps/token/src/components/eth-wallet/eth-wallet.tsx index 2605b374c..5e70d1589 100644 --- a/apps/token/src/components/eth-wallet/eth-wallet.tsx +++ b/apps/token/src/components/eth-wallet/eth-wallet.tsx @@ -163,15 +163,15 @@ const ConnectedKey = () => { /> )} - - + - - + @@ -187,7 +187,7 @@ export const EthWallet = () => { return ( -

{t('ethereumKey')}

+

{t('ethereumKey')}

{account && (
{truncateMiddle(account)}
@@ -215,8 +215,8 @@ export const EthWallet = () => { {account ? ( ) : ( - + )} {account && ( diff --git a/apps/token/src/components/graphql-provider/graphql-provider.tsx b/apps/token/src/components/graphql-provider/graphql-provider.tsx deleted file mode 100644 index 7a4a34995..000000000 --- a/apps/token/src/components/graphql-provider/graphql-provider.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ApolloProvider } from '@apollo/client'; -import React from 'react'; - -import { client } from '../../lib/apollo-client'; - -export const GraphQlProvider = ({ - children, -}: { - children: React.ReactNode; -}) => { - return {children}; -}; diff --git a/apps/token/src/components/graphql-provider/index.ts b/apps/token/src/components/graphql-provider/index.ts deleted file mode 100644 index eb5712fd1..000000000 --- a/apps/token/src/components/graphql-provider/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './graphql-provider'; diff --git a/apps/token/src/components/heading/heading.tsx b/apps/token/src/components/heading/heading.tsx index 31c843164..4c5b91950 100644 --- a/apps/token/src/components/heading/heading.tsx +++ b/apps/token/src/components/heading/heading.tsx @@ -7,7 +7,7 @@ export const Heading = ({ title }: HeadingProps) => { return (
-

+

{title}

diff --git a/apps/token/src/components/loader/index.ts b/apps/token/src/components/loader/index.ts deleted file mode 100644 index 3f3b9e663..000000000 --- a/apps/token/src/components/loader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './loader'; diff --git a/apps/token/src/components/loader/loader.tsx b/apps/token/src/components/loader/loader.tsx deleted file mode 100644 index b5d53d40c..000000000 --- a/apps/token/src/components/loader/loader.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; - -interface LoaderProps { - invert?: boolean; -} - -export const Loader = ({ invert = false }: LoaderProps) => { - const [, forceRender] = React.useState(false); - - React.useEffect(() => { - const interval = setInterval(() => { - forceRender((x) => !x); - }, 100); - - return () => clearInterval(interval); - }, []); - - return ( - - {new Array(9).fill(null).map((_, i) => { - return ( - 0.5 ? 1 : 0, - }} - className={`block w-5 h-5 opacity-0 ${ - invert ? 'bg-black' : 'bg-white' - }`} - /> - ); - })} - - ); -}; diff --git a/apps/token/src/components/locked-progress/locked-progress.tsx b/apps/token/src/components/locked-progress/locked-progress.tsx index caa264ab5..45ffa1d23 100644 --- a/apps/token/src/components/locked-progress/locked-progress.tsx +++ b/apps/token/src/components/locked-progress/locked-progress.tsx @@ -15,7 +15,7 @@ const ProgressContents = ({ }) => (
{children} diff --git a/apps/token/src/components/nav/nav.tsx b/apps/token/src/components/nav/nav.tsx index 99e82c981..dda04475e 100644 --- a/apps/token/src/components/nav/nav.tsx +++ b/apps/token/src/components/nav/nav.tsx @@ -5,14 +5,13 @@ import debounce from 'lodash/debounce'; import React from 'react'; import * as Dialog from '@radix-ui/react-dialog'; import { useTranslation } from 'react-i18next'; -import { Link, NavLink } from 'react-router-dom'; +import { NavLink } from 'react-router-dom'; import { Flags } from '../../config'; import { AppStateActionType, useAppState, } from '../../contexts/app-state/app-state-context'; -import vegaWhite from '../../images/vega_white.png'; import { Routes } from '../../routes/router-config'; import { EthWallet } from '../eth-wallet'; import { VegaWallet } from '../vega-wallet'; @@ -36,14 +35,14 @@ export const Nav = () => { return (
{isDesktop && } -
+
{!isDesktop && }
{isDesktop ? ( @@ -61,76 +60,10 @@ const NavHeader = ({ fairground }: { fairground: boolean }) => { const { t } = useTranslation(); return ( -
- - {fairground ? ( - - - - - - - - - - - - - - - - - - - - - ) : ( - Vega - )} - +

diff --git a/apps/token/src/components/page-templates/template-sidebar.tsx b/apps/token/src/components/page-templates/template-sidebar.tsx index c8a959f65..971ce54cc 100644 --- a/apps/token/src/components/page-templates/template-sidebar.tsx +++ b/apps/token/src/components/page-templates/template-sidebar.tsx @@ -12,7 +12,7 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
); } diff --git a/apps/token/src/routes/staking/validator-table.tsx b/apps/token/src/routes/staking/validator-table.tsx index 557551422..300940d56 100644 --- a/apps/token/src/routes/staking/validator-table.tsx +++ b/apps/token/src/routes/staking/validator-table.tsx @@ -59,8 +59,9 @@ export const ValidatorTable = ({ {t('ETHEREUM ADDRESS')} {node.ethereumAdddress} diff --git a/apps/token/src/routes/tranches/tranche.tsx b/apps/token/src/routes/tranches/tranche.tsx index 3a429be92..307287869 100644 --- a/apps/token/src/routes/tranches/tranche.tsx +++ b/apps/token/src/routes/tranches/tranche.tsx @@ -85,8 +85,9 @@ export const Tranche = () => { return (
  • {user.address} diff --git a/apps/token/src/routes/withdraw/index.tsx b/apps/token/src/routes/withdraw/index.tsx index 89dc9b1ac..d8b6d47e8 100644 --- a/apps/token/src/routes/withdraw/index.tsx +++ b/apps/token/src/routes/withdraw/index.tsx @@ -22,7 +22,7 @@ const Withdraw = () => { return ( <> -

    {t('withdrawPageText')}

    +

    {t('withdrawPageText')}

    {(currVegaKey) => } @@ -140,9 +140,9 @@ export const WithdrawContainer = ({ currVegaKey }: WithdrawContainerProps) => { title={t('pendingWithdrawalsCalloutTitle')} intent={Intent.Prompt} > -

    {t('pendingWithdrawalsCalloutText')}

    -

    - +

    {t('pendingWithdrawalsCalloutText')}

    +

    + {t('pendingWithdrawalsCalloutButton')}

    diff --git a/apps/token/src/routes/withdrawals/index.tsx b/apps/token/src/routes/withdrawals/index.tsx index 5894bafd6..207ee5a8e 100644 --- a/apps/token/src/routes/withdrawals/index.tsx +++ b/apps/token/src/routes/withdrawals/index.tsx @@ -1,4 +1,4 @@ -import { Splash } from '@vegaprotocol/ui-toolkit'; +import { Button, Splash } from '@vegaprotocol/ui-toolkit'; import { format } from 'date-fns'; import orderBy from 'lodash/orderBy'; import React from 'react'; @@ -10,7 +10,6 @@ import { Heading } from '../../components/heading'; import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit'; import { SplashLoader } from '../../components/splash-loader'; import { VegaWalletContainer } from '../../components/vega-wallet-container'; -import type { VegaKeyExtended } from '@vegaprotocol/wallet'; import { BigNumber } from '../../lib/bignumber'; import { DATE_FORMAT_DETAILED } from '../../lib/date-formats'; import { addDecimal } from '../../lib/decimals'; @@ -27,21 +26,13 @@ const Withdrawals = () => { <> - {(currVegaKey) => ( - - )} + {(currVegaKey) => } ); }; -interface WithdrawPendingContainerProps { - currVegaKey: VegaKeyExtended; -} - -const WithdrawPendingContainer = ({ - currVegaKey, -}: WithdrawPendingContainerProps) => { +const WithdrawPendingContainer = () => { const { t } = useTranslation(); const { transaction, submit } = useCompleteWithdraw(); const { data, loading, error } = useWithdrawals(); @@ -80,11 +71,11 @@ const WithdrawPendingContainer = ({ return ( <>

    {t('withdrawalsPreparedWarningHeading')}

    -

    {t('withdrawalsText')}

    -

    {t('withdrawalsPreparedWarningText')}

    +

    {t('withdrawalsText')}

    +

    {t('withdrawalsPreparedWarningText')}

      {withdrawals.map((w) => ( -
    • +
      • ))} @@ -102,37 +93,34 @@ interface WithdrawalProps { export const Withdrawal = ({ withdrawal, complete }: WithdrawalProps) => { const { ETHERSCAN_URL } = useEnvironment(); const { t } = useTranslation(); + let status = null; + let footer = null; - const renderStatus = ({ - id, - status, - txHash, - pendingOnForeignChain, - }: Withdrawals_party_withdrawals) => { - if (pendingOnForeignChain) { - return t('Pending'); + if (withdrawal.pendingOnForeignChain) { + status = t('Pending'); + footer = ( + + ); + } else if (withdrawal.status === WithdrawalStatus.Finalized) { + if (withdrawal.txHash) { + status = t('Complete'); + } else { + status = t('Incomplete'); + footer = ( + + ); } - - if (status === WithdrawalStatus.Finalized) { - if (txHash) { - return t('Complete'); - } else { - return ( - <> - {t('Incomplete')}{' '} - - - ); - } - } - - return status; - }; + } else { + status = withdrawal.status; + } return (
      @@ -151,8 +139,9 @@ export const Withdrawal = ({ withdrawal, complete }: WithdrawalProps) => { {t('toEthereum')} {truncateMiddle(withdrawal.details?.receiverAddress ?? '')} @@ -174,6 +163,7 @@ export const Withdrawal = ({ withdrawal, complete }: WithdrawalProps) => { {truncateMiddle(withdrawal.txHash)} @@ -184,9 +174,10 @@ export const Withdrawal = ({ withdrawal, complete }: WithdrawalProps) => { {t('status')} - {renderStatus(withdrawal)} + {status} + {footer}
      ); }; diff --git a/libs/ui-toolkit/src/components/callout/callout.tsx b/libs/ui-toolkit/src/components/callout/callout.tsx index eb4122dfe..218e3082c 100644 --- a/libs/ui-toolkit/src/components/callout/callout.tsx +++ b/libs/ui-toolkit/src/components/callout/callout.tsx @@ -45,7 +45,7 @@ const getIconElement = ({ CalloutProps, 'icon' | 'iconName' | 'iconDescription' | 'isLoading' >) => { - const wrapperClassName = 'ml-8 mr-16 mt-8'; + const wrapperClassName = 'mt-4'; if (isLoading) { return (
      @@ -64,7 +64,10 @@ const getIconElement = ({ /> ); } - return
      {icon}
      ; + if (icon) { + return
      {icon}
      ; + } + return null; }; export function Callout({ @@ -85,30 +88,30 @@ export function Callout({ }); const className = classNames( + 'flex gap-20', 'border', 'border-black', 'dark:border-white', 'text-body-large', 'dark:text-white', 'p-16', - getIntentShadow(intent), - { - flex: iconElement, - } + getIntentShadow(intent) ); const TitleTag: keyof JSX.IntrinsicElements = headingLevel ? `h${headingLevel}` : 'div'; const body = ( <> - {title && {title}} + {title && ( + {title} + )} {children} ); return (
      {iconElement} - {iconElement ?
      {body}
      : body} +
      {body}
      ); } diff --git a/libs/ui-toolkit/src/components/input/input.tsx b/libs/ui-toolkit/src/components/input/input.tsx index 8875cbc3a..9fb3e6b4d 100644 --- a/libs/ui-toolkit/src/components/input/input.tsx +++ b/libs/ui-toolkit/src/components/input/input.tsx @@ -190,7 +190,7 @@ export const Input = forwardRef( if (element) { return ( -
      +
      {hasPrepended && element} {input} {hasAppended && element} diff --git a/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx b/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx index cb065db53..d26288736 100644 --- a/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx +++ b/libs/ui-toolkit/src/components/lozenge/lozenge.stories.tsx @@ -10,11 +10,6 @@ const Template: Story = (args) => lozenge; export const Default = Template.bind({}); -export const WithDetails = Template.bind({}); -WithDetails.args = { - details: 'details text', -}; - export const Highlight = Template.bind({}); Highlight.args = { variant: 'highlight', diff --git a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx index ba5b72efd..4a697cbc7 100644 --- a/libs/ui-toolkit/src/components/lozenge/lozenge.tsx +++ b/libs/ui-toolkit/src/components/lozenge/lozenge.tsx @@ -1,38 +1,31 @@ import type { ReactNode } from 'react'; import classNames from 'classnames'; import { getVariantBackground } from '../../utils/intent'; -import type { TailwindIntents } from '../../utils/intent'; +import { TailwindIntents } from '../../utils/intent'; interface LozengeProps { children: ReactNode; variant?: TailwindIntents; className?: string; - details?: string; } -const getWrapperClasses = (className: LozengeProps['className']) => { - return classNames('inline-flex items-center gap-4', className); -}; - -const getLozengeClasses = (variant: LozengeProps['variant']) => { +const getLozengeClasses = ( + variant: LozengeProps['variant'], + className?: string +) => { return classNames( ['rounded-md', 'font-mono', 'leading-none', 'p-4'], - getVariantBackground(variant) + getVariantBackground(variant), + className ); }; export const Lozenge = ({ children, - variant, + variant = TailwindIntents.Highlight, className, - details, - ...props }: LozengeProps) => { return ( - - {children} - - {details && {details}} - + {children} ); }; diff --git a/libs/web3/src/lib/web3-connect-dialog.tsx b/libs/web3/src/lib/web3-connect-dialog.tsx index 30bc8b919..4343d8b37 100644 --- a/libs/web3/src/lib/web3-connect-dialog.tsx +++ b/libs/web3/src/lib/web3-connect-dialog.tsx @@ -27,18 +27,18 @@ export const Web3ConnectDialog = ({ >
        {connectors.map(([connector], i) => { - const connectorName = getConnectorName(connector); + const info = getConnectorInfo(connector); return (
        • ); @@ -48,8 +48,16 @@ export const Web3ConnectDialog = ({ ); }; -function getConnectorName(connector: Connector) { - if (connector instanceof MetaMask) return 'MetaMask'; - if (connector instanceof WalletConnect) return 'WalletConnect'; - return 'Unknown'; +function getConnectorInfo(connector: Connector) { + if (connector instanceof MetaMask) + return { + name: 'MetaMask', + text: t('MetaMask, Brave or other injected web wallet'), + }; + if (connector instanceof WalletConnect) + return { + name: 'WalletConnect', + text: t('WalletConnect'), + }; + return { name: 'Unknown', text: t('Unknown') }; } diff --git a/libs/withdraws/src/lib/withdrawals-table.tsx b/libs/withdraws/src/lib/withdrawals-table.tsx index ffd9b17f8..83e20a48f 100644 --- a/libs/withdraws/src/lib/withdrawals-table.tsx +++ b/libs/withdraws/src/lib/withdrawals-table.tsx @@ -138,7 +138,7 @@ const RecipientCell = ({ }: RecipientCellProps) => { return (