+
@@ -92,10 +94,17 @@ function AppBody({ Component }: AppProps) {
-
+
);
}
+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
;
+ }
return (
diff --git a/apps/trading/pages/gen-styles.scss b/apps/trading/pages/gen-styles.scss
new file mode 100644
index 000000000..6737f9167
--- /dev/null
+++ b/apps/trading/pages/gen-styles.scss
@@ -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;
+ }
+}
diff --git a/libs/accounts/src/lib/Accounts.graphql b/libs/accounts/src/lib/Accounts.graphql
index d1a83ed0b..ca7bb9ba3 100644
--- a/libs/accounts/src/lib/Accounts.graphql
+++ b/libs/accounts/src/lib/Accounts.graphql
@@ -31,5 +31,6 @@ subscription AccountEvents($partyId: ID) {
balance
assetId
marketId
+ partyId
}
}
diff --git a/libs/accounts/src/lib/__generated__/Accounts.ts b/libs/accounts/src/lib/__generated__/Accounts.ts
index 0f40e9e85..6246bb756 100644
--- a/libs/accounts/src/lib/__generated__/Accounts.ts
+++ b/libs/accounts/src/lib/__generated__/Accounts.ts
@@ -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
}
}
`;
diff --git a/libs/accounts/src/lib/accounts-data-provider.spec.ts b/libs/accounts/src/lib/accounts-data-provider.spec.ts
index 3b695fddd..752cd2dbf 100644
--- a/libs/accounts/src/lib/accounts-data-provider.spec.ts
+++ b/libs/accounts/src/lib/accounts-data-provider.spec.ts
@@ -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',
})
);
});
diff --git a/libs/accounts/src/lib/accounts-data-provider.ts b/libs/accounts/src/lib/accounts-data-provider.ts
index e33c844ce..db126049a 100644
--- a/libs/accounts/src/lib/accounts-data-provider.ts
+++ b/libs/accounts/src/lib/accounts-data-provider.ts
@@ -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(
if (asset) {
return {
...account,
+ partyId: account.party?.id,
asset: {
...asset,
},
diff --git a/libs/accounts/src/lib/accounts.mock.ts b/libs/accounts/src/lib/accounts.mock.ts
index 6f205c399..15ab0891b 100644
--- a/libs/accounts/src/lib/accounts.mock.ts
+++ b/libs/accounts/src/lib/accounts.mock.ts
@@ -122,6 +122,7 @@ export const accountEventsSubscription = (
balance: '100000000',
assetId: 'asset-id',
marketId: null,
+ partyId: 'vega-0',
},
],
};
diff --git a/libs/environment/src/hooks/use-links.ts b/libs/environment/src/hooks/use-links.ts
index a2952fb75..1600de413 100644
--- a/libs/environment/src/hooks/use-links.ts
+++ b/libs/environment/src/hooks/use-links.ts
@@ -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';
diff --git a/libs/governance/src/lib/proposals-list/use-column-defs.tsx b/libs/governance/src/lib/proposals-list/use-column-defs.tsx
index 88fce616f..9bcdfe9f6 100644
--- a/libs/governance/src/lib/proposals-list/use-column-defs.tsx
+++ b/libs/governance/src/lib/proposals-list/use-column-defs.tsx
@@ -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 (
{change.instrument.code}
diff --git a/libs/liquidity/src/lib/liquidity-table.tsx b/libs/liquidity/src/lib/liquidity-table.tsx
index 3209c6b9f..b46952eb9 100644
--- a/libs/liquidity/src/lib/liquidity-table.tsx
+++ b/libs/liquidity/src/lib/liquidity-table.tsx
@@ -43,10 +43,10 @@ export const LiquidityTable = forwardRef(
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(
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}
/>
(
)}
field="balance"
type="rightAligned"
- valueFormatter={stakeToCcySiskasFormatter}
+ valueFormatter={stakeToCcyVolumeFormatter}
/>
{
+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 (
-
-
+
+
{new Array(items).fill(null).map((_, i) => {
return (