Compare commits

..
Author SHA1 Message Date
Madalina Raicu 90a4ed306b fix(trading): add use vega tx toast intent tests 2023-04-12 16:52:24 +03:00
Madalina Raicu 5b321311f6 fix(orders): add utils.spec.ts 2023-04-12 16:23:57 +03:00
Madalina Raicu 1b737ae5ee fix: order toast intent 2023-04-12 16:12:23 +03:00
86 changed files with 1020 additions and 2854 deletions
+4 -84
View File
@@ -4,54 +4,14 @@ on:
push:
branches:
- release/*
- develop
pull_request:
types:
- opened
- ready_for_review
- reopened
- edited
- synchronize
- ready_for_review
jobs:
node-modules:
runs-on: ubuntu-22.04
name: 'Cache yarn modules'
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Cache node modules
id: cache
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
# comment out "resotre-keys" if you need to rebuild yarn from 0
restore-keys: |
${{ runner.os }}-cache-node-modules-
- name: Setup node
uses: actions/setup-node@v3
if: steps.cache.outputs.cache-hit != 'true'
with:
node-version-file: '.nvmrc'
# https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
cache: yarn
- name: yarn install
if: steps.cache.outputs.cache-hit != 'true'
run: yarn install --pure-lockfile
lint-pr-title:
needs: node-modules
if: ${{ github.event_name == 'pull_request' }}
name: Verify PR title
uses: ./.github/workflows/lint-pr.yml
secrets: inherit
lint-test-build:
timeout-minutes: 20
needs: node-modules
runs-on: ubuntu-22.04
name: '(CI) lint + unit test + build'
steps:
@@ -67,11 +27,8 @@ jobs:
# https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
cache: yarn
- name: Cache node modules
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
- name: Install root dependencies
run: yarn install --frozen-lockfile
- name: Derive appropriate SHAs for base and head for `nx affected` commands
uses: nrwl/nx-set-shas@v3
@@ -91,7 +48,7 @@ jobs:
run: yarn nx affected:test
- name: Build affected
run: yarn nx affected:build || (yarn install && yarn nx affected:build)
run: yarn nx affected:build
# See affected apps
- name: See affected apps
@@ -138,43 +95,6 @@ jobs:
with:
projects: ${{ needs.lint-test-build.outputs.projects }}
dist-check:
runs-on: ubuntu-latest
needs: publish-dist
if: ${{ github.event_name == 'pull_request' }}
name: '(CD) comment preview links'
steps:
- name: Find Comment
uses: peter-evans/find-comment@v2
id: fc
with:
issue-number: ${{ github.event.pull_request.number }}
body-includes: Previews
- name: Inject slug/short variables
if: ${{ steps.fc.outputs.comment-id == 0 }}
uses: rlespinasse/github-slug-action@v4
with:
prefix: CI_
- name: Create comment
if: ${{ steps.fc.outputs.comment-id == 0 }}
uses: peter-evans/create-or-update-comment@v3
with:
issue-number: ${{ github.event.pull_request.number }}
body: |
Previews
- explorer https://explorer.${{ env.CI_GITHUB_REF_NAME }}.vega.rocks
- trading https://trading.${{ env.CI_GITHUB_REF_NAME }}.vega.rocks
- governance https://governance.${{ env.CI_GITHUB_REF_NAME }}.vega.rocks
cypress-check:
name: '(CI) cypress - check'
runs-on: ubuntu-latest
needs: cypress
steps:
- run: echo Done!
# Report single result at the end, to avoid mess with required checks in PR
cypress-result:
if: ${{ always() }}
@@ -2,11 +2,15 @@
name: Verify PR title
on:
workflow_call:
pull_request:
types:
- opened
- ready_for_review
- reopened
- edited
- synchronize
jobs:
lint_pr:
timeout-minutes: 10
runs-on: ubuntu-22.04
steps:
- name: Checkout
@@ -19,11 +23,8 @@ jobs:
# https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
cache: yarn
- name: Cache node modules
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
- name: Install root dependencies
run: yarn install --frozen-lockfile
- name: Check PR title
run: echo "${{ github.event.pull_request.title }}" | npx commitlint --config ./commitlint.config-ci.js
+27 -90
View File
@@ -15,7 +15,6 @@ jobs:
app: ${{ fromJSON(inputs.projects) }}
name: ${{ matrix.app }}
runs-on: ubuntu-22.04
timeout-minutes: 20
steps:
- name: Check out code
uses: actions/checkout@v3
@@ -37,131 +36,66 @@ jobs:
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- name: Setup node
uses: actions/setup-node@v3
with:
node-version-file: '.nvmrc'
# https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
cache: yarn
- name: Cache node modules
uses: actions/cache@v3
with:
path: node_modules
key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
# https://docs.github.com/en/actions/learn-github-actions/contexts
- name: Define variables
- name: Check node version
id: tags
run: |
envName=''
dockerfile="dist.Dockerfile"
if [[ "${{ github.event_name }}" = "push" ]]; then
domain="vega.rocks"
if [[ "${{ github.ref }}" =~ .*release/.* ]]; then
envName="$(echo ${{ github.ref }} | rev | cut -d '/' -f 1 | rev)"
if [[ "${{ github.ref }}" =~ .*mainnet.* ]]; then
domain="vega.community"
if [[ "${{ matrix.app }}" = "trading" ]]; then
dockerfile="ipfs.Dockerfile"
fi
fi
elif [[ "${{ github.ref }}" =~ .*develop$ ]]; then
envName="stagnet3"
fi
bucketName="${{ matrix.app }}.${envName}.${domain}"
echo BUCKET_NAME=${bucketName} >> $GITHUB_ENV
fi
nodeVersion=$(cat .nvmrc | head -n 1)
echo ENV_NAME=${envName} >> $GITHUB_ENV
echo NODE_VERSION=${nodeVersion} >> $GITHUB_ENV
echo DOCKERFILE=docker/${dockerfile} >> $GITHUB_ENV
echo ::set-output name=nodeVersion::${nodeVersion}
- name: Build local dist
if: ${{ env.DOCKERFILE != 'docker/ipfs.Dockerfile' }}
run: |
flags=""
if [[ ! -z "${{ env.ENV_NAME }}" ]]; then
if [[ "${{ env.ENV_NAME }}" != "ops-vega" ]]; then
flags="--env=${{ env.ENV_NAME }}"
fi
if [[ "${{ github.event_name }}" = "push" ]]; then
envName="$(echo ${{ github.ref }} | rev | cut -d '/' -f 1 | rev)"
bucketName="${{ github.event.repository.name }}-$envName"
echo ::set-output name=bucketName::${bucketName}
echo ::set-output name=envName::${envName}
fi
if [ "${{ matrix.app }}" = "trading" ]; then
yarn nx export trading $flags || (yarn install && yarn nx export trading $flags)
DIST_LOCATION=dist/apps/trading/exported
else
yarn nx build ${{ matrix.app }} $flags || (yarn install && yarn nx build ${{ matrix.app }} $flags)
DIST_LOCATION=dist/apps/${{ matrix.app }}
fi
mv $DIST_LOCATION dist-result
tree dist-result
- name: Build and export to local Docker
id: docker_build
if: ${{ github.event_name == 'pull_request' || ( env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' ) }}
uses: docker/build-push-action@v3
with:
context: .
file: ${{ env.DOCKERFILE }}
load: true
build-args: |
APP=${{ matrix.app }}
NODE_VERSION=${{ env.NODE_VERSION }}
ENV_NAME=${{ env.ENV_NAME }}
NODE_VERSION=${{ steps.tags.outputs.nodeVersion }}
ENV_NAME=${{ steps.tags.outputs.envName || '' }}
tags: |
ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local
- name: Image digest
if: ${{ github.event_name == 'pull_request' || ( env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' ) }}
run: echo ${{ steps.docker_build.outputs.digest }}
- name: Sanity check docker image
if: ${{ github.event_name == 'pull_request' || ( env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' ) }}
run: |
echo "Check ipfs-hash"
if [[ "${{ env.DOCKERFILE }}" = "docker/ipfs.Dockerfile" ]]; then
docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local cat /ipfs-hash
fi
docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local cat ipfs-hash
echo "List html directory"
docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local sh -c 'apk add --update tree; tree .'
docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local ls -lah
- name: Copy dist to local filesystem
if: ${{ env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' }}
run: |
echo "Copy dist to local filesystem"
docker create --name=dist ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local
docker cp dist:/usr/share/nginx/html dist
echo "check local dist files"
tree dist/html
mv dist/html dist-result
echo "Check local dist"
ls -al dist
- name: Publish dist as docker image
uses: docker/build-push-action@v3
if: ${{ github.event_name == 'pull_request' }}
with:
context: .
file: ${{ env.DOCKERFILE }}
push: true
build-args: |
APP=${{ matrix.app }}
NODE_VERSION=${{ env.NODE_VERSION }}
ENV_NAME=${{ env.ENV_NAME }}
NODE_VERSION=${{ steps.tags.outputs.nodeVersion }}
tags: |
ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:${{ github.event.pull_request.head.sha || github.sha }}
# bucket creation in github.com/vegaprotocol/terraform//frontend
- name: Publish dist to s3
uses: jakejarvis/s3-sync-action@master
if: ${{ github.event_name == 'push' }}
with:
args: --acl private --follow-symlinks --delete
env:
AWS_S3_BUCKET: ${{ env.BUCKET_NAME }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: 'eu-west-1'
SOURCE_DIR: 'dist-result'
# - uses: shallwefootball/s3-upload-action@master
# if: ${{ github.event_name == 'push' }}
# name: Upload dist S3
# with:
# aws_key_id: ${{ secrets.AWS_KEY_ID }}
# aws_secret_access_key: ${{ secrets.AWS_SECRET_ACCESS_KEY}}
# aws_bucket: ${{ steps.tags.outputs.bucketName }}
# source_dir: 'dist'
- name: Add preview label
uses: actions-ecosystem/action-add-labels@v1
@@ -169,3 +103,6 @@ jobs:
with:
labels: ${{ matrix.app }}-preview
number: ${{ github.event.number }}
- name: Image digest
run: echo ${{ steps.docker_build.outputs.digest }}
+4 -5
View File
@@ -13,7 +13,7 @@ RUN apk add --update --no-cache \
COPY . ./
RUN yarn --network-timeout 100000 --pure-lockfile
# work around for different build process in trading
RUN sh docker/docker-build.sh
RUN sh ./docker-build.sh
# Server environment
# if this fails you need to docker pull nginx:1.23-alpine and pin new SHA
@@ -23,7 +23,6 @@ FROM --platform=amd64 nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a
EXPOSE 80
# Copy dist
WORKDIR /usr/share/nginx/html
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=build /app/dist/apps/${APP}/* /usr/share/nginx/html
RUN apk add --no-cache go-ipfs; ipfs init && echo "$(ipfs add -rQ .)" > /ipfs-hash; apk del go-ipfs
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/apps/${APP} /usr/share/nginx/html
RUN apk add --no-cache go-ipfs; ipfs init && echo "$(ipfs add -rQ .)" > ipfs-hash; apk del go-ipfs
@@ -10,7 +10,7 @@ export const Footer = () => {
const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
const { screenSize } = useScreenDimensions();
const showFullFeedbackLabel = useMemo(
() => ['md', 'lg', 'xl', 'xxl', 'xxxl'].includes(screenSize),
() => ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize),
[screenSize]
);
+4 -6
View File
@@ -38,16 +38,14 @@ const DialogsContainer = () => {
export const Layout = () => {
const isHome = Boolean(useMatch(Routes.HOME));
const { ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
const fixedWidthClasses = 'w-full max-w-[1500px] mx-auto';
return (
<>
<div
className={classNames(
'min-h-screen',
'max-w-[1500px] min-h-[100vh]',
'mx-auto my-0',
'grid grid-rows-[auto_1fr_auto] grid-cols-1',
'border-vega-light-200 dark:border-vega-dark-200',
'border-vega-light-200 dark:border-vega-dark-200 lg:border-l lg:border-r',
'antialiased text-black dark:text-white',
'overflow-hidden relative'
)}
@@ -61,13 +59,13 @@ export const Layout = () => {
)}
<Header />
</div>
<div className={fixedWidthClasses}>
<div>
<main className="p-4">
{!isHome && <BreadcrumbsContainer className="mb-4" />}
<Outlet />
</main>
</div>
<div className={fixedWidthClasses}>
<div>
<Footer />
</div>
</div>
@@ -44,8 +44,7 @@ describe(
function () {
before('connect wallets and set approval limit', function () {
cy.visit('/');
ethereumWalletConnect();
cy.associateTokensToVegaWallet('1');
vegaWalletSetSpecifiedApprovalAmount('1000');
});
beforeEach('visit proposals tab', function () {
@@ -214,7 +213,6 @@ describe(
// 3001-VOTE-042, 3001-VOTE-057, 3001-VOTE-058, 3001-VOTE-059, 3001-VOTE-060
it('Newly created proposal details - ability to increase associated tokens - by voting again after association', function () {
vegaWalletSetSpecifiedApprovalAmount('1000');
createRawProposal();
cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
getSubmittedProposalFromProposalList(rawProposal.rationale.title)
@@ -13,6 +13,7 @@ import {
createUpdateNetworkProposalTxBody,
createFreeFormProposalTxBody,
} from '../../support/proposal.functions';
import { ensureSpecifiedUnstakedTokensAreAssociated } from '../../support/staking.functions';
import { ethereumWalletConnect } from '../../support/wallet-eth.functions';
import { vegaWalletSetSpecifiedApprovalAmount } from '../../support/wallet-teardown.functions';
@@ -32,6 +33,10 @@ context(
before('Connect wallets and set approval', function () {
cy.visit('/');
vegaWalletSetSpecifiedApprovalAmount('1000');
cy.connectVegaWallet();
ethereumWalletConnect();
ensureSpecifiedUnstakedTokensAreAssociated('1');
cy.clearLocalStorage();
});
beforeEach('visit proposals', function () {
@@ -109,7 +114,7 @@ context(
navigateTo(navigation.proposals);
cy.reload();
waitForSpinner();
cy.get(openProposals, { timeout: 6000 }).within(() => {
cy.get(openProposals).within(() => {
cy.contains(proposalTitle)
.parentsUntil('[data-testid="proposals-list-item"]')
.within(() => cy.get(viewProposalButton).click());
@@ -232,7 +232,7 @@ context(
it('Unable to create a freeform proposal - when json parent section contains unexpected field', function () {
const errorMsg =
'Invalid params: the transaction does not use a valid Vega command: unknown field "unexpected" in vega.commands.v1.ProposalSubmission';
'Invalid params: the transaction does not use a valid Vega command: unknown field unexpected" in vega.commands.v1.ProposalSubmission';
// 3001-VOTE-038 3002-PROP-013 3002-PROP-014
goToMakeNewProposal(governanceProposalType.RAW);
@@ -313,7 +313,7 @@ context(
it('Unable to vote on a proposal - when vega wallet disconnected - option to connect from within', function () {
createRawProposal();
cy.get('[data-testid="manage-vega-wallet"]:visible').click();
cy.get('[data-testid="manage-vega-wallet"]').click();
cy.get('[data-testid="disconnect"]').click();
cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
getSubmittedProposalFromProposalList(
@@ -218,7 +218,7 @@ context(
it('Unable to submit new market proposal with missing/invalid fields', function () {
const errorMsg =
'Invalid params: the transaction does not use a valid Vega command: unknown field "invalid" in vega.NewMarket';
'Invalid params: the transaction is not a valid Vega command: unknown field "filters" in vega.DataSourceDefinition';
goToMakeNewProposal(governanceProposalType.NEW_MARKET);
cy.get(newProposalSubmitButton).should('be.visible').click();
@@ -436,7 +436,7 @@ context(
});
});
it('Able to submit update asset proposal using max deadline', function () {
it.only('Able to submit update asset proposal using max deadline', function () {
goToMakeNewProposal(governanceProposalType.UPDATE_ASSET);
enterUpdateAssetProposalDetails();
cy.get(maxVoteDeadline).click();
@@ -25,11 +25,11 @@ const vegaWalletUnstakedBalance =
'[data-testid="vega-wallet-balance-unstaked"]';
const txTimeout = Cypress.env('txTimeout');
const vegaWalletPublicKeyShort = Cypress.env('vegaWalletPublicKeyShort');
const ethWalletAssociateButton = '[data-testid="associate-btn"]:visible';
const ethWalletAssociateButton = '[data-testid="associate-btn"]';
const associateWalletRadioButton = '[data-testid="associate-radio-wallet"]';
const tokenAmountInputBox = '[data-testid="token-amount-input"]';
const tokenSubmitButton = '[data-testid="token-input-submit-button"]';
const ethWalletDissociateButton = '[href="/token/disassociate"]:visible';
const ethWalletDissociateButton = '[href="/token/disassociate"]';
const vestingContractSection = '[data-testid="vega-in-vesting-contract"]';
const vegaInWalletSection = '[data-testid="vega-in-wallet"]';
const connectedVegaKey = '[data-testid="connected-vega-key"]';
@@ -78,12 +78,12 @@ context(
cy.getByTestId('currency-title', txTimeout).should(
'have.length.above',
6
3
);
validateWalletCurrency('Associated', '0.00');
validateWalletCurrency('Pending association', '2.00');
validateWalletCurrency('Total associated after pending', '2.00');
cy.getByTestId('currency-title', txTimeout).should('have.length', 6);
cy.getByTestId('currency-title', txTimeout).should('have.length', 3);
// 0005-ETXN-002
verifyEthWalletAssociatedBalance('2.0');
@@ -111,12 +111,12 @@ context(
stakingPageDisassociateTokens('2');
cy.getByTestId('currency-title', txTimeout).should(
'have.length.above',
6
3
);
validateWalletCurrency('Associated', '2.00');
validateWalletCurrency('Pending association', '2.00');
validateWalletCurrency('Total associated after pending', '0.00');
cy.getByTestId('currency-title', txTimeout).should('have.length', 6);
cy.getByTestId('currency-title', txTimeout).should('have.length', 3);
cy.getByTestId('eth-wallet-associated-balances', txTimeout).should(
'not.exist'
);
@@ -192,12 +192,12 @@ context(
cy.getByTestId('currency-title', txTimeout).should(
'have.length.above',
6
3
);
validateWalletCurrency('Associated', '0.00');
validateWalletCurrency('Pending association', '2.00');
validateWalletCurrency('Total associated after pending', '2.00');
cy.getByTestId('currency-title', txTimeout).should('have.length', 6);
cy.getByTestId('currency-title', txTimeout).should('have.length', 3);
verifyEthWalletAssociatedBalance('2.0');
verifyEthWalletTotalAssociatedBalance('2.0');
cy.get(vegaWallet).within(() => {
@@ -210,12 +210,12 @@ context(
});
cy.getByTestId('currency-title', txTimeout).should(
'have.length.above',
6
3
);
validateWalletCurrency('Associated', '2.00');
validateWalletCurrency('Pending association', '1.00');
validateWalletCurrency('Total associated after pending', '1.00');
cy.getByTestId('currency-title', txTimeout).should('have.length', 6);
cy.getByTestId('currency-title', txTimeout).should('have.length', 3);
verifyEthWalletAssociatedBalance('1.0');
verifyEthWalletTotalAssociatedBalance('1.0');
});
@@ -266,7 +266,7 @@ context(
// 1004-ASSO-008
// 1004-ASSO-010
// No warning visible as described in AC, but the button is disabled
cy.get(ethWalletAssociateButton).click();
cy.get(ethWalletAssociateButton).first().click();
cy.get(associateWalletRadioButton, { timeout: 30000 }).click();
cy.get(tokenSubmitButton, txTimeout).should('be.disabled'); // button disabled with no input
cy.get(tokenAmountInputBox, { timeout: 10000 }).type('6500000');
@@ -278,12 +278,12 @@ context(
vegaWalletAssociate('2');
cy.getByTestId('currency-title', txTimeout).should(
'have.length.above',
6
3
);
validateWalletCurrency('Associated', '0.00');
validateWalletCurrency('Pending association', '2.00');
validateWalletCurrency('Total associated after pending', '2.00');
cy.getByTestId('currency-title', txTimeout).should('have.length', 6);
cy.getByTestId('currency-title', txTimeout).should('have.length', 3);
validateWalletCurrency('Associated', '2.00');
});
@@ -294,24 +294,24 @@ context(
});
cy.getByTestId('currency-title', txTimeout).should(
'have.length.above',
6
3
);
validateWalletCurrency('Associated', '2.00');
validateWalletCurrency('Pending association', '2.00');
validateWalletCurrency('Total associated after pending', '0.00');
cy.getByTestId('currency-title', txTimeout).should('have.length', 6);
cy.getByTestId('currency-title', txTimeout).should('have.length', 3);
validateWalletCurrency('Associated', '0.00');
});
it('Able to associate tokens to different public key of connected vega wallet', function () {
cy.get(ethWalletAssociateButton).click();
cy.get(ethWalletAssociateButton).first().click();
cy.get(associateWalletRadioButton).click();
cy.get(connectedVegaKey).should(
'have.text',
Cypress.env('vegaWalletPublicKey')
);
cy.get('[data-testid="manage-vega-wallet"]:visible').click();
cy.get('[data-testid="manage-vega-wallet"]').click();
cy.get('[data-testid="select-keypair-button"]').eq(0).click();
cy.get(connectedVegaKey).should(
'have.text',
@@ -166,7 +166,6 @@ export function goToMakeNewProposal(proposalType: string) {
navigateTo(navigation.proposals);
cy.get(newProposalButton).should('be.visible').click();
cy.url().should('include', '/proposals/propose');
cy.get(navigation.pageSpinner, { timeout: 20000 }).should('not.exist');
cy.get('li').should('contain.text', proposalType).and('be.visible');
cy.get('li').contains(proposalType).click();
}
@@ -8,7 +8,6 @@ import {
} from '@vegaprotocol/smart-contracts';
import { ethers, Wallet } from 'ethers';
const associatedAmountInWallet = '[data-testid="associated-amount"]:visible';
const vegaWalletContainer = 'aside [data-testid="vega-wallet"]';
const vegaWalletMnemonic = Cypress.env('vegaWalletMnemonic');
const vegaWalletPubKey = Cypress.env('vegaWalletPublicKey');
@@ -60,7 +59,7 @@ export async function faucetAsset(assetEthAddress: string) {
}
export async function vegaWalletTeardown() {
cy.get(associatedAmountInWallet)
cy.get('[data-testid="associated-amount"]')
.should('be.visible')
.invoke('text')
.then((associatedAmount) => {
@@ -69,12 +68,12 @@ export async function vegaWalletTeardown() {
$body.find('[data-testid="eth-wallet-associated-balances"]').length ||
associatedAmount != '0.00'
) {
vegaWalletTeardownStaking(stakingBridgeContract);
vegaWalletTeardownVesting(vestingContract);
vegaWalletTeardownStaking(stakingBridgeContract);
}
});
cy.get(vegaWalletContainer).within(() => {
cy.get(associatedAmountInWallet, {
cy.getByTestId('associated-amount', {
timeout: transactionTimeout,
}).contains('0.00', {
timeout: transactionTimeout,
@@ -91,7 +90,7 @@ export async function vegaWalletSetSpecifiedApprovalAmount(
await promiseWithTimeout(
token.approve(
ethStakingBridgeContractAddress,
resetAmount + '0'.repeat(18)
resetAmount.concat('000000000000000000')
),
10 * 60 * 1000,
'set approval amount'
@@ -105,23 +104,12 @@ async function vegaWalletTeardownStaking(stakingBridgeContract: StakingBridge) {
{ timeout: transactionTimeout, log: false }
).then((stakeBalance) => {
if (Number(stakeBalance) != 0) {
cy.get('[data-testid="vega-wallet-balance-unstaked"]:visible').within(
() => {
cy.get(associatedAmountInWallet)
.invoke('text')
.then(($walletAmount) => {
cy.wrap(
stakingBridgeContract.remove_stake(
String(stakeBalance),
vegaWalletPubKey
),
{ timeout: transactionTimeout, log: false }
);
cy.get(associatedAmountInWallet, {
timeout: transactionTimeout,
}).should('not.have.text', $walletAmount);
});
}
cy.wrap(
stakingBridgeContract.remove_stake(
String(stakeBalance),
vegaWalletPubKey
),
{ timeout: transactionTimeout, log: false }
);
}
});
@@ -136,6 +124,7 @@ async function vegaWalletTeardownVesting(vestingContract: TokenVesting) {
if (Number(vestingAmount) != 0) {
// Wait needed to allow time for ganache to process tx for stakingBridgeContract.remove_stake
// eslint-disable-next-line cypress/no-unnecessary-waiting
cy.wait(1000);
cy.wrap(
vestingContract.remove_stake(String(vestingAmount), vegaWalletPubKey),
{ timeout: transactionTimeout, log: false }
@@ -1,19 +1,15 @@
import classNames from 'classnames';
import { useVegaWallet } from '@vegaprotocol/wallet';
import type { ReactNode } from 'react';
import { AnnouncementBanner } from '@vegaprotocol/announcements';
import { Nav } from '../nav';
import { Networks, useEnvironment } from '@vegaprotocol/environment';
import React from 'react';
interface AppLayoutProps {
children: ReactNode;
}
export const AppLayout = ({ children }: AppLayoutProps) => {
const { VEGA_ENV, ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
const { isReadOnly } = useVegaWallet();
const AppLayoutClasses = classNames(
'app w-full max-w-[1500px] mx-auto grid',
'app w-full max-w-[1500px] mx-auto grid min-h-full',
'border-neutral-700 lg:border-l lg:border-r',
'lg:text-body-large',
{
'grid-rows-[repeat(2,min-content)_1fr_min-content]': !isReadOnly,
@@ -21,18 +17,5 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
}
);
return (
<div className="min-h-full">
<div className="lg:text-body-large">
{ANNOUNCEMENTS_CONFIG_URL && (
<AnnouncementBanner
app="governance"
configUrl={ANNOUNCEMENTS_CONFIG_URL}
/>
)}
<Nav theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
</div>
<div className={AppLayoutClasses}>{children}</div>
</div>
);
return <div className={AppLayoutClasses}>{children}</div>;
};
@@ -1,16 +1,28 @@
import { Networks, useEnvironment } from '@vegaprotocol/environment';
import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
import { AnnouncementBanner } from '@vegaprotocol/announcements';
import { useVegaWallet } from '@vegaprotocol/wallet';
import React from 'react';
import { Nav } from '../nav';
export interface TemplateSidebarProps {
children: React.ReactNode;
sidebar: React.ReactNode[];
}
export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
const { VEGA_ENV, ANNOUNCEMENTS_CONFIG_URL } = useEnvironment();
const { isReadOnly, pubKey, disconnect } = useVegaWallet();
return (
<>
{ANNOUNCEMENTS_CONFIG_URL && (
<AnnouncementBanner
app="governance"
configUrl={ANNOUNCEMENTS_CONFIG_URL}
/>
)}
<Nav theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
{isReadOnly ? (
<ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
) : null}
@@ -1,8 +1,9 @@
import type { ObservableQuery } from '@apollo/client';
import { useEffect } from 'react';
export const useRefreshAfterEpoch = (
epochExpiry: string | undefined,
refetch: () => void
refetch: ObservableQuery['refetch']
) => {
return useEffect(() => {
const epochInterval = setInterval(() => {
@@ -443,8 +443,8 @@
"rewardType": "Reward type",
"rewardsAndFeesReceived": "Rewards and fees received",
"ThisDoesNotIncludeFeesReceivedForMakersOrLiquidityProviders": "This does not include fees received for makers or liquidity providers",
"totalDistributed": "Total distributed",
"earnedByMe": "Earned by me",
"totalDistributed": "TOTAL DISTRIBUTED",
"earnedByMe": "EARNED BY ME",
"noRewardsHaveBeenDistributedYet": "NO REWARDS HAVE BEEN DISTRIBUTED YET",
"rewardsColAssetHeader": "ASSET",
"rewardsColStakingHeader": "STAKING",
@@ -1,15 +0,0 @@
export const calculateEpochOffset = ({
epochId,
page,
size,
}: {
epochId: number;
page: number;
size: number;
}) => {
// offset the epoch by the current page number times the page size while making sure it doesn't go below the minimum epoch value
return {
fromEpoch: Math.max(0, epochId - size * page) + 1,
toEpoch: epochId - size * page + size,
};
};
@@ -3,7 +3,7 @@ import { AppStateProvider } from '../../../contexts/app-state/app-state-provider
import { EpochIndividualRewardsTable } from './epoch-individual-rewards-table';
const mockData = {
epoch: 4441,
epoch: '4441',
rewards: [
{
asset: 'tDAI',
@@ -1,43 +1,32 @@
import { useMemo, useEffect, useState, useCallback } from 'react';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { AsyncRenderer, Pagination } from '@vegaprotocol/ui-toolkit';
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import { removePaginationWrapper } from '@vegaprotocol/utils';
import type { EpochFieldsFragment } from '../home/__generated__/Rewards';
import { useRewardsQuery } from '../home/__generated__/Rewards';
import { ENV } from '../../../config';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { EpochIndividualRewardsTable } from './epoch-individual-rewards-table';
import { generateEpochIndividualRewardsList } from './generate-epoch-individual-rewards-list';
import { calculateEpochOffset } from '../../../lib/epoch-pagination';
const EPOCHS_PAGE_SIZE = 10;
type EpochTotalRewardsProps = {
currentEpoch: EpochFieldsFragment;
};
export const EpochIndividualRewards = ({
currentEpoch,
}: EpochTotalRewardsProps) => {
// we start from the previous epoch when displaying rewards data, because the current one has no calculated data while ongoing
const epochId = Number(currentEpoch.id) - 1;
const totalPages = Math.ceil(epochId / EPOCHS_PAGE_SIZE);
const [page, setPage] = useState(1);
export const EpochIndividualRewards = () => {
const { t } = useTranslation();
const { pubKey } = useVegaWallet();
const { delegationsPagination } = ENV;
const { data, loading, error, refetch } = useRewardsQuery({
notifyOnNetworkStatusChange: true,
const { data, loading, error } = useRewardsQuery({
variables: {
partyId: pubKey || '',
fromEpoch: epochId - EPOCHS_PAGE_SIZE,
toEpoch: epochId,
delegationsPagination: delegationsPagination
? {
first: Number(delegationsPagination),
}
: undefined,
// we can use the same value for rewardsPagination as delegationsPagination
rewardsPagination: delegationsPagination
? {
first: Number(delegationsPagination),
}
: undefined,
},
skip: !pubKey,
});
@@ -50,37 +39,8 @@ export const EpochIndividualRewards = ({
const epochIndividualRewardSummaries = useMemo(() => {
if (!data?.party) return [];
return generateEpochIndividualRewardsList({
rewards,
epochId,
page,
size: EPOCHS_PAGE_SIZE,
});
}, [data?.party, epochId, page, rewards]);
const refetchData = useCallback(
async (toPage?: number) => {
const targetPage = toPage ?? page;
await refetch({
partyId: pubKey || '',
...calculateEpochOffset({ epochId, page, size: EPOCHS_PAGE_SIZE }),
delegationsPagination: delegationsPagination
? {
first: Number(delegationsPagination),
}
: undefined,
});
setPage(targetPage);
},
[epochId, page, refetch, delegationsPagination, pubKey]
);
useEffect(() => {
// when the epoch changes, we want to refetch the data to update the current page
if (data) {
refetchData();
}
}, [epochId, data, refetchData]);
return generateEpochIndividualRewardsList(rewards);
}, [data?.party, rewards]);
return (
<AsyncRenderer
@@ -93,24 +53,17 @@ export const EpochIndividualRewards = ({
{t('Connected Vega key')}:{' '}
<span className="text-white">{pubKey}</span>
</p>
{epochIndividualRewardSummaries.map(
(epochIndividualRewardSummary) => (
<EpochIndividualRewardsTable
data={epochIndividualRewardSummary}
/>
{epochIndividualRewardSummaries.length ? (
epochIndividualRewardSummaries.map(
(epochIndividualRewardSummary) => (
<EpochIndividualRewardsTable
data={epochIndividualRewardSummary}
/>
)
)
) : (
<p>{t('noRewards')}</p>
)}
<Pagination
isLoading={loading}
hasPrevPage={page > 1}
hasNextPage={page < totalPages}
onBack={() => refetchData(page - 1)}
onNext={() => refetchData(page + 1)}
onFirst={() => refetchData(1)}
onLast={() => refetchData(totalPages)}
>
{t('Page')} {page}
</Pagination>
</div>
)}
/>
@@ -43,16 +43,6 @@ describe('generateEpochIndividualRewardsList', () => {
epoch: { id: '1' },
};
const reward5: RewardFieldsFragment = {
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '150',
percentageOfTotal: '0.15',
receivedAt: new Date(),
asset: { id: 'usd', symbol: 'USD', name: 'USD' },
party: { id: 'blah' },
epoch: { id: '3' },
};
const rewardWrongType: RewardFieldsFragment = {
rewardType: AccountType.ACCOUNT_TYPE_INSURANCE,
amount: '50',
@@ -64,38 +54,20 @@ describe('generateEpochIndividualRewardsList', () => {
};
it('should return an empty array if no rewards are provided', () => {
expect(
generateEpochIndividualRewardsList({ rewards: [], epochId: 1 })
).toEqual([
{
epoch: 1,
rewards: [],
},
]);
expect(generateEpochIndividualRewardsList([])).toEqual([]);
});
it('should filter out any rewards of the wrong type', () => {
const result = generateEpochIndividualRewardsList({
rewards: [rewardWrongType],
epochId: 1,
});
const result = generateEpochIndividualRewardsList([rewardWrongType]);
expect(result).toEqual([
{
epoch: 1,
rewards: [],
},
]);
expect(result).toEqual([]);
});
it('should return reward in the correct format', () => {
const result = generateEpochIndividualRewardsList({
rewards: [reward1],
epochId: 1,
});
const result = generateEpochIndividualRewardsList([reward1]);
expect(result[0]).toEqual({
epoch: 1,
epoch: '1',
rewards: [
{
asset: 'USD',
@@ -133,24 +105,21 @@ describe('generateEpochIndividualRewardsList', () => {
it('should return an array sorted by epoch descending', () => {
const rewards = [reward1, reward2, reward3, reward4];
const result1 = generateEpochIndividualRewardsList({ rewards, epochId: 2 });
const result1 = generateEpochIndividualRewardsList(rewards);
expect(result1[0].epoch).toEqual(2);
expect(result1[1].epoch).toEqual(1);
expect(result1[0].epoch).toEqual('2');
expect(result1[1].epoch).toEqual('1');
const reorderedRewards = [reward4, reward3, reward2, reward1];
const result2 = generateEpochIndividualRewardsList({
rewards: reorderedRewards,
epochId: 2,
});
const result2 = generateEpochIndividualRewardsList(reorderedRewards);
expect(result2[0].epoch).toEqual(2);
expect(result2[1].epoch).toEqual(1);
expect(result2[0].epoch).toEqual('2');
expect(result2[1].epoch).toEqual('1');
});
it('correctly calculates the total value of rewards for an asset', () => {
const rewards = [reward1, reward4];
const result = generateEpochIndividualRewardsList({ rewards, epochId: 1 });
const result = generateEpochIndividualRewardsList(rewards);
expect(result[0].rewards[0].totalAmount).toEqual('200');
});
@@ -158,11 +127,11 @@ describe('generateEpochIndividualRewardsList', () => {
it('returns data in the expected shape', () => {
// Just sanity checking the whole structure here
const rewards = [reward1, reward2, reward3, reward4];
const result = generateEpochIndividualRewardsList({ rewards, epochId: 2 });
const result = generateEpochIndividualRewardsList(rewards);
expect(result).toEqual([
{
epoch: 2,
epoch: '2',
rewards: [
{
asset: 'GBP',
@@ -227,165 +196,7 @@ describe('generateEpochIndividualRewardsList', () => {
],
},
{
epoch: 1,
rewards: [
{
asset: 'USD',
totalAmount: '200',
rewardTypes: {
[AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
amount: '100',
percentageOfTotal: '0.1',
},
[AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
amount: '100',
percentageOfTotal: '0.1',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
amount: '0',
percentageOfTotal: '0',
},
},
},
],
},
]);
});
it('returns data correctly for the requested epoch range', () => {
const rewards = [reward1, reward2, reward3, reward4, reward5];
const resultPageOne = generateEpochIndividualRewardsList({
rewards,
epochId: 3,
page: 1,
size: 2,
});
expect(resultPageOne).toEqual([
{
epoch: 3,
rewards: [
{
asset: 'USD',
totalAmount: '150',
rewardTypes: {
[AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
amount: '150',
percentageOfTotal: '0.15',
},
[AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
amount: '0',
percentageOfTotal: '0',
},
},
},
],
},
{
epoch: 2,
rewards: [
{
asset: 'GBP',
totalAmount: '200',
rewardTypes: {
[AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
amount: '200',
percentageOfTotal: '0.2',
},
[AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
amount: '0',
percentageOfTotal: '0',
},
},
},
{
asset: 'EUR',
totalAmount: '50',
rewardTypes: {
[AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
amount: '50',
percentageOfTotal: '0.05',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
amount: '0',
percentageOfTotal: '0',
},
[AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
amount: '0',
percentageOfTotal: '0',
},
},
},
],
},
]);
const resultPageTwo = generateEpochIndividualRewardsList({
rewards,
epochId: 3,
page: 2,
size: 2,
});
expect(resultPageTwo).toEqual([
{
epoch: 1,
epoch: '1',
rewards: [
{
asset: 'USD',
@@ -2,10 +2,9 @@ import { BigNumber } from '../../../lib/bignumber';
import { RowAccountTypes } from '../shared-rewards-table-assets/shared-rewards-table-assets';
import type { RewardFieldsFragment } from '../home/__generated__/Rewards';
import type { AccountType } from '@vegaprotocol/types';
import { calculateEpochOffset } from '../../../lib/epoch-pagination';
export interface EpochIndividualReward {
epoch: number;
epoch: string;
rewards: {
asset: string;
totalAmount: string;
@@ -28,29 +27,11 @@ const emptyRowAccountTypes = accountTypes.map((type) => [
},
]);
export const generateEpochIndividualRewardsList = ({
rewards,
epochId,
page = 1,
size = 10,
}: {
rewards: RewardFieldsFragment[];
epochId: number;
page?: number;
size?: number;
}) => {
const map: Map<string, EpochIndividualReward> = new Map();
const { fromEpoch, toEpoch } = calculateEpochOffset({ epochId, page, size });
for (let i = toEpoch; i >= fromEpoch; i--) {
map.set(i.toString(), {
epoch: i,
rewards: [],
});
}
export const generateEpochIndividualRewardsList = (
rewards: RewardFieldsFragment[]
) => {
// We take the rewards and aggregate them by epoch and asset.
const epochIndividualRewards = rewards.reduce((acc, reward) => {
const epochIndividualRewards = rewards.reduce((map, reward) => {
const epochId = reward.epoch.id;
const assetName = reward.asset.name;
const rewardType = reward.rewardType;
@@ -59,14 +40,14 @@ export const generateEpochIndividualRewardsList = ({
// if the rewardType is not of a type we display in the table, we skip it.
if (!accountTypes.includes(rewardType)) {
return acc;
return map;
}
if (!acc.has(epochId)) {
return acc;
if (!map.has(epochId)) {
map.set(epochId, { epoch: epochId, rewards: [] });
}
const epoch = acc.get(epochId);
const epoch = map.get(epochId);
let asset = epoch?.rewards.find((r) => r.asset === assetName);
@@ -95,8 +76,8 @@ export const generateEpochIndividualRewardsList = ({
});
}
return acc;
}, map);
return map;
}, new Map<string, EpochIndividualReward>());
return Array.from(epochIndividualRewards.values()).sort(
(a, b) => Number(b.epoch) - Number(a.epoch)
@@ -1,64 +1,44 @@
import { render } from '@testing-library/react';
import { AppStateProvider } from '../../../contexts/app-state/app-state-provider';
import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
import type {
AggregatedEpochRewardSummary,
RewardType,
RewardItem,
} from './generate-epoch-total-rewards-list';
import { AccountType } from '@vegaprotocol/types';
const assetId =
'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663';
const rewardsList = [
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '295',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
];
const rewards: Map<RewardType, RewardItem> = new Map();
rewardsList.forEach((r) => {
rewards.set(r.rewardType, r);
});
const assetRewards: Map<
AggregatedEpochRewardSummary['assetId'],
AggregatedEpochRewardSummary
> = new Map();
assetRewards.set(assetId, {
assetId,
name: 'tDAI TEST',
rewards,
totalAmount: '295',
});
const mockData = {
epoch: 4431,
assetRewards,
assetRewards: [
{
assetId:
'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
name: 'tDAI TEST',
rewards: [
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '295',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
totalAmount: '295',
},
],
};
describe('EpochTotalRewardsTable', () => {
@@ -48,19 +48,17 @@ export const EpochTotalRewardsTable = ({
}: EpochTotalRewardsGridProps) => {
return (
<RewardsTable dataTestId="epoch-total-rewards-table" epoch={data.epoch}>
{Array.from(data.assetRewards.values()).map(
({ name, rewards, totalAmount }, i) => (
<div className="contents" key={i}>
<div data-testid="asset" className={`${rowGridItemStyles()} p-5`}>
{name}
</div>
{Array.from(rewards.values()).map(({ rewardType, amount }, i) => (
<RewardItem key={i} dataTestId={rewardType} value={amount} />
))}
<RewardItem dataTestId="total" value={totalAmount} last={true} />
{data.assetRewards.map(({ name, rewards, totalAmount }, i) => (
<div className="contents" key={i}>
<div data-testid="asset" className={`${rowGridItemStyles()} p-5`}>
{name}
</div>
)
)}
{rewards.map(({ rewardType, amount }, i) => (
<RewardItem key={i} dataTestId={rewardType} value={amount} />
))}
<RewardItem dataTestId="total" value={totalAmount} last={true} />
</div>
))}
</RewardsTable>
);
};
@@ -1,62 +1,21 @@
import { useState, useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { AsyncRenderer, Pagination } from '@vegaprotocol/ui-toolkit';
import type { EpochFieldsFragment } from '../home/__generated__/Rewards';
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import { useEpochAssetsRewardsQuery } from '../home/__generated__/Rewards';
import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
import { generateEpochTotalRewardsList } from './generate-epoch-total-rewards-list';
import { NoRewards } from '../no-rewards';
import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
import { calculateEpochOffset } from '../../../lib/epoch-pagination';
const EPOCHS_PAGE_SIZE = 10;
type EpochTotalRewardsProps = {
currentEpoch: EpochFieldsFragment;
};
export const EpochTotalRewards = ({ currentEpoch }: EpochTotalRewardsProps) => {
// we start from the previous epoch when displaying rewards data, because the current one has no calculated data while ongoing
const epochId = Number(currentEpoch.id) - 1;
const totalPages = Math.ceil(epochId / EPOCHS_PAGE_SIZE);
const { t } = useTranslation();
const [page, setPage] = useState(1);
export const EpochTotalRewards = () => {
const { data, loading, error, refetch } = useEpochAssetsRewardsQuery({
notifyOnNetworkStatusChange: true,
variables: {
epochRewardSummariesFilter: {
fromEpoch: epochId - EPOCHS_PAGE_SIZE,
epochRewardSummariesPagination: {
first: 10,
},
},
});
useRefreshAfterEpoch(data?.epoch.timestamps.expiry, refetch);
const refetchData = useCallback(
async (toPage?: number) => {
const targetPage = toPage ?? page;
await refetch({
epochRewardSummariesFilter: calculateEpochOffset({
epochId,
page: targetPage,
size: EPOCHS_PAGE_SIZE,
}),
});
setPage(targetPage);
},
[epochId, page, refetch]
);
useEffect(() => {
// when the epoch changes, we want to refetch the data to update the current page
if (data) {
refetchData();
}
}, [epochId, data, refetchData]);
const epochTotalRewardSummaries =
generateEpochTotalRewardsList({
data,
epochId,
page,
size: EPOCHS_PAGE_SIZE,
}) || [];
const epochTotalRewardSummaries = generateEpochTotalRewardsList(data) || [];
return (
<AsyncRenderer
@@ -68,22 +27,15 @@ export const EpochTotalRewards = ({ currentEpoch }: EpochTotalRewardsProps) => {
className="max-w-full overflow-auto"
data-testid="epoch-rewards-total"
>
{Array.from(epochTotalRewardSummaries.values()).map(
(epochTotalSummary, index) => (
<EpochTotalRewardsTable data={epochTotalSummary} key={index} />
)
{epochTotalRewardSummaries.length === 0 ? (
<NoRewards />
) : (
<>
{epochTotalRewardSummaries.map((epochTotalSummary, index) => (
<EpochTotalRewardsTable data={epochTotalSummary} key={index} />
))}
</>
)}
<Pagination
isLoading={loading}
hasPrevPage={page > 1}
hasNextPage={page < totalPages}
onBack={() => refetchData(page - 1)}
onNext={() => refetchData(page + 1)}
onFirst={() => refetchData(1)}
onLast={() => refetchData(totalPages)}
>
{t('Page')} {page}
</Pagination>
</div>
)}
/>
@@ -3,23 +3,13 @@ import { AccountType } from '@vegaprotocol/types';
describe('generateEpochAssetRewardsList', () => {
it('should return an empty array if data is undefined', () => {
const result = generateEpochTotalRewardsList({ epochId: 1 });
const result = generateEpochTotalRewardsList(undefined);
expect(result).toEqual(
new Map([
[
'1',
{
epoch: 1,
assetRewards: new Map(),
},
],
])
);
expect(result).toEqual([]);
});
it('should return an empty map if empty data is provided', () => {
const data = {
it('should return an empty array if empty data is provided', () => {
const epochData = {
assetsConnection: {
edges: [],
},
@@ -33,23 +23,13 @@ describe('generateEpochAssetRewardsList', () => {
},
};
const result = generateEpochTotalRewardsList({ data, epochId: 1 });
const result = generateEpochTotalRewardsList(epochData);
expect(result).toEqual(
new Map([
[
'1',
{
epoch: 1,
assetRewards: new Map(),
},
],
])
);
expect(result).toEqual([]);
});
it('should return an empty map if no epochRewardSummaries are provided', () => {
const data = {
it('should return an empty array if no epochRewardSummaries are provided', () => {
const epochData = {
assetsConnection: {
edges: [
{
@@ -76,23 +56,13 @@ describe('generateEpochAssetRewardsList', () => {
},
};
const result = generateEpochTotalRewardsList({ data, epochId: 1 });
const result = generateEpochTotalRewardsList(epochData);
expect(result).toEqual(
new Map([
[
'1',
{
epoch: 1,
assetRewards: new Map(),
},
],
])
);
expect(result).toEqual([]);
});
it('should return a map of unnamed assets if no asset names are provided (should not happen)', () => {
const data = {
it('should return an array of unnamed assets if no asset names are provided (should not happen)', () => {
const epochData = {
assetsConnection: {
edges: [],
},
@@ -115,80 +85,50 @@ describe('generateEpochAssetRewardsList', () => {
},
};
const result = generateEpochTotalRewardsList({ data, epochId: 1 });
const result = generateEpochTotalRewardsList(epochData);
expect(result).toEqual(
new Map([
[
'1',
expect(result).toEqual([
{
epoch: 1,
assetRewards: [
{
epoch: 1,
assetRewards: new Map([
[
'1',
{
assetId: '1',
name: '',
rewards: new Map([
[
AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '123',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
{
rewardType:
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
]),
totalAmount: '123',
},
],
]),
assetId: '1',
name: '',
rewards: [
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '123',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
totalAmount: '123',
},
],
])
);
},
]);
});
it('should return the aggregated epoch summaries', () => {
const data = {
it('should return an array of aggregated epoch summaries', () => {
const epochData = {
assetsConnection: {
edges: [
{
@@ -240,425 +180,81 @@ describe('generateEpochAssetRewardsList', () => {
},
};
const result = generateEpochTotalRewardsList({ data, epochId: 2 });
const result = generateEpochTotalRewardsList(epochData);
expect(result).toEqual(
new Map([
[
'1',
expect(result).toEqual([
{
epoch: 1,
assetRewards: [
{
epoch: 1,
assetRewards: new Map([
[
'1',
{
assetId: '1',
name: 'Asset 1',
rewards: new Map([
[
AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
{
rewardType:
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '100',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '123',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
]),
totalAmount: '223',
},
],
]),
},
],
[
'2',
{
epoch: 2,
assetRewards: new Map([
[
'1',
{
assetId: '1',
name: 'Asset 1',
rewards: new Map([
[
AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
{
rewardType:
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '5',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
]),
totalAmount: '5',
},
],
]),
},
],
])
);
});
it('should return the requested range for aggregated epoch summaries', () => {
const data = {
assetsConnection: {
edges: [
{
node: {
id: '1',
name: 'Asset 1',
},
},
{
node: {
id: '2',
name: 'Asset 2',
},
assetId: '1',
name: 'Asset 1',
rewards: [
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '100',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '123',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
totalAmount: '223',
},
],
},
epochRewardSummaries: {
edges: [
{
epoch: 2,
assetRewards: [
{
node: {
epoch: 1,
assetId: '1',
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '123',
},
},
{
node: {
epoch: 1,
assetId: '1',
rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '100',
},
},
{
node: {
epoch: 2,
assetId: '1',
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '6',
},
},
{
node: {
epoch: 2,
assetId: '1',
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '27',
},
},
{
node: {
epoch: 3,
assetId: '1',
rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '15',
},
assetId: '1',
name: 'Asset 1',
rewards: [
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '5',
},
{
rewardType: AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
totalAmount: '5',
},
],
},
epoch: {
timestamps: {
expiry: null,
},
},
};
const resultPageOne = generateEpochTotalRewardsList({
data,
epochId: 3,
page: 1,
size: 2,
});
expect(resultPageOne).toEqual(
new Map([
[
'2',
{
epoch: 2,
assetRewards: new Map([
[
'1',
{
assetId: '1',
name: 'Asset 1',
rewards: new Map([
[
AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
{
rewardType:
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '33',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
]),
totalAmount: '33',
},
],
]),
},
],
[
'3',
{
epoch: 3,
assetRewards: new Map([
[
'1',
{
assetId: '1',
name: 'Asset 1',
rewards: new Map([
[
AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
{
rewardType:
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '15',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
]),
totalAmount: '15',
},
],
]),
},
],
])
);
const resultPageTwo = generateEpochTotalRewardsList({
data,
epochId: 3,
page: 2,
size: 2,
});
expect(resultPageTwo).toEqual(
new Map([
[
'1',
{
epoch: 1,
assetRewards: new Map([
[
'1',
{
assetId: '1',
name: 'Asset 1',
rewards: new Map([
[
AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
{
rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
{
rewardType:
AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
amount: '100',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
amount: '123',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
{
rewardType: AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY,
amount: '0',
},
],
[
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
{
rewardType:
AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS,
amount: '0',
},
],
]),
totalAmount: '223',
},
],
]),
},
],
])
);
]);
});
});
@@ -5,97 +5,127 @@ import type {
import { removePaginationWrapper } from '@vegaprotocol/utils';
import { RowAccountTypes } from '../shared-rewards-table-assets/shared-rewards-table-assets';
import type { AccountType } from '@vegaprotocol/types';
import { calculateEpochOffset } from '../../../lib/epoch-pagination';
import { BigNumber } from '../../../lib/bignumber';
interface EpochSummaryWithNamedReward extends EpochRewardSummaryFieldsFragment {
name: string;
}
export type RewardType = EpochRewardSummaryFieldsFragment['rewardType'];
export type RewardItem = Pick<
EpochRewardSummaryFieldsFragment,
'rewardType' | 'amount'
>;
export type AggregatedEpochRewardSummary = {
export interface AggregatedEpochRewardSummary {
assetId: EpochRewardSummaryFieldsFragment['assetId'];
name: EpochSummaryWithNamedReward['name'];
rewards: Map<RewardType, RewardItem>;
rewards: {
rewardType: EpochRewardSummaryFieldsFragment['rewardType'];
amount: EpochRewardSummaryFieldsFragment['amount'];
}[];
totalAmount: string;
};
}
export type EpochTotalSummary = {
export interface EpochTotalSummary {
epoch: EpochRewardSummaryFieldsFragment['epoch'];
assetRewards: Map<
EpochRewardSummaryFieldsFragment['assetId'],
AggregatedEpochRewardSummary
>;
};
assetRewards: AggregatedEpochRewardSummary[];
}
const emptyRowAccountTypes: Map<RewardType, RewardItem> = new Map();
const emptyRowAccountTypes = Object.keys(RowAccountTypes).map((type) => ({
rewardType: type as AccountType,
amount: '0',
}));
Object.keys(RowAccountTypes).forEach((type) => {
emptyRowAccountTypes.set(type as AccountType, {
rewardType: type as AccountType,
amount: '0',
});
});
export const generateEpochTotalRewardsList = ({
data,
epochId,
page = 1,
size = 10,
}: {
data?: EpochAssetsRewardsQuery | undefined;
epochId: number;
page?: number;
size?: number;
}) => {
export const generateEpochTotalRewardsList = (
epochData: EpochAssetsRewardsQuery | undefined
) => {
const epochRewardSummaries = removePaginationWrapper(
data?.epochRewardSummaries?.edges
epochData?.epochRewardSummaries?.edges
);
const assets = removePaginationWrapper(data?.assetsConnection?.edges);
const assets = removePaginationWrapper(epochData?.assetsConnection?.edges);
const map: Map<string, EpochTotalSummary> = new Map();
const { fromEpoch, toEpoch } = calculateEpochOffset({ epochId, page, size });
// Because the epochRewardSummaries don't have the asset name, we need to find it in the assets list
const epochSummariesWithNamedReward: EpochSummaryWithNamedReward[] =
epochRewardSummaries.map((epochReward) => ({
...epochReward,
name:
assets.find((asset) => asset.id === epochReward.assetId)?.name || '',
}));
for (let i = toEpoch; i >= fromEpoch; i--) {
map.set(i.toString(), {
epoch: i,
assetRewards: new Map(),
// Aggregating the epoch summaries by epoch number
const aggregatedEpochSummariesByEpochNumber =
epochSummariesWithNamedReward.reduce((acc, epochReward) => {
const epoch = epochReward.epoch;
const epochSummaryIndex = acc.findIndex(
(epochSummary) => epochSummary[0].epoch === epoch
);
if (epochSummaryIndex === -1) {
acc.push([epochReward]);
} else {
acc[epochSummaryIndex].push(epochReward);
}
return acc;
}, [] as EpochSummaryWithNamedReward[][]);
// Now aggregate the array of arrays of epoch summaries by asset rewards.
const epochTotalRewards: EpochTotalSummary[] =
aggregatedEpochSummariesByEpochNumber.map((epochSummaries) => {
const assetRewards = epochSummaries.reduce((acc, epochSummary) => {
const assetRewardIndex = acc.findIndex(
(assetReward) =>
assetReward.assetId === epochSummary.assetId &&
assetReward.name === epochSummary.name
);
if (assetRewardIndex === -1) {
acc.push({
assetId: epochSummary.assetId,
name: epochSummary.name,
rewards: [
...emptyRowAccountTypes.map((emptyRowAccountType) => {
if (
emptyRowAccountType.rewardType === epochSummary.rewardType
) {
return {
rewardType: epochSummary.rewardType,
amount: epochSummary.amount,
};
} else {
return emptyRowAccountType;
}
}),
],
totalAmount: epochSummary.amount,
});
} else {
acc[assetRewardIndex].rewards = acc[assetRewardIndex].rewards.map(
(reward) => {
if (reward.rewardType === epochSummary.rewardType) {
return {
rewardType: epochSummary.rewardType,
amount: (
Number(reward.amount) + Number(epochSummary.amount)
).toString(),
};
} else {
return reward;
}
}
);
acc[assetRewardIndex].totalAmount = (
Number(acc[assetRewardIndex].totalAmount) +
Number(epochSummary.amount)
).toString();
}
return acc;
}, [] as AggregatedEpochRewardSummary[]);
return {
epoch: epochSummaries[0].epoch,
assetRewards: assetRewards.sort((a, b) => {
return new BigNumber(b.totalAmount).comparedTo(a.totalAmount);
}),
};
});
}
return epochRewardSummaries.reduce((acc, reward) => {
const epoch = acc.get(reward.epoch.toString());
if (epoch) {
const matchingAsset = assets.find((asset) => asset.id === reward.assetId);
const assetWithRewards = epoch.assetRewards.get(reward.assetId);
const rewards =
assetWithRewards?.rewards || new Map(emptyRowAccountTypes);
const rewardItem = rewards?.get(reward.rewardType);
const amount = (
(Number(rewardItem?.amount) || 0) + Number(reward.amount)
).toString();
rewards?.set(reward.rewardType, {
rewardType: reward.rewardType,
amount,
});
epoch.assetRewards.set(reward.assetId, {
assetId: reward.assetId,
name: matchingAsset?.name || '',
rewards: rewards || new Map(emptyRowAccountTypes),
totalAmount: (
Number(reward.amount) + Number(assetWithRewards?.totalAmount || 0)
).toString(),
});
}
return acc;
}, map);
return epochTotalRewards;
};
@@ -23,18 +23,12 @@ fragment DelegationFields on Delegation {
query Rewards(
$partyId: ID!
$fromEpoch: Int
$toEpoch: Int
$rewardsPagination: Pagination
$delegationsPagination: Pagination
$rewardsPagination: Pagination
) {
party(id: $partyId) {
id
rewardsConnection(
fromEpoch: $fromEpoch
toEpoch: $toEpoch
pagination: $rewardsPagination
) {
rewardsConnection(pagination: $rewardsPagination) {
edges {
node {
...RewardFields
@@ -49,6 +43,14 @@ query Rewards(
}
}
}
epoch {
id
timestamps {
start
end
expiry
}
}
}
fragment EpochRewardSummaryFields on EpochRewardSummary {
@@ -58,10 +60,7 @@ fragment EpochRewardSummaryFields on EpochRewardSummary {
rewardType
}
query EpochAssetsRewards(
$epochRewardSummariesFilter: RewardSummaryFilter
$epochRewardSummariesPagination: Pagination
) {
query EpochAssetsRewards($epochRewardSummariesPagination: Pagination) {
assetsConnection {
edges {
node {
@@ -70,16 +69,18 @@ query EpochAssetsRewards(
}
}
}
epochRewardSummaries(
filter: $epochRewardSummariesFilter
pagination: $epochRewardSummariesPagination
) {
epochRewardSummaries(pagination: $epochRewardSummariesPagination) {
edges {
node {
...EpochRewardSummaryFields
}
}
}
epoch {
timestamps {
expiry
}
}
}
fragment EpochFields on Epoch {
@@ -9,24 +9,21 @@ export type DelegationFieldsFragment = { __typename?: 'Delegation', amount: stri
export type RewardsQueryVariables = Types.Exact<{
partyId: Types.Scalars['ID'];
fromEpoch?: Types.InputMaybe<Types.Scalars['Int']>;
toEpoch?: Types.InputMaybe<Types.Scalars['Int']>;
rewardsPagination?: Types.InputMaybe<Types.Pagination>;
delegationsPagination?: Types.InputMaybe<Types.Pagination>;
rewardsPagination?: Types.InputMaybe<Types.Pagination>;
}>;
export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string, name: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null };
export type RewardsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, rewardsConnection?: { __typename?: 'RewardsConnection', edges?: Array<{ __typename?: 'RewardEdge', node: { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string, name: string }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } } } | null> | null } | null, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number } } | null> | null } | null } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } } };
export type EpochRewardSummaryFieldsFragment = { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType };
export type EpochAssetsRewardsQueryVariables = Types.Exact<{
epochRewardSummariesFilter?: Types.InputMaybe<Types.RewardSummaryFilter>;
epochRewardSummariesPagination?: Types.InputMaybe<Types.Pagination>;
}>;
export type EpochAssetsRewardsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string } } | null> | null } | null, epochRewardSummaries?: { __typename?: 'EpochRewardSummaryConnection', edges?: Array<{ __typename?: 'EpochRewardSummaryEdge', node: { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType } } | null> | null } | null };
export type EpochAssetsRewardsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string } } | null> | null } | null, epochRewardSummaries?: { __typename?: 'EpochRewardSummaryConnection', edges?: Array<{ __typename?: 'EpochRewardSummaryEdge', node: { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType } } | null> | null } | null, epoch: { __typename?: 'Epoch', timestamps: { __typename?: 'EpochTimestamps', expiry?: any | null } } };
export type EpochFieldsFragment = { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } };
@@ -79,14 +76,10 @@ export const EpochFieldsFragmentDoc = gql`
}
`;
export const RewardsDocument = gql`
query Rewards($partyId: ID!, $fromEpoch: Int, $toEpoch: Int, $rewardsPagination: Pagination, $delegationsPagination: Pagination) {
query Rewards($partyId: ID!, $delegationsPagination: Pagination, $rewardsPagination: Pagination) {
party(id: $partyId) {
id
rewardsConnection(
fromEpoch: $fromEpoch
toEpoch: $toEpoch
pagination: $rewardsPagination
) {
rewardsConnection(pagination: $rewardsPagination) {
edges {
node {
...RewardFields
@@ -101,6 +94,14 @@ export const RewardsDocument = gql`
}
}
}
epoch {
id
timestamps {
start
end
expiry
}
}
}
${RewardFieldsFragmentDoc}
${DelegationFieldsFragmentDoc}`;
@@ -118,10 +119,8 @@ ${DelegationFieldsFragmentDoc}`;
* const { data, loading, error } = useRewardsQuery({
* variables: {
* partyId: // value for 'partyId'
* fromEpoch: // value for 'fromEpoch'
* toEpoch: // value for 'toEpoch'
* rewardsPagination: // value for 'rewardsPagination'
* delegationsPagination: // value for 'delegationsPagination'
* rewardsPagination: // value for 'rewardsPagination'
* },
* });
*/
@@ -137,7 +136,7 @@ export type RewardsQueryHookResult = ReturnType<typeof useRewardsQuery>;
export type RewardsLazyQueryHookResult = ReturnType<typeof useRewardsLazyQuery>;
export type RewardsQueryResult = Apollo.QueryResult<RewardsQuery, RewardsQueryVariables>;
export const EpochAssetsRewardsDocument = gql`
query EpochAssetsRewards($epochRewardSummariesFilter: RewardSummaryFilter, $epochRewardSummariesPagination: Pagination) {
query EpochAssetsRewards($epochRewardSummariesPagination: Pagination) {
assetsConnection {
edges {
node {
@@ -146,16 +145,18 @@ export const EpochAssetsRewardsDocument = gql`
}
}
}
epochRewardSummaries(
filter: $epochRewardSummariesFilter
pagination: $epochRewardSummariesPagination
) {
epochRewardSummaries(pagination: $epochRewardSummariesPagination) {
edges {
node {
...EpochRewardSummaryFields
}
}
}
epoch {
timestamps {
expiry
}
}
}
${EpochRewardSummaryFieldsFragmentDoc}`;
@@ -171,7 +172,6 @@ export const EpochAssetsRewardsDocument = gql`
* @example
* const { data, loading, error } = useEpochAssetsRewardsQuery({
* variables: {
* epochRewardSummariesFilter: // value for 'epochRewardSummariesFilter'
* epochRewardSummariesPagination: // value for 'epochRewardSummariesPagination'
* },
* });
@@ -114,7 +114,7 @@ export const RewardsPage = () => {
</p>
</div>
<div className="w-[360px]">
<div className="w-[440px]">
<Toggle
name="epoch-reward-view-toggle"
toggles={[
@@ -136,15 +136,11 @@ export const RewardsPage = () => {
</section>
{toggleRewardsView === 'total' ? (
epochData?.epoch ? (
<EpochTotalRewards currentEpoch={epochData?.epoch} />
) : null
<EpochTotalRewards />
) : (
<section>
{pubKey && pubKeys?.length ? (
epochData?.epoch ? (
<EpochIndividualRewards currentEpoch={epochData?.epoch} />
) : null
<EpochIndividualRewards />
) : (
<ConnectToSeeRewards />
)}
@@ -155,16 +155,16 @@ export const ValidatorTables = ({
return (
<section data-testid="validator-tables">
<div className="grid w-full justify-end">
<div className="w-[340px]">
<div className="w-[400px]">
<Toggle
name="validators-view-toggle"
toggles={[
{
label: t('All validators'),
label: t('ALL VALIDATORS'),
value: 'all',
},
{
label: t('Staked by me'),
label: t('STAKED BY ME'),
value: 'myStake',
},
]}
File diff suppressed because it is too large Load Diff
@@ -41,12 +41,6 @@ describe('accounts', { tags: '@smoke' }, () => {
.should('have.text', '100,001.01');
});
it('asset detail should be properly rendered', () => {
cy.getByTestId('Collateral').click();
cy.getByTestId('asset').contains('tEURO').click();
cy.get('[data-testid$="_label"]').should('have.length', 16);
});
describe('sorting by ag-grid columns should work well', () => {
it('sorting by asset', () => {
cy.getByTestId('Collateral').click();
@@ -29,10 +29,7 @@ import { LiquidityContainer } from '../liquidity/liquidity';
import { useNavigate } from 'react-router-dom';
import type { PinnedAsset } from '@vegaprotocol/accounts';
import { useScreenDimensions } from '@vegaprotocol/react-helpers';
import {
useMarketClickHandler,
useMarketLiquidityClickHandler,
} from '../../lib/hooks/use-market-click-handler';
import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
type MarketDependantView =
| typeof CandlesChartContainer
@@ -82,7 +79,6 @@ const MarketBottomPanel = memo(
({ marketId, pinnedAsset }: BottomPanelProps) => {
const { screenSize } = useScreenDimensions();
const onMarketClick = useMarketClickHandler(true);
const onOrderTypeClick = useMarketLiquidityClickHandler(true);
return 'xxxl' === screenSize ? (
<ResizableGrid proportionalLayout minSize={200}>
@@ -98,7 +94,6 @@ const MarketBottomPanel = memo(
<TradingViews.Orders
marketId={marketId}
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
enforceBottomPlaceholder
/>
</VegaWalletContainer>
@@ -155,7 +150,6 @@ const MarketBottomPanel = memo(
<TradingViews.Orders
marketId={marketId}
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
enforceBottomPlaceholder
/>
</VegaWalletContainer>
@@ -299,7 +293,6 @@ interface TradePanelsProps {
market: Market | null;
onSelect: (marketId: string, metaKey?: boolean) => void;
onMarketClick?: (marketId: string) => void;
onOrderTypeClick?: (marketId: string) => void;
onClickCollateral: () => void;
pinnedAsset?: PinnedAsset;
}
@@ -310,16 +303,12 @@ export const TradePanels = ({
onClickCollateral,
pinnedAsset,
}: TradePanelsProps) => {
const onMarketClick = useMarketClickHandler(true);
const onOrderTypeClick = useMarketLiquidityClickHandler(true);
const [view, setView] = useState<TradingView>('Candles');
const renderView = () => {
const Component = memo<{
marketId: string;
onSelect: (marketId: string, metaKey?: boolean) => void;
onMarketClick?: (marketId: string) => void;
onOrderTypeClick?: (marketId: string) => void;
onClickCollateral: () => void;
pinnedAsset?: PinnedAsset;
}>(TradingViews[view]);
@@ -336,8 +325,6 @@ export const TradePanels = ({
onSelect={onSelect}
onClickCollateral={onClickCollateral}
pinnedAsset={pinnedAsset}
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
/>
);
};
@@ -19,10 +19,7 @@ import { usePageTitleStore } from '../../stores';
import { LedgerContainer } from '@vegaprotocol/ledger';
import { AccountsContainer } from '../../components/accounts-container';
import { AccountHistoryContainer } from './account-history-container';
import {
useMarketClickHandler,
useMarketLiquidityClickHandler,
} from '../../lib/hooks/use-market-click-handler';
import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
export const Portfolio = () => {
const { updateTitle } = usePageTitleStore((store) => ({
@@ -34,7 +31,6 @@ export const Portfolio = () => {
}, [updateTitle]);
const onMarketClick = useMarketClickHandler(true);
const onOrderTypeClick = useMarketLiquidityClickHandler(true);
const wrapperClasses = 'h-full max-h-full flex flex-col';
return (
@@ -58,10 +54,7 @@ export const Portfolio = () => {
</Tab>
<Tab id="orders" name={t('Orders')}>
<VegaWalletContainer>
<OrderListContainer
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
/>
<OrderListContainer onMarketClick={onMarketClick} />
</VegaWalletContainer>
</Tab>
<Tab id="fills" name={t('Fills')}>
@@ -23,44 +23,26 @@ const generateJsx = (context: VegaWalletContextShape) => {
);
};
describe('VegaWalletConnectButton', () => {
it('should fire dialog when not connected', () => {
render(generateJsx({ pubKey: null } as VegaWalletContextShape));
it('Not connected', () => {
render(generateJsx({ pubKey: null } as VegaWalletContextShape));
const button = screen.getByTestId('connect-vega-wallet');
expect(button).toHaveTextContent('Connect Vega wallet');
fireEvent.click(button);
expect(mockUpdateDialogOpen).toHaveBeenCalled();
});
const button = screen.getByTestId('connect-vega-wallet');
expect(button).toHaveTextContent('Connect Vega wallet');
fireEvent.click(button);
expect(mockUpdateDialogOpen).toHaveBeenCalled();
});
it('should retrieve keys when connected', async () => {
const pubKey = { publicKey: '123456__123456', name: 'test' };
const pubKey2 = { publicKey: '123456__123457', name: 'test2' };
render(
generateJsx({
pubKey: pubKey.publicKey,
pubKeys: [pubKey],
fetchPubKeys: () => Promise.resolve([pubKey, pubKey2]),
} as VegaWalletContextShape)
);
const button = screen.getByTestId('manage-vega-wallet');
expect(button).toHaveTextContent(truncateByChars(pubKey.publicKey));
userEvent.click(button);
expect(mockUpdateDialogOpen).not.toHaveBeenCalled();
});
it('should fetch keys when connected', async () => {
const pubKey = { publicKey: '123456__123456', name: 'test' };
const context = {
it('Connected', async () => {
const pubKey = { publicKey: '123456__123456', name: 'test' };
render(
generateJsx({
pubKey: pubKey.publicKey,
pubKeys: [pubKey],
} as VegaWalletContextShape;
render(generateJsx(context));
} as VegaWalletContextShape)
);
const button = screen.getByTestId('manage-vega-wallet');
expect(button).toHaveTextContent(truncateByChars(pubKey.publicKey));
userEvent.click(button);
expect(mockUpdateDialogOpen).not.toHaveBeenCalled();
});
const button = screen.getByTestId('manage-vega-wallet');
expect(button).toHaveTextContent(truncateByChars(pubKey.publicKey));
userEvent.click(button);
expect(mockUpdateDialogOpen).not.toHaveBeenCalled();
});
@@ -29,7 +29,7 @@ const MobileWalletButton = ({
isConnected?: boolean;
activeKey?: PubKey;
}) => {
const { pubKeys, selectPubKey, disconnect, fetchPubKeys } = useVegaWallet();
const { pubKeys, selectPubKey, disconnect } = useVegaWallet();
const openVegaWalletDialog = useVegaWalletDialogStore(
(store) => store.openVegaWalletDialog
);
@@ -46,12 +46,9 @@ const MobileWalletButton = ({
openVegaWalletDialog();
setDrawerOpen(false);
} else {
if (fetchPubKeys) {
fetchPubKeys();
}
setDrawerOpen(!drawerOpen);
}
}, [drawerOpen, fetchPubKeys, isConnected, openVegaWalletDialog]);
}, [drawerOpen, isConnected, openVegaWalletDialog]);
const iconClass = drawerOpen
? 'hidden'
@@ -148,14 +145,8 @@ export const VegaWalletConnectButton = () => {
(store) => store.openVegaWalletDialog
);
const openTransferDialog = useTransferDialog((store) => store.open);
const {
pubKey,
pubKeys,
selectPubKey,
disconnect,
isReadOnly,
fetchPubKeys,
} = useVegaWallet();
const { pubKey, pubKeys, selectPubKey, disconnect, isReadOnly } =
useVegaWallet();
const isConnected = pubKey !== null;
const activeKey = useMemo(() => {
@@ -171,12 +162,7 @@ export const VegaWalletConnectButton = () => {
trigger={
<DropdownMenuTrigger
data-testid="manage-vega-wallet"
onClick={() => {
if (fetchPubKeys) {
fetchPubKeys();
}
setDropdownOpen(!dropdownOpen);
}}
onClick={() => setDropdownOpen((curr) => !curr)}
>
{activeKey && (
<span className="uppercase">{activeKey.name}</span>
@@ -19,21 +19,3 @@ export const useMarketClickHandler = (replace = false) => {
[navigate, marketId, replace, isMarketPage]
);
};
export const useMarketLiquidityClickHandler = (replace = false) => {
const navigate = useNavigate();
const { marketId } = useParams();
const { pathname } = useLocation();
const isLiquidityPage = pathname.match(/^\/liquidity\/(.+)/);
return useCallback(
(selectedId: string, metaKey?: boolean) => {
const link = Links[Routes.LIQUIDITY](selectedId);
if (metaKey) {
window.open(`/#${link}`, '_blank');
} else if (selectedId !== marketId || !isLiquidityPage) {
navigate(link, { replace });
}
},
[navigate, marketId, replace, isLiquidityPage]
);
};
@@ -292,7 +292,7 @@ describe('getVegaTransactionContentIntent', () => {
Intent.Success
);
expect(getVegaTransactionContentIntent(editOrder).intent).toBe(
Intent.Primary
Intent.Success
);
expect(getVegaTransactionContentIntent(cancelOrder).intent).toBe(
Intent.Primary
@@ -681,9 +681,6 @@ export const getVegaTransactionContentIntent = (tx: VegaStoredTxState) => {
// Transaction can be successful but the order can be rejected by the network
const intent =
(tx.order &&
!isOrderAmendmentTransaction(tx.body) &&
getOrderToastIntent(tx.order.status)) ||
intentMap[tx.status];
(tx.order && getOrderToastIntent(tx.order.status)) || intentMap[tx.status];
return { intent, content };
};
-15
View File
@@ -33,8 +33,6 @@ import { ViewingBanner } from '../components/viewing-banner';
import { Banner } from '../components/banner';
import { AppLoader, DynamicLoader } from '../components/app-loader';
import { Navbar } from '../components/navbar';
import { useDataProvider } from '@vegaprotocol/react-helpers';
import { activeOrdersProvider } from '@vegaprotocol/orders';
const DEFAULT_TITLE = t('Welcome to Vega trading!');
@@ -97,7 +95,6 @@ function AppBody({ Component }: AppProps) {
<ToastsManager />
<InitializeHandlers />
<MaybeConnectEagerly />
<PartyData />
</div>
);
}
@@ -130,18 +127,6 @@ function VegaTradingApp(props: AppProps) {
export default VegaTradingApp;
const PartyData = () => {
const { pubKey } = useVegaWallet();
const variables = { partyId: pubKey || '' };
const skip = !pubKey;
useDataProvider({
dataProvider: activeOrdersProvider,
variables,
skip,
});
return null;
};
const MaybeConnectEagerly = () => {
useVegaEagerConnect(Connectors);
useEthereumEagerConnect();
+3 -15
View File
@@ -31,7 +31,7 @@ export enum Routes {
MARKET = '/markets',
MARKETS = '/markets/all',
PORTFOLIO = '/portfolio',
LIQUIDITY = '/liquidity',
LIQUIDITY = 'liquidity/:marketId',
}
type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
@@ -41,10 +41,8 @@ export const Links: ConsoleLinks = {
marketId ? trimEnd(`${Routes.MARKET}/${marketId}`, '/') : Routes.MARKET,
[Routes.MARKETS]: () => Routes.MARKETS,
[Routes.PORTFOLIO]: () => Routes.PORTFOLIO,
[Routes.LIQUIDITY]: (marketId: string | null | undefined) =>
marketId
? trimEnd(`${Routes.LIQUIDITY}/${marketId}`, '/')
: Routes.LIQUIDITY,
[Routes.LIQUIDITY]: (marketId: string) =>
Routes.LIQUIDITY.replace(':marketId', marketId),
};
const routerConfig: RouteObject[] = [
@@ -72,16 +70,6 @@ const routerConfig: RouteObject[] = [
{
path: Routes.LIQUIDITY,
element: <LazyLiquidity />,
children: [
{
index: true,
element: <LazyLiquidity />,
},
{
path: ':marketId',
element: <LazyLiquidity />,
},
],
},
{
path: Routes.PORTFOLIO,
+5 -3
View File
@@ -5,9 +5,7 @@ export PATH="/app/node_modules/.bin:$PATH"
flags="--network-timeout 100000 --pure-lockfile"
if [[ ! -z "${ENV_NAME}" ]]; then
if [[ "${ENV_NAME}" != "ops-vega" ]]; then
flags="--env=${ENV_NAME} $flags"
fi
flags="--env=${ENV_NAME} $flags"
fi
if [ "${APP}" = "trading" ]; then
@@ -18,3 +16,7 @@ if [ "${APP}" = "trading" ]; then
else
yarn nx build ${APP} $flags
fi
env_vars_file="/app/dist/apps/${APP}/.env"
# make sure there are no exposed .env files
rm $env_vars_file || echo "No env vars file"
-6
View File
@@ -1,6 +0,0 @@
FROM --platform=amd64 nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a116c34cc7241532d0d94198fb2c9629
EXPOSE 80
WORKDIR /usr/share/nginx/html
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
RUN rm -rf /usr/share/nginx/html/*
COPY ./dist-result/ /usr/share/nginx/html/
+1 -18
View File
@@ -1,25 +1,8 @@
fragment AssetListFields on Asset {
id
name
symbol
decimals
quantum
source {
__typename
... on ERC20 {
contractAddress
lifetimeLimit
withdrawThreshold
}
}
status
}
query Assets {
assetsConnection {
edges {
node {
...AssetListFields
...AssetFields
}
}
}
+5 -23
View File
@@ -1,44 +1,26 @@
import * as Types from '@vegaprotocol/types';
import { gql } from '@apollo/client';
import { AssetFieldsFragmentDoc } from './Asset';
import * as Apollo from '@apollo/client';
const defaultOptions = {} as const;
export type AssetListFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string } };
export type AssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
export type AssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string } } } | null> | null } | null };
export type AssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus, source: { __typename: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', balance: string } | null, globalRewardPoolAccount?: { __typename?: 'AccountBalance', balance: string } | null, takerFeeRewardAccount?: { __typename?: 'AccountBalance', balance: string } | null, makerFeeRewardAccount?: { __typename?: 'AccountBalance', balance: string } | null, lpFeeRewardAccount?: { __typename?: 'AccountBalance', balance: string } | null, marketProposerRewardAccount?: { __typename?: 'AccountBalance', balance: string } | null } } | null> | null } | null };
export const AssetListFieldsFragmentDoc = gql`
fragment AssetListFields on Asset {
id
name
symbol
decimals
quantum
source {
__typename
... on ERC20 {
contractAddress
lifetimeLimit
withdrawThreshold
}
}
status
}
`;
export const AssetsDocument = gql`
query Assets {
assetsConnection {
edges {
node {
...AssetListFields
...AssetFields
}
}
}
}
${AssetListFieldsFragmentDoc}`;
${AssetFieldsFragmentDoc}`;
/**
* __useAssetsQuery__
@@ -3,7 +3,7 @@ import { render, screen } from '@testing-library/react';
import * as Schema from '@vegaprotocol/types';
import { AssetDetailsDialog } from './asset-details-dialog';
import { AssetDetail, testId } from './asset-details-table';
import { AssetDocument } from './__generated__/Asset';
import { AssetsDocument } from './__generated__/Assets';
import { generateBuiltinAsset, generateERC20Asset } from './test-helpers';
const mockedData = {
@@ -39,17 +39,15 @@ const mockedData = {
},
};
const mocks = mockedData.data.assetsConnection.edges.map((mock) => ({
request: {
query: AssetDocument,
variables: { assetId: mock.node.id },
},
result: {
data: {
assetsConnection: { edges: [mock] },
const mocks = [
{
request: {
query: AssetsDocument,
variables: {},
},
result: mockedData,
},
}));
];
const WrappedAssetDetailsDialog = ({ assetId }: { assetId: string }) => (
<MockedProvider mocks={mocks}>
+3 -2
View File
@@ -1,4 +1,5 @@
import { t } from '@vegaprotocol/i18n';
import { useAssetsDataProvider } from './assets-data-provider';
import {
Button,
Dialog,
@@ -9,7 +10,6 @@ import {
import { create } from 'zustand';
import { AssetDetailsTable } from './asset-details-table';
import { AssetProposalNotification } from '@vegaprotocol/proposals';
import { useAssetDataProvider } from './asset-data-provider';
export type AssetDetailsDialogStore = {
isOpen: boolean;
@@ -55,8 +55,9 @@ export const AssetDetailsDialog = ({
onChange,
asJson = false,
}: AssetDetailsDialogProps) => {
const { data: asset } = useAssetDataProvider(assetId);
const { data } = useAssetsDataProvider();
const asset = data?.find((a) => a.id === assetId);
const assetSymbol = asset?.symbol || '';
const content = asset ? (
+3 -2
View File
@@ -11,7 +11,6 @@ import {
} from '@vegaprotocol/ui-toolkit';
import type { ReactNode } from 'react';
import type { Asset } from './asset-data-provider';
import { WITHDRAW_THRESHOLD_TOOLTIP_TEXT } from './constants';
type Rows = {
key: AssetDetail;
@@ -122,7 +121,9 @@ export const rows: Rows = [
{
key: AssetDetail.WITHDRAWAL_THRESHOLD,
label: t('Withdrawal threshold'),
tooltip: WITHDRAW_THRESHOLD_TOOLTIP_TEXT,
tooltip: t(
'The maximum you can withdraw instantly. Theres no limit on the size of a withdrawal, but all withdrawals over the threshold will have a delay time added to them'
),
value: (asset) =>
num(asset, (asset.source as Schema.ERC20).withdrawThreshold),
},
+119 -5
View File
@@ -1,10 +1,8 @@
import merge from 'lodash/merge';
import type {
AssetsQuery,
AssetListFieldsFragment,
} from './__generated__/Assets';
import type { AssetsQuery } from './__generated__/Assets';
import * as Types from '@vegaprotocol/types';
import type { PartialDeep } from 'type-fest';
import type { AssetFieldsFragment } from './__generated__/Asset';
export const assetsQuery = (
override?: PartialDeep<AssetsQuery>
@@ -20,7 +18,7 @@ export const assetsQuery = (
return merge(defaultAssets, override);
};
const assetFields: AssetListFieldsFragment[] = [
const assetFields: AssetFieldsFragment[] = [
{
__typename: 'Asset',
id: 'asset-id',
@@ -35,6 +33,30 @@ const assetFields: AssetListFieldsFragment[] = [
},
quantum: '1',
status: Types.AssetStatus.STATUS_ENABLED,
infrastructureFeeAccount: {
balance: '1',
__typename: 'AccountBalance',
},
globalRewardPoolAccount: {
balance: '2',
__typename: 'AccountBalance',
},
takerFeeRewardAccount: {
balance: '3',
__typename: 'AccountBalance',
},
makerFeeRewardAccount: {
balance: '4',
__typename: 'AccountBalance',
},
lpFeeRewardAccount: {
balance: '5',
__typename: 'AccountBalance',
},
marketProposerRewardAccount: {
balance: '6',
__typename: 'AccountBalance',
},
},
{
__typename: 'Asset',
@@ -50,6 +72,30 @@ const assetFields: AssetListFieldsFragment[] = [
},
quantum: '1',
status: Types.AssetStatus.STATUS_ENABLED,
infrastructureFeeAccount: {
balance: '1',
__typename: 'AccountBalance',
},
globalRewardPoolAccount: {
balance: '2',
__typename: 'AccountBalance',
},
takerFeeRewardAccount: {
balance: '3',
__typename: 'AccountBalance',
},
makerFeeRewardAccount: {
balance: '4',
__typename: 'AccountBalance',
},
lpFeeRewardAccount: {
balance: '5',
__typename: 'AccountBalance',
},
marketProposerRewardAccount: {
balance: '6',
__typename: 'AccountBalance',
},
},
{
__typename: 'Asset',
@@ -58,10 +104,20 @@ const assetFields: AssetListFieldsFragment[] = [
decimals: 5,
name: 'Asto',
source: {
maxFaucetAmountMint: '5000000000',
__typename: 'BuiltinAsset',
},
quantum: '1',
status: Types.AssetStatus.STATUS_ENABLED,
infrastructureFeeAccount: {
balance: '0',
__typename: 'AccountBalance',
},
globalRewardPoolAccount: null,
takerFeeRewardAccount: null,
makerFeeRewardAccount: null,
lpFeeRewardAccount: null,
marketProposerRewardAccount: null,
},
{
__typename: 'Asset',
@@ -70,10 +126,20 @@ const assetFields: AssetListFieldsFragment[] = [
decimals: 5,
name: 'tBTC TEST',
source: {
maxFaucetAmountMint: '5000000000',
__typename: 'BuiltinAsset',
},
quantum: '1',
status: Types.AssetStatus.STATUS_ENABLED,
infrastructureFeeAccount: {
balance: '0',
__typename: 'AccountBalance',
},
globalRewardPoolAccount: null,
takerFeeRewardAccount: null,
makerFeeRewardAccount: null,
lpFeeRewardAccount: null,
marketProposerRewardAccount: null,
},
// NOTE: These assets ids and contract addresses are real assets on Sepolia, this is needed
// because we don't currently mock our seplia infura provider. If we change network these will
@@ -92,6 +158,30 @@ const assetFields: AssetListFieldsFragment[] = [
__typename: 'ERC20',
},
quantum: '1',
infrastructureFeeAccount: {
balance: '1',
__typename: 'AccountBalance',
},
globalRewardPoolAccount: {
balance: '2',
__typename: 'AccountBalance',
},
takerFeeRewardAccount: {
balance: '3',
__typename: 'AccountBalance',
},
makerFeeRewardAccount: {
balance: '4',
__typename: 'AccountBalance',
},
lpFeeRewardAccount: {
balance: '5',
__typename: 'AccountBalance',
},
marketProposerRewardAccount: {
balance: '6',
__typename: 'AccountBalance',
},
},
{
__typename: 'Asset',
@@ -107,5 +197,29 @@ const assetFields: AssetListFieldsFragment[] = [
__typename: 'ERC20',
},
quantum: '1',
infrastructureFeeAccount: {
balance: '1',
__typename: 'AccountBalance',
},
globalRewardPoolAccount: {
balance: '2',
__typename: 'AccountBalance',
},
takerFeeRewardAccount: {
balance: '3',
__typename: 'AccountBalance',
},
makerFeeRewardAccount: {
balance: '4',
__typename: 'AccountBalance',
},
lpFeeRewardAccount: {
balance: '5',
__typename: 'AccountBalance',
},
marketProposerRewardAccount: {
balance: '6',
__typename: 'AccountBalance',
},
},
];
-4
View File
@@ -1,4 +0,0 @@
import { t } from '@vegaprotocol/i18n';
export const WITHDRAW_THRESHOLD_TOOLTIP_TEXT = t(
"The maximum you can withdraw instantly. There's no limit on the size of a withdrawal, but all withdrawals over the threshold will have a delay time added to them"
);
-1
View File
@@ -5,4 +5,3 @@ export * from './assets-data-provider';
export * from './asset-details-dialog';
export * from './asset-details-table';
export * from './asset-option';
export * from './constants';
-1
View File
@@ -10,7 +10,6 @@ export * from './lib/cells/price-flash-cell';
export * from './lib/cells/vol-cell';
export * from './lib/cells/centered-grid-cell';
export * from './lib/cells/market-name-cell';
export * from './lib/cells/order-type-cell';
export * from './lib/filters/date-range-filter';
export * from './lib/filters/set-filter';
@@ -1,52 +0,0 @@
import type { MouseEvent } from 'react';
import { useMemo } from 'react';
import { useCallback } from 'react';
import { t } from '@vegaprotocol/i18n';
import * as Schema from '@vegaprotocol/types';
interface OrderTypeCellProps {
value?: Schema.OrderType;
data?: Schema.Order;
onClick?: (marketId: string, metaKey?: boolean) => void;
}
export const OrderTypeCell = ({
value,
data: order,
onClick,
}: OrderTypeCellProps) => {
const id = order ? order.market.id : '';
const label = useMemo(() => {
if (!order) {
return undefined;
}
if (!value) return '-';
if (order?.peggedOrder) {
return t('Pegged');
}
if (order?.liquidityProvision) {
return t('Liquidity provision');
}
return Schema.OrderTypeMapping[value];
}, [order, value]);
const handleOnClick = useCallback(
(ev: MouseEvent<HTMLButtonElement>) => {
ev.preventDefault();
ev.stopPropagation();
if (onClick) {
onClick(id, ev.metaKey || ev.ctrlKey);
}
},
[id, onClick]
);
if (!order) return null;
return order?.liquidityProvision ? (
<button onClick={handleOnClick} tabIndex={0} className="underline">
{label}
</button>
) : (
<span>{label}</span>
);
};
@@ -8,7 +8,7 @@ const commonProps = {
describe('DateRangeFilter', () => {
it('should be properly rendered', async () => {
const defaultValue = {
const defaultRangeFilter = {
start: '2023-02-14T13:53:01+01:00',
end: '2023-02-21T13:53:01+01:00',
};
@@ -17,7 +17,7 @@ describe('DateRangeFilter', () => {
render(
<DateRangeFilter
{...(commonProps as unknown as DateRangeFilterProps)}
defaultValue={defaultValue}
defaultRangeFilter={defaultRangeFilter}
/>
);
@@ -1,5 +1,5 @@
import type { ChangeEvent } from 'react';
import { useEffect, useMemo, useRef } from 'react';
import { useEffect, useMemo } from 'react';
import type * as Schema from '@vegaprotocol/types';
import { forwardRef, useImperativeHandle, useState } from 'react';
import type { IDoesFilterPassParams, IFilterParams } from 'ag-grid-community';
@@ -17,9 +17,9 @@ import { formatForInput } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { InputError } from '@vegaprotocol/ui-toolkit';
const defaultValue: Schema.DateRange = {};
const defaultFilterValue: Schema.DateRange = {};
export interface DateRangeFilterProps extends IFilterParams {
defaultValue?: Schema.DateRange;
defaultRangeFilter?: Schema.DateRange;
maxSubDays?: number;
maxNextDays?: number;
maxDaysRange?: number;
@@ -27,9 +27,8 @@ export interface DateRangeFilterProps extends IFilterParams {
export const DateRangeFilter = forwardRef(
(props: DateRangeFilterProps, ref) => {
const defaultDates = props?.defaultValue || defaultValue;
const defaultDates = props?.defaultRangeFilter || defaultFilterValue;
const [value, setValue] = useState<Schema.DateRange>(defaultDates);
const valueRef = useRef<Schema.DateRange>(value);
const [error, setError] = useState<string>('');
const [minStartDate, maxStartDate, minEndDate, maxEndDate] = useMemo(() => {
const minStartDate =
@@ -94,7 +93,7 @@ export const DateRangeFilter = forwardRef(
},
isFilterActive() {
return valueRef.current.start || valueRef.current.end;
return value.start || value.end;
},
getModel() {
@@ -102,13 +101,13 @@ export const DateRangeFilter = forwardRef(
return null;
}
return { value: valueRef.current };
return { value };
},
setModel(model?: { value: Schema.DateRange } | null) {
valueRef.current =
model?.value || props?.defaultValue || defaultValue;
setValue(valueRef.current);
setValue(
model?.value || props?.defaultRangeFilter || defaultFilterValue
);
},
};
});
@@ -186,8 +185,10 @@ export const DateRangeFilter = forwardRef(
update = { ...update, end: checkForEndDate(endDate, startDate) };
if (validate(name, date, update)) {
valueRef.current = { ...valueRef.current, ...update };
setValue(valueRef.current);
setValue((curr) => ({
...curr,
...update,
}));
}
};
useEffect(() => {
@@ -240,8 +241,7 @@ export const DateRangeFilter = forwardRef(
className="ag-standard-button ag-filter-apply-panel-button"
onClick={() => {
setError('');
valueRef.current = defaultDates;
setValue(valueRef.current);
setValue(defaultDates);
}}
>
{t('Reset')}
+11 -17
View File
@@ -1,17 +1,10 @@
import type { ChangeEvent } from 'react';
import {
forwardRef,
useEffect,
useImperativeHandle,
useState,
useRef,
} from 'react';
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import type { IDoesFilterPassParams, IFilterParams } from 'ag-grid-community';
import { t } from '@vegaprotocol/i18n';
export const SetFilter = forwardRef((props: IFilterParams, ref) => {
const [value, setValue] = useState<string[]>([]);
const valueRef = useRef(value);
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
@@ -35,28 +28,29 @@ export const SetFilter = forwardRef((props: IFilterParams, ref) => {
},
isFilterActive() {
return valueRef.current.length !== 0;
return value.length !== 0;
},
getModel() {
if (!this.isFilterActive()) {
return null;
}
return { value: valueRef.current };
return { value };
},
setModel(model?: { value: string[] } | null) {
valueRef.current = !model ? [] : model.value;
setValue(valueRef.current);
setValue(!model ? [] : model.value);
},
};
});
const onChange = (event: ChangeEvent<HTMLInputElement>) => {
valueRef.current = event.target.checked
? [...value, event.target.value]
: value.filter((v) => v !== event.target.value);
setValue(valueRef.current);
setValue(
event.target.checked
? [...value, event.target.value]
: value.filter((v) => v !== event.target.value)
);
};
useEffect(() => {
@@ -83,7 +77,7 @@ export const SetFilter = forwardRef((props: IFilterParams, ref) => {
<button
type="button"
className="ag-standard-button ag-filter-apply-panel-button"
onClick={() => setValue((valueRef.current = []))}
onClick={() => setValue([])}
>
{t('Reset')}
</button>
@@ -15,8 +15,8 @@ export const useInitialMargin = (
marketId: OrderSubmissionBody['orderSubmission']['marketId'],
order?: OrderSubmissionBody['orderSubmission']
) => {
const { pubKey } = useVegaWallet();
const commonVariables = { marketId, partyId: pubKey || '' };
const { pubKey: partyId } = useVegaWallet();
const commonVariables = { marketId, partyId: partyId || '' };
const { data: marketData } = useDataProvider({
dataProvider: marketDataProvider,
variables: { marketId },
@@ -24,7 +24,7 @@ export const useInitialMargin = (
const { data: activeVolumeAndMargin } = useDataProvider({
dataProvider: volumeAndMarginProvider,
variables: commonVariables,
skip: !pubKey,
skip: !partyId,
});
const { data: marketInfo } = useDataProvider({
dataProvider: marketInfoProvider,
+2 -2
View File
@@ -38,10 +38,10 @@ export const TransferTooltipCellComponent = ({
);
};
const defaultValue = { start: formatRFC3339(subDays(Date.now(), 7)) };
const defaultRangeFilter = { start: formatRFC3339(subDays(Date.now(), 7)) };
const dateRangeFilterParams = {
maxNextDays: 0,
defaultValue,
defaultRangeFilter,
};
type LedgerEntryProps = TypedDataAgGrid<LedgerEntry>;
@@ -20,7 +20,6 @@ import type {
OrdersQueryVariables,
} from './__generated__/Orders';
import { OrdersDocument, OrdersUpdateDocument } from './__generated__/Orders';
import type { ApolloClient } from '@apollo/client';
export type Order = Omit<OrderFieldsFragment, 'market'> & {
market?: Market;
@@ -82,31 +81,8 @@ const getData = (
): Edge<OrderFieldsFragment>[] =>
responseData?.party?.ordersConnection?.edges || [];
const getDelta = (
subscriptionData: OrdersUpdateSubscription,
variables: OrdersQueryVariables,
client: ApolloClient<object>
) => {
if (!subscriptionData.orders) {
return [];
}
subscriptionData.orders.forEach((order) => {
client.cache.modify({
id: client.cache.identify({
__typename: 'Order',
id: order.id,
}),
fields: {
price: () => order.price,
size: () => order.size,
remaining: () => order.remaining,
updatedAt: () => order.updatedAt,
status: () => order.status,
},
});
});
return subscriptionData.orders;
};
const getDelta = (subscriptionData: OrdersUpdateSubscription) =>
subscriptionData.orders || [];
const getPageInfo = (responseData: OrdersQuery): PageInfo | null =>
responseData.party?.ordersConnection?.pageInfo || null;
@@ -174,7 +150,7 @@ export const update = (
});
};
const ordersProvider = makeDataProvider<
export const ordersProvider = makeDataProvider<
OrdersQuery,
ReturnType<typeof getData>,
OrdersUpdateSubscription,
@@ -189,36 +165,11 @@ const ordersProvider = makeDataProvider<
pagination: {
getPageInfo,
append,
first: 1000,
first: 100,
},
additionalContext: { isEnlargedTimeout: true },
});
export const activeOrdersProvider = makeDerivedDataProvider<
ReturnType<typeof getData>,
never,
{ partyId: string; marketId?: string }
>(
[
(callback, client, variables) =>
ordersProvider(callback, client, {
partyId: variables.partyId,
filter: {
status: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
},
}),
],
(partsData, variables, prevData, parts, subscriptions) => {
if (!parts[0].isUpdate && subscriptions && subscriptions[0].load) {
subscriptions[0].load();
}
const orders = partsData[0] as ReturnType<typeof getData>;
return variables.marketId
? orders.filter((edge) => variables.marketId === edge.node.market.id)
: orders;
}
);
export const ordersWithMarketProvider = makeDerivedDataProvider<
(OrderEdge | null)[],
Order[],
@@ -242,20 +193,63 @@ export const ordersWithMarketProvider = makeDerivedDataProvider<
combineInsertionData<Order>
);
const hasActiveOrderProviderInternal = makeDataProvider<
OrdersQuery,
boolean,
OrdersUpdateSubscription,
ReturnType<typeof getDelta>,
OrdersQueryVariables
>({
query: OrdersDocument,
subscriptionQuery: OrdersUpdateDocument,
update: (
data: boolean | null,
delta: ReturnType<typeof getDelta>,
reload: () => void
) => {
const orders = delta?.filter(
(order) => !(order.peggedOrder || order.liquidityProvisionId)
);
if (!orders?.length) {
return data;
}
const hasActiveOrders = orders.some(
(order) => order.status === OrderStatus.STATUS_ACTIVE
);
if (hasActiveOrders) {
return true;
} else if (data && !hasActiveOrders) {
reload();
}
return data;
},
getData: (responseData: OrdersQuery | null) => {
const hasActiveOrder = !!responseData?.party?.ordersConnection?.edges?.some(
(order) => !(order.node.peggedOrder || order.node.liquidityProvision)
);
return hasActiveOrder;
},
getDelta,
});
export const hasActiveOrderProvider = makeDerivedDataProvider<
boolean,
never,
{ partyId: string; marketId?: string }
>([activeOrdersProvider], (parts) => !!parts[0].length);
export const hasAmendableOrderProvider = makeDerivedDataProvider<
boolean,
never,
{ partyId: string; marketId?: string }
>([activeOrdersProvider], (parts) => {
const activeOrders = parts[0] as ReturnType<typeof getData>;
const hasAmendableOrder = activeOrders.some(
(edge) => !(edge.node.liquidityProvision || edge.node.peggedOrder)
);
return hasAmendableOrder;
});
>(
[
(callback, client, { partyId, marketId }) =>
hasActiveOrderProviderInternal(callback, client, {
marketIds: marketId ? [marketId] : undefined,
filter: {
status: [OrderStatus.STATUS_ACTIVE],
excludeLiquidity: true,
},
pagination: {
first: 1,
},
partyId,
} as OrdersQueryVariables),
],
(parts) => parts[0]
);
@@ -6,12 +6,10 @@ import { OrderListManager } from './order-list-manager';
export const OrderListContainer = ({
marketId,
onMarketClick,
onOrderTypeClick,
enforceBottomPlaceholder,
}: {
marketId?: string;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
enforceBottomPlaceholder?: boolean;
}) => {
const { pubKey, isReadOnly } = useVegaWallet();
@@ -25,7 +23,6 @@ export const OrderListContainer = ({
partyId={pubKey}
marketId={marketId}
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
isReadOnly={isReadOnly}
enforceBottomPlaceholder={enforceBottomPlaceholder}
/>
@@ -8,7 +8,7 @@ import type { GridReadyEvent } from 'ag-grid-community';
import { OrderListTable } from '../order-list/order-list';
import { useOrderListData } from './use-order-list-data';
import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
import { useHasActiveOrder } from '../../order-hooks/use-has-active-order';
import type { Filter, Sort } from './use-order-list-data';
import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
import { OrderStatus } from '@vegaprotocol/types';
@@ -16,7 +16,6 @@ import {
normalizeOrderAmendment,
useVegaTransactionStore,
} from '@vegaprotocol/wallet';
import isEqual from 'lodash/isEqual';
import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
import { OrderEditDialog } from '../order-list/order-edit-dialog';
import type { Order, OrderEdge } from '../order-data-provider';
@@ -25,23 +24,31 @@ export interface OrderListManagerProps {
partyId: string;
marketId?: string;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
isReadOnly: boolean;
enforceBottomPlaceholder?: boolean;
}
const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
<div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
<Button
variant="primary"
size="sm"
onClick={onClick}
data-testid="cancelAll"
>
{t('Cancel all')}
</Button>
</div>
);
const CancelAllOrdersButton = ({
onClick,
marketId,
}: {
onClick: (marketId?: string) => void;
marketId?: string;
}) => {
const hasActiveOrder = useHasActiveOrder(marketId);
return hasActiveOrder ? (
<div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
<Button
variant="primary"
size="sm"
onClick={() => onClick(marketId)}
data-testid="cancelAll"
>
{t('Cancel all')}
</Button>
</div>
) : null;
};
const initialFilter: Filter = {
status: {
@@ -53,7 +60,6 @@ export const OrderListManager = ({
partyId,
marketId,
onMarketClick,
onOrderTypeClick,
isReadOnly,
enforceBottomPlaceholder,
}: OrderListManagerProps) => {
@@ -62,10 +68,9 @@ export const OrderListManager = ({
const scrolledToTop = useRef(false);
const [sort, setSort] = useState<Sort[] | undefined>();
const [filter, setFilter] = useState<Filter | undefined>(initialFilter);
const filterRef = useRef(initialFilter);
const [editOrder, setEditOrder] = useState<Order | null>(null);
const create = useVegaTransactionStore((state) => state.create);
const hasAmendableOrder = useHasAmendableOrder(marketId);
const hasActiveOrder = useHasActiveOrder(marketId);
const { data, error, loading, reload } = useOrderListData({
partyId,
@@ -81,16 +86,12 @@ export const OrderListManager = ({
...bottomPlaceholderProps
} = useBottomPlaceholder<Order>({
gridRef,
disabled: !enforceBottomPlaceholder && !isReadOnly && !hasAmendableOrder,
disabled: !enforceBottomPlaceholder && !isReadOnly && !hasActiveOrder,
});
const onFilterChanged = useCallback(
(event: FilterChangedEvent) => {
const updatedFilter = event.api.getFilterModel();
if (isEqual(updatedFilter, filterRef.current)) {
return;
}
filterRef.current = updatedFilter;
if (Object.keys(updatedFilter).length) {
setFilter(updatedFilter);
} else {
@@ -141,13 +142,16 @@ export const OrderListManager = ({
setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
}, [data]);
const cancelAll = useCallback(() => {
create({
orderCancellation: {
marketId,
},
});
}, [create, marketId]);
const cancelAll = useCallback(
(marketId?: string) => {
create({
orderCancellation: {
marketId,
},
});
},
[create]
);
const extractedData =
data && !loading
? data
@@ -167,7 +171,6 @@ export const OrderListManager = ({
cancel={cancel}
setEditOrder={setEditOrder}
onMarketClick={onMarketClick}
onOrderTypeClick={onOrderTypeClick}
isReadOnly={isReadOnly}
blockLoadDebounceMillis={100}
suppressLoadingOverlay
@@ -185,8 +188,8 @@ export const OrderListManager = ({
/>
</div>
</div>
{!isReadOnly && hasAmendableOrder && (
<CancelAllOrdersButton onClick={cancelAll} />
{!isReadOnly && (
<CancelAllOrdersButton onClick={cancelAll} marketId={marketId} />
)}
{editOrder && (
<OrderEditDialog
@@ -71,27 +71,17 @@ export const useOrderListData = ({
// define variable as const to get type safety, using generic with useMemo resulted in lost type safety
const allVars: OrdersQueryVariables & OrdersUpdateSubscriptionVariables = {
partyId,
filter: {
dateRange: filter?.updatedAt?.value,
status: filter?.status?.value,
timeInForce: filter?.timeInForce?.value,
types: filter?.type?.value,
},
pagination: {
first: 1000,
},
};
if (
filter?.updatedAt?.value ||
filter?.status?.value.length ||
filter?.timeInForce?.value.length ||
filter?.type?.value.length
) {
allVars.filter = {};
if (filter?.updatedAt?.value) {
allVars.filter.dateRange = filter?.updatedAt?.value;
}
if (filter?.status?.value.length) {
allVars.filter.status = filter?.status?.value;
}
if (filter?.timeInForce?.value.length) {
allVars.filter.timeInForce = filter?.timeInForce?.value;
}
if (filter?.type?.value.length) {
allVars.filter.types = filter?.type?.value;
}
}
return allVars;
}, [partyId, filter]);
@@ -16,7 +16,6 @@ import {
negativeClassNames,
positiveClassNames,
MarketNameCell,
OrderTypeCell,
} from '@vegaprotocol/datagrid';
import type {
TypedDataAgGrid,
@@ -32,16 +31,12 @@ export type OrderListTableProps = OrderListProps & {
cancel: (order: Order) => void;
setEditOrder: (order: Order) => void;
onMarketClick?: (marketId: string, metaKey?: boolean) => void;
onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
isReadOnly: boolean;
};
export const OrderListTable = memo(
forwardRef<AgGridReact, OrderListTableProps>(
(
{ cancel, setEditOrder, onMarketClick, onOrderTypeClick, ...props },
ref
) => {
({ cancel, setEditOrder, onMarketClick, ...props }, ref) => {
return (
<AgGrid
ref={ref}
@@ -56,7 +51,7 @@ export const OrderListTable = memo(
height: '100%',
}}
getRowId={({ data }) => data.id}
components={{ MarketNameCell, OrderTypeCell }}
components={{ MarketNameCell }}
{...props}
>
<AgGridColumn
@@ -108,9 +103,17 @@ export const OrderListTable = memo(
filterParams={{
set: Schema.OrderTypeMapping,
}}
cellRenderer="OrderTypeCell"
cellRendererParams={{
onClick: onOrderTypeClick,
valueFormatter={({
data: order,
value,
}: VegaValueFormatterParams<Order, 'type'>) => {
if (!order) {
return undefined;
}
if (!value) return '-';
if (order?.peggedOrder) return t('Pegged');
if (order?.liquidityProvision) return t('Liquidity provision');
return Schema.OrderTypeMapping[value];
}}
minWidth={80}
/>
+2 -1
View File
@@ -1,4 +1,5 @@
export * from './__generated__/OrdersSubscription';
export * from './use-has-amendable-order';
export * from './use-has-active-order';
export * from './use-order-update';
export * from './use-pending-orders-volume';
export * from './use-order-store';
@@ -1,17 +1,17 @@
import { useCallback, useState } from 'react';
import { hasAmendableOrderProvider } from '../components/order-data-provider';
import { hasActiveOrderProvider } from '../components/order-data-provider/';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useDataProvider } from '@vegaprotocol/react-helpers';
export const useHasAmendableOrder = (marketId?: string) => {
export const useHasActiveOrder = (marketId?: string) => {
const { pubKey } = useVegaWallet();
const [hasAmendableOrder, setHasAmendableOrder] = useState(false);
const [hasActiveOrder, setHasActiveOrder] = useState(false);
const update = useCallback(({ data }: { data: boolean | null }) => {
setHasAmendableOrder(Boolean(data));
setHasActiveOrder(Boolean(data));
return true;
}, []);
useDataProvider({
dataProvider: hasAmendableOrderProvider,
dataProvider: hasActiveOrderProvider,
update,
variables: {
partyId: pubKey || '',
@@ -20,5 +20,5 @@ export const useHasAmendableOrder = (marketId?: string) => {
skip: !pubKey,
});
return hasAmendableOrder;
return hasActiveOrder;
};
@@ -0,0 +1,74 @@
import { useState, useCallback } from 'react';
import { OrderStatus, Side } from '@vegaprotocol/types';
import { ordersProvider } from '../components/order-data-provider/order-data-provider';
import type { OrderFieldsFragment } from '../components/order-data-provider/__generated__/Orders';
import type { Edge } from '@vegaprotocol/utils';
import { useDataProvider } from '@vegaprotocol/react-helpers';
const sumVolume = (orders: (Edge<OrderFieldsFragment> | null)[], side: Side) =>
orders
.reduce(
(sum, order) =>
order?.node.side === side
? sum +
BigInt(
order?.node.status === OrderStatus.STATUS_PARTIALLY_FILLED
? order?.node.remaining
: order?.node.size
)
: sum,
BigInt(0)
)
.toString();
export const useActiveOrdersVolumeAndMargin = (
partyId: string | null | undefined,
marketId: string
) => {
const [buyVolume, setBuyVolume] = useState<string | undefined>();
const [sellVolume, setSellVolume] = useState<string | undefined>();
const [buyInitialMargin, setBuyInitialMargin] = useState<
string | undefined
>();
const [sellInitialMargin, setSellInitialMargin] = useState<
string | undefined
>();
const update = useCallback(
({ data }: { data: (Edge<OrderFieldsFragment> | null)[] | null }) => {
if (!data) {
setBuyVolume(undefined);
setSellVolume(undefined);
setBuyInitialMargin(undefined);
setSellInitialMargin(undefined);
} else {
setBuyVolume(sumVolume(data, Side.SIDE_BUY));
setSellVolume(sumVolume(data, Side.SIDE_SELL));
}
return true;
},
[]
);
useDataProvider({
dataProvider: ordersProvider,
update,
variables: {
partyId: partyId || '',
marketIds: [marketId],
filter: {
status: [
OrderStatus.STATUS_ACTIVE,
OrderStatus.STATUS_PARTIALLY_FILLED,
],
},
},
skip: !partyId,
});
return buyVolume || sellVolume
? {
buyVolume,
sellVolume,
buyInitialMargin,
sellInitialMargin,
}
: undefined;
};
@@ -30,12 +30,12 @@ import {
import { marginsDataProvider } from './margin-data-provider';
import { calculateMargins } from './margin-calculator';
import type { Edge } from '@vegaprotocol/utils';
import { Side } from '@vegaprotocol/types';
import { OrderStatus, Side } from '@vegaprotocol/types';
import { marketInfoProvider } from '@vegaprotocol/market-info';
import type { MarketInfoQuery } from '@vegaprotocol/market-info';
import { marketDataProvider } from '@vegaprotocol/market-list';
import type { MarketData } from '@vegaprotocol/market-list';
import { activeOrdersProvider } from '@vegaprotocol/orders';
import { ordersProvider } from '@vegaprotocol/orders';
import type { OrderFieldsFragment } from '@vegaprotocol/orders';
import type { PositionStatus } from '@vegaprotocol/types';
@@ -350,9 +350,12 @@ export const volumeAndMarginProvider = makeDerivedDataProvider<
>(
[
(callback, client, { partyId, marketId }) =>
activeOrdersProvider(callback, client, {
ordersProvider(callback, client, {
partyId,
marketId,
marketIds: [marketId],
filter: {
status: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
},
}),
(callback, client, variables) =>
marketDataProvider(callback, client, { marketId: variables.marketId }),
@@ -1,10 +1,10 @@
import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
import { useState, useEffect, useRef, useCallback } from 'react';
import throttle from 'lodash/throttle';
import isEqualWith from 'lodash/isEqualWith';
import isEqual from 'lodash/isEqual';
import { useApolloClient } from '@apollo/client';
import { usePrevious } from './use-previous';
import type { OperationVariables } from '@apollo/client';
import type { Subscribe, Load, UpdateCallback } from '@vegaprotocol/utils';
import { variablesIsEqualCustomizer } from '@vegaprotocol/utils';
export interface useDataProviderParams<
Data,
@@ -62,19 +62,13 @@ export const useDataProvider = <
const flushRef = useRef<(() => void) | undefined>(undefined);
const reloadRef = useRef<((force?: boolean) => void) | undefined>(undefined);
const loadRef = useRef<Load<Data> | undefined>(undefined);
const variablesRef = useRef<Variables>(props.variables);
const variables = useMemo(() => {
if (
!isEqualWith(
variablesRef.current,
props.variables,
variablesIsEqualCustomizer
)
) {
variablesRef.current = props.variables;
const prevVariables = usePrevious(props.variables);
const [variables, setVariables] = useState(props.variables);
useEffect(() => {
if (!isEqual(prevVariables, props.variables)) {
setVariables(props.variables);
}
return variablesRef.current;
}, [props.variables]);
}, [props.variables, prevVariables]);
const flush = useCallback(() => {
if (flushRef.current) {
flushRef.current();
-1
View File
@@ -25,7 +25,6 @@ export * from './nav-dropdown';
export * from './nav';
export * from './navigation';
export * from './notification';
export * from './pagination';
export * from './popover';
export * from './progress-bar';
export * from './radio-group';
@@ -70,8 +70,6 @@ export const Notification = ({
'text-vega-green dark:text-vega-green': intent === Intent.Success,
'text-yellow-600 dark:text-yellow': intent === Intent.Warning,
'text-vega-pink': intent === Intent.Danger,
'mt-1': !!title,
'mt-[0.125rem]': !title,
},
'flex items-start mt-1'
)}
@@ -80,16 +78,11 @@ export const Notification = ({
</div>
<div className="flex flex-col flex-grow items-start gap-1.5">
{title && (
<div
key="title"
className="whitespace-nowrap overflow-hidden text-ellipsis uppercase leading-6"
>
<div className="whitespace-nowrap overflow-hidden text-ellipsis uppercase leading-6">
{title}
</div>
)}
<div key="message" className="text-sm [word-break:break-word]">
{message}
</div>
<div className="text-sm [word-break:break-word]">{message}</div>
{buttonProps && (
<Button
size={buttonProps.size || 'sm'}
@@ -1 +0,0 @@
export * from './pagination';
@@ -1,28 +0,0 @@
import { useState } from 'react';
import { Pagination } from './pagination';
import type { ComponentStory, ComponentMeta } from '@storybook/react';
export default {
title: 'Pagination',
component: Pagination,
} as ComponentMeta<typeof Pagination>;
const Template: ComponentStory<typeof Pagination> = (args) => {
const MAX_PAGE = 3;
const [page, setPage] = useState(1);
return (
<div>
<Pagination
hasPrevPage={page !== 1}
hasNextPage={page < MAX_PAGE}
onBack={() => setPage(Math.max(1, page - 1))}
onNext={() => setPage(Math.min(MAX_PAGE, page + 1))}
>
Page {page}
</Pagination>
</div>
);
};
export const Default = Template.bind({});
@@ -1,73 +0,0 @@
import type { ReactNode } from 'react';
import { Button } from '../button';
import { Icon } from '../icon';
export type PaginationProps = {
hasPrevPage: boolean;
hasNextPage: boolean;
isLoading?: boolean;
children?: ReactNode;
onBack: () => void;
onNext: () => void;
onFirst?: () => void;
onLast?: () => void;
};
const buttonClass = 'rounded-full w-[34px] h-[34px]';
export const Pagination = ({
hasPrevPage,
hasNextPage,
isLoading,
children,
onBack,
onNext,
onFirst,
onLast,
}: PaginationProps) => {
return (
<div className={'flex gap-2 my-2 items-center justify-center'}>
{onFirst && (
<Button
size="sm"
data-testid="goto-first-page"
disabled={isLoading || !hasPrevPage}
className={buttonClass}
onClick={onFirst}
>
<Icon name="double-chevron-left" ariaLabel="Back" />
</Button>
)}
<Button
size="sm"
data-testid="goto-previous-page"
disabled={isLoading || !hasPrevPage}
className={buttonClass}
onClick={onBack}
>
<Icon name="chevron-left" ariaLabel="Back" />
</Button>
{children}
<Button
size="sm"
data-testid="goto-next-page"
disabled={isLoading || !hasNextPage}
className={buttonClass}
onClick={onNext}
>
<Icon name="chevron-right" ariaLabel="Next" />
</Button>
{onLast && (
<Button
size="sm"
data-testid="goto-last-page"
disabled={isLoading || !hasNextPage}
className={buttonClass}
onClick={onLast}
>
<Icon name="double-chevron-right" ariaLabel="Back" />
</Button>
)}
</div>
);
};
@@ -45,7 +45,7 @@ type CombinedData = {
type SubscriptionData = QueryData;
type Delta = Data;
type Variables = { var: string; filter?: string[] };
type Variables = { var: string };
const update = jest.fn<
ReturnType<Update<Data, Delta, Variables>>,
@@ -231,14 +231,10 @@ describe('data provider', () => {
clientSubscribeSubscribe.mockClear();
});
it('memoize instance and unsubscribe if no subscribers', () => {
const subscription1 = subscribe(jest.fn(), client, {
...variables,
filter: ['1', '2'],
});
const subscription2 = subscribe(jest.fn(), client, {
...variables,
filter: ['2', '1'],
});
const subscription1 = subscribe(jest.fn(), client, variables);
const subscription2 = subscribe(jest.fn(), client, { ...variables });
// const subscription1 = subscribe(jest.fn(), client);
// const subscription2 = subscribe(jest.fn(), client);
expect(clientSubscribeSubscribe.mock.calls.length).toEqual(1);
subscription1.unsubscribe();
expect(clientSubscribeUnsubscribe.mock.calls.length).toEqual(0);
+9 -36
View File
@@ -10,7 +10,7 @@ import type {
} from '@apollo/client';
import type { GraphQLErrors } from '@apollo/client/errors';
import type { Subscription } from 'zen-observable-ts';
import isEqualWith from 'lodash/isEqualWith';
import isEqual from 'lodash/isEqual';
import { isNotFoundGraphQLError } from './apollo-client';
import type * as Schema from '@vegaprotocol/types';
interface UpdateData<Data, Delta> {
@@ -104,11 +104,7 @@ interface GetTotalCount<QueryData> {
}
interface GetDelta<SubscriptionData, Delta, Variables> {
(
subscriptionData: SubscriptionData,
variables: Variables,
client: ApolloClient<object>
): Delta;
(subscriptionData: SubscriptionData, variables?: Variables): Delta;
}
export type Node = { id: string };
@@ -424,7 +420,7 @@ function makeDataProviderInternal<
if (!subscriptionData || !getDelta || !update) {
return;
}
const delta = getDelta(subscriptionData, variables, client);
const delta = getDelta(subscriptionData, variables);
if (loading) {
updateQueue.push(delta);
} else {
@@ -516,26 +512,11 @@ function makeDataProviderInternal<
};
}
/**
* Compares two arrays assuming that they are sets of primitive values, used to compare gql query variables
*/
export const variablesIsEqualCustomizer: NonNullable<
Parameters<typeof isEqualWith>['2']
> = (value, other) => {
if (Array.isArray(value) && Array.isArray(other)) {
return (
value.length === other.length &&
new Set([...value, ...other]).size === value.length
);
}
return undefined;
};
/**
* Memoizes data provider instances using query variables as cache key
*
* @param fn
* @returns subscribe function
* @returns subscibe function
*/
const memoize = <
Data,
@@ -549,9 +530,7 @@ const memoize = <
variables?: Variables;
}[] = [];
return (variables?: Variables) => {
const cached = cache.find((c) =>
isEqualWith(c.variables, variables, variablesIsEqualCustomizer)
);
const cached = cache.find((c) => isEqual(c.variables, variables));
if (cached) {
return cached.subscribe;
}
@@ -603,10 +582,8 @@ export function makeDataProvider<
const getInstance = memoize<Data, Delta, Variables>(() =>
makeDataProviderInternal(params)
);
return (callback, client, variables) => {
const instance = getInstance(variables)(callback, client, variables);
return instance;
};
return (callback, client, variables) =>
getInstance(variables)(callback, client, variables);
}
/**
@@ -628,9 +605,7 @@ export type CombineDerivedData<
> = (
data: DerivedPart<Variables>['data'][],
variables: Variables,
prevData: Data | null,
parts: DerivedPart<Variables>[],
subscriptions?: ReturnType<DependencySubscribe<Variables>>[]
prevData: Data | null
) => Data | null;
export type CombineDerivedDelta<
@@ -712,9 +687,7 @@ function makeDerivedDataProviderInternal<
? combineData(
parts.map((part) => part.data),
variables,
data,
parts,
subscriptions
data
)
: data;
if (
-3
View File
@@ -31,9 +31,6 @@ export interface VegaWalletContextShape {
/** Transaction payload */
transaction: Transaction
) => Promise<TransactionResponse | null>;
/** Fetch public keys */
fetchPubKeys?: () => Promise<PubKey[] | null>;
}
export const VegaWalletContext = createContext<
+1 -35
View File
@@ -50,7 +50,6 @@ describe('VegaWalletProvider', () => {
connect: expect.any(Function),
disconnect: expect.any(Function),
sendTx: expect.any(Function),
fetchPubKeys: expect.any(Function || undefined),
});
// Connect
@@ -78,47 +77,14 @@ describe('VegaWalletProvider', () => {
expect(spyOnSend).toHaveBeenCalledWith(mockPubKeys[1].publicKey, {});
});
it('should fetch new keypairs', async () => {
const { result } = setup();
// Default state
expect(result.current).toEqual({
pubKey: null,
pubKeys: null,
isReadOnly: false,
selectPubKey: expect.any(Function),
connect: expect.any(Function),
disconnect: expect.any(Function),
sendTx: expect.any(Function),
fetchPubKeys: expect.any(Function),
});
// Connect
await act(async () => {
result.current.connect(restConnector);
result.current.selectPubKey(mockPubKeys[0].publicKey);
});
expect(spyOnConnect).toHaveBeenCalled();
expect(result.current.pubKeys).toHaveLength(mockPubKeys.length);
expect(result.current.pubKey).toBe(mockPubKeys[0].publicKey);
// Fetch pub keys
mockPubKeys.push({ publicKey: '333', name: 'public key 3' });
await act(async () => {
result.current.fetchPubKeys && result.current.fetchPubKeys();
});
expect(result.current.pubKeys).toHaveLength(mockPubKeys.length);
});
it('persists selected pubkey and disconnects', async () => {
const { result } = setup();
expect(result.current.pubKey).toBe(null);
await act(async () => {
result.current.connect(restConnector);
result.current.selectPubKey(mockPubKeys[0].publicKey);
});
expect(result.current.pubKey).toBe(mockPubKeys[0].publicKey);
expect(result.current.pubKey).toBe(mockPubKeys[1].publicKey);
// Disconnect
await act(async () => {
+2 -34
View File
@@ -21,7 +21,7 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
const [pubKey, setPubKey] = useState<string | null>(null);
const [isReadOnly, setIsReadOnly] = useState<boolean>(false);
// Array of public keys retrieved from the connector
// Arary of pubkeys retrieved from the connector
const [pubKeys, setPubKeys] = useState<PubKey[] | null>(null);
// Reference to the current connector instance
@@ -32,28 +32,6 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
LocalStorage.setItem(WALLET_KEY, pk);
}, []);
const fetchPubKeys = useCallback(async () => {
if (!connector.current) {
throw new Error('No connector');
}
try {
const keys = await connector.current.connect();
if (keys?.length) {
setPubKeys(keys);
setIsReadOnly(connector.current instanceof ViewConnector);
return keys;
} else {
return null;
}
} catch (err) {
if (err instanceof WalletClientError) {
throw err;
}
return null;
}
}, []);
const connect = useCallback(async (c: VegaConnector) => {
connector.current = c;
try {
@@ -117,18 +95,8 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
connect,
disconnect,
sendTx,
fetchPubKeys,
};
}, [
isReadOnly,
pubKey,
pubKeys,
selectPubKey,
connect,
disconnect,
sendTx,
fetchPubKeys,
]);
}, [isReadOnly, pubKey, pubKeys, selectPubKey, connect, disconnect, sendTx]);
return (
<VegaWalletContext.Provider value={contextValue}>
+2 -2
View File
@@ -30,13 +30,13 @@ export const useJsonRpcConnect = (onConnect: () => void) => {
// Check if wallet is configured for the same chain as the app
setStatus(Status.GettingChainId);
// Do not throw in when cypress is running as trading app relies on
// Dont throw in when cypress is running as trading app relies on
// mocks which result in a mismatch between chainId for app and
// chainId for wallet
if (!('Cypress' in window)) {
const chainIdResult = await connector.getChainId();
if (chainIdResult.chainID !== appChainId) {
// Throw wallet error for consistent error handling
// Throw wallet error for consitent error handling
throw ClientErrors.WRONG_NETWORK;
}
}
-62
View File
@@ -6,7 +6,6 @@ import {
removeDecimal,
required,
isAssetTypeERC20,
formatNumber,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
@@ -15,16 +14,12 @@ import {
FormGroup,
Input,
InputError,
Notification,
RichSelect,
ExternalLink,
Intent,
} from '@vegaprotocol/ui-toolkit';
import { useWeb3React } from '@web3-react/core';
import BigNumber from 'bignumber.js';
import type { ButtonHTMLAttributes } from 'react';
import type { ControllerRenderProps } from 'react-hook-form';
import { formatDistanceToNow } from 'date-fns';
import { useForm, Controller, useWatch } from 'react-hook-form';
import type { WithdrawalArgs } from './use-create-withdraw';
import { WithdrawLimits } from './withdraw-limits';
@@ -50,47 +45,6 @@ export interface WithdrawFormProps {
submitWithdraw: (withdrawal: WithdrawalArgs) => void;
}
const WithdrawDelayNotification = ({
threshold,
delay,
symbol,
decimals,
}: {
threshold: BigNumber;
delay: number | undefined;
symbol: string;
decimals: number;
}) => {
const replacements = [
symbol,
delay ? formatDistanceToNow(Date.now() + delay * 1000) : ' ',
];
return (
<Notification
intent={Intent.Warning}
testId={
threshold.isFinite()
? 'amount-withdrawal-delay-notification'
: 'withdrawals-delay-notification'
}
message={[
!threshold.isFinite()
? t('All %s withdrawals are subject to a %s delay.', replacements)
: t('Withdrawals of %s %s or more will be delayed for %s.', [
formatNumber(threshold, decimals),
...replacements,
]),
<ExternalLink
className="ml-1"
href="https://docs.vega.xyz/testnet/concepts/deposits-withdrawals#withdrawal-limits"
>
{t('Read more')}
</ExternalLink>,
]}
/>
);
};
export const WithdrawForm = ({
assets,
balance,
@@ -159,12 +113,6 @@ export const WithdrawForm = ({
);
};
const showWithdrawDelayNotification =
delay &&
selectedAsset &&
(!threshold.isFinite() ||
new BigNumber(amount).isGreaterThanOrEqualTo(threshold));
return (
<>
<div className="mb-4 text-sm">
@@ -258,16 +206,6 @@ export const WithdrawForm = ({
{t('Use maximum')}
</UseButton>
)}
{showWithdrawDelayNotification && (
<div className="mt-2">
<WithdrawDelayNotification
threshold={threshold}
symbol={selectedAsset.symbol}
decimals={selectedAsset.decimals}
delay={delay}
/>
</div>
)}
</FormGroup>
<Button
data-testid="submit-withdrawal"
+12 -34
View File
@@ -1,12 +1,7 @@
import type { Asset } from '@vegaprotocol/assets';
import { t } from '@vegaprotocol/i18n';
import { CompactNumber } from '@vegaprotocol/react-helpers';
import { WITHDRAW_THRESHOLD_TOOLTIP_TEXT } from '@vegaprotocol/assets';
import {
KeyValueTable,
KeyValueTableRow,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
import BigNumber from 'bignumber.js';
import { formatDistanceToNow } from 'date-fns';
@@ -30,13 +25,7 @@ export const WithdrawLimits = ({
? formatDistanceToNow(Date.now() + delay * 1000)
: t('None');
const limits: {
key: string;
label: string;
value: string | JSX.Element;
rawValue?: BigNumber;
tooltip?: string;
}[] = [
const limits = [
{
key: 'BALANCE_AVAILABLE',
label: t('Balance available'),
@@ -47,35 +36,24 @@ export const WithdrawLimits = ({
'-'
),
},
];
if (threshold.isFinite()) {
limits.push({
{
key: 'WITHDRAWAL_THRESHOLD',
label: t('Delayed withdrawal threshold'),
tooltip: WITHDRAW_THRESHOLD_TOOLTIP_TEXT,
rawValue: threshold,
value: <CompactNumber number={threshold} decimals={asset.decimals} />,
});
}
limits.push({
key: 'DELAY_TIME',
label: t('Delay time'),
value: delayTime,
});
},
{
key: 'DELAY_TIME',
label: t('Delay time'),
value: delayTime,
},
];
return (
<KeyValueTable>
{limits.map(({ key, label, rawValue, value, tooltip }) => (
{limits.map(({ key, label, rawValue, value }) => (
<KeyValueTableRow key={key}>
<div data-testid={`${key}_label`}>
{tooltip ? (
<Tooltip description={tooltip}>
<span>{label}</span>
</Tooltip>
) : (
label
)}
</div>
<div data-testid={`${key}_label`}>{label}</div>
<div
data-testid={`${key}_value`}
className="truncate"
@@ -12,17 +12,15 @@ jest.mock('@web3-react/core', () => ({
useWeb3React: () => ({ account: ethereumAddress }),
}));
const withdrawAsset = {
asset,
balance: new BigNumber(1),
min: new BigNumber(0.0000001),
threshold: new BigNumber(1000),
delay: 10,
handleSelectAsset: jest.fn(),
};
jest.mock('./use-withdraw-asset', () => ({
useWithdrawAsset: () => withdrawAsset,
useWithdrawAsset: () => ({
asset,
balance: new BigNumber(1),
min: new BigNumber(0.0000001),
threshold: new BigNumber(1000),
delay: 10,
handleSelectAsset: jest.fn(),
}),
}));
jest.mock('@vegaprotocol/web3', () => ({
@@ -111,25 +109,4 @@ describe('WithdrawManager', () => {
});
fireEvent.submit(screen.getByTestId('withdraw-form'));
};
it('shows withdraw delay notification if amount greater than threshold', async () => {
render(generateJsx(props));
fireEvent.change(screen.getByLabelText('Amount'), {
target: { value: '1000' },
});
expect(
await screen.findByTestId('amount-withdrawal-delay-notification')
).toBeInTheDocument();
});
it('shows withdraw delay notification if threshold is 0', async () => {
withdrawAsset.threshold = new BigNumber(Infinity);
render(generateJsx(props));
fireEvent.change(screen.getByLabelText('Amount'), {
target: { value: '0.01' },
});
expect(
await screen.findByTestId('withdrawals-delay-notification')
).toBeInTheDocument();
});
});
+1 -1
View File
@@ -70,7 +70,7 @@
"react-hook-form": "^7.27.0",
"react-i18next": "^11.11.4",
"react-intersection-observer": "^9.2.2",
"react-markdown": "^8.0.6",
"react-markdown": "^8.0.5",
"react-router-dom": "^6.9.0",
"react-syntax-highlighter": "^15.4.5",
"react-use-websocket": "^3.0.0",
+4 -4
View File
@@ -19541,10 +19541,10 @@ react-lifecycles-compat@^3.0.4:
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
react-markdown@^8.0.6:
version "8.0.6"
resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.6.tgz#3e939018f8bfce800ffdf22cf50aba3cdded7ad1"
integrity sha512-KgPWsYgHuftdx510wwIzpwf+5js/iHqBR+fzxefv8Khk3mFbnioF1bmL2idHN3ler0LMQmICKeDrWnZrX9mtbQ==
react-markdown@^8.0.5:
version "8.0.5"
resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.5.tgz#c9a70a33ca9aeeafb769c6582e7e38843b9d70ad"
integrity sha512-jGJolWWmOWAvzf+xMdB9zwStViODyyFQhNB/bwCerbBKmrTmgmA599CGiOlP58OId1IMoIRsA8UdI1Lod4zb5A==
dependencies:
"@types/hast" "^2.0.0"
"@types/prop-types" "^15.0.0"