Merge remote-tracking branch 'origin/develop' into feat/3393-persist-table-column-sizes
This commit is contained in:
maciek
@@ -89,6 +89,6 @@ export function mockNetworkUpgradeProposal() {
|
||||
cy.mockGQL((req) => {
|
||||
aliasGQLQuery(req, 'Nodes', nodeData);
|
||||
aliasGQLQuery(req, 'Proposals', proposalsData);
|
||||
aliasGQLQuery(req, 'ProtocolUpgrades', upgradeProposalsData);
|
||||
aliasGQLQuery(req, 'ProtocolUpgradeProposals', upgradeProposalsData);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -15,7 +15,6 @@ import Routes from '../routes';
|
||||
import { ExternalLinks, removePaginationWrapper } from '@vegaprotocol/utils';
|
||||
import { useNodesQuery } from '../staking/home/__generated__/Nodes';
|
||||
import { useProposalsQuery } from '../proposals/proposals/__generated__/Proposals';
|
||||
import { useProtocolUpgradesQuery } from '../proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
import {
|
||||
getNotRejectedProposals,
|
||||
getNotRejectedProtocolUpgradeProposals,
|
||||
@@ -25,7 +24,8 @@ import * as Schema from '@vegaprotocol/types';
|
||||
import type { RouteChildProps } from '..';
|
||||
import type { ProposalFieldsFragment } from '../proposals/proposals/__generated__/Proposals';
|
||||
import type { NodesFragmentFragment } from '../staking/home/__generated__/Nodes';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '../proposals/protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
|
||||
|
||||
const nodesToShow = 6;
|
||||
|
||||
@@ -181,7 +181,7 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
|
||||
data: protocolUpgradesData,
|
||||
loading: protocolUpgradesLoading,
|
||||
error: protocolUpgradesError,
|
||||
} = useProtocolUpgradesQuery({
|
||||
} = useProtocolUpgradeProposalsQuery({
|
||||
pollInterval: 5000,
|
||||
fetchPolicy: 'network-only',
|
||||
errorPolicy: 'ignore',
|
||||
|
||||
@@ -12,7 +12,7 @@ import { ExternalLinks } from '@vegaprotocol/utils';
|
||||
import { ExternalLink } from '@vegaprotocol/ui-toolkit';
|
||||
import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
|
||||
import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
|
||||
interface ProposalsListProps {
|
||||
proposals: Array<ProposalFieldsFragment | ProposalQuery['proposal']>;
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@ import {
|
||||
RoundedWrapper,
|
||||
} from '@vegaprotocol/ui-toolkit';
|
||||
import { SubHeading } from '../../../../components/heading';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
|
||||
export interface ProtocolUpgradeProposalDetailInfoProps {
|
||||
proposal: ProtocolUpgradeProposalFieldsFragment;
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
import { ProtocolUpgradeProposalsListItem } from './protocol-upgrade-proposals-list-item';
|
||||
import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
|
||||
const proposal = {
|
||||
status:
|
||||
|
||||
+1
-1
@@ -11,8 +11,8 @@ import { stripFullStops } from '@vegaprotocol/utils';
|
||||
import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
|
||||
import { SubHeading } from '../../../../components/heading';
|
||||
import type { ReactNode } from 'react';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '../../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
import Routes from '../../../routes';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
|
||||
interface ProtocolProposalsListItemProps {
|
||||
proposal: ProtocolUpgradeProposalFieldsFragment;
|
||||
|
||||
@@ -13,10 +13,9 @@ import {
|
||||
} from '@vegaprotocol/types';
|
||||
import type { NodeConnection, NodeEdge } from '@vegaprotocol/utils';
|
||||
import type { ProposalFieldsFragment } from './__generated__/Proposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
|
||||
import orderBy from 'lodash/orderBy';
|
||||
import { useProtocolUpgradesQuery } from '../protocol-upgrade/__generated__/ProtocolUpgradeProposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
|
||||
|
||||
const orderByDate = (arr: ProposalFieldsFragment[]) =>
|
||||
orderBy(
|
||||
@@ -73,7 +72,7 @@ export const ProposalsContainer = () => {
|
||||
data: protocolUpgradesData,
|
||||
loading: protocolUpgradesLoading,
|
||||
error: protocolUpgradesError,
|
||||
} = useProtocolUpgradesQuery({
|
||||
} = useProtocolUpgradeProposalsQuery({
|
||||
pollInterval: 5000,
|
||||
fetchPolicy: 'network-only',
|
||||
errorPolicy: 'ignore',
|
||||
|
||||
Generated
-59
@@ -1,59 +0,0 @@
|
||||
import * as Types from '@vegaprotocol/types';
|
||||
|
||||
import { gql } from '@apollo/client';
|
||||
import * as Apollo from '@apollo/client';
|
||||
const defaultOptions = {} as const;
|
||||
export type ProtocolUpgradeProposalFieldsFragment = { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus };
|
||||
|
||||
export type ProtocolUpgradesQueryVariables = Types.Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type ProtocolUpgradesQuery = { __typename?: 'Query', lastBlockHeight: string, protocolUpgradeProposals?: { __typename?: 'ProtocolUpgradeProposalConnection', edges?: Array<{ __typename?: 'ProtocolUpgradeProposalEdge', node: { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus } }> | null } | null };
|
||||
|
||||
export const ProtocolUpgradeProposalFieldsFragmentDoc = gql`
|
||||
fragment ProtocolUpgradeProposalFields on ProtocolUpgradeProposal {
|
||||
upgradeBlockHeight
|
||||
vegaReleaseTag
|
||||
approvers
|
||||
status
|
||||
}
|
||||
`;
|
||||
export const ProtocolUpgradesDocument = gql`
|
||||
query ProtocolUpgrades {
|
||||
lastBlockHeight
|
||||
protocolUpgradeProposals {
|
||||
edges {
|
||||
node {
|
||||
...ProtocolUpgradeProposalFields
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${ProtocolUpgradeProposalFieldsFragmentDoc}`;
|
||||
|
||||
/**
|
||||
* __useProtocolUpgradesQuery__
|
||||
*
|
||||
* To run a query within a React component, call `useProtocolUpgradesQuery` and pass it any options that fit your needs.
|
||||
* When your component renders, `useProtocolUpgradesQuery` returns an object from Apollo Client that contains loading, error, and data properties
|
||||
* you can use to render your UI.
|
||||
*
|
||||
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
|
||||
*
|
||||
* @example
|
||||
* const { data, loading, error } = useProtocolUpgradesQuery({
|
||||
* variables: {
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useProtocolUpgradesQuery(baseOptions?: Apollo.QueryHookOptions<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useQuery<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>(ProtocolUpgradesDocument, options);
|
||||
}
|
||||
export function useProtocolUpgradesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useLazyQuery<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>(ProtocolUpgradesDocument, options);
|
||||
}
|
||||
export type ProtocolUpgradesQueryHookResult = ReturnType<typeof useProtocolUpgradesQuery>;
|
||||
export type ProtocolUpgradesLazyQueryHookResult = ReturnType<typeof useProtocolUpgradesLazyQuery>;
|
||||
export type ProtocolUpgradesQueryResult = Apollo.QueryResult<ProtocolUpgradesQuery, ProtocolUpgradesQueryVariables>;
|
||||
+2
-2
@@ -6,14 +6,14 @@ import * as Schema from '@vegaprotocol/types';
|
||||
|
||||
import { ProtocolUpgradeProposal } from './protocol-upgrade-proposal';
|
||||
import { ProposalNotFound } from '../components/proposal-not-found';
|
||||
import { useProtocolUpgradesQuery } from './__generated__/ProtocolUpgradeProposals';
|
||||
import { useNodesQuery } from '../../staking/home/__generated__/Nodes';
|
||||
import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
|
||||
import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
|
||||
|
||||
export const ProtocolUpgradeProposalContainer = () => {
|
||||
const params = useParams<{ proposalReleaseTag: string }>();
|
||||
|
||||
const { data, loading, error, refetch } = useProtocolUpgradesQuery({
|
||||
const { data, loading, error, refetch } = useProtocolUpgradeProposalsQuery({
|
||||
fetchPolicy: 'network-only',
|
||||
errorPolicy: 'ignore',
|
||||
skip: !params.proposalReleaseTag,
|
||||
|
||||
+1
-1
@@ -9,7 +9,7 @@ import {
|
||||
import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
|
||||
import { getNormalisedVotingPower } from '../../staking/shared';
|
||||
import type { NodesFragmentFragment } from '../../staking/home/__generated__/Nodes';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from './__generated__/ProtocolUpgradeProposals';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
|
||||
const mockProposal: ProtocolUpgradeProposalFieldsFragment = {
|
||||
vegaReleaseTag: 'v0.1.234',
|
||||
|
||||
@@ -3,8 +3,8 @@ import { ProtocolUpgradeProposalDetailHeader } from '../components/protocol-upgr
|
||||
import { ProtocolUpdateProposalDetailApprovals } from '../components/protocol-upgrade-proposal-detail-approvals';
|
||||
import { ProtocolUpgradeProposalDetailInfo } from '../components/protocol-upgrade-proposal-detail-info';
|
||||
import { getNormalisedVotingPower } from '../../staking/shared';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from './__generated__/ProtocolUpgradeProposals';
|
||||
import type { NodesFragmentFragment } from '../../staking/home/__generated__/Nodes';
|
||||
import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
|
||||
|
||||
export interface ProtocolUpgradeProposalProps {
|
||||
proposal: ProtocolUpgradeProposalFieldsFragment;
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
"tranche_end": "2023-05-20T00:00:00.000Z",
|
||||
"total_added": "19242.125",
|
||||
"total_removed": "959.3245960538025",
|
||||
"locked_amount": "10578.4844209587189695125",
|
||||
"locked_amount": "10098.6413524305566245625",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "188",
|
||||
@@ -845,7 +845,7 @@
|
||||
"tranche_end": "2023-05-06T00:00:00.000Z",
|
||||
"total_added": "14520",
|
||||
"total_removed": "5079.76864115505",
|
||||
"locked_amount": "1206.465231481482324",
|
||||
"locked_amount": "844.3783333333340916",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "111",
|
||||
@@ -4715,7 +4715,7 @@
|
||||
"tranche_end": "2023-12-05T00:00:00.000Z",
|
||||
"total_added": "86666.297",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "51166.9974210106919556663",
|
||||
"locked_amount": "50989.3639405696310624204",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "86666.297",
|
||||
@@ -4781,7 +4781,7 @@
|
||||
"tranche_end": "2023-06-01T00:00:00.000Z",
|
||||
"total_added": "2500",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "391.38319724257215",
|
||||
"locked_amount": "381.106913919414",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "2500",
|
||||
@@ -4814,7 +4814,7 @@
|
||||
"tranche_end": "2023-11-01T00:00:00.000Z",
|
||||
"total_added": "15000.000000000000015",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "14795.60027928744001479560027928744",
|
||||
"locked_amount": "14734.6127717391315147346127717391315",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "1.5e-14",
|
||||
@@ -4902,7 +4902,7 @@
|
||||
"tranche_end": "2023-09-01T00:00:00.000Z",
|
||||
"total_added": "17500",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "11459.903224386071",
|
||||
"locked_amount": "11388.75113224637775",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "12500",
|
||||
@@ -5169,7 +5169,7 @@
|
||||
"tranche_end": "2023-08-01T00:00:00.000Z",
|
||||
"total_added": "37500",
|
||||
"total_removed": "17836.1796921",
|
||||
"locked_amount": "18541.30457719459875",
|
||||
"locked_amount": "18386.3087016574575",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "7500",
|
||||
@@ -5577,7 +5577,7 @@
|
||||
"tranche_end": "2023-12-05T00:00:00.000Z",
|
||||
"total_added": "129999.45",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "51120.313973942497539045",
|
||||
"locked_amount": "50942.84256170164543551",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "129999.45",
|
||||
@@ -5610,7 +5610,7 @@
|
||||
"tranche_end": "2024-04-01T00:00:00.000Z",
|
||||
"total_added": "54144.7663",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "49335.74898575644407623565",
|
||||
"locked_amount": "49225.07568900056925620748",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "54144.7663",
|
||||
@@ -5643,7 +5643,7 @@
|
||||
"tranche_end": "2023-09-03T00:00:00.000Z",
|
||||
"total_added": "62600",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "21008.336485286656638",
|
||||
"locked_amount": "20880.029908675801182",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "10000",
|
||||
@@ -5836,7 +5836,7 @@
|
||||
"tranche_end": "2023-09-17T00:00:00.000Z",
|
||||
"total_added": "5000",
|
||||
"total_removed": "0",
|
||||
"locked_amount": "1869.76296930492115",
|
||||
"locked_amount": "1859.51484018264835",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "5000",
|
||||
@@ -6894,7 +6894,7 @@
|
||||
"tranche_end": "2023-06-02T00:00:00.000Z",
|
||||
"total_added": "1939928.38",
|
||||
"total_removed": "1709370.7872515768348",
|
||||
"locked_amount": "156749.9162904687626235986",
|
||||
"locked_amount": "152773.788985228250267064",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "1852091.69",
|
||||
@@ -40766,7 +40766,7 @@
|
||||
"tranche_end": "2023-06-05T00:00:00.000Z",
|
||||
"total_added": "3732368.4671",
|
||||
"total_removed": "715655.108029600523393",
|
||||
"locked_amount": "265371.371543329369775774863",
|
||||
"locked_amount": "259261.353688955187027242512",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "1998.95815",
|
||||
@@ -42159,7 +42159,7 @@
|
||||
"tranche_end": "2023-12-05T00:00:00.000Z",
|
||||
"total_added": "15870102.715470999700000001",
|
||||
"total_removed": "867610.78878511272497352",
|
||||
"locked_amount": "6240677.4306629368200704822080834181008381",
|
||||
"locked_amount": "6219011.6996519651564294467839700764949986",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "16249.93",
|
||||
@@ -48748,7 +48748,7 @@
|
||||
"tranche_end": "2023-05-05T00:00:00.000Z",
|
||||
"total_added": "14597706.0446472999",
|
||||
"total_removed": "6168897.174282186485373182",
|
||||
"locked_amount": "39908.33059608817917720398993360406",
|
||||
"locked_amount": "19906.6660637589358104620198755149",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "129284.449",
|
||||
@@ -58847,7 +58847,7 @@
|
||||
"tranche_end": "2023-06-05T00:00:00.000Z",
|
||||
"total_added": "472355.6199999996",
|
||||
"total_removed": "44078.8527972103416",
|
||||
"locked_amount": "42049.610748470926039581595332312",
|
||||
"locked_amount": "41081.44349309421705422120903094",
|
||||
"deposits": [
|
||||
{
|
||||
"amount": "3000",
|
||||
|
||||
@@ -24,6 +24,10 @@ import {
|
||||
import { Links, Routes } from '../../pages/client-router';
|
||||
import { createDocsLinks } from '@vegaprotocol/utils';
|
||||
import { SettingsButton } from '../../client-pages/settings';
|
||||
import {
|
||||
ProtocolUpgradeCountdown,
|
||||
ProtocolUpgradeCountdownMode,
|
||||
} from '@vegaprotocol/proposals';
|
||||
|
||||
export const Navbar = ({
|
||||
theme = 'system',
|
||||
@@ -45,11 +49,14 @@ export const Navbar = ({
|
||||
theme={theme}
|
||||
actions={
|
||||
<>
|
||||
<ProtocolUpgradeCountdown
|
||||
mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
|
||||
/>
|
||||
<SettingsButton />
|
||||
<VegaWalletConnectButton />
|
||||
</>
|
||||
}
|
||||
breakpoints={[521, 1067]}
|
||||
breakpoints={[521, 1122]}
|
||||
>
|
||||
<NavigationList
|
||||
className="[.drawer-content_&]:border-b [.drawer-content_&]:border-b-vega-light-200 dark:[.drawer-content_&]:border-b-vega-dark-200 [.drawer-content_&]:pb-8 [.drawer-content_&]:mb-2"
|
||||
|
||||
@@ -5,7 +5,5 @@ export const ViewingBanner = () => {
|
||||
const { isReadOnly, pubKey, disconnect } = useVegaWallet();
|
||||
return isReadOnly ? (
|
||||
<ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
|
||||
) : (
|
||||
<div />
|
||||
);
|
||||
) : null;
|
||||
};
|
||||
|
||||
@@ -37,6 +37,10 @@ import { ENV } from '../lib/config';
|
||||
import { useDataProvider } from '@vegaprotocol/react-helpers';
|
||||
import { activeOrdersProvider } from '@vegaprotocol/orders';
|
||||
import { useTelemetryApproval } from '../lib/hooks/use-telemetry-approval';
|
||||
import {
|
||||
ProtocolUpgradeCountdownMode,
|
||||
ProtocolUpgradeProposalNotification,
|
||||
} from '@vegaprotocol/proposals';
|
||||
|
||||
const DEFAULT_TITLE = t('Welcome to Vega trading!');
|
||||
|
||||
@@ -89,7 +93,12 @@ function AppBody({ Component }: AppProps) {
|
||||
<div className={gridClasses}>
|
||||
<AnnouncementBanner />
|
||||
<Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'} />
|
||||
<ViewingBanner />
|
||||
<div data-testid="banners">
|
||||
<ProtocolUpgradeProposalNotification
|
||||
mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
|
||||
/>
|
||||
<ViewingBanner />
|
||||
</div>
|
||||
<main data-testid={location.pathname}>
|
||||
<Component />
|
||||
</main>
|
||||
|
||||
@@ -1,13 +1,50 @@
|
||||
import { Option } from '@vegaprotocol/ui-toolkit';
|
||||
import type { AssetFieldsFragment } from './__generated__/Asset';
|
||||
import classNames from 'classnames';
|
||||
import { t } from '@vegaprotocol/i18n';
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export const AssetOption = ({ asset }: { asset: AssetFieldsFragment }) => {
|
||||
type AssetOptionProps = {
|
||||
asset: AssetFieldsFragment;
|
||||
balance?: ReactNode;
|
||||
};
|
||||
|
||||
export const Balance = ({
|
||||
balance,
|
||||
symbol,
|
||||
}: {
|
||||
balance?: string;
|
||||
symbol: string;
|
||||
}) =>
|
||||
balance ? (
|
||||
<div className="mt-1 font-alpha">
|
||||
{balance} {symbol}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-vega-orange-500">{t('Fetching balance…')}</div>
|
||||
);
|
||||
|
||||
export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
|
||||
return (
|
||||
<Option key={asset.id} value={asset.id}>
|
||||
<div className="flex flex-col items-start">
|
||||
<span>{asset.name}</span>
|
||||
<div className="text-[10px] font-mono w-full text-left break-all">
|
||||
<span className="text-gray-500">{asset.id} -</span> {asset.symbol}
|
||||
<div className="flex flex-row align-baseline gap-2">
|
||||
<span>{asset.name}</span>{' '}
|
||||
<span
|
||||
className={classNames(
|
||||
'bg-vega-light-200 dark:bg-vega-dark-200',
|
||||
'text-black dark:text-white text-xs',
|
||||
'py-[2px] px-[4px] rounded'
|
||||
)}
|
||||
>
|
||||
{asset.symbol}
|
||||
</span>
|
||||
</div>
|
||||
{balance}
|
||||
<div className="text-[12px] font-mono w-full text-left break-all">
|
||||
<span className="text-vega-light-300 dark:text-vega-dark-300">
|
||||
{asset.id}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</Option>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
export * from './__generated__/Asset';
|
||||
export * from './__generated__/Assets';
|
||||
export * from './asset-data-provider';
|
||||
export * from './assets-data-provider';
|
||||
export * from './asset-details-dialog';
|
||||
export * from './asset-details-table';
|
||||
export * from './asset-option';
|
||||
export * from './assets-data-provider';
|
||||
export * from './constants';
|
||||
export * from './use-balances-store';
|
||||
|
||||
@@ -0,0 +1,69 @@
|
||||
import type BigNumber from 'bignumber.js';
|
||||
import type { AssetFieldsFragment } from './__generated__/Asset';
|
||||
import { create } from 'zustand';
|
||||
import * as Sentry from '@sentry/react';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
|
||||
type AssetWithBalance = {
|
||||
asset: AssetFieldsFragment;
|
||||
balanceOnEth?: BigNumber;
|
||||
balanceOnVega?: BigNumber;
|
||||
updatedAt: number;
|
||||
};
|
||||
|
||||
type SetBalanceArgs = Omit<AssetWithBalance, 'updatedAt'> & {
|
||||
ethBalanceFetcher?: () => Promise<BigNumber | undefined>;
|
||||
};
|
||||
|
||||
type BalancesStore = {
|
||||
balances: (AssetWithBalance & { fetchFromEth?: () => void })[];
|
||||
getBalance: (assetId: string) => AssetWithBalance | undefined;
|
||||
setBalance: (args: SetBalanceArgs) => void;
|
||||
refetch: (assetId: string) => void;
|
||||
};
|
||||
|
||||
export const useBalancesStore = create(
|
||||
immer<BalancesStore>((set, get) => ({
|
||||
balances: [],
|
||||
getBalance: (assetId) =>
|
||||
get().balances.find(({ asset: a }) => a.id === assetId),
|
||||
setBalance: ({ asset, balanceOnEth, balanceOnVega, ethBalanceFetcher }) => {
|
||||
set((state) => {
|
||||
const found = state.balances.find(({ asset: a }) => a.id === asset.id);
|
||||
const fetchFromEth = ethBalanceFetcher
|
||||
? () => {
|
||||
if (!ethBalanceFetcher) return;
|
||||
ethBalanceFetcher()
|
||||
.then((balance) => {
|
||||
if (balance) {
|
||||
get().setBalance({ asset, balanceOnEth: balance });
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
Sentry.captureException(err);
|
||||
});
|
||||
}
|
||||
: undefined;
|
||||
|
||||
if (found) {
|
||||
if (balanceOnEth) found.balanceOnEth = balanceOnEth;
|
||||
if (balanceOnVega) found.balanceOnVega = balanceOnVega;
|
||||
if (fetchFromEth) found.fetchFromEth = fetchFromEth;
|
||||
found.updatedAt = Date.now();
|
||||
} else {
|
||||
state.balances.push({
|
||||
asset,
|
||||
balanceOnEth,
|
||||
balanceOnVega,
|
||||
fetchFromEth,
|
||||
updatedAt: Date.now(),
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
refetch: (assetId) => {
|
||||
const found = get().balances.find((a) => a.asset.id === assetId);
|
||||
found?.fetchFromEth?.();
|
||||
},
|
||||
}))
|
||||
);
|
||||
@@ -0,0 +1,42 @@
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { useGetBalanceOfERC20Token } from './use-get-balance-of-erc20-token';
|
||||
import type { AssetFieldsFragment } from '@vegaprotocol/assets';
|
||||
import { useBalancesStore } from '@vegaprotocol/assets';
|
||||
import { Balance } from '@vegaprotocol/assets';
|
||||
import { isAssetTypeERC20 } from '@vegaprotocol/utils';
|
||||
import { useTokenContract } from '@vegaprotocol/web3';
|
||||
|
||||
const REFETCH_DELAY = 5000;
|
||||
|
||||
export const AssetBalance = ({ asset }: { asset: AssetFieldsFragment }) => {
|
||||
const [setBalance, getBalance] = useBalancesStore((state) => [
|
||||
state.setBalance,
|
||||
state.getBalance,
|
||||
]);
|
||||
|
||||
const tokenContract = useTokenContract(
|
||||
isAssetTypeERC20(asset) ? asset.source.contractAddress : undefined
|
||||
);
|
||||
const ethBalanceFetcher = useGetBalanceOfERC20Token(tokenContract, asset);
|
||||
|
||||
const fetchFromEth = useCallback(async () => {
|
||||
const balance = await ethBalanceFetcher();
|
||||
if (balance) {
|
||||
setBalance({ asset, balanceOnEth: balance, ethBalanceFetcher });
|
||||
}
|
||||
}, [asset, ethBalanceFetcher, setBalance]);
|
||||
|
||||
useEffect(() => {
|
||||
const balance = getBalance(asset.id);
|
||||
if (!balance || Date.now() - balance.updatedAt > REFETCH_DELAY) {
|
||||
fetchFromEth();
|
||||
}
|
||||
}, [asset.id, fetchFromEth, getBalance]);
|
||||
|
||||
return (
|
||||
<Balance
|
||||
balance={getBalance(asset.id)?.balanceOnEth?.toString()}
|
||||
symbol={asset.symbol}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -41,6 +41,7 @@ import type { DepositBalances } from './use-deposit-balances';
|
||||
import { FaucetNotification } from './faucet-notification';
|
||||
import { ApproveNotification } from './approve-notification';
|
||||
import { usePersistentDeposit } from './use-persistent-deposit';
|
||||
import { AssetBalance } from './asset-balance';
|
||||
|
||||
interface FormFields {
|
||||
asset: string;
|
||||
@@ -253,9 +254,15 @@ export const DepositForm = ({
|
||||
value={selectedAsset?.id}
|
||||
hasError={Boolean(errors.asset?.message)}
|
||||
>
|
||||
{assets.filter(isAssetTypeERC20).map((a) => (
|
||||
<AssetOption asset={a} key={a.id} />
|
||||
))}
|
||||
{assets
|
||||
.filter((asset) => isAssetTypeERC20(asset))
|
||||
.map((asset) => (
|
||||
<AssetOption
|
||||
asset={asset}
|
||||
key={asset.id}
|
||||
balance={<AssetBalance asset={asset} />}
|
||||
/>
|
||||
))}
|
||||
</RichSelect>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
export * from './__generated__/Deposit';
|
||||
export * from './asset-balance';
|
||||
export * from './deposit-container';
|
||||
export * from './deposit-dialog';
|
||||
export * from './deposit-form';
|
||||
export * from './deposit-limits';
|
||||
export * from './deposit-manager';
|
||||
export * from './deposits-provider';
|
||||
export * from './deposits-table';
|
||||
export * from './use-deposit-balances';
|
||||
export * from './deposits-provider';
|
||||
export * from './use-get-allowance';
|
||||
export * from './use-get-balance-of-erc20-token';
|
||||
export * from './use-get-deposit-maximum';
|
||||
export * from './use-get-deposited-amount';
|
||||
export * from './use-submit-approval';
|
||||
export * from './use-submit-faucet';
|
||||
export * from './deposit-dialog';
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
} from '@vegaprotocol/web3';
|
||||
import { isAssetTypeERC20 } from '@vegaprotocol/utils';
|
||||
import type { Asset } from '@vegaprotocol/assets';
|
||||
import { useBalancesStore } from '@vegaprotocol/assets';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
export const useSubmitFaucet = (
|
||||
@@ -25,8 +26,9 @@ export const useSubmitFaucet = (
|
||||
useEffect(() => {
|
||||
if (tx?.status === EthTxStatus.Confirmed) {
|
||||
getBalances();
|
||||
if (asset) useBalancesStore.getState().refetch(asset.id);
|
||||
}
|
||||
}, [tx?.status, getBalances]);
|
||||
}, [tx?.status, getBalances, asset]);
|
||||
|
||||
return {
|
||||
id,
|
||||
|
||||
@@ -2,6 +2,7 @@ import trim from 'lodash/trim';
|
||||
import { useCallback } from 'react';
|
||||
import { Networks } from '../types';
|
||||
import { useEnvironment } from './use-environment';
|
||||
import { stripFullStops } from '@vegaprotocol/utils';
|
||||
|
||||
type Net = Exclude<Networks, 'CUSTOM'>;
|
||||
export enum DApp {
|
||||
@@ -89,15 +90,31 @@ export const useEtherscanLink = () => {
|
||||
// Vega blog
|
||||
export const BLOG = 'https://blog.vega.xyz/';
|
||||
|
||||
// Token pages
|
||||
// Governance pages
|
||||
export const TOKEN_NEW_MARKET_PROPOSAL = '/proposals/propose/new-market';
|
||||
export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =
|
||||
'/proposals/propose/network-parameter';
|
||||
export const TOKEN_GOVERNANCE = '/proposals';
|
||||
export const TOKEN_PROPOSALS = '/proposals';
|
||||
export const TOKEN_PROPOSAL = '/proposals/:id';
|
||||
export const TOKEN_PROTOCOL_UPGRADE_PROPOSAL =
|
||||
'/proposals/protocol-upgrade/:tag';
|
||||
export const TOKEN_VALIDATOR = '/validators/:id';
|
||||
|
||||
/**
|
||||
* Generates link to the protocol upgrade proposal details on Governance
|
||||
*/
|
||||
export const useProtocolUpgradeProposalLink = () => {
|
||||
const governance = useLinks(DApp.Token);
|
||||
return (releaseTag: string) =>
|
||||
governance(
|
||||
TOKEN_PROTOCOL_UPGRADE_PROPOSAL.replace(
|
||||
':tag',
|
||||
stripFullStops(releaseTag)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// Explorer pages
|
||||
export const EXPLORER_TX = '/txs/:hash';
|
||||
export const EXPLORER_ORACLE = '/oracles/:id';
|
||||
|
||||
@@ -1,2 +1,4 @@
|
||||
export * from './asset-proposal-notification';
|
||||
export * from './market-proposal-notification';
|
||||
export * from './protocol-upgrade-countdown';
|
||||
export * from './protocol-upgrade-proposal-notification';
|
||||
|
||||
@@ -0,0 +1,99 @@
|
||||
import { t } from '@vegaprotocol/i18n';
|
||||
import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
|
||||
import { convertToCountdownString } from '@vegaprotocol/utils';
|
||||
import { IconNames } from '@blueprintjs/icons';
|
||||
import classNames from 'classnames';
|
||||
import { Icon, NavigationContext } from '@vegaprotocol/ui-toolkit';
|
||||
import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
|
||||
import { useContext } from 'react';
|
||||
export enum ProtocolUpgradeCountdownMode {
|
||||
IN_BLOCKS,
|
||||
IN_ESTIMATED_TIME_REMAINING,
|
||||
}
|
||||
type ProtocolUpgradeCountdownProps = {
|
||||
mode?: ProtocolUpgradeCountdownMode;
|
||||
};
|
||||
export const ProtocolUpgradeCountdown = ({
|
||||
mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
|
||||
}: ProtocolUpgradeCountdownProps) => {
|
||||
const { theme } = useContext(NavigationContext);
|
||||
const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
|
||||
|
||||
const time = useTimeToUpgrade(
|
||||
data && data.upgradeBlockHeight
|
||||
? Number(data.upgradeBlockHeight)
|
||||
: undefined
|
||||
);
|
||||
|
||||
const detailsLink = useProtocolUpgradeProposalLink();
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
const emphasis = classNames(
|
||||
'text-vega-orange-500 dark:text-vega-orange-500',
|
||||
{
|
||||
'!text-black': theme === 'yellow',
|
||||
}
|
||||
);
|
||||
|
||||
let countdown;
|
||||
switch (mode) {
|
||||
case ProtocolUpgradeCountdownMode.IN_BLOCKS:
|
||||
countdown = (
|
||||
<>
|
||||
<span className={emphasis}>
|
||||
{Number(data.upgradeBlockHeight) - Number(lastBlockHeight)}
|
||||
</span>{' '}
|
||||
{t('blocks')}
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
|
||||
countdown =
|
||||
time !== undefined ? (
|
||||
<span className={emphasis}>
|
||||
{convertToCountdownString(time, '0:00:00:00')}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={classNames('italic lowercase text-vega-orange-600', {
|
||||
'!text-black': theme === 'yellow',
|
||||
})}
|
||||
>
|
||||
{t('estimating...')}
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
href={detailsLink(data.vegaReleaseTag)}
|
||||
target="_blank"
|
||||
rel="noreferrer nofollow noopener"
|
||||
>
|
||||
<div
|
||||
data-testid="protocol-upgrade-counter"
|
||||
className={classNames(
|
||||
'flex flex-nowrap items-center text-xs py-2 px-4',
|
||||
'border rounded',
|
||||
'border-vega-orange-500 dark:border-vega-orange-500',
|
||||
'bg-vega-orange-300 dark:bg-vega-orange-700',
|
||||
{
|
||||
'!bg-transparent !border-black': theme === 'yellow',
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
name={IconNames.WARNING_SIGN}
|
||||
size={3}
|
||||
className={classNames('mr-2', emphasis)}
|
||||
/>{' '}
|
||||
<span className="flex gap-1 flex-nowrap whitespace-nowrap">
|
||||
<span>{t('Network upgrade in')} </span>
|
||||
{countdown}
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,79 @@
|
||||
import {
|
||||
ExternalLink,
|
||||
Intent,
|
||||
NotificationBanner,
|
||||
} from '@vegaprotocol/ui-toolkit';
|
||||
import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
|
||||
import { t } from '@vegaprotocol/i18n';
|
||||
import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
|
||||
import { ProtocolUpgradeCountdownMode } from './protocol-upgrade-countdown';
|
||||
import { convertToCountdownString } from '@vegaprotocol/utils';
|
||||
import { useState } from 'react';
|
||||
|
||||
type ProtocolUpgradeProposalNotificationProps = {
|
||||
mode?: ProtocolUpgradeCountdownMode;
|
||||
};
|
||||
export const ProtocolUpgradeProposalNotification = ({
|
||||
mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
|
||||
}: ProtocolUpgradeProposalNotificationProps) => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
|
||||
const detailsLink = useProtocolUpgradeProposalLink();
|
||||
const time = useTimeToUpgrade(
|
||||
data && data.upgradeBlockHeight
|
||||
? Number(data.upgradeBlockHeight)
|
||||
: undefined
|
||||
);
|
||||
|
||||
if (!data || !lastBlockHeight || !visible) return null;
|
||||
|
||||
const { vegaReleaseTag, upgradeBlockHeight } = data;
|
||||
|
||||
let countdown;
|
||||
switch (mode) {
|
||||
case ProtocolUpgradeCountdownMode.IN_BLOCKS:
|
||||
countdown = (
|
||||
<>
|
||||
<span className="text-vega-orange-500">
|
||||
{Number(upgradeBlockHeight) - Number(lastBlockHeight)}
|
||||
</span>{' '}
|
||||
{t('blocks')}
|
||||
</>
|
||||
);
|
||||
break;
|
||||
case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
|
||||
countdown =
|
||||
time !== undefined ? (
|
||||
<span className="text-vega-orange-500">
|
||||
{convertToCountdownString(time, '0:00:00:00')}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-vega-orange-600 lowercase italic">
|
||||
{t('estimating...')}
|
||||
</span>
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<NotificationBanner
|
||||
intent={Intent.Warning}
|
||||
onClose={() => {
|
||||
setVisible(false);
|
||||
}}
|
||||
>
|
||||
<div className="uppercase ">
|
||||
{t('The network will upgrade to %s in ', [data.vegaReleaseTag])}
|
||||
{countdown}
|
||||
</div>
|
||||
<div>
|
||||
{t(
|
||||
'Trading activity will be interrupted, manage your risk appropriately.'
|
||||
)}{' '}
|
||||
<ExternalLink href={detailsLink(vegaReleaseTag)}>
|
||||
{t('View details')}
|
||||
</ExternalLink>
|
||||
</div>
|
||||
</NotificationBanner>
|
||||
);
|
||||
};
|
||||
@@ -3,3 +3,4 @@ export * from './voting-hooks';
|
||||
export * from './proposals-data-provider';
|
||||
export * from './proposals-list';
|
||||
export * from './voting-progress';
|
||||
export * from './protocol-upgrade-proposals';
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
query BlockStatistics {
|
||||
statistics {
|
||||
blockHeight
|
||||
blockDuration
|
||||
}
|
||||
}
|
||||
+2
-2
@@ -5,9 +5,9 @@ fragment ProtocolUpgradeProposalFields on ProtocolUpgradeProposal {
|
||||
status
|
||||
}
|
||||
|
||||
query ProtocolUpgrades {
|
||||
query ProtocolUpgradeProposals($inState: ProtocolUpgradeProposalStatus) {
|
||||
lastBlockHeight
|
||||
protocolUpgradeProposals {
|
||||
protocolUpgradeProposals(inState: $inState) {
|
||||
edges {
|
||||
node {
|
||||
...ProtocolUpgradeProposalFields
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
import * as Types from '@vegaprotocol/types';
|
||||
|
||||
import { gql } from '@apollo/client';
|
||||
import * as Apollo from '@apollo/client';
|
||||
const defaultOptions = {} as const;
|
||||
export type BlockStatisticsQueryVariables = Types.Exact<{ [key: string]: never; }>;
|
||||
|
||||
|
||||
export type BlockStatisticsQuery = { __typename?: 'Query', statistics: { __typename?: 'Statistics', blockHeight: string, blockDuration: string } };
|
||||
|
||||
|
||||
export const BlockStatisticsDocument = gql`
|
||||
query BlockStatistics {
|
||||
statistics {
|
||||
blockHeight
|
||||
blockDuration
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* __useBlockStatisticsQuery__
|
||||
*
|
||||
* To run a query within a React component, call `useBlockStatisticsQuery` and pass it any options that fit your needs.
|
||||
* When your component renders, `useBlockStatisticsQuery` returns an object from Apollo Client that contains loading, error, and data properties
|
||||
* you can use to render your UI.
|
||||
*
|
||||
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
|
||||
*
|
||||
* @example
|
||||
* const { data, loading, error } = useBlockStatisticsQuery({
|
||||
* variables: {
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useBlockStatisticsQuery(baseOptions?: Apollo.QueryHookOptions<BlockStatisticsQuery, BlockStatisticsQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useQuery<BlockStatisticsQuery, BlockStatisticsQueryVariables>(BlockStatisticsDocument, options);
|
||||
}
|
||||
export function useBlockStatisticsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<BlockStatisticsQuery, BlockStatisticsQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useLazyQuery<BlockStatisticsQuery, BlockStatisticsQueryVariables>(BlockStatisticsDocument, options);
|
||||
}
|
||||
export type BlockStatisticsQueryHookResult = ReturnType<typeof useBlockStatisticsQuery>;
|
||||
export type BlockStatisticsLazyQueryHookResult = ReturnType<typeof useBlockStatisticsLazyQuery>;
|
||||
export type BlockStatisticsQueryResult = Apollo.QueryResult<BlockStatisticsQuery, BlockStatisticsQueryVariables>;
|
||||
Generated
+62
@@ -0,0 +1,62 @@
|
||||
import * as Types from '@vegaprotocol/types';
|
||||
|
||||
import { gql } from '@apollo/client';
|
||||
import * as Apollo from '@apollo/client';
|
||||
const defaultOptions = {} as const;
|
||||
export type ProtocolUpgradeProposalFieldsFragment = { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus };
|
||||
|
||||
export type ProtocolUpgradeProposalsQueryVariables = Types.Exact<{
|
||||
inState?: Types.InputMaybe<Types.ProtocolUpgradeProposalStatus>;
|
||||
}>;
|
||||
|
||||
|
||||
export type ProtocolUpgradeProposalsQuery = { __typename?: 'Query', lastBlockHeight: string, protocolUpgradeProposals?: { __typename?: 'ProtocolUpgradeProposalConnection', edges?: Array<{ __typename?: 'ProtocolUpgradeProposalEdge', node: { __typename?: 'ProtocolUpgradeProposal', upgradeBlockHeight: string, vegaReleaseTag: string, approvers: Array<string>, status: Types.ProtocolUpgradeProposalStatus } }> | null } | null };
|
||||
|
||||
export const ProtocolUpgradeProposalFieldsFragmentDoc = gql`
|
||||
fragment ProtocolUpgradeProposalFields on ProtocolUpgradeProposal {
|
||||
upgradeBlockHeight
|
||||
vegaReleaseTag
|
||||
approvers
|
||||
status
|
||||
}
|
||||
`;
|
||||
export const ProtocolUpgradeProposalsDocument = gql`
|
||||
query ProtocolUpgradeProposals($inState: ProtocolUpgradeProposalStatus) {
|
||||
lastBlockHeight
|
||||
protocolUpgradeProposals(inState: $inState) {
|
||||
edges {
|
||||
node {
|
||||
...ProtocolUpgradeProposalFields
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${ProtocolUpgradeProposalFieldsFragmentDoc}`;
|
||||
|
||||
/**
|
||||
* __useProtocolUpgradeProposalsQuery__
|
||||
*
|
||||
* To run a query within a React component, call `useProtocolUpgradeProposalsQuery` and pass it any options that fit your needs.
|
||||
* When your component renders, `useProtocolUpgradeProposalsQuery` returns an object from Apollo Client that contains loading, error, and data properties
|
||||
* you can use to render your UI.
|
||||
*
|
||||
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
|
||||
*
|
||||
* @example
|
||||
* const { data, loading, error } = useProtocolUpgradeProposalsQuery({
|
||||
* variables: {
|
||||
* inState: // value for 'inState'
|
||||
* },
|
||||
* });
|
||||
*/
|
||||
export function useProtocolUpgradeProposalsQuery(baseOptions?: Apollo.QueryHookOptions<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useQuery<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>(ProtocolUpgradeProposalsDocument, options);
|
||||
}
|
||||
export function useProtocolUpgradeProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>) {
|
||||
const options = {...defaultOptions, ...baseOptions}
|
||||
return Apollo.useLazyQuery<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>(ProtocolUpgradeProposalsDocument, options);
|
||||
}
|
||||
export type ProtocolUpgradeProposalsQueryHookResult = ReturnType<typeof useProtocolUpgradeProposalsQuery>;
|
||||
export type ProtocolUpgradeProposalsLazyQueryHookResult = ReturnType<typeof useProtocolUpgradeProposalsLazyQuery>;
|
||||
export type ProtocolUpgradeProposalsQueryResult = Apollo.QueryResult<ProtocolUpgradeProposalsQuery, ProtocolUpgradeProposalsQueryVariables>;
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './__generated__/ProtocolUpgradeProposals';
|
||||
export * from './use-next-protocol-upgrade-proposals';
|
||||
export * from './use-time-to-upgrade';
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import { useMemo } from 'react';
|
||||
import * as Schema from '@vegaprotocol/types';
|
||||
import { removePaginationWrapper } from '@vegaprotocol/utils';
|
||||
import { useProtocolUpgradeProposalsQuery } from './__generated__/ProtocolUpgradeProposals';
|
||||
|
||||
export const useNextProtocolUpgradeProposals = (since?: number) => {
|
||||
const { data, loading, error } = useProtocolUpgradeProposalsQuery({
|
||||
pollInterval: 5000,
|
||||
fetchPolicy: 'network-only',
|
||||
errorPolicy: 'ignore',
|
||||
variables: {
|
||||
inState:
|
||||
Schema.ProtocolUpgradeProposalStatus
|
||||
.PROTOCOL_UPGRADE_PROPOSAL_STATUS_APPROVED,
|
||||
},
|
||||
});
|
||||
|
||||
const nextUpgrades = useMemo(() => {
|
||||
if (!data) return [];
|
||||
|
||||
const proposals = removePaginationWrapper(
|
||||
data?.protocolUpgradeProposals?.edges
|
||||
);
|
||||
|
||||
return proposals
|
||||
.filter(
|
||||
(p) =>
|
||||
Number(p.upgradeBlockHeight) > (since || Number(data.lastBlockHeight))
|
||||
)
|
||||
.sort(
|
||||
(a, b) => Number(a.upgradeBlockHeight) - Number(b.upgradeBlockHeight)
|
||||
);
|
||||
}, [data, since]);
|
||||
|
||||
return {
|
||||
data: nextUpgrades,
|
||||
lastBlockHeight: data?.lastBlockHeight,
|
||||
loading,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export const useNextProtocolUpgradeProposal = (since?: number) => {
|
||||
const { data, lastBlockHeight, loading, error } =
|
||||
useNextProtocolUpgradeProposals(since);
|
||||
|
||||
return {
|
||||
data: !data ? undefined : data[0],
|
||||
lastBlockHeight,
|
||||
loading,
|
||||
error,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { renderHook, waitFor } from '@testing-library/react';
|
||||
import { useTimeToUpgrade } from './use-time-to-upgrade';
|
||||
|
||||
jest.mock('./__generated__/BlockStatistics', () => ({
|
||||
...jest.requireActual('./__generated__/BlockStatistics'),
|
||||
useBlockStatisticsQuery: jest.fn(() => {
|
||||
return {
|
||||
data: {
|
||||
statistics: {
|
||||
blockHeight: 1,
|
||||
blockDuration: 500,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('useTimeToUpgrade', () => {
|
||||
it.each([
|
||||
[-1, -1000],
|
||||
[0, -500],
|
||||
[1, 0],
|
||||
[2, 500],
|
||||
[3, 1000],
|
||||
[10, 4500],
|
||||
])('time in %d block(s) should be %d ms', async (block, avg) => {
|
||||
const { result } = renderHook(() => useTimeToUpgrade(block, 1));
|
||||
await waitFor(() => {
|
||||
expect(result.current).toEqual(avg);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useBlockStatisticsQuery } from './__generated__/BlockStatistics';
|
||||
import sum from 'lodash/sum';
|
||||
|
||||
const DEFAULT_POLLS = 10;
|
||||
const INTERVAL = 1000;
|
||||
const durations = [] as number[];
|
||||
|
||||
const useAverageBlockDuration = (polls = DEFAULT_POLLS) => {
|
||||
const [avg, setAvg] = useState<number | undefined>(undefined);
|
||||
const { data } = useBlockStatisticsQuery({
|
||||
pollInterval: INTERVAL,
|
||||
fetchPolicy: 'network-only',
|
||||
errorPolicy: 'ignore',
|
||||
skip: durations.length === polls,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (durations.length < polls && data) {
|
||||
durations.push(parseFloat(data.statistics.blockDuration));
|
||||
}
|
||||
if (durations.length === polls) {
|
||||
const averageBlockDuration = sum(durations) / durations.length; // ms
|
||||
console.log('setting avg', averageBlockDuration);
|
||||
setAvg(averageBlockDuration);
|
||||
}
|
||||
}, [data, polls]);
|
||||
|
||||
return avg;
|
||||
};
|
||||
|
||||
export const useTimeToUpgrade = (
|
||||
upgradeBlockHeight?: number,
|
||||
polls = DEFAULT_POLLS
|
||||
) => {
|
||||
const [time, setTime] = useState<number | undefined>(undefined);
|
||||
const avg = useAverageBlockDuration(polls);
|
||||
const { data } = useBlockStatisticsQuery({
|
||||
fetchPolicy: 'network-only',
|
||||
errorPolicy: 'ignore',
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const t =
|
||||
(Number(upgradeBlockHeight) - Number(data?.statistics.blockHeight)) *
|
||||
Number(avg);
|
||||
if (!isNaN(t)) {
|
||||
setTime(t);
|
||||
}
|
||||
}, [avg, data?.statistics.blockHeight, upgradeBlockHeight]);
|
||||
|
||||
useEffect(() => {
|
||||
const i = setInterval(() => {
|
||||
if (time !== undefined) {
|
||||
setTime(time - 1000);
|
||||
}
|
||||
}, 1000);
|
||||
return () => {
|
||||
clearInterval(i);
|
||||
};
|
||||
}, [time]);
|
||||
|
||||
return time;
|
||||
};
|
||||
@@ -7,7 +7,7 @@ interface Asset {
|
||||
};
|
||||
}
|
||||
|
||||
interface ERC20Asset {
|
||||
export interface ERC20Asset {
|
||||
__typename?: 'Asset';
|
||||
source: {
|
||||
__typename: 'ERC20';
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import { getSecondsFromInterval } from './time';
|
||||
import {
|
||||
convertToCountdown,
|
||||
convertToCountdownString,
|
||||
getSecondsFromInterval,
|
||||
} from './time';
|
||||
|
||||
describe('getSecondsFromInterval', () => {
|
||||
it('returns 0 for bad data', () => {
|
||||
@@ -34,3 +38,44 @@ describe('getSecondsFromInterval', () => {
|
||||
expect(getSecondsFromInterval('1D1h30m1s')).toEqual(91801);
|
||||
});
|
||||
});
|
||||
|
||||
describe('convertToCountdown', () => {
|
||||
it.each([
|
||||
[1 * 1000, [0, 0, 0, 1]],
|
||||
[2 * 1000, [0, 0, 0, 2]],
|
||||
[3999, [0, 0, 0, 3]],
|
||||
[1 * 60 * 1000 + 3 * 1000, [0, 0, 1, 3]],
|
||||
[12 * 60 * 1000 + 3 * 1000, [0, 0, 12, 3]],
|
||||
[3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000, [0, 3, 12, 3]],
|
||||
[
|
||||
30 * 24 * 60 * 60 * 1000 + 3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000,
|
||||
[30, 3, 12, 3],
|
||||
],
|
||||
[
|
||||
-1 *
|
||||
(30 * 24 * 60 * 60 * 1000 +
|
||||
3 * 60 * 60 * 1000 +
|
||||
12 * 60 * 1000 +
|
||||
3 * 1000),
|
||||
[30, 3, 12, 3],
|
||||
],
|
||||
])('converts %d ms to %s', (time, countdown) => {
|
||||
expect(convertToCountdown(time)).toEqual(countdown);
|
||||
});
|
||||
});
|
||||
|
||||
describe('convertToCountdownString', () => {
|
||||
it.each([
|
||||
[1 * 1000, '00m01s'],
|
||||
[2 * 1000, '00m02s'],
|
||||
[1 * 60 * 1000 + 3 * 1000, '01m03s'],
|
||||
[12 * 60 * 1000 + 3 * 1000, '12m03s'],
|
||||
[3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000, '03h12m03s'],
|
||||
[
|
||||
30 * 24 * 60 * 60 * 1000 + 3 * 60 * 60 * 1000 + 12 * 60 * 1000 + 3 * 1000,
|
||||
'30d03h12m03s',
|
||||
],
|
||||
])('converts %d ms to %s', (time, countdown) => {
|
||||
expect(convertToCountdownString(time)).toEqual(countdown);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -46,3 +46,47 @@ export function getSecondsFromInterval(str: string) {
|
||||
}
|
||||
return seconds;
|
||||
}
|
||||
|
||||
export const convertToCountdown = (time: number) => {
|
||||
const s = 1000;
|
||||
const m = 1000 * 60;
|
||||
const h = 1000 * 60 * 60;
|
||||
const d = 1000 * 60 * 60 * 24;
|
||||
|
||||
const t = Math.abs(time);
|
||||
|
||||
const days = Math.floor(t / d);
|
||||
const hours = Math.floor((t - days * d) / h);
|
||||
const minutes = Math.floor((t - days * d - hours * h) / m);
|
||||
const seconds = Math.floor((t - days * d - hours * h - minutes * m) / s);
|
||||
|
||||
return [days, hours, minutes, seconds];
|
||||
};
|
||||
|
||||
/**
|
||||
* Converts given time in ms to countdown string, e.g. 1d20h34m10s
|
||||
*/
|
||||
export const convertToCountdownString = (
|
||||
time: number,
|
||||
pattern = '0d00h00m00s'
|
||||
) => {
|
||||
const values = convertToCountdown(time);
|
||||
|
||||
let i = 0;
|
||||
const countdown = pattern
|
||||
.replace(/00*/g, (match) => {
|
||||
const value = String(values[i++]);
|
||||
if (value.length < match.length) {
|
||||
const filler = Array(match.length - value.length)
|
||||
.fill('0')
|
||||
.join('');
|
||||
return `${filler}${value}`;
|
||||
}
|
||||
|
||||
return value;
|
||||
})
|
||||
.replace(/^00*[^\d]*/g, '') // replace leading 00, e.g. 00d01h23m45s -> 01h23m45s
|
||||
.replace(/^00[^\d]*/g, ''); // replace leading 00, e.g. 00d00h23m45s -> 23m45s
|
||||
|
||||
return countdown;
|
||||
};
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import { useAccountBalance } from '@vegaprotocol/accounts';
|
||||
import type { AssetFieldsFragment } from '@vegaprotocol/assets';
|
||||
import { useBalancesStore } from '@vegaprotocol/assets';
|
||||
import { Balance } from '@vegaprotocol/assets';
|
||||
import { addDecimal } from '@vegaprotocol/utils';
|
||||
import BigNumber from 'bignumber.js';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export const AssetBalance = ({ asset }: { asset: AssetFieldsFragment }) => {
|
||||
const [setBalance, getBalance] = useBalancesStore((state) => [
|
||||
state.setBalance,
|
||||
state.getBalance,
|
||||
]);
|
||||
const { accountBalance, accountDecimals } = useAccountBalance(asset?.id);
|
||||
|
||||
useEffect(() => {
|
||||
const balance =
|
||||
accountBalance && accountDecimals
|
||||
? new BigNumber(addDecimal(accountBalance, accountDecimals))
|
||||
: undefined;
|
||||
setBalance({ asset, balanceOnVega: balance });
|
||||
}, [accountBalance, accountDecimals, asset, setBalance]);
|
||||
|
||||
return (
|
||||
<Balance
|
||||
balance={getBalance(asset.id)?.balanceOnVega?.toString()}
|
||||
symbol={asset.symbol}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,7 @@
|
||||
import { render, screen, act, waitFor } from '@testing-library/react';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import type { Account } from '@vegaprotocol/accounts';
|
||||
import { useAccountBalance } from '@vegaprotocol/accounts';
|
||||
import { WithdrawFormContainer } from './withdraw-form-container';
|
||||
import * as Types from '@vegaprotocol/types';
|
||||
import { useWeb3React } from '@web3-react/core';
|
||||
@@ -12,6 +13,7 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
|
||||
}),
|
||||
}));
|
||||
jest.mock('@web3-react/core');
|
||||
jest.mock('@vegaprotocol/accounts');
|
||||
|
||||
describe('WithdrawFormContainer', () => {
|
||||
const props = {
|
||||
@@ -91,6 +93,10 @@ describe('WithdrawFormContainer', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
(useWeb3React as jest.Mock).mockReturnValue({ account: MOCK_ETH_ADDRESS });
|
||||
(useAccountBalance as jest.Mock).mockReturnValue({
|
||||
accountBalance: 0,
|
||||
accountDecimals: null,
|
||||
});
|
||||
});
|
||||
afterEach(() => {
|
||||
jest.resetAllMocks();
|
||||
|
||||
@@ -8,6 +8,11 @@ import type { Asset } from '@vegaprotocol/assets';
|
||||
|
||||
jest.mock('@web3-react/core');
|
||||
|
||||
jest.mock('@vegaprotocol/accounts', () => ({
|
||||
...jest.requireActual('@vegaprotocol/accounts'),
|
||||
useAccountBalance: jest.fn(() => ({ accountBalance: 0, accountDecimals: 0 })),
|
||||
}));
|
||||
|
||||
const MOCK_ETH_ADDRESS = '0x72c22822A19D20DE7e426fB84aa047399Ddd8853';
|
||||
|
||||
let assets: Asset[];
|
||||
|
||||
@@ -33,6 +33,7 @@ import {
|
||||
useWeb3ConnectStore,
|
||||
useWeb3Disconnect,
|
||||
} from '@vegaprotocol/web3';
|
||||
import { AssetBalance } from './asset-balance';
|
||||
|
||||
interface FormFields {
|
||||
asset: string;
|
||||
@@ -154,7 +155,11 @@ export const WithdrawForm = ({
|
||||
hasError={Boolean(errors.asset?.message)}
|
||||
>
|
||||
{assets.filter(isAssetTypeERC20).map((a) => (
|
||||
<AssetOption key={a.id} asset={a} />
|
||||
<AssetOption
|
||||
key={a.id}
|
||||
asset={a}
|
||||
balance={<AssetBalance asset={a} />}
|
||||
/>
|
||||
))}
|
||||
</RichSelect>
|
||||
);
|
||||
|
||||
@@ -25,6 +25,11 @@ jest.mock('./use-withdraw-asset', () => ({
|
||||
useWithdrawAsset: () => withdrawAsset,
|
||||
}));
|
||||
|
||||
jest.mock('@vegaprotocol/accounts', () => ({
|
||||
...jest.requireActual('@vegaprotocol/accounts'),
|
||||
useAccountBalance: jest.fn(() => ({ accountBalance: 0, accountDecimals: 0 })),
|
||||
}));
|
||||
|
||||
jest.mock('@vegaprotocol/web3', () => ({
|
||||
...jest.requireActual('@vegaprotocol/web3'),
|
||||
useGetWithdrawThreshold: () => {
|
||||
|
||||
Reference in New Issue
Block a user