LaconicNetwork/vega-frontend-monorepo
6
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:vegaprotocol/frontend-monorepo into feat/2367-liquidity-info-in-market-header

Browse Source
This commit is contained in:
Madalina Raicu
2022-12-27 18:44:32 +02:00
parent b62fcf2a4a 64aa39fe4b
commit 5e2a207a60
18 changed files with 132 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/cypress-explorer-e2e.yml
+1 -1
View File
@@ -98,7 +98,7 @@ jobs:
while read -r file; do
mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
done< <(find /home/runner/.vegacapsule/testnet/logs -type f)
- uses: actions/upload-artifact@v2
if: ${{ always() }}
with:
apps/trading-e2e/src/integration/market-info.cy.ts
+2 -2
View File
@@ -183,12 +183,12 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
.first()
.should('have.text', 'View governance proposal')
.and('have.attr', 'href')
.and('contain', '/governance/market-0');
.and('contain', '/proposals/market-0');
cy.getByTestId(externalLink)
.eq(1)
.should('have.text', 'Propose a change to market')
.and('have.attr', 'href')
.and('contain', '/governance/propose/update-market');
.and('contain', '/proposals/propose/update-market');
});
afterEach('close toggle', () => {
apps/trading-e2e/src/integration/market-summary.cy.ts
+1 -1
View File
@@ -49,7 +49,7 @@ describe('Market proposal notification', { tags: '@smoke' }, () => {
cy.getByTestId('external-link').should(
'have.attr',
'href',
'https://stagnet3.token.vega.xyz/governance/123'
'https://stagnet3.token.vega.xyz/proposals/123'
);
});
});
apps/trading-e2e/src/integration/markets.cy.ts
+1 -1
View File
@@ -106,7 +106,7 @@ describe('markets table', { tags: '@smoke' }, () => {
.and(
'have.attr',
'href',
'https://stagnet3.token.vega.xyz/governance/propose/new-market'
'https://stagnet3.token.vega.xyz/proposals/propose/new-market'
);
});
});
apps/trading/components/app-loader/index.tsx
+2 -6
View File
@@ -8,8 +8,7 @@ import {
Web3Provider as Web3ProviderInternal,
useWeb3ConnectStore,
} from '@vegaprotocol/web3';
import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/react-helpers';
import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
interface AppLoaderProps {
children: ReactNode;
@@ -21,10 +20,7 @@ interface AppLoaderProps {
*/
export function AppLoader({ children }: AppLoaderProps) {
return (
<NetworkLoader
skeleton={<Splash>{t('Loading...')}</Splash>}
cache={cacheConfig}
>
<NetworkLoader skeleton={<Loader />} cache={cacheConfig}>
{children}
</NetworkLoader>
);
apps/trading/components/preloader/preloader.tsx
+22
View File
@@ -0,0 +1,22 @@
import { Loader } from '@vegaprotocol/ui-toolkit';
export const Preloader = () => {
return (
<>
<style>
{`
body{
display: block;
width: 100%;
height: 100%;
}
`}
</style>
<div className="pre-loader">
<Loader forceTheme="light" preloader />
</div>
</>
);
};
export default Preloader;
apps/trading/pages/_app.page.tsx
+15 -4
View File
@@ -1,4 +1,5 @@
import Head from 'next/head';
import dynamic from 'next/dynamic';
import type { AppProps } from 'next/app';
import { Navbar } from '../components/navbar';
import { t } from '@vegaprotocol/react-helpers';
@@ -22,6 +23,7 @@ import {
} from '@vegaprotocol/environment';
import { AppLoader, Web3Provider } from '../components/app-loader';
import './styles.css';
import './gen-styles.scss';
import { usePageTitleStore } from '../stores';
import { Footer } from '../components/footer';
import { useEffect, useMemo, useState } from 'react';
@@ -67,7 +69,7 @@ function AppBody({ Component }: AppProps) {
const { VEGA_ENV } = useEnvironment();
return (
<>
<div className="h-full dark:bg-black dark:text-white">
<Head>
{/* Cannot use meta tags in _document.page.tsx see https://nextjs.org/docs/messages/no-document-viewport-meta */}
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -76,7 +78,7 @@ function AppBody({ Component }: AppProps) {
<VegaWalletProvider>
<AppLoader>
<Web3Provider>
<div className="h-full relative dark:bg-black dark:text-white z-0 grid grid-rows-[min-content,1fr,min-content]">
<div className="h-full relative z-0 grid grid-rows-[min-content,1fr,min-content]">
<Navbar
navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'}
/>
@@ -92,10 +94,17 @@ function AppBody({ Component }: AppProps) {
</Web3Provider>
</AppLoader>
</VegaWalletProvider>
</>
</div>
);
}
const DynamicLoader = dynamic(
() => import('../components/preloader/preloader'),
{
loading: () => <>Loading...</>,
}
);
function VegaTradingApp(props: AppProps) {
const [mounted, setMounted] = useState(false);
@@ -106,7 +115,9 @@ function VegaTradingApp(props: AppProps) {
setMounted(true);
}, []);
if (!mounted) return null;
if (!mounted) {
return <DynamicLoader />;
}
return (
<HashRouter>
apps/trading/pages/gen-styles.scss
+50
View File
@@ -0,0 +1,50 @@
.pre-loader {
display: flex;
width: 100%;
min-height: 100vh;
justify-content: center;
align-items: center;
@for $i from 0 through 16 {
.loader-item:nth-child(#{$i}) {
@if $i % 2 == 0 {
animation-delay: #{$i * 50 * random(5)}ms;
animation-direction: reverse;
} @else {
animation-delay: #{$i * -50 * random(5)}ms;
animation-direction: alternate;
}
}
}
.pre-loader-center {
align-items: center;
display: flex;
flex-direction: column;
}
.pre-loader-wrapper {
width: 50px;
height: 50px;
display: flex;
flex-wrap: wrap;
}
.loader-item {
width: 10px;
height: 10px;
background: black;
animation: flickering 0.4s steps(2, jump-none) alternate infinite;
}
}
@keyframes flickering {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
}
}
libs/accounts/src/lib/Accounts.graphql
+1
View File
@@ -31,5 +31,6 @@ subscription AccountEvents($partyId: ID) {
balance
assetId
marketId
partyId
}
}
libs/accounts/src/lib/__generated__/Accounts.ts
Generated
+2 -1
View File
@@ -17,7 +17,7 @@ export type AccountEventsSubscriptionVariables = Types.Exact<{
}>;
export type AccountEventsSubscription = { __typename?: 'Subscription', accounts: Array<{ __typename?: 'AccountUpdate', type: Types.AccountType, balance: string, assetId: string, marketId?: string | null }> };
export type AccountEventsSubscription = { __typename?: 'Subscription', accounts: Array<{ __typename?: 'AccountUpdate', type: Types.AccountType, balance: string, assetId: string, marketId?: string | null, partyId: string }> };
export const AccountFieldsFragmentDoc = gql`
fragment AccountFields on AccountBalance {
@@ -83,6 +83,7 @@ export const AccountEventsDocument = gql`
balance
assetId
marketId
partyId
}
}
`;
libs/accounts/src/lib/accounts-data-provider.spec.ts
+2
View File
@@ -26,6 +26,7 @@ describe('getId', () => {
balance: '1',
assetId: 'assetId',
marketId: '',
partyId: '',
})
);
expect(
@@ -41,6 +42,7 @@ describe('getId', () => {
balance: '1',
assetId: 'assetId',
marketId: 'testId',
partyId: 'partyId',
})
);
});
libs/accounts/src/lib/accounts-data-provider.ts
+2
View File
@@ -66,6 +66,7 @@ const update = (
balance: delta.balance,
market: delta.marketId ? { id: delta.marketId } : null,
asset: { id: delta.assetId },
party: { id: delta.partyId },
});
}
});
@@ -182,6 +183,7 @@ export const accountsDataProvider = makeDerivedDataProvider<Account[], never>(
if (asset) {
return {
...account,
partyId: account.party?.id,
asset: {
...asset,
},
libs/accounts/src/lib/accounts.mock.ts
+1
View File
@@ -122,6 +122,7 @@ export const accountEventsSubscription = (
balance: '100000000',
assetId: 'asset-id',
marketId: null,
partyId: 'vega-0',
},
],
};
libs/environment/src/hooks/use-links.ts
+5 -5
View File
@@ -88,12 +88,12 @@ export const useEtherscanLink = () => {
export const BLOG = 'https://blog.vega.xyz/';
// Token pages
export const TOKEN_NEW_MARKET_PROPOSAL = '/governance/propose/new-market';
export const TOKEN_NEW_MARKET_PROPOSAL = '/proposals/propose/new-market';
export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =
'/governance/propose/network-parameter';
export const TOKEN_GOVERNANCE = '/governance';
export const TOKEN_PROPOSALS = '/governance';
export const TOKEN_PROPOSAL = '/governance/:id';
'/proposals/propose/network-parameter';
export const TOKEN_GOVERNANCE = '/proposals';
export const TOKEN_PROPOSALS = '/proposals';
export const TOKEN_PROPOSAL = '/proposals/:id';
// Explorer pages
export const EXPLORER_TX = '/txs/:hash';
libs/governance/src/lib/proposals-list/use-column-defs.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export const useColumnDefs = () => {
const { change } = data?.terms || {};
if (instrumentGuard(change) && VEGA_TOKEN_URL) {
if (data?.id) {
const link = `${VEGA_TOKEN_URL}/governance/${data.id}`;
const link = `${VEGA_TOKEN_URL}/proposals/${data.id}`;
return (
<ExternalLink href={link}>
{change.instrument.code}
libs/liquidity/src/lib/liquidity-table.tsx
+4 -4
View File
@@ -43,10 +43,10 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
if (!value) return '-';
return `${addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0, 5)}`;
};
const stakeToCcySiskasFormatter = ({ value }: ValueFormatterParams) => {
const stakeToCcyVolumeFormatter = ({ value }: ValueFormatterParams) => {
if (!value) return '-';
const newValue = new BigNumber(value)
.times(stakeToCcySiskas ?? 1)
.times(Number(stakeToCcySiskas) || 1)
.toString();
return `${addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0, 5)}`;
};
@@ -121,7 +121,7 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
headerTooltip={t(
`The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_siskas network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
)}
valueFormatter={stakeToCcySiskasFormatter}
valueFormatter={stakeToCcyVolumeFormatter}
/>
<AgGridColumn
headerName={t('Supplied')}
@@ -130,7 +130,7 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
)}
field="balance"
type="rightAligned"
valueFormatter={stakeToCcySiskasFormatter}
valueFormatter={stakeToCcyVolumeFormatter}
/>
<AgGridColumn
headerName={t('Status')}
libs/react-helpers/src/lib/links/links.ts
+2 -2
View File
@@ -26,6 +26,6 @@ export const ExternalLinks = {
};
export const TokenLinks = {
PROPOSAL_PAGE: ':tokenUrl/governance/:proposalId',
UPDATE_PROPOSAL_PAGE: ':tokenUrl/governance/propose/update-market',
PROPOSAL_PAGE: ':tokenUrl/proposals/:proposalId',
UPDATE_PROPOSAL_PAGE: ':tokenUrl/proposals/propose/update-market',
};
libs/ui-toolkit/src/components/loader/loader.tsx
+18 -8
View File
@@ -4,20 +4,27 @@ import { useEffect, useState } from 'react';
export interface LoaderProps {
size?: 'small' | 'large';
forceTheme?: 'dark' | 'light';
preloader?: boolean;
}
export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
export const Loader = ({
size = 'large',
forceTheme,
preloader,
}: LoaderProps) => {
const [, forceRender] = useState(false);
useEffect(() => {
const interval = setInterval(() => {
forceRender((x) => !x);
}, 100);
const interval = preloader
? undefined
: setInterval(() => {
forceRender((x) => !x);
}, 100);
return () => clearInterval(interval);
}, []);
}, [preloader]);
const itemClasses = classNames({
const itemClasses = classNames('loader-item', {
'dark:bg-white bg-black': !forceTheme,
'bg-white': forceTheme === 'dark',
'bg-black': forceTheme === 'light',
@@ -29,8 +36,11 @@ export const Loader = ({ size = 'large', forceTheme }: LoaderProps) => {
const items = size === 'small' ? 9 : 16;
return (
<div className="flex flex-col items-center" data-testid="loader">
<div className={`${wrapperClasses} flex flex-wrap`}>
<div
className="flex flex-col items-center pre-loader-center"
data-testid="loader"
>
<div className={`${wrapperClasses} flex flex-wrap pre-loader-wrapper`}>
{new Array(items).fill(null).map((_, i) => {
return (
<div