chore: add applyTransaction

Co-authored-by: asiaznik <artur@vegaprotocol.io>

.github/ISSUE_TEMPLATE/chore.md

@@ -14,8 +14,7 @@ What we need to achieve and who for
 
 ## Tasks
 
-- [ ] What do we need to do first
-- [ ] and then what?
-- [ ] Etc.
+- [ ]
+- [ ]
 
 ## Additional details / background info

.github/ISSUE_TEMPLATE/user-story.md

@@ -22,11 +22,14 @@ So that
 
 ## Tasks
 
-- [ ] Explore and sketch
+- [ ] UX (if needed)
+- [ ] Design (if needed)
 - [ ] Team and stakeholder review
-- [ ] Visual Design
-- [ ] Team review
-- [ ] Etc.
+- [ ] Specs reviewed and created or adjusted
+- [ ] Implementation
+- [ ] Testing (unit and/or e2e)
+- [ ] Code review
+- [ ] QA review
 
 ## Sketch
 

.github/workflows/add-ipfs-notes-to-release.yml

@@ -61,7 +61,7 @@ jobs:
             CIDv0: ${{ env.IPFS_V0 }}
             CIDv1: ${{ env.IPFS_V1 }}
 
-            You can always access the latest IPFS release by visiting [vega.trading](https://vega.trading).
+            You can always access the latest IPFS release by visiting [console.vega.xyz](https://console.vega.xyz).
 
             You can also access Trading directly from an IPFS gateway.
             BEWARE: The Trading interface uses [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to remember your settings, such as which tokens you have imported. You should always use an IPFS gateway that enforces [origin separation](https://ipfs.github.io/public-gateway-checker/).

.github/workflows/ci-cd-trigger.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - release/*
       - develop
+      - main
     tags:
       - v*
   pull_request:
@@ -170,6 +171,7 @@ jobs:
       - publish-dist
       - lint-test-build
     if: ${{ github.event_name == 'pull_request' }}
+    timeout-minutes: 60
     name: '(CD) comment preview links'
     steps:
       - name: Find Comment
@@ -179,6 +181,29 @@ jobs:
           issue-number: ${{ github.event.pull_request.number }}
           body-includes: Previews
 
+      - name: Wait for deployments
+        run: |
+          # https://stackoverflow.com/questions/3183444/check-for-valid-link-url
+          regex='(https?|ftp|file)://[-[:alnum:]\+&@#/%?=~_|!:,.;]*[-[:alnum:]\+&@#/%=~_|]'
+          if [[ "${{ needs.lint-test-build.outputs.preview_governance }}" =~ $regex ]]; then
+            until curl -L --fail "${{ needs.lint-test-build.outputs.preview_governance }}"; do
+              echo "waiting for governance preview"
+              sleep 5
+            done
+          fi
+          if [[ "${{ needs.lint-test-build.outputs.preview_explorer }}" =~ $regex ]]; then
+            until curl -L --fail "${{ needs.lint-test-build.outputs.preview_explorer }}"; do
+              echo "waiting for explorer preview"
+              sleep 5
+            done
+          fi
+          if [[ "${{ needs.lint-test-build.outputs.preview_trading }}" =~ $regex ]]; then
+            until curl -L --fail "${{ needs.lint-test-build.outputs.preview_trading }}"; do
+              echo "waiting for trading preview"
+              sleep 5
+            done
+          fi
+
       - name: Create comment
         uses: peter-evans/create-or-update-comment@v3
         if: ${{ steps.fc.outputs.comment-id == 0 }}
@@ -190,15 +215,9 @@ jobs:
             * explorer: ${{ needs.lint-test-build.outputs.preview_explorer  }}
             * trading: ${{ needs.lint-test-build.outputs.preview_trading }}
 
+  # Report single result at the end, to avoid mess with required checks in PR
   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() }}
     needs: cypress
     runs-on: ubuntu-22.04

.github/workflows/publish-dist.yml

@@ -200,8 +200,19 @@ jobs:
             -d '{"query": "mutation{triggerDeploy(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id status}}"}' \
             https://api.fleek.co/graphql
 
-      - name: Update vega.trading DNS to redirect to the new console
+      - name: Check out ipfs-redirect
         if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        uses: actions/checkout@v3
+        with:
+          repository: 'vegaprotocol/ipfs-redirect'
+          path: 'ipfs-redirect'
+          fetch-depth: '0'
+          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+
+      - name: Update console.vega.xyz DNS to redirect to the new console
+        if: ${{ matrix.app == 'trading' && github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
+        env:
+          GH_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
         run: |
           curl -L https://dist.ipfs.tech/kubo/v0.20.0/kubo_v0.20.0_linux-amd64.tar.gz -o kubo.tgz
           tar -xzf kubo.tgz
@@ -210,26 +221,52 @@ jobs:
           new_hash=$(cat ${{ matrix.app }}-ipfs-hash)
           new_cid=$(ipfs cid format -v 1 -b base32 $new_hash)
 
-          # Generate console URL
-          new_console_url_type=ipfs
-          # new_console_url_type=ipns
-          new_console_url_domain=cf-ipfs.com
-          # new_console_url_domain=dweb.link
-          new_console_url="https://${new_cid}.${new_console_url_type}.${new_console_url_domain}/"
-          echo "new_console_url=${new_console_url}"
+          ls -al ipfs-redirect
 
-          # Update record in DNSimple
-          # docs: https://developer.dnsimple.com/v2/zones/records/#updateZoneRecord
-          dnsimple_account_id=84895
-          dnsimple_zone_name=vega.trading
-          dnsimple_record_id=44409591
-          # see: https://dnsimple.com/a/84895/domains/vega.trading/records/44409591/edit
+          echo $new_hash > ipfs-redirect/cidv0.txt
+          echo $new_cid > ipfs-redirect/cidv1.txt
 
-          curl  -H 'Authorization: Bearer ${{ secrets.DNSIMPLE_API_TOKEN }}' \
-                -H 'Accept: application/json' \
-                -H 'Content-Type: application/json' \
-                -X PATCH \
-                -d "{
-                      \"content\": \"${new_console_url}\"
-                }" \
-                https://api.dnsimple.com/v2/${dnsimple_account_id}/zones/${dnsimple_zone_name}/records/${dnsimple_record_id}
+          (
+            cd ipfs-redirect
+
+            git status
+            cat .git/config
+            git config --global user.email "vega-ci-bot@vega.xyz"
+            git config --global user.name "vega-ci-bot"
+
+            branch_name="update-hash-${{ github.ref }}"
+            git checkout -b "$branch_name"
+            commit_msg="Automated hash update from ${{ github.ref }}"
+            git add cidv0.txt cidv1.txt
+            git commit -m "$commit_msg"
+            git push -u origin "$branch_name"
+            pr_url="$(gh pr create --title "${commit_msg}" --body 'automated pull request to update CIDs')"
+            echo $pr_url
+            # once auto merge get's enabled on documentation repo let's do follow up
+            sleep 5
+            gh pr merge "${pr_url}" --delete-branch --squash --admin
+          )
+
+          # # Generate console URL
+          # new_console_url_type=ipfs
+          # # new_console_url_type=ipns
+          # new_console_url_domain=cf-ipfs.com
+          # # new_console_url_domain=dweb.link
+          # new_console_url="https://${new_cid}.${new_console_url_type}.${new_console_url_domain}/"
+          # echo "new_console_url=${new_console_url}"
+
+          # # Update record in DNSimple
+          # # docs: https://developer.dnsimple.com/v2/zones/records/#updateZoneRecord
+          # dnsimple_account_id=84895
+          # dnsimple_zone_name=console.vega.xyz
+          # dnsimple_record_id=44409591
+          # # see: https://dnsimple.com/a/84895/domains/console.vega.xyz/records/44409591/edit
+
+          # curl  -H 'Authorization: Bearer ${{ secrets.DNSIMPLE_API_TOKEN }}' \
+          #       -H 'Accept: application/json' \
+          #       -H 'Content-Type: application/json' \
+          #       -X PATCH \
+          #       -d "{
+          #             \"content\": \"${new_console_url}\"
+          #       }" \
+          #       https://api.dnsimple.com/v2/${dnsimple_account_id}/zones/${dnsimple_zone_name}/records/${dnsimple_record_id}

.github/workflows/rollback-console.yml

@@ -43,7 +43,17 @@ jobs:
             -d '{"query": "mutation{triggerDeploy(siteId:\"f8f2e051-f18e-49e6-b876-0a39369dc0d8\"){id status}}"}' \
             https://api.fleek.co/graphql
 
-      - name: Update vega.trading DNS to redirect to the new console
+      - name: Check out ipfs-redirect
+        uses: actions/checkout@v3
+        with:
+          repository: 'vegaprotocol/ipfs-redirect'
+          path: 'ipfs-redirect'
+          fetch-depth: '0'
+          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+
+      - name: Update console.vega.xyz DNS to redirect to the new console
+        env:
+          GH_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
         run: |
           curl -L https://dist.ipfs.tech/kubo/v0.20.0/kubo_v0.20.0_linux-amd64.tar.gz -o kubo.tgz
           tar -xzf kubo.tgz
@@ -51,27 +61,24 @@ jobs:
           which ipfs
           new_hash=$(cat ipfs-hash)
           new_cid=$(ipfs cid format -v 1 -b base32 $new_hash)
+          git config --global user.email "vega-ci-bot@vega.xyz"
+          git config --global user.name "vega-ci-bot"
+          echo $new_hash > ipfs-redirect/cidv0.txt
+          echo $new_cid > ipfs-redirect/cidv1.txt
 
-          # Generate console URL
-          new_console_url_type=ipfs
-          # new_console_url_type=ipns
-          new_console_url_domain=cf-ipfs.com
-          # new_console_url_domain=dweb.link
-          new_console_url="https://${new_cid}.${new_console_url_type}.${new_console_url_domain}/"
-          echo "new_console_url=${new_console_url}"
+          (
+            cd ipfs-redirect
 
-          # Update record in DNSimple
-          # docs: https://developer.dnsimple.com/v2/zones/records/#updateZoneRecord
-          dnsimple_account_id=84895
-          dnsimple_zone_name=vega.trading
-          dnsimple_record_id=44409591
-          # see: https://dnsimple.com/a/84895/domains/vega.trading/records/44409591/edit
-
-          curl  -H 'Authorization: Bearer ${{ secrets.DNSIMPLE_API_TOKEN }}' \
-                -H 'Accept: application/json' \
-                -H 'Content-Type: application/json' \
-                -X PATCH \
-                -d "{
-                      \"content\": \"${new_console_url}\"
-                }" \
-                https://api.dnsimple.com/v2/${dnsimple_account_id}/zones/${dnsimple_zone_name}/records/${dnsimple_record_id}
+            git status
+            branch_name="rollback-to-$new_hash"
+            git checkout -b "$branch_name"
+            commit_msg="hash rollback to $new_hash"
+            git add cidv0.txt cidv1.txt
+            git commit -m "$commit_msg"
+            git push -u origin "$branch_name" --force-with-lease
+            pr_url="$(gh pr create --title "${commit_msg}" --body 'automated pull request to update CIDs')"
+            echo $pr_url
+            # once auto merge get's enabled on documentation repo let's do follow up
+            sleep 5
+            gh pr merge "${pr_url}" --delete-branch --squash --admin
+          )

apps/explorer/.env.mainnet

@@ -10,4 +10,4 @@ NX_ETHERSCAN_URL=https://etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz/
-NX_VEGA_CONSOLE_URL=https://vega.trading
+NX_VEGA_CONSOLE_URL=https://console.vega.xyz

apps/governance-e2e/src/integration/flow/proposal-details.cy.ts

@@ -33,8 +33,9 @@ const proposalDetailsTitle = '[data-testid="proposal-title"]';
 const proposalDetailsDescription = '[data-testid="proposal-description"]';
 const openProposals = '[data-testid="open-proposals"]';
 const viewProposalButton = '[data-testid="view-proposal-btn"]';
+const proposalDescriptionToggle = 'proposal-description-toggle';
 const voteBreakdownToggle = 'vote-breakdown-toggle';
-const proposalTermsToggle = 'proposal-terms-toggle';
+const proposalTermsToggle = 'proposal-json-toggle';
 
 describe(
   'Governance flow for proposal details',
@@ -73,6 +74,8 @@ describe(
           'contain.text',
           rawProposal.rationale.title
         );
+        cy.getByTestId(proposalDescriptionToggle).click();
+        cy.getByTestId('proposal-description-toggle');
         cy.get(proposalDetailsDescription)
           .find('p')
           .should('have.text', proposalDescription);
@@ -82,7 +85,7 @@ describe(
       cy.get('code.language-json')
         .should('exist')
         .within(() => {
-          cy.get('.hljs-string').eq(0).should('have.text', '"ProposalTerms"');
+          cy.get('.hljs-attr').eq(0).should('have.text', '"id"');
         });
     });
 
@@ -109,16 +112,9 @@ describe(
           closingDate
         );
       });
-      cy.wrap(
-        formatDateWithLocalTimezone(
-          new Date(createTenDigitUnixTimeStampForSpecifiedDays(0) * 1000)
-        )
-      ).then((proposalDate) => {
-        getProposalInformationFromTable('Proposed on').should(
-          'have.text',
-          proposalDate
-        );
-      });
+      getProposalInformationFromTable('Proposed on')
+        .invoke('text')
+        .should('not.be.empty');
     });
 
     it('Newly created proposal details - shows default status set to fail', function () {

apps/governance-e2e/src/integration/flow/rewards-flow.cy.ts

@@ -7,7 +7,6 @@ import {
 import {
   clickOnValidatorFromList,
   closeStakingDialog,
-  stakingPageAssociateTokens,
   stakingValidatorPageAddStake,
   waitForBeginningOfEpoch,
 } from '../../support/staking.functions';
@@ -31,19 +30,17 @@ context('rewards - flow', { tags: '@slow' }, function () {
     cy.visit('/');
     waitForSpinner();
     depositAsset(vegaAssetAddress, '1000', 18);
-    cy.validatorsSelfDelegate();
     ethereumWalletConnect();
     cy.connectVegaWallet();
+    vegaWalletTeardown();
+    cy.associateTokensToVegaWallet('6000');
     cy.VegaWalletTopUpRewardsPool(30, 200);
     navigateTo(navigation.validators);
-    vegaWalletTeardown();
-    stakingPageAssociateTokens('6000');
     cy.get(vegaWalletUnstakedBalance, txTimeout).should(
       'contain',
       '6,000.0',
       txTimeout
     );
-    cy.get('button').contains('Select a validator to nominate').click();
     clickOnValidatorFromList(0);
     stakingValidatorPageAddStake('3000');
     closeStakingDialog();

apps/governance-e2e/src/integration/flow/token-association-flow.cy.ts

@@ -24,6 +24,7 @@ const ethWalletContainer = '[data-testid="ethereum-wallet"]';
 const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
 const vegaWalletUnstakedBalance =
   '[data-testid="vega-wallet-balance-unstaked"]';
+const currencyTitle = '[data-testid="currency-title"]:visible';
 const txTimeout = Cypress.env('txTimeout');
 const vegaWalletPublicKeyShort = Cypress.env('vegaWalletPublicKeyShort');
 const ethWalletAssociateButton = '[data-testid="associate-btn"]:visible';
@@ -79,14 +80,11 @@ context(
         //0005-ETXN-005
         stakingPageAssociateTokens('2', { skipConfirmation: true });
 
-        cy.getByTestId('currency-title', txTimeout).should(
-          'have.length.above',
-          6
-        );
+        cy.get(currencyTitle, txTimeout).should('have.length.above', 4);
         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.get(currencyTitle, txTimeout).should('have.length.at.least', 6);
 
         // 0005-ETXN-002
         verifyEthWalletAssociatedBalance('2.0');
@@ -117,14 +115,11 @@ context(
         verifyEthWalletTotalAssociatedBalance('6,002.00');
         cy.get('button').contains('Select a validator to nominate').click();
         stakingPageDisassociateTokens('2');
-        cy.getByTestId('currency-title', txTimeout).should(
-          'have.length.above',
-          6
-        );
+        cy.get(currencyTitle, txTimeout).should('have.length.above', 4);
         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.get(currencyTitle, txTimeout).should('have.length.at.least', 6);
         cy.get(
           '[data-testid="eth-wallet-associated-balances"]:visible',
           txTimeout
@@ -225,14 +220,11 @@ context(
           skipConfirmation: true,
         });
 
-        cy.getByTestId('currency-title', txTimeout).should(
-          'have.length.above',
-          6
-        );
+        cy.get(currencyTitle, txTimeout).should('have.length.above', 4);
         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.get(currencyTitle, txTimeout).should('have.length.at.least', 6);
         verifyEthWalletAssociatedBalance('2.0');
         verifyEthWalletTotalAssociatedBalance('2.0');
         cy.get(vegaWallet)
@@ -248,14 +240,11 @@ context(
           type: 'contract',
           skipConfirmation: true,
         });
-        cy.getByTestId('currency-title', txTimeout).should(
-          'have.length.above',
-          6
-        );
+        cy.get(currencyTitle, txTimeout).should('have.length.above', 4);
         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.get(currencyTitle, txTimeout).should('have.length.at.least', 6);
         verifyEthWalletAssociatedBalance('1.0');
         verifyEthWalletTotalAssociatedBalance('1.0');
       });
@@ -339,14 +328,11 @@ context(
       // 1004-ASSO-004
       it('Pending association outside of app is shown', function () {
         vegaWalletAssociate('2');
-        cy.getByTestId('currency-title', txTimeout).should(
-          'have.length.above',
-          6
-        );
+        cy.get(currencyTitle, txTimeout).should('have.length.above', 4);
         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.get(currencyTitle, txTimeout).should('have.length.at.least', 6);
         validateWalletCurrency('Associated', '2.00');
       });
 
@@ -355,14 +341,11 @@ context(
         cy.wrap(validateWalletCurrency('Associated', '2.00')).then(() => {
           vegaWalletDisassociate('2');
         });
-        cy.getByTestId('currency-title', txTimeout).should(
-          'have.length.above',
-          6
-        );
+        cy.get(currencyTitle, txTimeout).should('have.length.above', 4);
         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.get(currencyTitle, txTimeout).should('have.length.at.least', 6);
         validateWalletCurrency('Associated', '0.00');
       });
 

apps/governance-e2e/src/integration/flow/withdrawal-flow.cy.ts

@@ -15,13 +15,7 @@ const balanceAvailable = 'BALANCE_AVAILABLE_value';
 const withdrawalThreshold = 'WITHDRAWAL_THRESHOLD_value';
 const delayTime = 'DELAY_TIME_value';
 const submitWithdrawalButton = 'submit-withdrawal';
-const dialogTitle = 'dialog-title';
 const dialogClose = 'dialog-close';
-const txExplorerLink = 'tx-block-explorer';
-const withdrawalAssetSymbol = 'withdrawal-asset-symbol';
-const withdrawalAmount = 'withdrawal-amount';
-const withdrawalRecipient = 'withdrawal-recipient';
-const withdrawFundsButton = 'withdraw-funds';
 const completeWithdrawalButton = 'complete-withdrawal';
 const tableTxHash = '[col-id="txHash"]';
 const tableAssetSymbol = '[col-id="asset.symbol"]';
@@ -30,14 +24,16 @@ const tableReceiverAddress = '[col-id="details.receiverAddress"]';
 const tableWithdrawnTimeStamp = '[col-id="withdrawnTimestamp"]';
 const tableWithdrawnStatus = '[col-id="status"]';
 const tableCreatedTimeStamp = '[col-id="createdTimestamp"]';
-const toastContent = 'toast-content';
+const toast = 'toast';
 const toastPanel = 'toast-panel';
+const toastClose = 'toast-close';
+const withdrawalDialogContent = 'dialog-content';
+const toastCompleteWithdrawal = 'toast-complete-withdrawal';
 const usdtName = 'USDC (local)';
 const usdcEthAddress = '0x1b8a1B6CBE5c93609b46D1829Cc7f3Cb8eeE23a0';
 const usdcSymbol = 'tUSDC';
 const usdtSelectValue =
   '993ed98f4f770d91a796faab1738551193ba45c62341d20597df70fea6704ede';
-const truncatedWithdrawalEthAddress = '0xEe7D…22d94F';
 const formValidationError = 'input-error-text';
 const txTimeout = Cypress.env('txTimeout');
 
@@ -107,29 +103,35 @@ context(
         cy.getByTestId(amountInput).click().type('120');
         cy.getByTestId(submitWithdrawalButton).click();
       });
-
-      cy.contains('Awaiting network confirmation').should('be.visible');
       // assert withdrawal request
-      cy.getByTestId(dialogTitle, txTimeout).should(
-        'have.text',
-        'Transaction complete'
-      );
-      cy.getByTestId(txExplorerLink)
-        .should('have.attr', 'href')
-        .and('contain', '/txs/');
-      cy.getByTestId(withdrawalAssetSymbol).should('have.text', usdcSymbol);
-      cy.getByTestId(withdrawalAmount).should('have.text', '120.00');
-      cy.getByTestId(withdrawalRecipient)
-        .should('have.text', truncatedWithdrawalEthAddress)
-        .and('have.attr', 'href')
-        .and('contain', `/address/${Cypress.env('ethWalletPublicKey')}`);
-      cy.getByTestId(withdrawFundsButton).click();
+      cy.getByTestId(toast)
+        .first(txTimeout)
+        .should('contain.text', 'Funds unlocked')
+        .within(() => {
+          cy.getByTestId('external-link').should('exist');
+          cy.getByTestId(toastPanel).should(
+            'contain.text',
+            'Withdraw 120.00 tUSDC'
+          );
+          cy.getByTestId(toastCompleteWithdrawal).click();
+          cy.getByTestId(toastClose).click();
+        });
       // withdrawal complete
-      cy.getByTestId(dialogTitle, txTimeout).should(
-        'have.text',
-        'Withdraw asset complete'
-      );
-      cy.getByTestId(dialogClose).click();
+      cy.getByTestId(toast)
+        .first(txTimeout)
+        .should('contain.text', 'The withdrawal has been approved.')
+        .within(() => {
+          cy.getByTestId(toastPanel).should(
+            'contain.text',
+            'Withdraw 120.00 tUSDC'
+          );
+        });
+      cy.getByTestId(toast)
+        .last(txTimeout)
+        .should('contain.text', 'Transaction confirmed')
+        .within(() => {
+          cy.getByTestId('external-link').should('exist');
+        });
       // withdrawal history for complete withdrawal displayed
       cy.get(tableWithdrawnStatus)
         .eq(1, txTimeout)
@@ -168,13 +170,17 @@ context(
         cy.getByTestId(submitWithdrawalButton).click();
       });
 
-      cy.contains('Awaiting network confirmation').should('be.visible');
-      // assert withdrawal request
-      cy.getByTestId(dialogTitle, txTimeout).should(
-        'have.text',
-        'Transaction complete'
-      );
-      cy.getByTestId(dialogClose).click();
+      cy.getByTestId(toast)
+        .first(txTimeout)
+        .should('contain.text', 'Funds unlocked')
+        .within(() => {
+          cy.getByTestId('external-link').should('exist');
+          cy.getByTestId(toastPanel).should(
+            'contain.text',
+            'Withdraw 110.00 tUSDC'
+          );
+          cy.getByTestId(toastClose).click();
+        });
       cy.get(tableTxHash)
         .eq(1)
         .should('have.text', 'Complete withdrawal')
@@ -189,28 +195,75 @@ context(
           cy.get(tableCreatedTimeStamp).should('not.be.empty');
         });
       ethereumWalletConnect();
-      cy.getByTestId(completeWithdrawalButton).click();
-      cy.getByTestId(toastContent)
-        .last()
+      cy.getByTestId(completeWithdrawalButton).first().click();
+      cy.getByTestId(toast)
+        .last(txTimeout)
         .should('contain.text', 'Awaiting confirmation')
         .within(() => {
           cy.getByTestId('external-link').should('exist');
         });
-      cy.getByTestId(toastContent)
-        .first()
+      cy.getByTestId(toast)
+        .first(txTimeout)
         .should('contain.text', 'The withdrawal has been approved.')
         .within(() => {
           cy.getByTestId(toastPanel).should('contain.text', '110.00', 'tUSDC');
         });
-      cy.getByTestId(toastContent)
-        .last()
+      cy.getByTestId(toast)
+        .last(txTimeout)
         .should('contain.text', 'Transaction confirmed')
         .within(() => {
           cy.getByTestId('external-link').should('exist');
         });
     });
 
-    it('Unable to withdraw asset on pub key view', function () {
+    it('Should be able to see withdrawal details from toast', function () {
+      cy.getByTestId(withdraw).click();
+      cy.getByTestId(withdrawalForm, txTimeout).within(() => {
+        cy.get('select').select(usdtSelectValue, { force: true });
+        cy.getByTestId(balanceAvailable, txTimeout).should('exist');
+        cy.getByTestId(withdrawalThreshold).should(
+          'have.text',
+          '100,000.00000T'
+        );
+        cy.getByTestId(amountInput).click().type('50');
+        cy.getByTestId(submitWithdrawalButton).click();
+      });
+      cy.getByTestId(toast)
+        .first(txTimeout)
+        .should('contain.text', 'Funds unlocked')
+        .within(() => {
+          cy.getByTestId('external-link').should('exist');
+          cy.getByTestId(toastPanel).should(
+            'contain.text',
+            'Withdraw 50.00 tUSDC'
+          );
+          cy.contains('save your withdrawal details').click();
+        });
+      cy.getByTestId(withdrawalDialogContent)
+        .last()
+        .within(() => {
+          cy.getByTestId('assetSource_value').should(
+            'have.text',
+            '0x1b8a1B6CBE5c93609b46D1829Cc7f3Cb8eeE23a0'
+          );
+          cy.getByTestId('amount_value').should('have.text', '5000000');
+          cy.getByTestId('nonce_value').invoke('text').should('not.be.empty');
+          cy.getByTestId('signatures_value')
+            .invoke('text')
+            .should('not.be.empty');
+          cy.getByTestId('targetAddress_value').should(
+            'have.text',
+            Cypress.env('ethWalletPublicKey')
+          );
+          cy.getByTestId('creation_value')
+            .invoke('text')
+            .should('not.be.empty');
+        });
+      cy.getByTestId(dialogClose).click();
+    });
+
+    // Skipping test due to bug #3882
+    it.skip('Unable to withdraw asset on pub key view', function () {
       const vegaWalletPubKey = Cypress.env('vegaWalletPublicKey');
       const expectedErrorTxt = `You are connected in a view only state for public key: ${vegaWalletPubKey}. In order to send transactions you must connect to a real wallet.`;
 
@@ -224,10 +277,11 @@ context(
         cy.get('select').select(usdtSelectValue, { force: true });
         cy.getByTestId(balanceAvailable, txTimeout).should('exist');
         cy.getByTestId(amountInput).click().type('100');
+        cy.pause();
         cy.getByTestId(submitWithdrawalButton).click();
       });
 
-      cy.getByTestId('dialog-content')
+      cy.getByTestId(withdrawalDialogContent)
         .last()
         .within(() => {
           cy.get('h1').should('have.text', 'Transaction failed');

apps/governance-e2e/src/integration/view/proposal.cy.ts

@@ -128,6 +128,7 @@ context(
         .first()
         .find('[data-testid="view-proposal-btn"]')
         .click();
+      cy.url().should('contain', '/protocol-upgrades/v1');
       cy.getByTestId('protocol-upgrade-proposal').within(() => {
         cy.get('h1').should('have.text', 'Vega Release v1');
         cy.getByTestId('protocol-upgrade-block-height').should(

apps/governance-e2e/src/support/staking.functions.ts

@@ -221,7 +221,7 @@ export function ensureSpecifiedUnstakedTokensAreAssociated(
 }
 
 export function closeStakingDialog() {
-  cy.getByTestId('dialog-title').should(
+  cy.getByTestId('dialog-title', txTimeout).should(
     'contain.text',
     'At the beginning of the next epoch'
   );

apps/governance-e2e/src/support/wallet-eth.functions.ts

@@ -5,7 +5,7 @@ const capsuleWalletConnectButton = '[data-testid="web3-connector-Unknown"]';
 
 export function ethereumWalletConnect() {
   cy.highlight('Connecting Eth Wallet');
-  cy.get(connectToEthButton).within(() => {
+  cy.get(connectToEthButton, { timeout: 60000 }).within(() => {
     cy.contains('Connect Ethereum wallet to associate $VEGA')
       .should('be.visible')
       .click();

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards-table.spec.tsx

@@ -8,6 +8,7 @@ const mockData = {
     {
       asset: 'tDAI',
       totalAmount: '5',
+      decimals: 6,
       rewardTypes: {
         ACCOUNT_TYPE_GLOBAL_REWARD: {
           amount: '0',

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards-table.tsx

@@ -1,6 +1,5 @@
 import { formatNumber, toBigNum } from '@vegaprotocol/utils';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
 import {
   rowGridItemStyles,
   RewardsTable,
@@ -13,7 +12,8 @@ interface EpochIndividualRewardsGridProps {
 }
 
 interface RewardItemProps {
-  value: string;
+  amount: string;
+  decimals: number;
   percentageOfTotal?: string;
   dataTestId: string;
   last?: boolean;
@@ -21,15 +21,14 @@ interface RewardItemProps {
 
 const DisplayReward = ({
   reward,
+  decimals,
   percentageOfTotal,
 }: {
   reward: string;
+  decimals: number;
   percentageOfTotal?: string;
 }) => {
   const { t } = useTranslation();
-  const {
-    appState: { decimals },
-  } = useAppState();
 
   if (Number(reward) === 0) {
     return <span className="text-vega-dark-300">-</span>;
@@ -64,7 +63,8 @@ const DisplayReward = ({
 };
 
 const RewardItem = ({
-  value,
+  amount,
+  decimals,
   percentageOfTotal,
   dataTestId,
   last,
@@ -72,7 +72,11 @@ const RewardItem = ({
   <div data-testid={dataTestId} className={rowGridItemStyles(last)}>
     <div className="h-full w-5 absolute right-0 top-0 bg-gradient-to-r from-transparent to-black pointer-events-none" />
     <div className="overflow-auto p-5">
-      <DisplayReward reward={value} percentageOfTotal={percentageOfTotal} />
+      <DisplayReward
+        reward={amount}
+        decimals={decimals}
+        percentageOfTotal={percentageOfTotal}
+      />
     </div>
     <div className="h-full w-5 absolute left-0 top-0 bg-gradient-to-l from-transparent to-black pointer-events-none" />
   </div>
@@ -86,7 +90,7 @@ export const EpochIndividualRewardsTable = ({
       dataTestId="epoch-individual-rewards-table"
       epoch={Number(data.epoch)}
     >
-      {data.rewards.map(({ asset, rewardTypes, totalAmount }, i) => (
+      {data.rewards.map(({ asset, rewardTypes, totalAmount, decimals }, i) => (
         <div className="contents" key={i}>
           <div
             data-testid="individual-rewards-asset"
@@ -98,13 +102,19 @@ export const EpochIndividualRewardsTable = ({
             ([key, { amount, percentageOfTotal }]) => (
               <RewardItem
                 key={key}
-                value={amount}
+                amount={amount}
+                decimals={decimals}
                 percentageOfTotal={percentageOfTotal}
                 dataTestId={key}
               />
             )
           )}
-          <RewardItem dataTestId="total" value={totalAmount} last={true} />
+          <RewardItem
+            dataTestId="total"
+            amount={totalAmount}
+            decimals={decimals}
+            last={true}
+          />
         </div>
       ))}
     </RewardsTable>

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.spec.ts

@@ -8,7 +8,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '100',
     percentageOfTotal: '0.1',
     receivedAt: new Date(),
-    asset: { id: 'usd', symbol: 'USD', name: 'USD' },
+    asset: { id: 'usd', symbol: 'USD', name: 'USD', decimals: 6 },
     party: { id: 'blah' },
     epoch: { id: '1' },
   };
@@ -18,7 +18,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '50',
     percentageOfTotal: '0.05',
     receivedAt: new Date(),
-    asset: { id: 'eur', symbol: 'EUR', name: 'EUR' },
+    asset: { id: 'eur', symbol: 'EUR', name: 'EUR', decimals: 5 },
     party: { id: 'blah' },
     epoch: { id: '2' },
   };
@@ -28,7 +28,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '200',
     percentageOfTotal: '0.2',
     receivedAt: new Date(),
-    asset: { id: 'gbp', symbol: 'GBP', name: 'GBP' },
+    asset: { id: 'gbp', symbol: 'GBP', name: 'GBP', decimals: 7 },
     party: { id: 'blah' },
     epoch: { id: '2' },
   };
@@ -38,7 +38,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '100',
     percentageOfTotal: '0.1',
     receivedAt: new Date(),
-    asset: { id: 'usd', symbol: 'USD', name: 'USD' },
+    asset: { id: 'usd', symbol: 'USD', name: 'USD', decimals: 6 },
     party: { id: 'blah' },
     epoch: { id: '1' },
   };
@@ -48,7 +48,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '150',
     percentageOfTotal: '0.15',
     receivedAt: new Date(),
-    asset: { id: 'usd', symbol: 'USD', name: 'USD' },
+    asset: { id: 'usd', symbol: 'USD', name: 'USD', decimals: 6 },
     party: { id: 'blah' },
     epoch: { id: '3' },
   };
@@ -58,7 +58,7 @@ describe('generateEpochIndividualRewardsList', () => {
     amount: '50',
     percentageOfTotal: '0.05',
     receivedAt: new Date(),
-    asset: { id: 'eur', symbol: 'EUR', name: 'EUR' },
+    asset: { id: 'eur', symbol: 'EUR', name: 'EUR', decimals: 5 },
     party: { id: 'blah' },
     epoch: { id: '2' },
   };
@@ -99,6 +99,7 @@ describe('generateEpochIndividualRewardsList', () => {
       rewards: [
         {
           asset: 'USD',
+          decimals: 6,
           totalAmount: '100',
           rewardTypes: {
             [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
@@ -167,6 +168,7 @@ describe('generateEpochIndividualRewardsList', () => {
           {
             asset: 'GBP',
             totalAmount: '200',
+            decimals: 7,
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',
@@ -197,6 +199,7 @@ describe('generateEpochIndividualRewardsList', () => {
           {
             asset: 'EUR',
             totalAmount: '50',
+            decimals: 5,
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',
@@ -232,6 +235,7 @@ describe('generateEpochIndividualRewardsList', () => {
           {
             asset: 'USD',
             totalAmount: '200',
+            decimals: 6,
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',
@@ -279,6 +283,7 @@ describe('generateEpochIndividualRewardsList', () => {
         rewards: [
           {
             asset: 'USD',
+            decimals: 6,
             totalAmount: '150',
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
@@ -315,6 +320,7 @@ describe('generateEpochIndividualRewardsList', () => {
           {
             asset: 'GBP',
             totalAmount: '200',
+            decimals: 7,
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',
@@ -345,6 +351,7 @@ describe('generateEpochIndividualRewardsList', () => {
           {
             asset: 'EUR',
             totalAmount: '50',
+            decimals: 5,
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',
@@ -390,6 +397,7 @@ describe('generateEpochIndividualRewardsList', () => {
           {
             asset: 'USD',
             totalAmount: '200',
+            decimals: 6,
             rewardTypes: {
               [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
                 amount: '0',

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.ts

@@ -9,6 +9,7 @@ export interface EpochIndividualReward {
   rewards: {
     asset: string;
     totalAmount: string;
+    decimals: number;
     rewardTypes: {
       [key in AccountType]?: {
         amount: string;
@@ -53,6 +54,7 @@ export const generateEpochIndividualRewardsList = ({
   const epochIndividualRewards = rewards.reduce((acc, reward) => {
     const epochId = reward.epoch.id;
     const assetName = reward.asset.name;
+    const assetDecimals = reward.asset.decimals;
     const rewardType = reward.rewardType;
     const amount = reward.amount;
     const percentageOfTotal = reward.percentageOfTotal;
@@ -73,6 +75,7 @@ export const generateEpochIndividualRewardsList = ({
     if (!asset) {
       asset = {
         asset: assetName,
+        decimals: assetDecimals,
         totalAmount: '0',
         rewardTypes: Object.fromEntries(emptyRowAccountTypes),
       };

apps/governance/src/routes/rewards/epoch-total-rewards/epoch-total-rewards-table.spec.tsx

@@ -52,6 +52,7 @@ const assetRewards: Map<
 assetRewards.set(assetId, {
   assetId,
   name: 'tDAI TEST',
+  decimals: 6,
   rewards,
   totalAmount: '295',
 });

apps/governance/src/routes/rewards/epoch-total-rewards/epoch-total-rewards-table.tsx

@@ -1,6 +1,5 @@
 import { formatNumber, toBigNum } from '@vegaprotocol/utils';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import { useAppState } from '../../../contexts/app-state/app-state-context';
 import {
   rowGridItemStyles,
   RewardsTable,
@@ -12,16 +11,19 @@ interface EpochTotalRewardsGridProps {
 }
 
 interface RewardItemProps {
-  value: string;
+  amount: string;
+  decimals: number;
   dataTestId: string;
   last?: boolean;
 }
 
-const DisplayReward = ({ reward }: { reward: string }) => {
-  const {
-    appState: { decimals },
-  } = useAppState();
-
+const DisplayReward = ({
+  reward,
+  decimals,
+}: {
+  reward: string;
+  decimals: number;
+}) => {
   if (Number(reward) === 0) {
     return <span className="text-vega-dark-300">-</span>;
   }
@@ -33,11 +35,16 @@ const DisplayReward = ({ reward }: { reward: string }) => {
   );
 };
 
-const RewardItem = ({ value, dataTestId, last }: RewardItemProps) => (
+const RewardItem = ({
+  amount,
+  decimals,
+  dataTestId,
+  last,
+}: RewardItemProps) => (
   <div data-testid={dataTestId} className={rowGridItemStyles(last)}>
     <div className="h-full w-5 absolute right-0 top-0 bg-gradient-to-r from-transparent to-black pointer-events-none" />
     <div className="overflow-auto p-5">
-      <DisplayReward reward={value} />
+      <DisplayReward reward={amount} decimals={decimals} />
     </div>
     <div className="h-full w-5 absolute left-0 top-0 bg-gradient-to-l from-transparent to-black pointer-events-none" />
   </div>
@@ -49,15 +56,25 @@ export const EpochTotalRewardsTable = ({
   return (
     <RewardsTable dataTestId="epoch-total-rewards-table" epoch={data.epoch}>
       {Array.from(data.assetRewards.values()).map(
-        ({ name, rewards, totalAmount }, i) => (
+        ({ name, rewards, totalAmount, decimals }, 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
+                key={i}
+                dataTestId={rewardType}
+                amount={amount}
+                decimals={decimals}
+              />
             ))}
-            <RewardItem dataTestId="total" value={totalAmount} last={true} />
+            <RewardItem
+              dataTestId="total"
+              amount={totalAmount}
+              decimals={decimals}
+              last={true}
+            />
           </div>
         )
       )}

apps/governance/src/routes/rewards/epoch-total-rewards/generate-epoch-total-rewards-list.spec.ts

@@ -56,12 +56,14 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               id: '1',
               name: 'Asset 1',
+              decimals: 18,
             },
           },
           {
             node: {
               id: '2',
               name: 'Asset 2',
+              decimals: 6,
             },
           },
         ],
@@ -101,6 +103,7 @@ describe('generateEpochAssetRewardsList', () => {
           {
             node: {
               epoch: 1,
+              decimals: 18,
               assetId: '1',
               rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
               amount: '123',
@@ -128,6 +131,7 @@ describe('generateEpochAssetRewardsList', () => {
                 '1',
                 {
                   assetId: '1',
+                  decimals: 0,
                   name: '',
                   rewards: new Map([
                     [
@@ -196,12 +200,14 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               id: '1',
               name: 'Asset 1',
+              decimals: 18,
             },
           },
           {
             node: {
               id: '2',
               name: 'Asset 2',
+              decimals: 6,
             },
           },
         ],
@@ -212,6 +218,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 1,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
               amount: '123',
             },
@@ -220,6 +227,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 1,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
               amount: '100',
             },
@@ -228,6 +236,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 2,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
               amount: '5',
             },
@@ -254,6 +263,7 @@ describe('generateEpochAssetRewardsList', () => {
                 '1',
                 {
                   assetId: '1',
+                  decimals: 18,
                   name: 'Asset 1',
                   rewards: new Map([
                     [
@@ -319,6 +329,7 @@ describe('generateEpochAssetRewardsList', () => {
                 '1',
                 {
                   assetId: '1',
+                  decimals: 18,
                   name: 'Asset 1',
                   rewards: new Map([
                     [
@@ -387,12 +398,14 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               id: '1',
               name: 'Asset 1',
+              decimals: 18,
             },
           },
           {
             node: {
               id: '2',
               name: 'Asset 2',
+              decimals: 6,
             },
           },
         ],
@@ -403,6 +416,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 1,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES,
               amount: '123',
             },
@@ -411,6 +425,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 1,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
               amount: '100',
             },
@@ -419,6 +434,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 2,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
               amount: '6',
             },
@@ -427,6 +443,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 2,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
               amount: '27',
             },
@@ -435,6 +452,7 @@ describe('generateEpochAssetRewardsList', () => {
             node: {
               epoch: 3,
               assetId: '1',
+              decimals: 18,
               rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
               amount: '15',
             },
@@ -467,6 +485,7 @@ describe('generateEpochAssetRewardsList', () => {
                 {
                   assetId: '1',
                   name: 'Asset 1',
+                  decimals: 18,
                   rewards: new Map([
                     [
                       AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
@@ -531,6 +550,7 @@ describe('generateEpochAssetRewardsList', () => {
                 '1',
                 {
                   assetId: '1',
+                  decimals: 18,
                   name: 'Asset 1',
                   rewards: new Map([
                     [
@@ -608,6 +628,7 @@ describe('generateEpochAssetRewardsList', () => {
                 '1',
                 {
                   assetId: '1',
+                  decimals: 18,
                   name: 'Asset 1',
                   rewards: new Map([
                     [

apps/governance/src/routes/rewards/epoch-total-rewards/generate-epoch-total-rewards-list.ts

@@ -22,6 +22,7 @@ export type AggregatedEpochRewardSummary = {
   name: EpochSummaryWithNamedReward['name'];
   rewards: Map<RewardType, RewardItem>;
   totalAmount: string;
+  decimals: number;
 };
 
 export type EpochTotalSummary = {
@@ -91,6 +92,7 @@ export const generateEpochTotalRewardsList = ({
         assetId: reward.assetId,
         name: matchingAsset?.name || '',
         rewards: rewards || new Map(emptyRowAccountTypes),
+        decimals: matchingAsset?.decimals || 0,
         totalAmount: (
           Number(reward.amount) + Number(assetWithRewards?.totalAmount || 0)
         ).toString(),

apps/governance/src/routes/rewards/home/Rewards.graphql

@@ -4,6 +4,7 @@ fragment RewardFields on Reward {
     id
     symbol
     name
+    decimals
   }
   party {
     id
@@ -67,6 +68,7 @@ query EpochAssetsRewards(
       node {
         id
         name
+        decimals
       }
     }
   }

apps/governance/src/routes/rewards/home/__generated__/Rewards.ts

@@ -3,7 +3,7 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type RewardFieldsFragment = { __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 } };
+export type RewardFieldsFragment = { __typename?: 'Reward', rewardType: Types.AccountType, amount: string, percentageOfTotal: string, receivedAt: any, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number }, party: { __typename?: 'Party', id: string }, epoch: { __typename?: 'Epoch', id: string } };
 
 export type DelegationFieldsFragment = { __typename?: 'Delegation', amount: string, epoch: number };
 
@@ -16,7 +16,7 @@ export type RewardsQueryVariables = Types.Exact<{
 }>;
 
 
-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, decimals: number }, 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 EpochRewardSummaryFieldsFragment = { __typename?: 'EpochRewardSummary', epoch: number, assetId: string, amount: string, rewardType: Types.AccountType };
 
@@ -26,7 +26,7 @@ export type EpochAssetsRewardsQueryVariables = Types.Exact<{
 }>;
 
 
-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, decimals: number } } | 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 EpochFieldsFragment = { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, expiry?: any | null } };
 
@@ -42,6 +42,7 @@ export const RewardFieldsFragmentDoc = gql`
     id
     symbol
     name
+    decimals
   }
   party {
     id
@@ -143,6 +144,7 @@ export const EpochAssetsRewardsDocument = gql`
       node {
         id
         name
+        decimals
       }
     }
   }

apps/liquidity-provision-dashboard/.env.mainnet

@@ -6,4 +6,4 @@ NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\"}
 NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://etherscan.io
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
-NX_VEGA_CONSOLE_URL=https://vega.trading
+NX_VEGA_CONSOLE_URL=https://console.vega.xyz

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -55,7 +55,10 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     validateMarketDataRow(3, 'Quote Unit', 'BTC');
   });
 
-  it('market volume displayed', () => {
+  // TODO: fix this test
+  // New volume check logic, added by https://github.com/vegaprotocol/frontend-monorepo/pull/3870 has caused the
+  // 24hr volume assertion to fail as it now reads 'Unknown'
+  it.skip('market volume displayed', () => {
     cy.getByTestId(marketTitle).contains('Market volume').click();
     validateMarketDataRow(0, '24 Hour Volume', '1');
     validateMarketDataRow(1, 'Open Interest', '-');

apps/trading-e2e/src/integration/trading-positions.cy.ts

@@ -1,6 +1,7 @@
 import { checkSorting } from '@vegaprotocol/cypress';
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { marketsDataQuery } from '@vegaprotocol/mock';
+import { positionsQuery } from '@vegaprotocol/mock';
 
 beforeEach(() => {
   cy.mockTradingPage();
@@ -16,9 +17,27 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
   });
 
   it('renders positions on portfolio page', () => {
+    cy.mockGQL((req) => {
+      const positions = positionsQuery();
+      if (positions.positions?.edges) {
+        positions.positions.edges.push(
+          ...positions.positions.edges.map((edge) => ({
+            ...edge,
+            node: {
+              ...edge.node,
+              party: {
+                ...edge.node.party,
+                id: 'vega-1',
+              },
+            },
+          }))
+        );
+      }
+      aliasGQLQuery(req, 'Positions', positions);
+    });
     cy.visit('/#/portfolio');
     cy.getByTestId('Positions').click();
-    validatePositionsDisplayed();
+    validatePositionsDisplayed(true);
   });
   describe('renders position among some graphql errors', () => {
     it('rows should be displayed despite errors', () => {
@@ -56,7 +75,9 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
       cy.getByTestId('tab-positions')
         .first()
         .within(() => {
-          cy.get('[row-id="market-2"]')
+          cy.get(
+            '[row-id="02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65-market-2"]'
+          )
             .eq(1)
             .within(() => {
               emptyCells.forEach((cell) => {
@@ -103,9 +124,11 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
       const marketsSortedDefault = [
         'ACTIVE MARKET',
         'Apple Monthly (30 Jun 2022)',
+        'SUSPENDED MARKET',
       ];
       const marketsSortedAsc = ['ACTIVE MARKET', 'Apple Monthly (30 Jun 2022)'];
       const marketsSortedDesc = [
+        'SUSPENDED MARKET',
         'Apple Monthly (30 Jun 2022)',
         'ACTIVE MARKET',
       ];
@@ -119,9 +142,13 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
     });
     it('sorting by notional', () => {
       cy.visit('/#/markets/market-0');
-      const marketsSortedDefault = ['276,761.40348', '46,126.90058'];
-      const marketsSortedAsc = ['46,126.90058', '276,761.40348'];
-      const marketsSortedDesc = ['276,761.40348', '46,126.90058'];
+      const marketsSortedDefault = [
+        '276,761.40348',
+        '46,126.90058',
+        '1,688.20',
+      ];
+      const marketsSortedAsc = ['1,688.20', '46,126.90058', '276,761.40348'];
+      const marketsSortedDesc = ['276,761.40348', '46,126.90058', '1,688.20'];
       cy.getByTestId('Positions').click();
       checkSorting(
         'notional',
@@ -132,9 +159,9 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
     });
     it('sorting by unrealisedPNL', () => {
       cy.visit('/#/markets/market-0');
-      const marketsSortedDefault = ['8.95', '-0.22519'];
-      const marketsSortedAsc = ['-0.22519', '8.95'];
-      const marketsSortedDesc = ['8.95', '-0.22519'];
+      const marketsSortedDefault = ['8.95', '-0.22519', '8.95'];
+      const marketsSortedAsc = ['-0.22519', '8.95', '8.95'];
+      const marketsSortedDesc = ['8.95', '8.95', '-0.22519'];
       cy.getByTestId('Positions').click();
       checkSorting(
         'unrealisedPNL',
@@ -145,7 +172,7 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
     });
   });
 
-  function validatePositionsDisplayed() {
+  function validatePositionsDisplayed(multiKey = false) {
     cy.getByTestId('tab-positions').should('be.visible');
     cy.getByTestId('tab-positions').within(() => {
       cy.get('[col-id="marketName"]')
@@ -165,10 +192,11 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
         cy.wrap($prices).invoke('text').should('not.be.empty');
       });
 
-      cy.get('[col-id="currentLeverage"]').should('contain.text', '2.846.1');
-
-      cy.get('[col-id="marginAccountBalance"]') // margin allocated
-        .should('contain.text', '0.01');
+      if (!multiKey) {
+        cy.get('[col-id="currentLeverage"]').should('contain.text', '2.846.1');
+        cy.get('[col-id="marginAccountBalance"]') // margin allocated
+          .should('contain.text', '0.01');
+      }
 
       cy.get('[col-id="unrealisedPNL"]').each(($unrealisedPnl) => {
         cy.wrap($unrealisedPnl).invoke('text').should('not.be.empty');
@@ -184,6 +212,6 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
       cy.get('.ag-popup').should('contain.text', 'Mark price x open volume');
     });
 
-    cy.getByTestId('close-position').should('be.visible').and('have.length', 2);
+    cy.getByTestId('close-position').should('be.visible').and('have.length', 3);
   }
 });

apps/trading/.env

@@ -6,7 +6,7 @@ NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/m
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_ENV=STAGNET1
 NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://vega.trading\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet

apps/trading/.env.capsule

@@ -5,7 +5,7 @@ NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=''
 NX_VEGA_ENV=CUSTOM
 NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://vega.trading\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_URL=http://localhost:3008/graphql
 NX_VEGA_WALLET_URL=http://localhost:1789

apps/trading/.env.devnet

@@ -6,7 +6,7 @@ NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.se
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
 NX_VEGA_ENV=DEVNET
 NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://vega.trading\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet

apps/trading/.env.mainnet

@@ -5,13 +5,13 @@ NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.se
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/mainnet1/mainnet1.toml
 NX_VEGA_ENV=MAINNET
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://vega.trading\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
-NX_VEGA_CONSOLE_URL=https://vega.trading
+NX_VEGA_CONSOLE_URL=https://console.vega.xyz
 # TAG name of the current app version - TODO: bump to the latest upon release
-NX_APP_VERSION=v0.20.12-core-0.71.4
+NX_APP_VERSION=v0.20.14-core-0.71.4

apps/trading/.env.stagnet1

@@ -6,7 +6,7 @@ NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.se
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_ENV=STAGNET1
 NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://vega.trading\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.stagnet1.vega.rocks
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet

apps/trading/.env.testnet

@@ -6,7 +6,7 @@ NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.se
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
 NX_VEGA_ENV=TESTNET
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://vega.trading\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.fairground.wtf
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet

apps/trading/.env.validators-testnet

@@ -6,7 +6,7 @@ NX_TRADING_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.se
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/master/testnet2/testnet2.toml
 NX_VEGA_ENV=VALIDATOR_TESTNET
 NX_VEGA_EXPLORER_URL=https://explorer.validators-testnet.vega.rocks
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://vega.trading\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\",\"TESTNET\":\"https://console.fairground.wtf\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\",\"TESTNET\":\"https://console.fairground.wtf\"}
 NX_VEGA_TOKEN_URL=https://governance.validators-testnet.vega.rocks
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet

apps/trading/client-pages/market/header-stats.tsx

@@ -56,13 +56,7 @@ export const HeaderStats = ({ market }: HeaderStatsProps) => {
               decimalPlaces={market?.decimalPlaces}
             />
           </HeaderStat>
-          <HeaderStat
-            heading={t('Volume (24h)')}
-            testId="market-volume"
-            description={t(
-              'The total number of contracts traded in the last 24 hours.'
-            )}
-          >
+          <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
             <Last24hVolume
               marketId={market?.id}
               positionDecimalPlaces={market?.positionDecimalPlaces}

apps/trading/client-pages/markets/closed.spec.tsx

@@ -175,6 +175,10 @@ describe('Closed', () => {
         __typename: 'Market',
         id: marketId,
       },
+      party: {
+        __typename: 'Party',
+        id: pubKey,
+      },
     };
   };
   const position = createPosition();
@@ -182,18 +186,14 @@ describe('Closed', () => {
     request: {
       query: PositionsDocument,
       variables: {
-        partyId: pubKey,
+        partyIds: [pubKey],
       },
     },
     result: {
       data: {
-        party: {
-          __typename: 'Party',
-          id: pubKey,
-          positionsConnection: {
-            __typename: 'PositionConnection',
-            edges: [{ __typename: 'PositionEdge', node: position }],
-          },
+        positions: {
+          __typename: 'PositionConnection',
+          edges: [{ __typename: 'PositionEdge', node: position }],
         },
       },
     },

apps/trading/client-pages/markets/closed.tsx

@@ -64,7 +64,7 @@ export const Closed = () => {
   });
   const { data: positionData } = usePositionsQuery({
     variables: {
-      partyId: pubKey || '',
+      partyIds: pubKey ? [pubKey] : [],
     },
     skip: !pubKey,
   });
@@ -72,11 +72,9 @@ export const Closed = () => {
   // find a position for each market and add the realised pnl to
   // a normalized object
   const rowData = compact(marketData).map((market) => {
-    const position = positionData?.party?.positionsConnection?.edges?.find(
-      (edge) => {
-        return edge.node.market.id === market.id;
-      }
-    );
+    const position = positionData?.positions?.edges?.find((edge) => {
+      return edge.node.market.id === market.id;
+    });
 
     const instrument = market.tradableInstrument.instrument;
 

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -54,6 +54,7 @@ export const Portfolio = () => {
                     onMarketClick={onMarketClick}
                     noBottomPlaceholder
                     storeKey="portfolioPositions"
+                    allKeys
                   />
                 </VegaWalletContainer>
               </Tab>

apps/trading/components/app-loader/app-loader.tsx

@@ -89,6 +89,9 @@ const cacheConfig: InMemoryCacheConfig = {
     Party: {
       keyFields: false,
     },
+    Position: {
+      keyFields: ['market', ['id'], 'party', ['id']],
+    },
     Fees: {
       keyFields: false,
     },

apps/trading/components/banner/upgrade-banner.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from 'react';
+import { gt, prerelease } from 'semver';
 import {
   ReleasesFeed,
   useEnvironment,
@@ -15,7 +16,10 @@ import {
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 
-const CANONICAL_URL = 'https://vega.trading';
+// v0.20.12-core-0.71.4 -> v0.20.12
+// we need to strip the "core" suffix in order to determine whether a release
+// is a pre-release (candidate); example: v.0.21.0-beta.1-core-0.71.4
+const parseTagName = (tagName: string) => tagName.replace(/-core-[\d.]+$/i, '');
 
 type UpgradeBannerProps = {
   showVersionChange: boolean;
@@ -23,34 +27,24 @@ type UpgradeBannerProps = {
 export const UpgradeBanner = ({ showVersionChange }: UpgradeBannerProps) => {
   const [visible, setVisible] = useState(true);
   const { data } = useReleases(ReleasesFeed.FrontEnd);
-  const { APP_VERSION, VEGA_ENV } = useEnvironment();
-  /**
-   * Filtering out the release candidates.
-   */
-  const latest = useMemo(() => {
+  const { APP_VERSION, VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
+
+  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
+
+  const newest = useMemo(() => {
+    if (!APP_VERSION || !data) return undefined;
+    const newer = data.filter((r) => gt(r.tagName, APP_VERSION));
     const valid =
+      // filter pre-releases on mainnet
       VEGA_ENV === Networks.MAINNET
-        ? data?.filter((r) => !/-rc$/i.test(r.tagName))
-        : data;
+        ? newer?.filter((r) => !prerelease(parseTagName(r.tagName)))
+        : newer;
+    return valid.sort((a, b) => (gt(a.tagName, b.tagName) ? -1 : 1))[0];
+  }, [APP_VERSION, VEGA_ENV, data]);
 
-    return valid && valid.length > 0 ? valid[0] : undefined;
-  }, [VEGA_ENV, data]);
-
-  if (!APP_VERSION) return null;
-
-  if (!visible || !latest || latest.tagName === APP_VERSION) return null;
-
-  const versionChange = (
-    <span>
-      <span className="line-through text-vega-light-300 dark:text-vega-dark-300">
-        {APP_VERSION}
-      </span>{' '}
-      <VegaIcon size={14} name={VegaIconNames.ARROW_RIGHT} />{' '}
-      <span className="text-vega-orange-500 dark:text-vega-yellow-500">
-        <ExternalLink href={latest.htmlUrl}>{latest.tagName}</ExternalLink>
-      </span>
-    </span>
-  );
+  if (!visible || !newest) {
+    return null;
+  }
 
   return (
     <NotificationBanner
@@ -59,13 +53,24 @@ export const UpgradeBanner = ({ showVersionChange }: UpgradeBannerProps) => {
         setVisible(false);
       }}
     >
-      <div className="uppercase ">
-        {t('Upgrade to the latest version of Console')}{' '}
-        {showVersionChange && versionChange}
+      <div className="uppercase mb-1">
+        <ExternalLink href={CANONICAL_URL}>
+          {t('Upgrade to the latest version of Console')}
+        </ExternalLink>
       </div>
       <div data-testid="bookmark-message">
-        {t('Bookmark')}{' '}
-        <ExternalLink href={CANONICAL_URL}>{t('vega.trading')}</ExternalLink>
+        <a
+          className="underline"
+          href={newest.htmlUrl}
+          rel="noreferrer nofollow noopener"
+          target="_blank"
+        >
+          {t("View what's changed")}
+        </a>{' '}
+        {t(' or bookmark')}{' '}
+        <a className="underline" href={CANONICAL_URL}>
+          {t('console.vega.xyz')}
+        </a>{' '}
         <CopyWithTooltip text={CANONICAL_URL}>
           <button title={t('Copy %s', CANONICAL_URL)}>
             <span className="sr-only">{t('Copy %s', CANONICAL_URL)}</span>

apps/trading/components/footer/footer.spec.tsx

@@ -36,11 +36,12 @@ describe('NodeHealth', () => {
 describe('NodeUrl', () => {
   it('renders correct part of node url', () => {
     const node = 'https://api.n99.somenetwork.vega.xyz';
-    const expectedText = node.split('.').slice(1).join('.');
 
     render(<NodeUrl url={node} />);
 
-    expect(screen.getByText(expectedText)).toBeInTheDocument();
+    expect(
+      screen.getByText('api.n99.somenetwork.vega.xyz')
+    ).toBeInTheDocument();
   });
 });
 

apps/trading/components/footer/footer.tsx

@@ -65,9 +65,8 @@ interface NodeUrlProps {
 }
 
 export const NodeUrl = ({ url }: NodeUrlProps) => {
-  // get base url from api url, api sub domain
   const urlObj = new URL(url);
-  const nodeUrl = urlObj.origin.replace(/^[^.]+\./g, '');
+  const nodeUrl = urlObj.hostname;
   return <span title={t('Connected node')}>{nodeUrl}</span>;
 };
 

apps/trading/components/market-mark-price/market-mark-price.tsx

@@ -26,7 +26,7 @@ export const MarketMarkPrice = ({
     {
       dataProvider: marketDataProvider,
       variables: { marketId: marketId || '' },
-      skip: !inView,
+      skip: !inView || !marketId,
     },
     THROTTLE_UPDATE_TIME
   );

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -53,7 +53,6 @@ const MobileWalletButton = ({
       setDrawerOpen(!drawerOpen);
     }
   }, [drawerOpen, fetchPubKeys, isConnected, openVegaWalletDialog]);
-  console.log(drawerOpen, isYellow);
 
   const iconClass = drawerOpen
     ? 'hidden'

libs/accounts/src/lib/accounts-manager.tsx

@@ -1,10 +1,9 @@
-import { useRef, useMemo, memo, useCallback } from 'react';
+import { useRef, useMemo, memo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
-import type { AccountFields } from './accounts-data-provider';
 import { aggregatedAccountsDataProvider } from './accounts-data-provider';
 import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
@@ -36,16 +35,8 @@ export const AccountManager = ({
     dataProvider: aggregatedAccountsDataProvider,
     variables,
   });
-  const setId = useCallback(
-    (data: AccountFields, id: string) => ({
-      ...data,
-      asset: { ...data.asset, id },
-    }),
-    []
-  );
-  const bottomPlaceholderProps = useBottomPlaceholder<AccountFields>({
+  const bottomPlaceholderProps = useBottomPlaceholder({
     gridRef,
-    setId,
     disabled: noBottomPlaceholder,
   });
 

libs/accounts/src/lib/accounts-table.tsx

@@ -154,7 +154,11 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
           {...props}
           style={{ width: '100%', height: '100%' }}
           overlayNoRowsTemplate={t('No accounts')}
-          getRowId={({ data }: { data: AccountFields }) => data.asset.id}
+          getRowId={({
+            data,
+          }: {
+            data: AccountFields & { isLastPlaceholder?: boolean; id?: string };
+          }) => (data.isLastPlaceholder && data.id ? data.id : data.asset.id)}
           ref={ref}
           tooltipShowDelay={500}
           rowData={props.rowData?.filter(

libs/data-provider/src/generic-data-provider.ts

@@ -164,7 +164,9 @@ interface DataProviderParams<
   Data,
   SubscriptionData,
   Delta,
-  Variables extends OperationVariables | undefined = undefined
+  Variables extends OperationVariables | undefined = undefined,
+  SubscriptionVariables extends OperationVariables | undefined = Variables,
+  QueryVariables extends OperationVariables | undefined = Variables
 > {
   query: Query<QueryData>;
   subscriptionQuery?: Query<SubscriptionData>;
@@ -181,6 +183,10 @@ interface DataProviderParams<
   resetDelay?: number;
   additionalContext?: Record<string, unknown>;
   errorPolicyGuard?: (graphqlErrors: GraphQLErrors) => boolean;
+  getQueryVariables?: (variables: Variables) => QueryVariables;
+  getSubscriptionVariables?: (
+    variables: Variables
+  ) => SubscriptionVariables | SubscriptionVariables[];
 }
 
 /**
@@ -199,7 +205,9 @@ function makeDataProviderInternal<
   Data,
   SubscriptionData,
   Delta,
-  Variables extends OperationVariables | undefined = undefined
+  Variables extends OperationVariables | undefined = undefined,
+  QueryVariables extends OperationVariables | undefined = Variables,
+  SubscriptionVariables extends OperationVariables | undefined = Variables
 >({
   query,
   subscriptionQuery,
@@ -211,12 +219,16 @@ function makeDataProviderInternal<
   resetDelay,
   additionalContext,
   errorPolicyGuard,
+  getQueryVariables,
+  getSubscriptionVariables,
 }: DataProviderParams<
   QueryData,
   Data,
   SubscriptionData,
   Delta,
-  Variables
+  Variables,
+  QueryVariables,
+  SubscriptionVariables
 >): Subscribe<Data, Delta, Variables> {
   // list of callbacks passed through subscribe call
   const callbacks: UpdateCallback<Data, Delta>[] = [];
@@ -230,7 +242,7 @@ function makeDataProviderInternal<
   let loading = true;
   let loaded = false;
   let client: ApolloClient<object>;
-  let subscription: Subscription | undefined;
+  let subscription: Subscription[] | undefined;
   let pageInfo: PageInfo | null = null;
   let totalCount: number | undefined;
 
@@ -263,7 +275,7 @@ function makeDataProviderInternal<
       .query<QueryData>({
         query,
         variables: {
-          ...variables,
+          ...(getQueryVariables ? getQueryVariables(variables) : variables),
           ...(pagination && {
             // let the variables pagination be prior to provider param
             pagination: {
@@ -343,6 +355,33 @@ function makeDataProviderInternal<
     }
   };
 
+  const subscriptionSubscribe = () => {
+    if (!subscriptionQuery || !getDelta || !update) {
+      return;
+    }
+    const subscriptionVariables = getSubscriptionVariables
+      ? getSubscriptionVariables(variables)
+      : variables;
+    subscription = ([] as (OperationVariables | undefined)[])
+      .concat(subscriptionVariables)
+      .map((variables) =>
+        client
+          .subscribe<SubscriptionData>({
+            query: subscriptionQuery,
+            variables,
+            fetchPolicy,
+          })
+          .subscribe(onNext, onError)
+      );
+  };
+
+  const subscriptionUnsubscribe = () => {
+    if (subscription) {
+      subscription.forEach((subscription) => subscription.unsubscribe());
+    }
+    subscription = undefined;
+  };
+
   const initialFetch = async (isUpdate = false) => {
     if (!client) {
       return;
@@ -392,10 +431,7 @@ function makeDataProviderInternal<
       }
       // if error will occur data provider stops subscription
       error = e as Error;
-      if (subscription) {
-        subscription.unsubscribe();
-      }
-      subscription = undefined;
+      subscriptionUnsubscribe();
     } finally {
       loading = false;
       notifyAll({ isUpdate });
@@ -439,10 +475,7 @@ function makeDataProviderInternal<
 
   const onError = (e: Error) => {
     error = e;
-    if (subscription) {
-      subscription.unsubscribe();
-      subscription = undefined;
-    }
+    subscriptionUnsubscribe();
     notifyAll();
   };
 
@@ -460,13 +493,7 @@ function makeDataProviderInternal<
       return;
     }
     if (subscriptionQuery && getDelta && update) {
-      subscription = client
-        .subscribe<SubscriptionData>({
-          query: subscriptionQuery,
-          variables,
-          fetchPolicy,
-        })
-        .subscribe(onNext, onError);
+      subscriptionSubscribe();
     }
     await initialFetch();
   };
@@ -475,8 +502,7 @@ function makeDataProviderInternal<
     if (!subscription) {
       return;
     }
-    subscription.unsubscribe();
-    subscription = undefined;
+    subscriptionUnsubscribe();
     data = null;
     error = undefined;
     loading = false;
@@ -590,14 +616,18 @@ export function makeDataProvider<
   Data,
   SubscriptionData,
   Delta,
-  Variables extends OperationVariables | undefined = undefined
+  Variables extends OperationVariables | undefined = undefined,
+  SubscriptionVariables extends OperationVariables | undefined = Variables,
+  QueryVariables extends OperationVariables | undefined = Variables
 >(
   params: DataProviderParams<
     QueryData,
     Data,
     SubscriptionData,
     Delta,
-    Variables
+    Variables,
+    SubscriptionVariables,
+    QueryVariables
   >
 ): Subscribe<Data, Delta, Variables> {
   const getInstance = memoize<Data, Delta, Variables>(() =>

libs/datagrid/src/lib/cells/price-change-cell.tsx

@@ -25,7 +25,7 @@ export const PriceChangeCell = memo(
           ref={ref}
           className={`${signedNumberCssClass(
             change
-          )} flex items-center gap-2 justify-end font-mono text-ui-small`}
+          )} flex items-center gap-2 font-mono text-ui-small`}
         >
           <Arrow value={change} />
           <span data-testid="price-change-percentage">

libs/datagrid/src/lib/use-bottom-placeholder.tsx

@@ -4,41 +4,34 @@ import type { AgGridReact } from 'ag-grid-react';
 import type { IsFullWidthRowParams, RowHeightParams } from 'ag-grid-community';
 
 const NO_HOVER_CSS_RULE = { 'no-hover': 'data?.isLastPlaceholder' };
-const ROW_ID = 'bottomPlaceholder';
+const ROW_ID = 'bottom-placeholder';
 const fullWidthCellRenderer = () => null;
 const isFullWidthRow = (params: IsFullWidthRowParams) =>
   params.rowNode.data?.isLastPlaceholder;
 
-interface Props<T> {
+interface Props {
   gridRef: RefObject<AgGridReact>;
-  setId?: (data: T, id: string) => T;
   disabled?: boolean;
 }
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const useBottomPlaceholder = <T extends {}>({
-  gridRef,
-  setId,
-  disabled,
-}: Props<T>) => {
+export const useBottomPlaceholder = ({ gridRef, disabled }: Props) => {
   const onBodyScrollEnd = useCallback(() => {
     const rowCont = gridRef.current?.api.getDisplayedRowCount() ?? 0;
     if (rowCont) {
       const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(rowCont - 1);
       if (lastRow && lastRow.data) {
-        const placeholderRow = setId
-          ? setId({ ...lastRow.data, isLastPlaceholder: true }, ROW_ID)
-          : {
-              ...lastRow.data,
-              isLastPlaceholder: true,
-              id: ROW_ID,
-            };
+        const placeholderRow = {
+          ...lastRow.data,
+          isLastPlaceholder: true,
+          id: ROW_ID,
+        };
         const transaction = gridRef.current?.api.getRowNode(ROW_ID)
           ? { update: [placeholderRow] }
           : { add: [placeholderRow] };
         gridRef.current?.api.applyTransaction(transaction);
       }
     }
-  }, [gridRef, setId]);
+  }, [gridRef]);
 
   const onRowsChanged = useCallback(() => {
     const placeholderNode = gridRef.current?.api.getRowNode(ROW_ID);

libs/environment/src/hooks/mocks/github-releases.ts

@@ -40231,7 +40231,7 @@ export const GITHUB_VEGA_FRONTEND_RELEASES_DATA = [
       'https://api.github.com/repos/vegaprotocol/frontend-monorepo/tarball/v0.20.6-core-0.71.4-3',
     zipball_url:
       'https://api.github.com/repos/vegaprotocol/frontend-monorepo/zipball/v0.20.6-core-0.71.4-3',
-    body: 'Release to test process of deploying and rolling back on IPFS\r\nRelease to test process of deploying and rolling back on IPFS\r\n\r\n---\r\n\r\n# Deployments\r\n* https://explorer.vega.xyz\r\n* https://governance.vega.xyz\r\n\r\n# IPFS releases\r\nTye IPFS hash of this release of the Trading app is:\r\n\r\nCIDv0: QmWjf5upWhe7euiZXHYZjtS7tpLNbJMt1TDBLj7B1BSRW9\r\nCIDv1: bafybeid4yjdxgrvceib4xbvuglcspkpd4evhaggkx2na7mvvg5vnjbyqai\r\n\r\nYou can always access the latest IPFS release by visiting [vega.trading](https://vega.trading).\r\n\r\nYou can also access Trading directly from an IPFS gateway.\r\nBEWARE: The Trading interface uses [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to remember your settings, such as which tokens you have imported. You should always use an IPFS gateway that enforces [origin separation](https://ipfs.github.io/public-gateway-checker/).\r\n\r\nYour settings are not remembered across different URLs.\r\n\r\nIPFS gateways:\r\n\r\nhttps://bafybeid4yjdxgrvceib4xbvuglcspkpd4evhaggkx2na7mvvg5vnjbyqai.ipfs.dweb.link/\r\nhttps://bafybeid4yjdxgrvceib4xbvuglcspkpd4evhaggkx2na7mvvg5vnjbyqai.ipfs.cf-ipfs.com/\r\nipfs://QmWjf5upWhe7euiZXHYZjtS7tpLNbJMt1TDBLj7B1BSRW9/\r\n\r\n',
+    body: 'Release to test process of deploying and rolling back on IPFS\r\nRelease to test process of deploying and rolling back on IPFS\r\n\r\n---\r\n\r\n# Deployments\r\n* https://explorer.vega.xyz\r\n* https://governance.vega.xyz\r\n\r\n# IPFS releases\r\nTye IPFS hash of this release of the Trading app is:\r\n\r\nCIDv0: QmWjf5upWhe7euiZXHYZjtS7tpLNbJMt1TDBLj7B1BSRW9\r\nCIDv1: bafybeid4yjdxgrvceib4xbvuglcspkpd4evhaggkx2na7mvvg5vnjbyqai\r\n\r\nYou can always access the latest IPFS release by visiting [console.vega.xyz](https://console.vega.xyz).\r\n\r\nYou can also access Trading directly from an IPFS gateway.\r\nBEWARE: The Trading interface uses [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to remember your settings, such as which tokens you have imported. You should always use an IPFS gateway that enforces [origin separation](https://ipfs.github.io/public-gateway-checker/).\r\n\r\nYour settings are not remembered across different URLs.\r\n\r\nIPFS gateways:\r\n\r\nhttps://bafybeid4yjdxgrvceib4xbvuglcspkpd4evhaggkx2na7mvvg5vnjbyqai.ipfs.dweb.link/\r\nhttps://bafybeid4yjdxgrvceib4xbvuglcspkpd4evhaggkx2na7mvvg5vnjbyqai.ipfs.cf-ipfs.com/\r\nipfs://QmWjf5upWhe7euiZXHYZjtS7tpLNbJMt1TDBLj7B1BSRW9/\r\n\r\n',
   },
   {
     url: 'https://api.github.com/repos/vegaprotocol/frontend-monorepo/releases/103336462',

libs/environment/src/hooks/use-links.ts

@@ -37,7 +37,7 @@ const ConsoleLinks = {
   ...EmptyLinks,
   [Networks.STAGNET1]: 'https://trading.stagnet1.vega.rocks',
   [Networks.TESTNET]: 'https://console.fairground.wtf',
-  [Networks.MAINNET]: 'https://vega.trading',
+  [Networks.MAINNET]: 'https://console.vega.xyz',
 };
 
 const TokenLinks = {

libs/environment/src/hooks/use-releases.ts

@@ -27,7 +27,7 @@ const GithubReleaseSchema = z.object({
 
 const GithubReleasesSchema = z.array(GithubReleaseSchema);
 
-type ReleaseInfo = {
+export type ReleaseInfo = {
   id: number;
   name: string;
   tagName: string;

libs/fills/src/lib/fills-manager.tsx

@@ -5,7 +5,6 @@ import { t } from '@vegaprotocol/i18n';
 import { FillsTable } from './fills-table';
 import type { BodyScrollEvent, BodyScrollEndEvent } from 'ag-grid-community';
 import { useFillsList } from './use-fills-list';
-import type { Trade } from './fills-data-provider';
 import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 
 interface FillsManagerProps {
@@ -65,7 +64,7 @@ export const FillsManager = ({
   }, []);
 
   const { isFullWidthRow, fullWidthCellRenderer, rowClassRules, getRowHeight } =
-    useBottomPlaceholder<Trade>({
+    useBottomPlaceholder({
       gridRef,
     });
 

libs/market-depth/src/lib/orderbook-manager.tsx

@@ -1,7 +1,4 @@
 import throttle from 'lodash/throttle';
-import groupBy from 'lodash/groupBy';
-import orderBy from 'lodash/orderBy';
-import uniqBy from 'lodash/uniqBy';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { Orderbook } from './orderbook';
 import { useDataProvider } from '@vegaprotocol/data-provider';
@@ -9,13 +6,12 @@ import { marketDepthProvider } from './market-depth-provider';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/markets';
 import type { MarketData } from '@vegaprotocol/markets';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useMarketDepthQuery } from './__generated__/MarketDepth';
 import type {
-  PriceLevelFieldsFragment,
   MarketDepthUpdateSubscription,
   MarketDepthQuery,
   MarketDepthQueryVariables,
 } from './__generated__/MarketDepth';
+import type { PriceLevelFieldsFragment } from './__generated__/MarketDepth';
 import {
   compactRows,
   updateCompactedRows,
@@ -24,312 +20,12 @@ import {
 } from './orderbook-data';
 import type { OrderbookData } from './orderbook-data';
 import { useOrderStore } from '@vegaprotocol/orders';
-import ReactVirtualizedAutoSizer from 'react-virtualized-auto-sizer';
-import { MarketDepthUpdateDocument } from './__generated__/MarketDepth';
-import classNames from 'classnames';
 
 interface OrderbookManagerProps {
   marketId: string;
 }
 
 export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
-  const [resolution, setResolution] = useState(0);
-  const precision = [1, 2, 5, 10, 20, 50, 100, 1000, 2000][resolution];
-  const { data, loading, error } = useBook(marketId);
-
-  if (error) return <div>{error.message}</div>;
-  if (loading || !data?.market?.depth) return <div>Loading...</div>;
-
-  return (
-    <div className="h-full overflow-hidden grid grid-rows-[min-content_1fr_min-content_1fr] text-xs">
-      <div className="flex items-center gap-1">
-        <button
-          className="p-2 border"
-          onClick={() => setResolution((x) => x + 1)}
-        >
-          -
-        </button>
-        <div>{precision}</div>
-        <button
-          className="p-2 border"
-          onClick={() =>
-            setResolution((x) => {
-              if (x <= 0) return 0;
-              return x - 1;
-            })
-          }
-        >
-          +
-        </button>
-      </div>
-      <div>
-        <ReactVirtualizedAutoSizer>
-          {({ width, height }) => {
-            const sell = data?.market?.depth.sell || [];
-            const rowCount = Math.floor(height / 16);
-
-            // group all prices that round to the same aggregated price
-            //
-            // { '1200': { __typename: 'PriceLevel', price: '1230' }}
-            const lookup = groupBy(sell, (lvl) =>
-              roundToCeil(Number(lvl.price), precision)
-            );
-
-            const aggregatedRows = Object.entries(lookup).map(
-              ([price, group]) => {
-                const volume = group.reduce(
-                  (sum, lvl) => sum + Number(lvl.volume),
-                  0
-                );
-                const numberOfOrders = group.reduce(
-                  (sum, lvl) => sum + Number(lvl.numberOfOrders),
-                  0
-                );
-                return {
-                  price: String(price),
-                  volume: String(volume),
-                  numberOfOrders: String(numberOfOrders),
-                };
-              }
-            );
-
-            const rows = orderBy(
-              aggregatedRows,
-              (lvl) => Number(lvl.price),
-              'desc'
-            );
-
-            // calc and add cumulative volume
-            const rowsWithCumulativeVol: Array<{
-              price: string;
-              volume: string;
-              cumulativeVolume: number;
-            }> = [];
-            let cumulativeVolume = 0;
-            // sell orders are rendered desc, but cumulative volume
-            // needs to be calculated from lowest price up
-            for (let i = rows.length - 1; i >= 0; i--) {
-              const lvl = rows[i];
-              cumulativeVolume = cumulativeVolume + Number(lvl.price);
-              rowsWithCumulativeVol.unshift({
-                ...lvl,
-                cumulativeVolume,
-              });
-            }
-
-            const rowsToFit = rowsWithCumulativeVol.slice(
-              rowsWithCumulativeVol.length - rowCount
-            );
-
-            return (
-              <div
-                style={{ width, height }}
-                className="flex flex-col justify-end"
-              >
-                {rowsToFit.map((s) => (
-                  <Row
-                    key={s.price}
-                    {...s}
-                    totalVolume={cumulativeVolume}
-                    side="sell"
-                  />
-                ))}
-              </div>
-            );
-          }}
-        </ReactVirtualizedAutoSizer>
-      </div>
-      <div className="text-center">Mid</div>
-      <div>
-        <ReactVirtualizedAutoSizer>
-          {({ width, height }) => {
-            const buy = data?.market?.depth.buy || [];
-            const rowCount = Math.floor(height / 16);
-            const lookup = groupBy(buy, (lvl) =>
-              roundToFloor(Number(lvl.price), precision)
-            );
-            const aggregatedRows = Object.entries(lookup).map(
-              ([price, group]) => {
-                const volume = group.reduce(
-                  (sum, lvl) => sum + Number(lvl.volume),
-                  0
-                );
-                const numberOfOrders = group.reduce(
-                  (sum, lvl) => sum + Number(lvl.numberOfOrders),
-                  0
-                );
-                return {
-                  price: String(price),
-                  volume: String(volume),
-                  numberOfOrders: String(numberOfOrders),
-                };
-              }
-            );
-
-            const rows = orderBy(
-              aggregatedRows,
-              (lvl) => Number(lvl.price),
-              'desc'
-            );
-
-            const rowsWithCumulativeVol: Array<{
-              price: string;
-              volume: string;
-              cumulativeVolume: number;
-            }> = [];
-
-            let cumulativeVolume = 0;
-
-            rows.forEach((r) => {
-              cumulativeVolume = cumulativeVolume + Number(r.volume);
-              rowsWithCumulativeVol.push({
-                ...r,
-                cumulativeVolume,
-              });
-            });
-
-            const rowsToFit = rowsWithCumulativeVol.slice(0, rowCount);
-
-            return (
-              <div style={{ width, height }}>
-                {rowsToFit.map((b) => (
-                  <Row
-                    key={b.price}
-                    {...b}
-                    totalVolume={cumulativeVolume}
-                    side="buy"
-                  />
-                ))}
-              </div>
-            );
-          }}
-        </ReactVirtualizedAutoSizer>
-      </div>
-    </div>
-  );
-};
-
-const Row = ({
-  price,
-  volume,
-  cumulativeVolume,
-  totalVolume,
-  side,
-}: {
-  price: string;
-  volume: string;
-  cumulativeVolume: number;
-  totalVolume: number;
-  side: 'buy' | 'sell';
-}) => {
-  return (
-    <div className="relative text-right font-mono">
-      <Bar
-        cumulativeVolume={cumulativeVolume}
-        totalVolume={totalVolume}
-        side={side}
-      />
-      <div className="relative grid grid-cols-3 z-10">
-        <div>{price}</div>
-        <div>{volume}</div>
-        <div>{cumulativeVolume}</div>
-      </div>
-    </div>
-  );
-};
-
-const Bar = ({
-  cumulativeVolume,
-  totalVolume,
-  side,
-}: {
-  cumulativeVolume: number;
-  totalVolume: number;
-  side: 'buy' | 'sell';
-}) => {
-  const classes = classNames('absolute right-0 h-full z-0', {
-    'bg-vega-green-300': side === 'buy',
-    'bg-vega-pink-300': side === 'sell',
-  });
-  const pct = (cumulativeVolume / totalVolume) * 100;
-  return (
-    <div style={{ width: pct + '%', minWidth: '2px' }} className={classes} />
-  );
-};
-
-const useBook = (marketId: string) => {
-  const { data, loading, error, subscribeToMore } = useMarketDepthQuery({
-    variables: {
-      marketId,
-    },
-  });
-
-  useEffect(() => {
-    if (!marketId) return;
-    const unsub = subscribeToMore({
-      document: MarketDepthUpdateDocument,
-      variables: { marketId },
-      updateQuery: (
-        prev: MarketDepthQuery,
-        {
-          subscriptionData,
-        }: { subscriptionData: { data: MarketDepthUpdateSubscription } }
-      ) => {
-        if (!subscriptionData.data.marketsDepthUpdate) {
-          return prev;
-        }
-
-        const currBuy = prev.market?.depth.buy || [];
-        const currSell = prev.market?.depth.sell || [];
-        const update = subscriptionData.data.marketsDepthUpdate[0];
-
-        const newBuy = update.buy || [];
-        const newSell = update.sell || [];
-
-        const buy = orderBy(
-          uniqBy([...newBuy, ...currBuy], 'price'),
-          (lvl) => Number(lvl.price),
-          'desc'
-        ).filter((lvl) => lvl.volume !== '0');
-        const sell = orderBy(
-          uniqBy([...newSell, ...currSell], 'price'),
-          (lvl) => Number(lvl.price),
-          'asc'
-        ).filter((lvl) => lvl.volume !== '0');
-
-        return {
-          market: {
-            id: marketId,
-            __typename: 'Market',
-            ...prev.market,
-            depth: {
-              __typename: 'MarketDepth',
-              sell,
-              buy,
-              sequenceNumber: update.sequenceNumber,
-            },
-          },
-        };
-      },
-    });
-
-    return () => {
-      unsub();
-    };
-  }, [marketId, subscribeToMore]);
-
-  return { data, loading, error };
-};
-
-const roundToCeil = (x: number, m: number) => {
-  return Math.ceil(x / m) * m;
-};
-
-const roundToFloor = (x: number, m: number) => {
-  return Math.ceil(x / m) * m;
-};
-
-export const OrderbookManager2 = ({ marketId }: OrderbookManagerProps) => {
   const [resolution, setResolution] = useState(1);
   const variables = { marketId };
   const resolutionRef = useRef(resolution);

libs/market-depth/src/lib/orderbook-row.tsx

@@ -75,7 +75,56 @@ export const OrderbookRow = React.memo(
     );
   }
 );
-
 OrderbookRow.displayName = 'OrderbookRow';
 
-export default OrderbookRow;
+export const OrderbookContinuousRow = React.memo(
+  ({
+    ask,
+    bid,
+    cumulativeAsk,
+    cumulativeBid,
+    cumulativeRelativeAsk,
+    cumulativeRelativeBid,
+    decimalPlaces,
+    positionDecimalPlaces,
+    indicativeVolume,
+    price,
+    relativeAsk,
+    relativeBid,
+    onClick,
+  }: OrderbookRowProps) => {
+    const type = bid ? 'bid' : 'ask';
+    const value = bid || ask;
+    const relativeValue = bid ? relativeBid : relativeAsk;
+    return (
+      <>
+        <VolCell
+          testId={`bid-ask-vol-${price}`}
+          value={value}
+          valueFormatted={addDecimalsFixedFormatNumber(
+            value,
+            positionDecimalPlaces
+          )}
+          relativeValue={relativeValue}
+          type={type}
+        />
+        <PriceCell
+          testId={`price-${price}`}
+          value={BigInt(price)}
+          onClick={() => onClick && onClick(addDecimal(price, decimalPlaces))}
+          valueFormatted={addDecimalsFixedFormatNumber(price, decimalPlaces)}
+        />
+        <CumulativeVol
+          testId={`cumulative-vol-${price}`}
+          positionDecimalPlaces={positionDecimalPlaces}
+          bid={cumulativeBid}
+          ask={cumulativeAsk}
+          relativeAsk={cumulativeRelativeAsk}
+          relativeBid={cumulativeRelativeBid}
+          indicativeVolume={indicativeVolume}
+        />
+      </>
+    );
+  }
+);
+OrderbookContinuousRow.displayName = 'OrderbookContinuousRow';

libs/market-depth/src/lib/orderbook.spec.tsx

@@ -224,4 +224,37 @@ describe('Orderbook', () => {
     expect(onResolutionChange.mock.calls[0][0]).toBe(10);
     expect(onClickSpy).toBeCalledWith('122.99');
   });
+
+  it('should have three or four columns', async () => {
+    window.innerHeight = 11 * rowHeight;
+    const { rerender } = render(
+      <Orderbook
+        decimalPlaces={decimalPlaces}
+        positionDecimalPlaces={0}
+        fillGaps
+        {...generateMockData({
+          ...params,
+          overlap: 0,
+        })}
+        onResolutionChange={onResolutionChange}
+      />
+    );
+    await waitFor(() => {
+      expect(screen.queryByText('Bid / Ask vol')).toBeInTheDocument();
+    });
+    rerender(
+      <Orderbook
+        decimalPlaces={decimalPlaces}
+        positionDecimalPlaces={0}
+        fillGaps
+        {...generateMockData(params)}
+        onResolutionChange={onResolutionChange}
+      />
+    );
+    await waitFor(() => {
+      expect(screen.getByText('Bid vol')).toBeInTheDocument();
+      expect(screen.getByText('Ask vol')).toBeInTheDocument();
+    });
+    await expect(screen.queryByText('Bid / Ask vol')).not.toBeInTheDocument();
+  });
 });

libs/market-depth/src/lib/orderbook.tsx

@@ -1,5 +1,12 @@
 import colors from 'tailwindcss/colors';
-import { useEffect, useRef, useState, useCallback, Fragment } from 'react';
+import {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  Fragment,
+  useMemo,
+} from 'react';
 import classNames from 'classnames';
 import {
   addDecimalsFixedFormatNumber,
@@ -11,7 +18,7 @@ import {
   useThemeSwitcher,
 } from '@vegaprotocol/react-helpers';
 import * as Schema from '@vegaprotocol/types';
-import { OrderbookRow } from './orderbook-row';
+import { OrderbookRow, OrderbookContinuousRow } from './orderbook-row';
 import { createRow } from './orderbook-data';
 import { Checkbox, Icon, Splash, TinyScroll } from '@vegaprotocol/ui-toolkit';
 import type { OrderbookData, OrderbookRowData } from './orderbook-data';
@@ -472,39 +479,75 @@ export const Orderbook = ({
   );
   useResizeObserver(gridElement.current, gridResizeHandler);
   useResizeObserver(rootElement.current, rootElementResizeHandler);
-
-  const tableBody =
-    data && data.length !== 0 ? (
-      <div className="grid grid-cols-4 gap-1 text-right auto-rows-[17px]">
-        {data.map((data, i) => (
-          <OrderbookRow
-            key={data.price}
-            price={(BigInt(data.price) / BigInt(resolution)).toString()}
-            onClick={onClick}
-            decimalPlaces={decimalPlaces - Math.log10(resolution)}
-            positionDecimalPlaces={positionDecimalPlaces}
-            bid={data.bid}
-            relativeBid={data.relativeBid}
-            cumulativeBid={data.cumulativeVol.bid}
-            cumulativeRelativeBid={data.cumulativeVol.relativeBid}
-            ask={data.ask}
-            relativeAsk={data.relativeAsk}
-            cumulativeAsk={data.cumulativeVol.ask}
-            cumulativeRelativeAsk={data.cumulativeVol.relativeAsk}
-            indicativeVolume={
-              marketTradingMode !==
-                Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS &&
-              indicativePrice === data.price
-                ? indicativeVolume
-                : undefined
-            }
-          />
-        ))}
+  const isContinuousMode =
+    marketTradingMode === Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS;
+  const tableHeader = useMemo(() => {
+    return (
+      <div
+        className={classNames(
+          'absolute top-0 grid auto-rows-[17px] gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default w-full',
+          isContinuousMode ? 'grid-cols-3' : 'grid-cols-4'
+        )}
+        ref={headerElement}
+      >
+        {isContinuousMode ? (
+          <div>{t('Bid / Ask vol')}</div>
+        ) : (
+          <>
+            <div>{t('Bid vol')}</div>
+            <div>{t('Ask vol')}</div>
+          </>
+        )}
+        <div>{t('Price')}</div>
+        <div className="pr-1 whitespace-nowrap overflow-hidden text-ellipsis">
+          {t('Cumulative vol')}
+        </div>
       </div>
-    ) : null;
+    );
+  }, [isContinuousMode]);
+
+  const OrderBookRowComponent = isContinuousMode
+    ? OrderbookContinuousRow
+    : OrderbookRow;
+
+  const tableBody = data?.length ? (
+    <div
+      className={classNames(
+        'grid grid-cols-4 gap-1 text-right auto-rows-[17px]',
+        isContinuousMode ? 'grid-cols-3' : 'grid-cols-4'
+      )}
+    >
+      {data.map((data, i) => (
+        <OrderBookRowComponent
+          key={data.price}
+          price={(BigInt(data.price) / BigInt(resolution)).toString()}
+          onClick={onClick}
+          decimalPlaces={decimalPlaces - Math.log10(resolution)}
+          positionDecimalPlaces={positionDecimalPlaces}
+          bid={data.bid}
+          relativeBid={data.relativeBid}
+          cumulativeBid={data.cumulativeVol.bid}
+          cumulativeRelativeBid={data.cumulativeVol.relativeBid}
+          ask={data.ask}
+          relativeAsk={data.relativeAsk}
+          cumulativeAsk={data.cumulativeVol.ask}
+          cumulativeRelativeAsk={data.cumulativeVol.relativeAsk}
+          indicativeVolume={
+            marketTradingMode !==
+              Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS &&
+            indicativePrice === data.price
+              ? indicativeVolume
+              : undefined
+          }
+        />
+      ))}
+    </div>
+  ) : null;
 
   const c = theme === 'dark' ? colors.neutral[600] : colors.neutral[300];
-  const gradientStyles = `linear-gradient(${c},${c}) 24.6% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 50% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 75.2% 0/1px 100% no-repeat`;
+  const gradientStyles = isContinuousMode
+    ? `linear-gradient(${c},${c}) 33.4% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 66.7% 0/1px 100% no-repeat`
+    : `linear-gradient(${c},${c}) 25% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 50% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 75% 0/1px 100% no-repeat`;
 
   const resolutions = new Array(decimalPlaces + 1)
     .fill(null)
@@ -531,21 +574,11 @@ export const Orderbook = ({
   /* eslint-disable jsx-a11y/no-static-element-interactions */
   return (
     <div
-      className="h-full relative pl-2 text-xs"
+      className="h-full relative pl-1 text-xs"
       ref={rootElement}
       onDoubleClick={() => setDebug(!debug)}
     >
-      <div
-        className="absolute top-0 grid grid-cols-4 auto-rows-[17px] gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default w-full"
-        ref={headerElement}
-      >
-        <div>{t('Bid vol')}</div>
-        <div>{t('Ask vol')}</div>
-        <div>{t('Price')}</div>
-        <div className="pr-1 whitespace-nowrap overflow-hidden text-ellipsis">
-          {t('Cumulative vol')}
-        </div>
-      </div>
+      {tableHeader}
       <TinyScroll
         className="h-full overflow-auto relative"
         onScroll={onScroll}

libs/markets/src/lib/__generated__/market-data.ts

@@ -167,4 +167,4 @@ export function useMarketDataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions
         }
 export type MarketDataQueryHookResult = ReturnType<typeof useMarketDataQuery>;
 export type MarketDataLazyQueryHookResult = ReturnType<typeof useMarketDataLazyQuery>;
-export type MarketDataQueryResult = Apollo.QueryResult<MarketDataQuery, MarketDataQueryVariables>;
+export type MarketDataQueryResult = Apollo.QueryResult<MarketDataQuery, MarketDataQueryVariables>;

libs/markets/src/lib/components/last-24h-price-change/last-24h-price-change.tsx

@@ -1,12 +1,15 @@
 import type { RefObject } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { isNumeric } from '@vegaprotocol/utils';
-import { useYesterday } from '@vegaprotocol/react-helpers';
+import { useFiveDaysAgo, useYesterday } from '@vegaprotocol/react-helpers';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
 import { PriceChangeCell } from '@vegaprotocol/datagrid';
 import * as Schema from '@vegaprotocol/types';
 import type { CandleClose } from '@vegaprotocol/types';
 import { marketCandlesProvider } from '../../market-candles-provider';
+import type { MarketCandlesFieldsFragment } from '../../__generated__/market-candles';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
 
 interface Props {
   marketId?: string;
@@ -24,30 +27,71 @@ export const Last24hPriceChange = ({
   inViewRoot,
 }: Props) => {
   const [ref, inView] = useInView({ root: inViewRoot?.current });
+  const fiveDaysAgo = useFiveDaysAgo();
   const yesterday = useYesterday();
   const { data, error } = useThrottledDataProvider({
     dataProvider: marketCandlesProvider,
     variables: {
       marketId: marketId || '',
       interval: Schema.Interval.INTERVAL_I1H,
-      since: new Date(yesterday).toISOString(),
+      since: new Date(fiveDaysAgo).toISOString(),
     },
     skip: !marketId || !inView,
   });
 
-  const candles =
-    data
+  const fiveDaysCandles = data?.filter((candle) => Boolean(candle));
+
+  const candles = fiveDaysCandles?.filter((candle) =>
+    isCandleLessThan24hOld(candle, yesterday)
+  );
+  const oneDayCandles =
+    candles
       ?.map((candle) => candle?.close)
       .filter((c): c is CandleClose => c !== null) || initialValue;
 
+  if (
+    fiveDaysCandles &&
+    fiveDaysCandles.length > 0 &&
+    (!oneDayCandles || oneDayCandles?.length === 0)
+  ) {
+    return (
+      <Tooltip
+        description={
+          <span className="justify-start">
+            {t(
+              '24 hour change is unavailable at this time. The price change in the last 120 hours is:'
+            )}{' '}
+            <PriceChangeCell
+              candles={fiveDaysCandles.map((c) => c.close) || []}
+              decimalPlaces={decimalPlaces}
+            />
+          </span>
+        }
+      >
+        <span ref={ref}>{t('Unknown')} </span>
+      </Tooltip>
+    );
+  }
+
   if (error || !isNumeric(decimalPlaces)) {
     return <span ref={ref}>-</span>;
   }
   return (
     <PriceChangeCell
-      candles={candles || []}
+      candles={oneDayCandles || []}
       decimalPlaces={decimalPlaces}
       ref={ref}
     />
   );
 };
+
+export const isCandleLessThan24hOld = (
+  candle: MarketCandlesFieldsFragment | undefined,
+  yesterday: number
+) => {
+  if (!candle?.open) {
+    return false;
+  }
+  const candleDate = new Date(candle.close);
+  return candleDate > new Date(yesterday);
+};

libs/markets/src/lib/components/last-24h-volume/last-24h-volume.tsx

@@ -3,9 +3,12 @@ import { useInView } from 'react-intersection-observer';
 import { marketCandlesProvider } from '../../market-candles-provider';
 import { calcCandleVolume } from '../../market-utils';
 import { addDecimalsFormatNumber, isNumeric } from '@vegaprotocol/utils';
-import { useYesterday } from '@vegaprotocol/react-helpers';
+import { useFiveDaysAgo, useYesterday } from '@vegaprotocol/react-helpers';
 import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
 import * as Schema from '@vegaprotocol/types';
+import { isCandleLessThan24hOld } from '../last-24h-price-change';
+import { t } from '@vegaprotocol/i18n';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
 
 interface Props {
   marketId?: string;
@@ -23,6 +26,7 @@ export const Last24hVolume = ({
   initialValue,
 }: Props) => {
   const yesterday = useYesterday();
+  const fiveDaysAgo = useFiveDaysAgo();
   const [ref, inView] = useInView({ root: inViewRoot?.current });
 
   const { data } = useThrottledDataProvider({
@@ -30,20 +34,66 @@ export const Last24hVolume = ({
     variables: {
       marketId: marketId || '',
       interval: Schema.Interval.INTERVAL_I1H,
-      since: new Date(yesterday).toISOString(),
+      since: new Date(fiveDaysAgo).toISOString(),
     },
     skip: !(inView && marketId),
   });
-  const candleVolume = data ? calcCandleVolume(data) : initialValue;
-  return (
-    <span ref={ref}>
-      {candleVolume && isNumeric(positionDecimalPlaces)
+
+  const fiveDaysCandles = data?.filter((candle) => Boolean(candle));
+
+  const oneDayCandles = fiveDaysCandles?.filter((candle) =>
+    isCandleLessThan24hOld(candle, yesterday)
+  );
+
+  if (
+    fiveDaysCandles &&
+    fiveDaysCandles.length > 0 &&
+    (!oneDayCandles || oneDayCandles?.length === 0)
+  ) {
+    const candleVolume = calcCandleVolume(fiveDaysCandles);
+    const candleVolumeValue =
+      candleVolume && isNumeric(positionDecimalPlaces)
         ? addDecimalsFormatNumber(
             candleVolume,
             positionDecimalPlaces,
             formatDecimals
           )
-        : '-'}
-    </span>
+        : '-';
+    return (
+      <Tooltip
+        description={
+          <div>
+            <span className="flex flex-col">
+              {t(
+                '24 hour change is unavailable at this time. The volume change in the last 120 hours is %s',
+                [candleVolumeValue]
+              )}
+            </span>
+          </div>
+        }
+      >
+        <span ref={ref}>{t('Unknown')} </span>
+      </Tooltip>
+    );
+  }
+  const candleVolume = oneDayCandles
+    ? calcCandleVolume(oneDayCandles)
+    : initialValue;
+  return (
+    <Tooltip
+      description={t(
+        'The total number of contracts traded in the last 24 hours.'
+      )}
+    >
+      <span ref={ref}>
+        {candleVolume && isNumeric(positionDecimalPlaces)
+          ? addDecimalsFormatNumber(
+              candleVolume,
+              positionDecimalPlaces,
+              formatDecimals
+            )
+          : '-'}
+      </span>
+    </Tooltip>
   );
 };

libs/markets/src/lib/components/oracle-full-profile/oracle-full-profile.tsx

@@ -104,7 +104,7 @@ export const OracleFullProfile = ({
         <div className="mb-2">{message}</div>
         <div className="mb-2">
           <ReactMarkdown
-            className="react-markdown-container"
+            className="react-markdown-container [word-break:break-word]"
             skipHtml={true}
             disallowedElements={['img']}
             linkTarget="_blank"

libs/markets/src/lib/markets.mock.ts

@@ -187,7 +187,7 @@ const marketFieldsFragments: MarketFieldsFragment[] = [
         name: 'Apple Monthly (30 Jun 2022)',
         product: {
           settlementAsset: {
-            id: 'asset-2',
+            id: 'asset-id',
             name: '',
             symbol: 'tUSDC',
             decimals: 5,

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -1,42 +1,23 @@
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Button } from '@vegaprotocol/ui-toolkit';
+import compact from 'lodash/compact';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import type { GridReadyEvent, FilterChangedEvent } from 'ag-grid-community';
-
-import { OrderListTable } from '../order-list/order-list';
-import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
-import {
-  normalizeOrderAmendment,
-  useVegaTransactionStore,
-} from '@vegaprotocol/wallet';
-import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
-import { OrderEditDialog } from '../order-list/order-edit-dialog';
-import type { Order } from '../order-data-provider';
+import type { MarketFieldsFragment } from '@vegaprotocol/markets';
+import { useMarketsQuery } from '@vegaprotocol/markets';
+import { useAssetsQuery } from '@vegaprotocol/assets';
+import { AgGridLazy } from '@vegaprotocol/datagrid';
+import type { OrdersUpdateSubscription } from '../order-data-provider';
+import { useOrdersUpdateSubscription } from '../order-data-provider';
+import type { ArrayElement } from 'type-fest/source/internal';
 import { OrderStatus } from '@vegaprotocol/types';
+import { orderBy, uniqBy } from 'lodash';
+import type { ColDef, GridApi } from 'ag-grid-community';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
 
 export enum Filter {
   'Open',
   'Closed',
   'Rejected',
 }
-
-const FilterStatusValue = {
-  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
-  [Filter.Closed]: [
-    OrderStatus.STATUS_CANCELLED,
-    OrderStatus.STATUS_EXPIRED,
-    OrderStatus.STATUS_FILLED,
-    OrderStatus.STATUS_PARTIALLY_FILLED,
-    OrderStatus.STATUS_STOPPED,
-  ],
-  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
-};
-
 export interface OrderListManagerProps {
   partyId: string;
   marketId?: string;
@@ -48,164 +29,209 @@ export interface OrderListManagerProps {
   storeKey?: string;
 }
 
-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 useMarkets = () => {
+  const { data, loading, error } = useMarketsQuery();
 
-export const OrderListManager = ({
-  partyId,
-  marketId,
-  onMarketClick,
-  onOrderTypeClick,
-  isReadOnly,
-  enforceBottomPlaceholder,
-  filter,
-  storeKey,
-}: OrderListManagerProps) => {
-  const gridRef = useRef<AgGridReact | null>(null);
-  const [hasData, setHasData] = useState(false);
-  const [editOrder, setEditOrder] = useState<Order | null>(null);
-  const create = useVegaTransactionStore((state) => state.create);
-  const hasAmendableOrder = useHasAmendableOrder(marketId);
-  const { data, error, loading, reload } = useDataProvider({
-    dataProvider: ordersWithMarketProvider,
-    variables:
-      filter === Filter.Open
-        ? { partyId, filter: { liveOnly: true } }
-        : { partyId },
+  const markets = data?.marketsConnection?.edges.map((e) => e.node) || [];
+  const marketLookup: Record<string, MarketFieldsFragment> = {};
+
+  markets.forEach((m) => {
+    marketLookup[m.id] = m;
   });
 
-  const {
-    onFilterChanged: bottomPlaceholderOnFilterChanged,
-    ...bottomPlaceholderProps
-  } = useBottomPlaceholder<Order>({
-    gridRef,
-    disabled: !enforceBottomPlaceholder && !isReadOnly && !hasAmendableOrder,
-  });
+  return {
+    markets: marketLookup,
+    data,
+    loading,
+    error,
+  };
+};
 
-  const cancel = useCallback(
-    (order: Order) => {
-      if (!order.market) return;
-      create({
-        orderCancellation: {
-          orderId: order.id,
-          marketId: order.market.id,
-        },
+const useAssets = () => {
+  const { data, loading, error } = useAssetsQuery();
+  return {
+    assets: compact(data?.assetsConnection?.edges || []).map((e) => e.node),
+    data,
+    loading,
+    error,
+  };
+};
+
+type Order = ArrayElement<OrdersUpdateSubscription['orders']>;
+
+const useOrders = (partyId?: string) => {
+  const loadRef = useRef(true);
+  const [orders, setOrders] = useState<Order[]>([]);
+
+  const { loading, error } = useOrdersUpdateSubscription({
+    variables: {
+      partyId: partyId || '',
+    },
+    skip: !partyId,
+    fetchPolicy: 'no-cache', // dont cache as we are caching here in the hook
+    onData: ({ data }) => {
+      const update = data.data?.orders || [];
+
+      if (loadRef.current) {
+        setOrders(update);
+        loadRef.current = false;
+        return;
+      }
+
+      if (!update.length) return;
+
+      // update orders
+      setOrders((curr) => {
+        // this might not be required all timestamps seem to be the same now
+        const sortedIncoming = orderBy(
+          update,
+          (o) => {
+            if (o.updatedAt) {
+              return new Date(o.updatedAt).getTime();
+            }
+            return new Date(o.createdAt).getTime();
+          },
+          'desc'
+        );
+        const combined = uniqBy([...sortedIncoming, ...curr], 'id');
+        return combined.filter((o) => isOrderActive(o));
       });
     },
-    [create]
-  );
+  });
 
-  const onGridReady = useCallback(
-    ({ api }: GridReadyEvent) => {
-      if (filter !== undefined) {
-        api.setFilterModel({
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        });
-      }
-    },
-    [filter]
-  );
+  return {
+    orders,
+    loading,
+    error,
+  };
+};
 
-  const onFilterChanged = useCallback(
-    (event: FilterChangedEvent) => {
-      const rowCount = gridRef.current?.api?.getModel().getRowCount();
-      setHasData((rowCount ?? 0) > 0);
-      bottomPlaceholderOnFilterChanged?.();
-    },
-    [bottomPlaceholderOnFilterChanged]
-  );
+const isOrderActive = (o: { status: OrderStatus }) => {
+  return [
+    OrderStatus.STATUS_ACTIVE,
+    OrderStatus.STATUS_PARKED,
+    OrderStatus.STATUS_PARTIALLY_FILLED,
+  ].includes(o.status);
+};
 
-  useEffect(() => {
-    setHasData((gridRef.current?.api?.getModel().getRowCount() ?? 0) > 0);
-  }, [data]);
+export const OrderListManager = ({ partyId }: OrderListManagerProps) => {
+  const loadRef = useRef(true);
+  const [gridApi, setGridApi] = useState<GridApi | null>(null);
+  const { markets } = useMarkets();
+  const { assets } = useAssets();
+  // Example using react state
+  //
+  // Pass orders as rowData, because we use getRowId the grid should update 'naturally'
+  const { orders } = useOrders(partyId);
 
-  const cancelAll = useCallback(() => {
-    create({
-      orderCancellation: {},
-    });
-  }, [create]);
+  // Example with gridApi.applyTransaction
+  //
+  // in this example the entire order state is in the grid as we
+  // dont cache in apollo and we discard the data once applied to the grid
+
+  // useOrdersUpdateSubscription({
+  //   variables: {
+  //     partyId: partyId || '',
+  //   },
+  //   skip: !gridApi || !partyId,
+  //   fetchPolicy: 'no-cache', // dont cache as we are caching here in the hook
+  //   onData: ({ data }) => {
+  //     console.log(gridApi);
+  //     if (!gridApi) {
+  //       throw new Error('Grid not ready');
+  //     }
+
+  //     const incoming = data.data?.orders || [];
+
+  //     if (loadRef.current) {
+  //       loadRef.current = false;
+  //       gridApi.applyTransaction({
+  //         add: incoming,
+  //       });
+  //       return;
+  //     }
+
+  //     if (!incoming.length) return;
+
+  //     const add: Order[] = [];
+  //     const remove: Order[] = [];
+  //     const update: Order[] = [];
+
+  //     incoming.forEach((o) => {
+  //       const exists = gridApi.getRowNode(o.id);
+  //       if (exists) {
+  //         if (isOrderActive(o)) {
+  //           update.push(o);
+  //         } else {
+  //           remove.push(o);
+  //         }
+  //       } else {
+  //         if (isOrderActive(o)) {
+  //           add.push(o);
+  //         }
+  //       }
+  //     });
+
+  //     gridApi.applyTransaction({
+  //       add,
+  //       remove,
+  //       update,
+  //     });
+  //   },
+  // });
+
+  const coldefs = useMemo<ColDef[]>(() => {
+    return [
+      {
+        field: 'marketId',
+        valueGetter: ({ data }) => {
+          const market = markets[data.marketId];
+          return market.tradableInstrument.instrument.code;
+        },
+        sortable: true,
+        filter: true,
+      },
+      {
+        field: 'status',
+      },
+      {
+        field: 'price',
+      },
+      {
+        field: 'side',
+      },
+      {
+        headerName: 'Created',
+        colId: 'createdAt',
+        sort: 'desc', // default sort by latest
+        valueGetter: ({ data }) => new Date(data.createdAt),
+        valueFormatter: ({ value }) => getDateTimeFormat().format(value),
+      },
+      {
+        field: 'updatedAt',
+      },
+    ];
+  }, [markets]);
+
+  if (!Object.keys(markets).length) {
+    return <div>No markets</div>;
+  }
+
+  if (!assets.length) {
+    return <div>No assets</div>;
+  }
 
   return (
-    <>
-      <div className="h-full relative">
-        <OrderListTable
-          rowData={data as Order[]}
-          ref={gridRef}
-          filter={filter}
-          onGridReady={onGridReady}
-          cancel={cancel}
-          setEditOrder={setEditOrder}
-          onMarketClick={onMarketClick}
-          onOrderTypeClick={onOrderTypeClick}
-          onFilterChanged={onFilterChanged}
-          isReadOnly={isReadOnly}
-          blockLoadDebounceMillis={100}
-          storeKey={storeKey}
-          suppressLoadingOverlay
-          suppressNoRowsOverlay
-          suppressAutoSize
-          {...bottomPlaceholderProps}
-        />
-        <div className="pointer-events-none absolute inset-0">
-          <AsyncRenderer
-            loading={loading}
-            error={error}
-            data={data}
-            noDataMessage={t('No orders')}
-            noDataCondition={(data) => !hasData}
-            reload={reload}
-          />
-        </div>
-      </div>
-      {!isReadOnly && hasAmendableOrder && (
-        <CancelAllOrdersButton onClick={cancelAll} />
-      )}
-      {editOrder && (
-        <OrderEditDialog
-          isOpen={Boolean(editOrder)}
-          onChange={(isOpen) => {
-            if (!isOpen) setEditOrder(null);
-          }}
-          order={editOrder}
-          onSubmit={(fields) => {
-            if (!editOrder.market) {
-              return;
-            }
-            const orderAmendment = normalizeOrderAmendment(
-              editOrder,
-              editOrder.market,
-              fields.limitPrice,
-              fields.size
-            );
-            const originalOrder: OrderTxUpdateFieldsFragment = {
-              type: editOrder.type,
-              id: editOrder.id,
-              status: editOrder.status,
-              createdAt: editOrder.createdAt,
-              size: editOrder.size,
-              price: editOrder.price,
-              timeInForce: editOrder.timeInForce,
-              expiresAt: editOrder.expiresAt,
-              side: editOrder.side,
-              marketId: editOrder.market.id,
-            };
-            create({ orderAmendment }, originalOrder);
-            setEditOrder(null);
-          }}
-        />
-      )}
-    </>
+    <AgGridLazy
+      rowData={orders}
+      onGridReady={(event) => {
+        setGridApi(event.api);
+      }}
+      style={{ width: '100%', height: '100%' }}
+      columnDefs={coldefs}
+      getRowId={(params) => {
+        return params.data.id;
+      }}
+    />
   );
 };

libs/orders/src/lib/components/order-list/order-list.spec.tsx

@@ -25,8 +25,8 @@ jest.mock('@vegaprotocol/react-helpers', () => ({
 
 const defaultProps: OrderListTableProps = {
   rowData: [],
-  setEditOrder: jest.fn(),
-  cancel: jest.fn(),
+  onEdit: jest.fn(),
+  onCancel: jest.fn(),
   isReadOnly: false,
 };
 
@@ -154,8 +154,8 @@ describe('OrderListTable', () => {
         render(
           generateJsx({
             rowData: [order],
-            setEditOrder: mockEdit,
-            cancel: mockCancel,
+            onEdit: mockEdit,
+            onCancel: mockCancel,
           })
         );
       });
@@ -179,8 +179,8 @@ describe('OrderListTable', () => {
         render(
           generateJsx({
             rowData: [order],
-            setEditOrder: mockEdit,
-            cancel: mockCancel,
+            onEdit: mockEdit,
+            onCancel: mockCancel,
             isReadOnly: true,
           })
         );

libs/orders/src/lib/components/order-list/order-list.stories.tsx

@@ -18,8 +18,8 @@ const Template: Story = (args) => {
     <div style={{ height: 1000 }}>
       <OrderListTable
         rowData={args.data}
-        cancel={cancel}
-        setEditOrder={() => {
+        onCancel={cancel}
+        onEdit={() => {
           return;
         }}
         isReadOnly={false}
@@ -47,8 +47,8 @@ const Template2: Story = (args) => {
       <div style={{ height: 1000 }}>
         <OrderListTable
           rowData={args.data}
-          cancel={cancel}
-          setEditOrder={setEditOrder}
+          onCancel={cancel}
+          onEdit={setEditOrder}
           isReadOnly={false}
         />
       </div>

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -32,8 +32,8 @@ import { Filter } from '../order-list-manager';
 
 export type OrderListTableProps = TypedDataAgGrid<Order> & {
   marketId?: string;
-  cancel: (order: Order) => void;
-  setEditOrder: (order: Order) => void;
+  onCancel: (order: Order) => void;
+  onEdit: (order: Order) => void;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
   filter?: Filter;
@@ -46,14 +46,7 @@ export const OrderListTable = memo<
 >(
   forwardRef<AgGridReact, OrderListTableProps>(
     (
-      {
-        cancel,
-        setEditOrder,
-        onMarketClick,
-        onOrderTypeClick,
-        filter,
-        ...props
-      },
+      { onCancel, onEdit, onMarketClick, onOrderTypeClick, filter, ...props },
       ref
     ) => {
       const showAllActions =
@@ -275,15 +268,11 @@ export const OrderListTable = memo<
           />
           <AgGridColumn
             colId="amend"
-            field="id"
             {...COL_DEFS.actions}
             minWidth={showAllActions ? 120 : COL_DEFS.actions.minWidth}
             maxWidth={showAllActions ? 120 : COL_DEFS.actions.minWidth}
-            cellRenderer={({
-              data,
-              value,
-            }: VegaICellRendererParams<Order, 'id'>) => {
-              if (!value || !data) return null;
+            cellRenderer={({ data }: { data?: Order }) => {
+              if (!data) return null;
 
               return (
                 <div className="flex gap-2 items-center justify-end">
@@ -291,19 +280,19 @@ export const OrderListTable = memo<
                     <>
                       <ButtonLink
                         data-testid="edit"
-                        onClick={() => setEditOrder(data)}
+                        onClick={() => onEdit(data)}
                       >
                         {t('Edit')}
                       </ButtonLink>
                       <ButtonLink
                         data-testid="cancel"
-                        onClick={() => cancel(data)}
+                        onClick={() => onCancel(data)}
                       >
                         {t('Cancel')}
                       </ButtonLink>
                     </>
                   )}
-                  <OrderActionsDropdown id={value} />
+                  <OrderActionsDropdown id={data?.id} />
                 </div>
               );
             }}

libs/positions/src/lib/Positions.graphql

@@ -9,16 +9,16 @@ fragment PositionFields on Position {
   market {
     id
   }
+  party {
+    id
+  }
 }
 
-query Positions($partyId: ID!) {
-  party(id: $partyId) {
-    id
-    positionsConnection {
-      edges {
-        node {
-          ...PositionFields
-        }
+query Positions($partyIds: [ID!]!) {
+  positions(filter: { partyIds: $partyIds }) {
+    edges {
+      node {
+        ...PositionFields
       }
     }
   }
@@ -34,6 +34,7 @@ subscription PositionsSubscription($partyId: ID!) {
     marketId
     lossSocializationAmount
     positionStatus
+    partyId
   }
 }
 

libs/positions/src/lib/__generated__/Positions.ts

@@ -3,21 +3,21 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type PositionFieldsFragment = { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string } };
+export type PositionFieldsFragment = { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string }, party: { __typename?: 'Party', id: string } };
 
 export type PositionsQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
+  partyIds: Array<Types.Scalars['ID']> | Types.Scalars['ID'];
 }>;
 
 
-export type PositionsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, positionsConnection?: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string } } }> | null } | null } | null };
+export type PositionsQuery = { __typename?: 'Query', positions?: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, positionStatus: Types.PositionStatus, lossSocializationAmount: string, market: { __typename?: 'Market', id: string }, party: { __typename?: 'Party', id: string } } }> | null } | null };
 
 export type PositionsSubscriptionSubscriptionVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type PositionsSubscriptionSubscription = { __typename?: 'Subscription', positions: Array<{ __typename?: 'PositionUpdate', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, marketId: string, lossSocializationAmount: string, positionStatus: Types.PositionStatus }> };
+export type PositionsSubscriptionSubscription = { __typename?: 'Subscription', positions: Array<{ __typename?: 'PositionUpdate', realisedPNL: string, openVolume: string, unrealisedPNL: string, averageEntryPrice: string, updatedAt?: any | null, marketId: string, lossSocializationAmount: string, positionStatus: Types.PositionStatus, partyId: string }> };
 
 export type MarginFieldsFragment = { __typename?: 'MarginLevels', maintenanceLevel: string, searchLevel: string, initialLevel: string, collateralReleaseLevel: string, asset: { __typename?: 'Asset', id: string }, market: { __typename?: 'Market', id: string } };
 
@@ -57,6 +57,9 @@ export const PositionFieldsFragmentDoc = gql`
   market {
     id
   }
+  party {
+    id
+  }
 }
     `;
 export const MarginFieldsFragmentDoc = gql`
@@ -74,14 +77,11 @@ export const MarginFieldsFragmentDoc = gql`
 }
     `;
 export const PositionsDocument = gql`
-    query Positions($partyId: ID!) {
-  party(id: $partyId) {
-    id
-    positionsConnection {
-      edges {
-        node {
-          ...PositionFields
-        }
+    query Positions($partyIds: [ID!]!) {
+  positions(filter: {partyIds: $partyIds}) {
+    edges {
+      node {
+        ...PositionFields
       }
     }
   }
@@ -100,7 +100,7 @@ export const PositionsDocument = gql`
  * @example
  * const { data, loading, error } = usePositionsQuery({
  *   variables: {
- *      partyId: // value for 'partyId'
+ *      partyIds: // value for 'partyIds'
  *   },
  * });
  */
@@ -126,6 +126,7 @@ export const PositionsSubscriptionDocument = gql`
     marketId
     lossSocializationAmount
     positionStatus
+    partyId
   }
 }
     `;

libs/positions/src/lib/positions-container.tsx

@@ -7,12 +7,14 @@ export const PositionsContainer = ({
   onMarketClick,
   noBottomPlaceholder,
   storeKey,
+  allKeys,
 }: {
   onMarketClick?: (marketId: string) => void;
   noBottomPlaceholder?: boolean;
   storeKey?: string;
+  allKeys?: boolean;
 }) => {
-  const { pubKey, isReadOnly } = useVegaWallet();
+  const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
 
   if (!pubKey) {
     return (
@@ -21,9 +23,19 @@ export const PositionsContainer = ({
       </Splash>
     );
   }
+
+  const partyIds = [pubKey];
+  if (allKeys && pubKeys) {
+    partyIds.push(
+      ...pubKeys
+        .map(({ publicKey }) => publicKey)
+        .filter((publicKey) => publicKey !== pubKey)
+    );
+  }
+
   return (
     <PositionsManager
-      partyId={pubKey}
+      partyIds={partyIds}
       onMarketClick={onMarketClick}
       isReadOnly={isReadOnly}
       noBottomPlaceholder={noBottomPlaceholder}

libs/positions/src/lib/positions-data-providers.spec.ts

@@ -1,10 +1,7 @@
 import * as Schema from '@vegaprotocol/types';
 import type { Account } from '@vegaprotocol/accounts';
 import type { MarketWithData } from '@vegaprotocol/markets';
-import type {
-  PositionFieldsFragment,
-  MarginFieldsFragment,
-} from './__generated__/Positions';
+import type { PositionFieldsFragment } from './__generated__/Positions';
 import { getMetrics, rejoinPositionData } from './positions-data-providers';
 import { PositionStatus } from '@vegaprotocol/types';
 
@@ -79,6 +76,9 @@ const positions: PositionFieldsFragment[] = [
       __typename: 'Market',
       id: '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8',
     },
+    party: {
+      id: 'partyId',
+    },
     lossSocializationAmount: '0',
     positionStatus: PositionStatus.POSITION_STATUS_UNSPECIFIED,
   },
@@ -93,6 +93,9 @@ const positions: PositionFieldsFragment[] = [
       __typename: 'Market',
       id: '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e',
     },
+    party: {
+      id: 'partyId',
+    },
     lossSocializationAmount: '100',
     positionStatus: PositionStatus.POSITION_STATUS_ORDERS_CLOSED,
   },
@@ -113,6 +116,8 @@ const marketsData = [
         product: {
           settlementAsset: {
             symbol: 'tDAI',
+            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
+            decimals: 5,
           },
         },
       },
@@ -140,6 +145,8 @@ const marketsData = [
         product: {
           settlementAsset: {
             symbol: 'tDAI',
+            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
+            decimals: 5,
           },
         },
       },
@@ -155,65 +162,23 @@ const marketsData = [
   },
 ] as MarketWithData[];
 
-const margins: MarginFieldsFragment[] = [
-  {
-    __typename: 'MarginLevels',
-    maintenanceLevel: '0',
-    searchLevel: '0',
-    initialLevel: '0',
-    collateralReleaseLevel: '0',
-    market: {
-      __typename: 'Market',
-      id: '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8',
-    },
-    asset: {
-      __typename: 'Asset',
-      id: 'tDAI-id',
-    },
-  },
-  {
-    __typename: 'MarginLevels',
-    maintenanceLevel: '0',
-    searchLevel: '0',
-    initialLevel: '0',
-    collateralReleaseLevel: '0',
-    market: {
-      __typename: 'Market',
-      id: '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e',
-    },
-    asset: {
-      __typename: 'Asset',
-      id: 'tDAI-id',
-    },
-  },
-];
 describe('getMetrics && rejoinPositionData', () => {
   it('returns positions metrics', () => {
-    const positionsRejoined = rejoinPositionData(
-      positions,
-      marketsData,
-      margins
-    );
+    const positionsRejoined = rejoinPositionData(positions, marketsData);
     const metrics = getMetrics(positionsRejoined, accounts || null);
     expect(metrics.length).toEqual(2);
   });
 
   it('calculates metrics', () => {
-    const positionsRejoined = rejoinPositionData(
-      positions,
-      marketsData,
-      margins
-    );
+    const positionsRejoined = rejoinPositionData(positions, marketsData);
     const metrics = getMetrics(positionsRejoined, accounts || null);
 
     expect(metrics[0].assetSymbol).toEqual('tDAI');
     expect(metrics[0].averageEntryPrice).toEqual('8993727');
-    expect(metrics[0].capitalUtilisation).toEqual(4);
     expect(metrics[0].currentLeverage).toBeCloseTo(1.02);
     expect(metrics[0].marketDecimalPlaces).toEqual(5);
     expect(metrics[0].positionDecimalPlaces).toEqual(0);
     expect(metrics[0].decimals).toEqual(5);
-    expect(metrics[0].lowMarginLevel).toEqual(false);
     expect(metrics[0].markPrice).toEqual('9431775');
     expect(metrics[0].marketId).toEqual(
       '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8'
@@ -225,7 +190,6 @@ describe('getMetrics && rejoinPositionData', () => {
     expect(metrics[0].notional).toEqual('943177500');
     expect(metrics[0].openVolume).toEqual('100');
     expect(metrics[0].realisedPNL).toEqual('0');
-    expect(metrics[0].searchPrice).toEqual('9098238');
     expect(metrics[0].totalBalance).toEqual('926178496');
     expect(metrics[0].unrealisedPNL).toEqual('43804770');
     expect(metrics[0].updatedAt).toEqual('2022-07-28T14:53:54.725477Z');
@@ -236,12 +200,10 @@ describe('getMetrics && rejoinPositionData', () => {
 
     expect(metrics[1].assetSymbol).toEqual('tDAI');
     expect(metrics[1].averageEntryPrice).toEqual('840158');
-    expect(metrics[1].capitalUtilisation).toEqual(0);
     expect(metrics[1].currentLeverage).toBeCloseTo(0.097);
     expect(metrics[1].marketDecimalPlaces).toEqual(5);
     expect(metrics[1].positionDecimalPlaces).toEqual(0);
     expect(metrics[1].decimals).toEqual(5);
-    expect(metrics[1].lowMarginLevel).toEqual(false);
     expect(metrics[1].markPrice).toEqual('869762');
     expect(metrics[1].marketId).toEqual(
       '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e'
@@ -251,7 +213,6 @@ describe('getMetrics && rejoinPositionData', () => {
     expect(metrics[1].notional).toEqual('86976200');
     expect(metrics[1].openVolume).toEqual('-100');
     expect(metrics[1].realisedPNL).toEqual('0');
-    expect(metrics[1].searchPrice).toEqual('902503');
     expect(metrics[1].totalBalance).toEqual('896098819');
     expect(metrics[1].unrealisedPNL).toEqual('-9112700');
     expect(metrics[1].updatedAt).toEqual('2022-07-28T15:09:34.441143Z');

libs/positions/src/lib/positions-data-providers.ts

@@ -19,66 +19,41 @@ import type {
   PositionsQuery,
   PositionFieldsFragment,
   PositionsSubscriptionSubscription,
-  MarginFieldsFragment,
   PositionsQueryVariables,
+  PositionsSubscriptionSubscriptionVariables,
 } from './__generated__/Positions';
 import {
   PositionsDocument,
   PositionsSubscriptionDocument,
 } from './__generated__/Positions';
-import { marginsDataProvider } from './margin-data-provider';
 import type { PositionStatus } from '@vegaprotocol/types';
 
-type PositionMarginLevel = Pick<
-  MarginFieldsFragment,
-  'maintenanceLevel' | 'searchLevel' | 'initialLevel'
->;
-
-interface PositionRejoined {
-  realisedPNL: string;
-  openVolume: string;
-  unrealisedPNL: string;
-  averageEntryPrice: string;
-  updatedAt?: string | null;
-  market: MarketMaybeWithData | null;
-  margins: PositionMarginLevel | null;
-  lossSocializationAmount: string | null;
-  status: PositionStatus;
-}
-
 export interface Position {
-  marketName: string;
+  assetId: string;
+  assetSymbol: string;
   averageEntryPrice: string;
-  marginAccountBalance: string;
-  capitalUtilisation: number;
   currentLeverage: number | undefined;
   decimals: number;
+  lossSocializationAmount: string;
+  marginAccountBalance: string;
   marketDecimalPlaces: number;
-  positionDecimalPlaces: number;
-  totalBalance: string;
-  assetSymbol: string;
-  assetId: string;
-  lowMarginLevel: boolean;
   marketId: string;
+  marketName: string;
   marketTradingMode: Schema.MarketTradingMode;
   markPrice: string | undefined;
   notional: string | undefined;
   openVolume: string;
+  partyId: string;
+  positionDecimalPlaces: number;
   realisedPNL: string;
-  unrealisedPNL: string;
-  searchPrice: string | undefined;
-  updatedAt: string | null;
-  lossSocializationAmount: string;
   status: PositionStatus;
-}
-
-export interface Data {
-  party: PositionsQuery['party'] | null;
-  positions: Position[] | null;
+  totalBalance: string;
+  unrealisedPNL: string;
+  updatedAt: string | null;
 }
 
 export const getMetrics = (
-  data: PositionRejoined[] | null,
+  data: ReturnType<typeof rejoinPositionData> | null,
   accounts: Account[] | null
 ): Position[] => {
   if (!data || !data?.length) {
@@ -87,25 +62,32 @@ export const getMetrics = (
   const metrics: Position[] = [];
   data.forEach((position) => {
     const market = position.market;
+    if (!market) {
+      return;
+    }
     const marketData = market?.data;
-    const marginLevel = position.margins;
     const marginAccount = accounts?.find((account) => {
       return account.market?.id === market?.id;
     });
-    if (!marginAccount || !marginLevel || !market) {
-      return;
-    }
+    const {
+      decimals,
+      id: assetId,
+      symbol: assetSymbol,
+    } = market.tradableInstrument.instrument.product.settlementAsset;
     const generalAccount = accounts?.find(
       (account) =>
-        account.asset.id === marginAccount.asset.id &&
+        account.asset.id === assetId &&
         account.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL
     );
-    const decimals = marginAccount.asset.decimals;
+
     const { positionDecimalPlaces, decimalPlaces: marketDecimalPlaces } =
       market;
     const openVolume = toBigNum(position.openVolume, positionDecimalPlaces);
 
-    const marginAccountBalance = toBigNum(marginAccount.balance ?? 0, decimals);
+    const marginAccountBalance = toBigNum(
+      marginAccount?.balance ?? 0,
+      decimals
+    );
     const generalAccountBalance = toBigNum(
       generalAccount?.balance ?? 0,
       decimals
@@ -126,54 +108,30 @@ export const getMetrics = (
         ? new BigNumber(0)
         : notional.dividedBy(totalBalance)
       : undefined;
-    const capitalUtilisation = totalBalance.isEqualTo(0)
-      ? new BigNumber(0)
-      : marginAccountBalance.dividedBy(totalBalance).multipliedBy(100);
-
-    const marginSearch = toBigNum(marginLevel.searchLevel, decimals);
-    const marginInitial = toBigNum(marginLevel.initialLevel, decimals);
-
-    const searchPrice = markPrice
-      ? marginSearch
-          .minus(marginAccountBalance)
-          .dividedBy(openVolume)
-          .plus(markPrice)
-      : undefined;
-
-    const lowMarginLevel =
-      marginAccountBalance.isLessThan(
-        marginSearch.plus(marginInitial.minus(marginSearch).dividedBy(2))
-      ) && generalAccountBalance.isLessThan(marginInitial.minus(marginSearch));
-
     metrics.push({
-      marketName: market.tradableInstrument.instrument.name,
+      assetId,
+      assetSymbol,
       averageEntryPrice: position.averageEntryPrice,
-      marginAccountBalance: marginAccount.balance,
-      capitalUtilisation: Math.round(capitalUtilisation.toNumber()),
       currentLeverage: currentLeverage ? currentLeverage.toNumber() : undefined,
-      marketDecimalPlaces,
-      positionDecimalPlaces,
       decimals,
-      assetSymbol:
-        market.tradableInstrument.instrument.product.settlementAsset.symbol,
-      assetId: market.tradableInstrument.instrument.product.settlementAsset.id,
-      totalBalance: totalBalance.multipliedBy(10 ** decimals).toFixed(),
-      lowMarginLevel,
+      lossSocializationAmount: position.lossSocializationAmount || '0',
+      marginAccountBalance: marginAccount?.balance ?? '0',
+      marketDecimalPlaces,
       marketId: market.id,
+      marketName: market.tradableInstrument.instrument.name,
       marketTradingMode: market.tradingMode,
       markPrice: marketData ? marketData.markPrice : undefined,
       notional: notional
         ? notional.multipliedBy(10 ** marketDecimalPlaces).toFixed(0)
         : undefined,
       openVolume: position.openVolume,
+      partyId: position.party.id,
+      positionDecimalPlaces,
       realisedPNL: position.realisedPNL,
+      status: position.positionStatus,
+      totalBalance: totalBalance.multipliedBy(10 ** decimals).toFixed(),
       unrealisedPNL: position.unrealisedPNL,
-      searchPrice: searchPrice
-        ? searchPrice.multipliedBy(10 ** marketDecimalPlaces).toFixed(0)
-        : undefined,
       updatedAt: position.updatedAt || null,
-      lossSocializationAmount: position.lossSocializationAmount || '0',
-      status: position.status,
     });
   });
   return metrics;
@@ -186,7 +144,8 @@ export const update = (
   return produce(data || [], (draft) => {
     deltas.forEach((delta) => {
       const index = draft.findIndex(
-        (node) => node.market.id === delta.marketId
+        (node) =>
+          node.market.id === delta.marketId && node.party.id === delta.partyId
       );
       if (index !== -1) {
         const currNode = draft[index];
@@ -208,49 +167,39 @@ export const update = (
             __typename: 'Market',
             id: delta.marketId,
           },
+          party: {
+            id: delta.partyId,
+          },
         });
       }
     });
   });
 };
 
-export const positionsDataProvider = makeDataProvider<
+const getSubscriptionVariables = (
+  variables: PositionsQueryVariables
+): PositionsSubscriptionSubscriptionVariables[] =>
+  ([] as string[]).concat(variables.partyIds).map((partyId) => ({ partyId }));
+
+const positionsDataProvider = makeDataProvider<
   PositionsQuery,
   PositionFieldsFragment[],
   PositionsSubscriptionSubscription,
   PositionsSubscriptionSubscription['positions'],
-  PositionsQueryVariables
+  PositionsQueryVariables,
+  PositionsSubscriptionSubscriptionVariables
 >({
   query: PositionsDocument,
   subscriptionQuery: PositionsSubscriptionDocument,
   update,
   getData: (responseData: PositionsQuery | null) =>
-    removePaginationWrapper(responseData?.party?.positionsConnection?.edges) ||
-    [],
+    removePaginationWrapper(responseData?.positions?.edges) || [],
   getDelta: (subscriptionData: PositionsSubscriptionSubscription) =>
     subscriptionData.positions,
+  getSubscriptionVariables,
 });
 
-const upgradeMarginsConnection = (
-  marketId: string,
-  margins: MarginFieldsFragment[] | null
-) => {
-  if (marketId && margins) {
-    const index =
-      margins.findIndex((node) => node.market.id === marketId) ?? -1;
-    if (index >= 0) {
-      const marginLevel = margins[index];
-      return {
-        maintenanceLevel: marginLevel.maintenanceLevel,
-        searchLevel: marginLevel.searchLevel,
-        initialLevel: marginLevel.initialLevel,
-      };
-    }
-  }
-  return null;
-};
-
-export const positionDataProvider = makeDerivedDataProvider<
+const positionDataProvider = makeDerivedDataProvider<
   PositionFieldsFragment,
   never,
   PositionsQueryVariables & MarketDataQueryVariables
@@ -258,7 +207,7 @@ export const positionDataProvider = makeDerivedDataProvider<
   [
     (callback, client, variables) =>
       positionsDataProvider(callback, client, {
-        partyId: variables?.partyId || '',
+        partyIds: variables.partyIds,
       }),
   ],
   (data, variables) =>
@@ -278,22 +227,18 @@ export const openVolumeDataProvider = makeDerivedDataProvider<
 
 export const rejoinPositionData = (
   positions: PositionFieldsFragment[] | null,
-  marketsData: MarketMaybeWithData[] | null,
-  margins: MarginFieldsFragment[] | null
-): PositionRejoined[] | null => {
-  if (positions && marketsData && margins) {
+  marketsData: MarketMaybeWithData[] | null
+):
+  | (Omit<PositionFieldsFragment, 'market'> & {
+      market: MarketMaybeWithData | null;
+    })[]
+  | null => {
+  if (positions && marketsData) {
     return positions.map((node) => {
       return {
-        realisedPNL: node.realisedPNL,
-        openVolume: node.openVolume,
-        unrealisedPNL: node.unrealisedPNL,
-        averageEntryPrice: node.averageEntryPrice,
-        updatedAt: node.updatedAt,
+        ...node,
         market:
           marketsData?.find((market) => market.id === node.market.id) || null,
-        margins: upgradeMarginsConnection(node.market.id, margins),
-        lossSocializationAmount: node.lossSocializationAmount,
-        status: node.positionStatus,
       };
     });
   }
@@ -307,13 +252,17 @@ export const positionsMetricsProvider = makeDerivedDataProvider<
 >(
   [
     positionsDataProvider,
-    accountsDataProvider,
+    (callback, client, variables) =>
+      accountsDataProvider(callback, client, {
+        partyId: Array.isArray(variables.partyIds)
+          ? variables.partyIds[0]
+          : variables.partyIds,
+      }),
     (callback, client) =>
       allMarketsWithDataProvider(callback, client, undefined),
-    marginsDataProvider,
   ],
-  ([positions, accounts, marketsData, margins], variables) => {
-    const positionsData = rejoinPositionData(positions, marketsData, margins);
+  ([positions, accounts, marketsData], variables) => {
+    const positionsData = rejoinPositionData(positions, marketsData);
     if (!variables) {
       return [];
     }

libs/positions/src/lib/positions-manager.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import type { Position } from './positions-data-providers';
 import { usePositionsData } from './use-positions-data';
 import { PositionsTable } from './positions-table';
 import type { AgGridReact } from 'ag-grid-react';
@@ -8,9 +7,10 @@ import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
 import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 
 interface PositionsManagerProps {
-  partyId: string;
+  partyIds: string[];
   onMarketClick?: (marketId: string) => void;
   isReadOnly: boolean;
   noBottomPlaceholder?: boolean;
@@ -18,14 +18,15 @@ interface PositionsManagerProps {
 }
 
 export const PositionsManager = ({
-  partyId,
+  partyIds,
   onMarketClick,
   isReadOnly,
   noBottomPlaceholder,
   storeKey,
 }: PositionsManagerProps) => {
+  const { pubKeys, pubKey } = useVegaWallet();
   const gridRef = useRef<AgGridReact | null>(null);
-  const { data, error, loading, reload } = usePositionsData(partyId, gridRef);
+  const { data, error, loading, reload } = usePositionsData(partyIds, gridRef);
   const [dataCount, setDataCount] = useState(data?.length ?? 0);
   const create = useVegaTransactionStore((store) => store.create);
   const onClose = ({
@@ -58,23 +59,19 @@ export const PositionsManager = ({
       },
     });
 
-  const setId = useCallback((data: Position, id: string) => {
-    return {
-      ...data,
-      marketId: id,
-    };
-  }, []);
-  const bottomPlaceholderProps = useBottomPlaceholder<Position>({
+  const bottomPlaceholderProps = useBottomPlaceholder({
     gridRef,
-    setId,
     disabled: noBottomPlaceholder,
   });
   const updateRowCount = useCallback(() => {
     setDataCount(gridRef.current?.api?.getModel().getRowCount() ?? 0);
   }, []);
+
   return (
     <div className="h-full relative">
       <PositionsTable
+        pubKey={pubKey}
+        pubKeys={pubKeys}
         rowData={error ? [] : data}
         ref={gridRef}
         onMarketClick={onMarketClick}
@@ -86,6 +83,7 @@ export const PositionsManager = ({
         onRowDataUpdated={updateRowCount}
         {...bottomPlaceholderProps}
         storeKey={storeKey}
+        multipleKeys={partyIds.length > 1}
       />
       <div className="pointer-events-none absolute inset-0">
         <AsyncRenderer

libs/positions/src/lib/positions-table.spec.tsx

@@ -8,29 +8,27 @@ import { PositionStatus, PositionStatusMapping } from '@vegaprotocol/types';
 import type { ICellRendererParams } from 'ag-grid-community';
 
 const singleRow: Position = {
-  marketName: 'ETH/BTC (31 july 2022)',
-  averageEntryPrice: '133',
-  capitalUtilisation: 11,
-  currentLeverage: 1.1,
-  marketDecimalPlaces: 1,
-  positionDecimalPlaces: 0,
-  decimals: 2,
-  totalBalance: '123456',
-  assetSymbol: 'BTC',
+  partyId: 'partyId',
   assetId: 'asset-id',
-  lowMarginLevel: false,
+  assetSymbol: 'BTC',
+  averageEntryPrice: '133',
+  currentLeverage: 1.1,
+  decimals: 2,
+  lossSocializationAmount: '0',
+  marginAccountBalance: '12345600',
+  marketDecimalPlaces: 1,
   marketId: 'string',
+  marketName: 'ETH/BTC (31 july 2022)',
   marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
   markPrice: '123',
   notional: '12300',
   openVolume: '100',
+  positionDecimalPlaces: 0,
   realisedPNL: '123',
-  unrealisedPNL: '456',
-  searchPrice: '0',
-  updatedAt: '2022-07-27T15:02:58.400Z',
-  marginAccountBalance: '12345600',
   status: PositionStatus.POSITION_STATUS_UNSPECIFIED,
-  lossSocializationAmount: '0',
+  totalBalance: '123456',
+  unrealisedPNL: '456',
+  updatedAt: '2022-07-27T15:02:58.400Z',
 };
 
 const singleRowData = [singleRow];
@@ -175,6 +173,7 @@ it('displays close button', async () => {
     render(
       <PositionsTable
         rowData={singleRowData}
+        pubKey={singleRowData[0].partyId}
         onClose={() => {
           return;
         }}

libs/positions/src/lib/positions-table.stories.tsx

@@ -15,69 +15,51 @@ const Template: Story = (args) => (
 
 export const Primary = Template.bind({});
 const longPosition: Position = {
-  marketName: 'BTC/USD (31 july 2022)',
+  assetId: 'BTC',
+  assetSymbol: 'BTC',
   averageEntryPrice: '1134564',
-  capitalUtilisation: 10,
   currentLeverage: 11,
   decimals: 2,
-  marketDecimalPlaces: 2,
-  positionDecimalPlaces: 2,
-  // generalAccountBalance: '0',
-  totalBalance: '45353',
-  assetSymbol: 'BTC',
-  // leverageInitial: '0',
-  // leverageMaintenance: '0',
-  // leverageRelease: '0',
-  // leverageSearch: '0',
-  lowMarginLevel: false,
+  lossSocializationAmount: '0',
   marginAccountBalance: new BigNumber('0').toString(),
-  // marginMaintenance: '0',
-  // marginSearch: '0',
-  // marginInitial: '0',
+  marketDecimalPlaces: 2,
   marketId: 'marketId1',
+  marketName: 'BTC/USD (31 july 2022)',
   marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
   markPrice: '1131894',
   notional: '46667989',
   openVolume: '4123',
+  positionDecimalPlaces: 2,
   realisedPNL: '45',
-  unrealisedPNL: '45',
-  searchPrice: '1132123',
-  updatedAt: '2022-07-27T15:02:58.400Z',
-  lossSocializationAmount: '0',
   status: Schema.PositionStatus.POSITION_STATUS_UNSPECIFIED,
+  totalBalance: '45353',
+  unrealisedPNL: '45',
+  updatedAt: '2022-07-27T15:02:58.400Z',
+  partyId: 'partyId',
 };
 
 const shortPosition: Position = {
-  marketName: 'ETH/USD (31 august 2022)',
+  assetId: 'ETH',
+  assetSymbol: 'ETH',
   averageEntryPrice: '23976',
-  capitalUtilisation: 87,
   currentLeverage: 7,
   decimals: 2,
-  marketDecimalPlaces: 2,
-  positionDecimalPlaces: 2,
-  // generalAccountBalance: '0',
-  totalBalance: '3856',
-  assetSymbol: 'ETH',
-  // leverageInitial: '0',
-  // leverageMaintenance: '0',
-  // leverageRelease: '0',
-  // leverageSearch: '0',
-  lowMarginLevel: false,
+  lossSocializationAmount: '0',
   marginAccountBalance: new BigNumber('0').toString(),
-  // marginMaintenance: '0',
-  // marginSearch: '0',
-  // marginInitial: '0',
+  marketDecimalPlaces: 2,
   marketId: 'marketId2',
+  marketName: 'ETH/USD (31 august 2022)',
   marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
   markPrice: '24123',
   notional: '836344',
   openVolume: '-3467',
+  positionDecimalPlaces: 2,
   realisedPNL: '0',
-  unrealisedPNL: '0',
-  searchPrice: '0',
-  updatedAt: '2022-07-26T14:01:34.800Z',
-  lossSocializationAmount: '0',
   status: Schema.PositionStatus.POSITION_STATUS_UNSPECIFIED,
+  totalBalance: '3856',
+  unrealisedPNL: '0',
+  updatedAt: '2022-07-26T14:01:34.800Z',
+  partyId: 'partyId',
 };
 
 Primary.args = {

libs/positions/src/lib/positions-table.tsx

@@ -42,6 +42,7 @@ import { PositionStatus, PositionStatusMapping } from '@vegaprotocol/types';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { PositionTableActions } from './position-actions-dropdown';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 
 interface Props extends TypedDataAgGrid<Position> {
   onClose?: (data: Position) => void;
@@ -49,6 +50,9 @@ interface Props extends TypedDataAgGrid<Position> {
   style?: CSSProperties;
   isReadOnly: boolean;
   storeKey?: string;
+  multipleKeys?: boolean;
+  pubKeys?: VegaWalletContextShape['pubKeys'];
+  pubKey?: VegaWalletContextShape['pubKey'];
 }
 
 export interface AmountCellProps {
@@ -83,7 +87,18 @@ export const AmountCell = ({ valueFormatted }: AmountCellProps) => {
 AmountCell.displayName = 'AmountCell';
 
 export const PositionsTable = forwardRef<AgGridReact, Props>(
-  ({ onClose, onMarketClick, ...props }, ref) => {
+  (
+    {
+      onClose,
+      onMarketClick,
+      multipleKeys,
+      isReadOnly,
+      pubKeys,
+      pubKey,
+      ...props
+    },
+    ref
+  ) => {
     const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
     return (
       <AgGrid
@@ -107,6 +122,21 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
         }}
         {...props}
       >
+        {multipleKeys ? (
+          <AgGridColumn
+            headerName={t('Vega key')}
+            field="partyId"
+            valueGetter={({
+              data,
+            }: VegaValueGetterParams<Position, 'partyId'>) =>
+              (data?.partyId &&
+                pubKeys &&
+                pubKeys.find((key) => key.publicKey === data.partyId)?.name) ||
+              data?.partyId
+            }
+            minWidth={190}
+          />
+        ) : null}
         <AgGridColumn
           headerName={t('Market')}
           field="marketName"
@@ -267,55 +297,61 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
           }}
           minWidth={100}
         />
-        <AgGridColumn
-          headerName={t('Leverage')}
-          field="currentLeverage"
-          type="rightAligned"
-          filter="agNumberColumnFilter"
-          cellRendererSelector={(): CellRendererSelectorResult => {
-            return {
-              component: PriceFlashCell,
-            };
-          }}
-          valueFormatter={({
-            value,
-          }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
-            value === undefined ? undefined : formatNumber(value.toString(), 1)
-          }
-          minWidth={100}
-        />
-        <AgGridColumn
-          headerName={t('Margin allocated')}
-          field="marginAccountBalance"
-          type="rightAligned"
-          filter="agNumberColumnFilter"
-          cellRendererSelector={(): CellRendererSelectorResult => {
-            return {
-              component: PriceFlashCell,
-            };
-          }}
-          valueGetter={({
-            data,
-          }: VegaValueGetterParams<Position, 'marginAccountBalance'>) => {
-            return !data
-              ? undefined
-              : toBigNum(data.marginAccountBalance, data.decimals).toNumber();
-          }}
-          valueFormatter={({
-            data,
-          }: VegaValueFormatterParams<Position, 'marginAccountBalance'>):
-            | string
-            | undefined => {
-            if (!data) {
-              return undefined;
+        {multipleKeys ? null : (
+          <AgGridColumn
+            headerName={t('Leverage')}
+            field="currentLeverage"
+            type="rightAligned"
+            filter="agNumberColumnFilter"
+            cellRendererSelector={(): CellRendererSelectorResult => {
+              return {
+                component: PriceFlashCell,
+              };
+            }}
+            valueFormatter={({
+              value,
+            }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
+              value === undefined
+                ? undefined
+                : formatNumber(value.toString(), 1)
             }
-            return addDecimalsFormatNumber(
-              data.marginAccountBalance,
-              data.decimals
-            );
-          }}
-          minWidth={100}
-        />
+            minWidth={100}
+          />
+        )}
+        {multipleKeys ? null : (
+          <AgGridColumn
+            headerName={t('Margin allocated')}
+            field="marginAccountBalance"
+            type="rightAligned"
+            filter="agNumberColumnFilter"
+            cellRendererSelector={(): CellRendererSelectorResult => {
+              return {
+                component: PriceFlashCell,
+              };
+            }}
+            valueGetter={({
+              data,
+            }: VegaValueGetterParams<Position, 'marginAccountBalance'>) => {
+              return !data
+                ? undefined
+                : toBigNum(data.marginAccountBalance, data.decimals).toNumber();
+            }}
+            valueFormatter={({
+              data,
+            }: VegaValueFormatterParams<Position, 'marginAccountBalance'>):
+              | string
+              | undefined => {
+              if (!data) {
+                return undefined;
+              }
+              return addDecimalsFormatNumber(
+                data.marginAccountBalance,
+                data.decimals
+              );
+            }}
+            minWidth={100}
+          />
+        )}
         <AgGridColumn
           headerName={t('Realised PNL')}
           field="realisedPNL"
@@ -385,13 +421,15 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
           }}
           minWidth={150}
         />
-        {onClose && !props.isReadOnly ? (
+        {onClose && !isReadOnly ? (
           <AgGridColumn
             {...COL_DEFS.actions}
             cellRenderer={({ data }: VegaICellRendererParams<Position>) => {
               return (
                 <div className="flex gap-2 items-center justify-end">
-                  {data?.openVolume && data?.openVolume !== '0' ? (
+                  {data?.openVolume &&
+                  data?.openVolume !== '0' &&
+                  data.partyId === pubKey ? (
                     <ButtonLink
                       data-testid="close-position"
                       onClick={() => data && onClose(data)}

libs/positions/src/lib/positions.mock.ts

@@ -12,16 +12,12 @@ export const positionsQuery = (
   override?: PartialDeep<PositionsQuery>
 ): PositionsQuery => {
   const defaultResult: PositionsQuery = {
-    party: {
-      __typename: 'Party',
-      id: 'vega-0', // VEGA PUBLIC KEY
-      positionsConnection: {
-        __typename: 'PositionConnection',
-        edges: positionFields.map((node) => ({
-          __typename: 'PositionEdge',
-          node,
-        })),
-      },
+    positions: {
+      __typename: 'PositionConnection',
+      edges: positionFields.map((node) => ({
+        __typename: 'PositionEdge',
+        node,
+      })),
     },
   };
 
@@ -59,6 +55,10 @@ const positionFields: PositionFieldsFragment[] = [
       id: 'market-0',
       __typename: 'Market',
     },
+    party: {
+      id: '02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65',
+      __typename: 'Party',
+    },
     lossSocializationAmount: '0',
     positionStatus: PositionStatus.POSITION_STATUS_UNSPECIFIED,
   },
@@ -73,6 +73,10 @@ const positionFields: PositionFieldsFragment[] = [
       id: 'market-1',
       __typename: 'Market',
     },
+    party: {
+      id: '02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65',
+      __typename: 'Party',
+    },
     lossSocializationAmount: '0',
     positionStatus: PositionStatus.POSITION_STATUS_UNSPECIFIED,
   },
@@ -87,6 +91,10 @@ const positionFields: PositionFieldsFragment[] = [
       id: 'market-2',
       __typename: 'Market',
     },
+    party: {
+      id: '02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65',
+      __typename: 'Party',
+    },
     lossSocializationAmount: '0',
     positionStatus: PositionStatus.POSITION_STATUS_UNSPECIFIED,
   },

libs/positions/src/lib/use-open-volume.ts

@@ -14,7 +14,7 @@ export const useOpenVolume = (
   useDataProvider({
     dataProvider: openVolumeDataProvider,
     update,
-    variables: { partyId: partyId || '', marketId },
+    variables: { partyIds: partyId ? [partyId] : [], marketId },
     skip: !partyId,
   });
   return openVolume;

libs/positions/src/lib/use-positions-data.spec.tsx

@@ -59,7 +59,7 @@ describe('usePositionData Hook', () => {
     .mockImplementation((id: string) =>
       mockData.find((position) => position.marketId === id)
     );
-  const partyId = 'partyId';
+  const partyIds = ['partyId'];
   const anUpdatedOne = {
     marketId: 'market-1',
     openVolume: '1',
@@ -75,14 +75,14 @@ describe('usePositionData Hook', () => {
   };
 
   it('should return proper data', async () => {
-    const { result } = renderHook(() => usePositionsData(partyId, gridRef), {
+    const { result } = renderHook(() => usePositionsData(partyIds, gridRef), {
       wrapper: MockedProvider,
     });
     expect(result.current.data?.length ?? 0).toEqual(5);
   });
 
   it('should call mockRefreshInfiniteCache', async () => {
-    renderHook(() => usePositionsData(partyId, gridRef), {
+    renderHook(() => usePositionsData(partyIds, gridRef), {
       wrapper: MockedProvider,
     });
     await waitFor(() => {
@@ -99,7 +99,7 @@ describe('usePositionData Hook', () => {
       data: mockData,
       loading: false,
     };
-    const { result } = renderHook(() => usePositionsData(partyId, gridRef), {
+    const { result } = renderHook(() => usePositionsData(partyIds, gridRef), {
       wrapper: MockedProvider,
     });
     expect(result.current.data).toEqual([]);

libs/positions/src/lib/use-positions-data.tsx

@@ -9,15 +9,22 @@ import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { GetRowsParams } from '@vegaprotocol/datagrid';
 import isEqual from 'lodash/isEqual';
 
-export const getRowId = ({ data }: { data: Position }) => data.marketId;
+export const getRowId = ({
+  data,
+}: {
+  data: Position & { isLastPlaceholder?: boolean; id?: string };
+}) =>
+  data.isLastPlaceholder && data.id
+    ? data.id
+    : `${data.partyId}-${data.marketId}`;
 
 export const usePositionsData = (
-  partyId: string,
+  partyIds: string[],
   gridRef: RefObject<AgGridReact>
 ) => {
   const variables = useMemo<PositionsQueryVariables>(
-    () => ({ partyId }),
-    [partyId]
+    () => ({ partyIds }),
+    [partyIds]
   );
   const dataRef = useRef<Position[] | null>(null);
   const update = useCallback(
@@ -28,14 +35,16 @@ export const usePositionsData = (
 
       const update: Position[] = [];
       const add: Position[] = [];
-      data?.forEach((d) => {
-        const rowNode = gridRef.current?.api?.getRowNode(d.marketId);
+      data?.forEach((row) => {
+        const rowNode = gridRef.current?.api?.getRowNode(
+          getRowId({ data: row })
+        );
         if (rowNode) {
-          if (!isEqual(rowNode.data, d)) {
-            update.push(d);
+          if (!isEqual(rowNode.data, row)) {
+            update.push(row);
           }
         } else {
-          add.push(d);
+          add.push(row);
         }
       });
       gridRef.current?.api?.applyTransaction({

libs/react-helpers/src/hooks/use-yesterday.spec.ts

@@ -1,5 +1,5 @@
 import { act } from 'react-dom/test-utils';
-import { now, useYesterday } from './use-yesterday';
+import { createAgo, now } from './use-yesterday';
 import { renderHook } from '@testing-library/react';
 
 describe('now', () => {
@@ -25,33 +25,41 @@ describe('now', () => {
   );
 });
 
-describe('useYesterday', () => {
-  beforeAll(() => {
-    jest.useFakeTimers().setSystemTime(new Date('1970-01-05T14:36:20.100Z'));
+describe('createAgo', () => {
+  beforeEach(() => {
+    jest.useFakeTimers().setSystemTime(new Date('1970-01-30T14:36:20.100Z'));
   });
   afterAll(() => {
     jest.useRealTimers();
   });
-  it('returns yesterday timestamp rounded by 5 minutes', () => {
-    const { result, rerender } = renderHook(() => useYesterday());
-    expect(result.current).toEqual(
-      new Date('1970-01-04T14:35:00.000Z').getTime()
+  it.each([
+    ['yesterday', 24 * 60 * 60 * 1000, '1970-01-29T14:35:00.000Z'],
+    ['2 days ago', 2 * 24 * 60 * 60 * 1000, '1970-01-28T14:35:00.000Z'],
+    ['5 days ago', 5 * 24 * 60 * 60 * 1000, '1970-01-25T14:35:00.000Z'],
+    ['20 days ago', 20 * 24 * 60 * 60 * 1000, '1970-01-10T14:35:00.000Z'],
+  ])('returns %s timestamp rounded by 5 minutes', (_, ago, expectedTime) => {
+    const { result, rerender } = renderHook(() =>
+      createAgo(ago)(5 * 60 * 1000)
     );
+    expect(result.current).toEqual(new Date(expectedTime).getTime());
     rerender();
     rerender();
     rerender();
-    expect(result.current).toEqual(
-      new Date('1970-01-04T14:35:00.000Z').getTime()
-    );
+    expect(result.current).toEqual(new Date(expectedTime).getTime());
   });
-  it('updates yesterday timestamp after 5 minutes', () => {
-    const { result, rerender } = renderHook(() => useYesterday());
+  it.each([
+    ['yesterday', 24 * 60 * 60 * 1000, '1970-01-29T14:40:00.000Z'],
+    ['2 days ago', 2 * 24 * 60 * 60 * 1000, '1970-01-28T14:40:00.000Z'],
+    ['5 days ago', 5 * 24 * 60 * 60 * 1000, '1970-01-25T14:40:00.000Z'],
+    ['20 days ago', 20 * 24 * 60 * 60 * 1000, '1970-01-10T14:40:00.000Z'],
+  ])('updates %s timestamp after 5 minutes', (_, ago, expectedTime) => {
+    const { result, rerender } = renderHook(() =>
+      createAgo(ago)(5 * 60 * 1000)
+    );
     act(() => {
       jest.advanceTimersByTime(5 * 60 * 1000);
       rerender();
     });
-    expect(result.current).toEqual(
-      new Date('1970-01-04T14:40:00.000Z').getTime()
-    );
+    expect(result.current).toEqual(new Date(expectedTime).getTime());
   });
 });

libs/react-helpers/src/hooks/use-yesterday.ts

@@ -1,22 +1,30 @@
 import { useEffect, useRef } from 'react';
 
-const DEFAULT_ROUND_BY_MS = 5 * 60 * 1000;
-const TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1000;
+const MINUTE = 60 * 1000;
+const DAY = 24 * 60 * 60 * 1000;
 
 export const now = (roundBy = 1) => {
   return Math.floor((Math.round(Date.now() / 1000) * 1000) / roundBy) * roundBy;
 };
 
+export const createAgo =
+  (ago: number) =>
+  (roundBy = 5 * MINUTE) => {
+    const timestamp = useRef<number>(now(roundBy) - ago);
+    useEffect(() => {
+      const i = setInterval(() => {
+        timestamp.current = now(roundBy) - ago;
+      }, roundBy);
+      return () => clearInterval(i);
+    }, [roundBy]);
+    return timestamp.current;
+  };
+
 /**
  * Returns the yesterday's timestamp rounded by given number (in milliseconds; 5 minutes by default)
  */
-export const useYesterday = (roundBy = DEFAULT_ROUND_BY_MS) => {
-  const yesterday = useRef<number>(now(roundBy) - TWENTY_FOUR_HOURS_MS);
-  useEffect(() => {
-    const i = setInterval(() => {
-      yesterday.current = now(roundBy) - TWENTY_FOUR_HOURS_MS;
-    }, roundBy);
-    return () => clearInterval(i);
-  }, [roundBy]);
-  return yesterday.current;
-};
+export const useYesterday = createAgo(DAY);
+/**
+ * Returns the five days ago timestamp rounded by given number (in milliseconds; 5 minutes by default)
+ */
+export const useFiveDaysAgo = createAgo(5 * DAY);

package.json

@@ -86,6 +86,7 @@
     "recharts": "^2.1.2",
     "recursive-key-filter": "^1.0.2",
     "regenerator-runtime": "0.13.7",
+    "semver": "^7.5.1",
     "toml": "^3.0.0",
     "tslib": "^2.0.0",
     "uuid": "^8.3.2",
@@ -151,6 +152,7 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/react-window-infinite-loader": "^1.0.6",
+    "@types/semver": "^7.5.0",
     "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "5.35.1",
     "@typescript-eslint/parser": "5.35.1",

yarn.lock

@@ -7554,6 +7554,11 @@
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
 
+"@types/semver@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
+  integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
+
 "@types/serve-index@^1.9.1":
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
@@ -22055,6 +22060,13 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.5.1:
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.1.tgz#c90c4d631cf74720e46b21c1d37ea07edfab91ec"
+  integrity sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"