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

Merge branch 'master' of github.com:vegaprotocol/frontend-monorepo

Browse Source
This commit is contained in:
madalinaraicu 2022-07-17 15:10:54 +02:00
commit e9c1668da1
127 changed files with 3790 additions and 2019 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/capsule-cypress-nightly.yml vendored
View File

@ -12,7 +12,6 @@ jobs:
runs-on: ubuntu-latest
env:
GO111MODULE: 'on'
GOPROXY: ${{ secrets.GO_PROXY }}
steps:
#######
## Setup langs

1
.github/workflows/capsule-cypress.yml vendored
View File

@ -14,7 +14,6 @@ jobs:
if: ${{ github.event_name == 'pull_request' }}
env:
GO111MODULE: 'on'
GOPROXY: ${{ secrets.GO_PROXY }}
steps:
#######
## Setup langs

2
apps/explorer-e2e/cypress.config.js
View File

@ -15,6 +15,8 @@ module.exports = defineConfig({
videosFolder: '../../dist/cypress/apps/explorer-e2e/videos',
screenshotsFolder: '../../dist/cypress/apps/explorer-e2e/screenshots',
chromeWebSecurity: false,
viewportWidth: 1440,
viewportHeight: 900,
},
env: {
environment: 'CUSTOM',

2
apps/simple-trading-app-e2e/cypress.config.js
View File

@ -15,5 +15,7 @@ module.exports = defineConfig({
videosFolder: '../../dist/cypress/apps/explorer-e2e/videos',
screenshotsFolder: '../../dist/cypress/apps/explorer-e2e/screenshots',
chromeWebSecurity: false,
viewportWidth: 1440,
viewportHeight: 900,
},
});

5
apps/simple-trading-app-e2e/src/integration/market-selector.test.ts
View File

@ -42,8 +42,8 @@ describe('market selector', () => {
.find('[role="button"]')
.should('have.length', 1);
cy.get('input[placeholder="Search"]').clear();
cy.get('input[placeholder="Search"]').type('a');
const filtered = markets.filter((market) => market.name.match(/a/i));
cy.get('input[placeholder="Search"]').type('app');
const filtered = markets.filter((market) => market.name.match(/app/i));
cy.getByTestId('market-pane')
.children()
.find('[role="button"]')
@ -76,7 +76,6 @@ describe('market selector', () => {
.children()
.find('[role="button"]')
.should('have.length', markets.length);
cy.pause();
cy.getByTestId('dialog-close').click();
cy.get('input[placeholder="Search"]').should(
'have.value',

476
apps/static/src/assets/mainnet-tranches.json
View File

@ -71,7 +71,7 @@
"tranche_end": "2023-12-05T00:00:00.000Z",
"total_added": "129999.45",
"total_removed": "0",
"locked_amount": "120687.60294909203186805",
"locked_amount": "119916.524711292323769405",
"deposits": [
{
"amount": "129999.45",
@ -521,7 +521,7 @@
"tranche_end": "2023-04-05T00:00:00.000Z",
"total_added": "97499.58",
"total_removed": "0",
"locked_amount": "61605.4975572212290407",
"locked_amount": "60849.141635126632187184",
"deposits": [
{
"amount": "97499.58",
@ -554,7 +554,7 @@
"tranche_end": "2023-04-05T00:00:00.000Z",
"total_added": "135173.4239508",
"total_removed": "0",
"locked_amount": "84204.0794152667057160273426",
"locked_amount": "83170.27144916586454715062596",
"deposits": [
{
"amount": "135173.4239508",
@ -587,7 +587,7 @@
"tranche_end": "2023-04-05T00:00:00.000Z",
"total_added": "32499.86",
"total_removed": "0",
"locked_amount": "25916.368952284834442322",
"locked_amount": "25598.183077427765580772",
"deposits": [
{
"amount": "32499.86",
@ -620,7 +620,7 @@
"tranche_end": "2023-04-05T00:00:00.000Z",
"total_added": "10833.29",
"total_removed": "0",
"locked_amount": "8435.52660747719195897",
"locked_amount": "8331.960192813861431555",
"deposits": [
{
"amount": "10833.29",
@ -708,7 +708,7 @@
"tranche_end": "2022-11-01T00:00:00.000Z",
"total_added": "22500",
"total_removed": "0",
"locked_amount": "13420.127094655797",
"locked_amount": "13022.659080615942",
"deposits": [
{
"amount": "15000",
@ -794,7 +794,7 @@
"tranche_end": "2023-06-02T00:00:00.000Z",
"total_added": "1939928.38",
"total_removed": "179856.049568108351",
"locked_amount": "1715358.109875174368620276",
"locked_amount": "1698082.621969374507314448",
"deposits": [
{
"amount": "1852091.69",
@ -1846,7 +1846,7 @@
"tranche_end": "2022-09-30T00:00:00.000Z",
"total_added": "60916.66666633337",
"total_removed": "19238.601152747179372649",
"locked_amount": "12143.787034497502163478850106205",
"locked_amount": "11636.0848715333587885626384956186",
"deposits": [
{
"amount": "2833.333333",
@ -3330,8 +3330,8 @@
"tranche_id": 10,
"tranche_start": "2021-07-15T23:37:11.000Z",
"tranche_end": "2021-07-15T23:37:11.000Z",
"total_added": "3904968.150000000000000001",
"total_removed": "3896778.640000000000000001",
"total_added": "4170968.150000000000000001",
"total_removed": "4162778.640000000000000001",
"locked_amount": "0",
"deposits": [
{
@ -3339,6 +3339,11 @@
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
"tx": "0x167fe6c654897398dcfdab9305133b4410b15bac8f5a30bb1260a94a14a65aad"
},
{
"amount": "266000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
"tx": "0x38ac30c041395b629839409fb10385426997cf40be0e3026dd726e7c77e019cc"
},
{
"amount": "30000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
@ -3786,6 +3791,11 @@
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
"tx": "0x873061bbe5702251e087833b87033296fef9c6fb4f6c2be7586e1e74e20a4f52"
},
{
"amount": "266000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
"tx": "0x5b5515073f03593ae5cddd66030154af5847aedbd680835bbc1998a168e74699"
},
{
"amount": "30000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
@ -4177,6 +4187,12 @@
"tranche_id": 10,
"tx": "0x167fe6c654897398dcfdab9305133b4410b15bac8f5a30bb1260a94a14a65aad"
},
{
"amount": "266000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
"tranche_id": 10,
"tx": "0x38ac30c041395b629839409fb10385426997cf40be0e3026dd726e7c77e019cc"
},
{
"amount": "30000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
@ -4281,6 +4297,12 @@
"tranche_id": 10,
"tx": "0x873061bbe5702251e087833b87033296fef9c6fb4f6c2be7586e1e74e20a4f52"
},
{
"amount": "266000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
"tranche_id": 10,
"tx": "0x5b5515073f03593ae5cddd66030154af5847aedbd680835bbc1998a168e74699"
},
{
"amount": "30000",
"user": "0xb2d6DEC77558Cf8EdB7c428d23E70Eab0688544f",
@ -4372,8 +4394,8 @@
"tx": "0xac16a4ce688d40a482a59914d68c3a676592f8804ee8f0781b66a4ba5ccfbdfc"
}
],
"total_tokens": "745651",
"withdrawn_tokens": "745651",
"total_tokens": "1011651",
"withdrawn_tokens": "1011651",
"remaining_tokens": "0"
},
{
@ -5393,9 +5415,9 @@
"tranche_id": 11,
"tranche_start": "2021-09-03T00:00:00.000Z",
"tranche_end": "2022-09-03T00:00:00.000Z",
"total_added": "24284.000000000000000003",
"total_removed": "6875.88980798578",
"locked_amount": "3376.2614414003058740004170970319634705",
"total_added": "24801.000000000000000003",
"total_removed": "7424.31284562443",
"locked_amount": "3227.28360254946787092039038146879756476",
"deposits": [
{
"amount": "25",
@ -5862,6 +5884,41 @@
"user": "0x44d145E145B7811ad309032D4c5CdeB1bf044719",
"tx": "0x8e664532cfa2031eb5f6ce7c99cd673fa767599654a35b73d76407ed46763ad4"
},
{
"amount": "60",
"user": "0x44d145E145B7811ad309032D4c5CdeB1bf044719",
"tx": "0x23fdff0f268bba36817cb496454cbc4be34306eaaaf330d5d26134849c480153"
},
{
"amount": "200",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tx": "0xf88b8ed5ce899f00f466830936599112ea678a4e5911801fb3e445c22eb0295f"
},
{
"amount": "100",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tx": "0x0c0ea0139cc752d22c0f8a6b3ffa5c4bcdca1c5604089ebd0f34898f1049db61"
},
{
"amount": "90",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tx": "0x29371816157718f7d5136d0ed8a0f1e09045ee3cfcd67199d45e3f4157f7e011"
},
{
"amount": "35",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tx": "0x6a081b2c5dfa2d5c916a598569519605322721c5511d26cf4aed8e08e49cf700"
},
{
"amount": "30",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tx": "0xc37be614ef14bbbedc808ffc7651fbb7a3c04e4d1612f00f19299da7916003e6"
},
{
"amount": "2",
"user": "0x667b28dAAe318F230aA319cf06fa74c050151903",
"tx": "0x46c9ef536fda8271cf157260c8ad6c67c058c5dddef03fdc1514a5d68212fcda"
},
{
"amount": "75",
"user": "0x3a380f7CFdEeb723228cA57d2795EA215094000d",
@ -9084,6 +9141,11 @@
"user": "0x3a380f7CFdEeb723228cA57d2795EA215094000d",
"tx": "0x4c4e0fd7a8adbad24d6cc6e8fdf4f832ac9a39b2a04b954ec0d77e36a79c0e90"
},
{
"amount": "548.42303763865",
"user": "0x44d145E145B7811ad309032D4c5CdeB1bf044719",
"tx": "0x48c16186c1e0021ee4b7194df991c93ec3a26971d009a9a3aaaec67c0abc89e9"
},
{
"amount": "4.429693048",
"user": "0xc5467213593778E528f0eB8117cc7AFBC5b7491b",
@ -10086,12 +10148,79 @@
"user": "0x44d145E145B7811ad309032D4c5CdeB1bf044719",
"tranche_id": 11,
"tx": "0x8e664532cfa2031eb5f6ce7c99cd673fa767599654a35b73d76407ed46763ad4"
},
{
"amount": "60",
"user": "0x44d145E145B7811ad309032D4c5CdeB1bf044719",
"tranche_id": 11,
"tx": "0x23fdff0f268bba36817cb496454cbc4be34306eaaaf330d5d26134849c480153"
}
],
"withdrawals": [
{
"amount": "548.42303763865",
"user": "0x44d145E145B7811ad309032D4c5CdeB1bf044719",
"tranche_id": 11,
"tx": "0x48c16186c1e0021ee4b7194df991c93ec3a26971d009a9a3aaaec67c0abc89e9"
}
],
"total_tokens": "635",
"withdrawn_tokens": "548.42303763865",
"remaining_tokens": "86.57696236135"
},
{
"address": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"deposits": [
{
"amount": "200",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tranche_id": 11,
"tx": "0xf88b8ed5ce899f00f466830936599112ea678a4e5911801fb3e445c22eb0295f"
},
{
"amount": "100",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tranche_id": 11,
"tx": "0x0c0ea0139cc752d22c0f8a6b3ffa5c4bcdca1c5604089ebd0f34898f1049db61"
},
{
"amount": "90",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tranche_id": 11,
"tx": "0x29371816157718f7d5136d0ed8a0f1e09045ee3cfcd67199d45e3f4157f7e011"
},
{
"amount": "35",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tranche_id": 11,
"tx": "0x6a081b2c5dfa2d5c916a598569519605322721c5511d26cf4aed8e08e49cf700"
},
{
"amount": "30",
"user": "0x94097462EF7c43D0aC732E7B18f830096D95207C",
"tranche_id": 11,
"tx": "0xc37be614ef14bbbedc808ffc7651fbb7a3c04e4d1612f00f19299da7916003e6"
}
],
"withdrawals": [],
"total_tokens": "575",
"total_tokens": "455",
"withdrawn_tokens": "0",
"remaining_tokens": "575"
"remaining_tokens": "455"
},
{
"address": "0x667b28dAAe318F230aA319cf06fa74c050151903",
"deposits": [
{
"amount": "2",
"user": "0x667b28dAAe318F230aA319cf06fa74c050151903",
"tranche_id": 11,
"tx": "0x46c9ef536fda8271cf157260c8ad6c67c058c5dddef03fdc1514a5d68212fcda"
}
],
"withdrawals": [],
"total_tokens": "2",
"withdrawn_tokens": "0",
"remaining_tokens": "2"
},
{
"address": "0x3a380f7CFdEeb723228cA57d2795EA215094000d",
@ -15925,7 +16054,7 @@
"tranche_end": "2023-06-05T00:00:00.000Z",
"total_added": "3732368.4671",
"total_removed": "106452.6400159857469",
"locked_amount": "2660409.42081862296035011689",
"locked_amount": "2633863.10512018801324199073",
"deposits": [
{
"amount": "1998.95815",
@ -16659,8 +16788,8 @@
"tranche_start": "2022-06-05T00:00:00.000Z",
"tranche_end": "2023-12-05T00:00:00.000Z",
"total_added": "15788853.065470999700000001",
"total_removed": "62889.84066484668888",
"locked_amount": "14657898.8329277585456883041909973431305758",
"total_removed": "64322.360020714867605",
"locked_amount": "14564249.2240429993620865617393038380967829",
"deposits": [
{
"amount": "16249.93",
@ -17209,6 +17338,21 @@
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
"tx": "0x148f389a5771abdc96c5a51c1fc0e306d135763c60f6839db6763690022a1a36"
},
{
"amount": "398.806145147265375",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
"tx": "0x4961efbe6ce942c38f74c5cbf8a5c7f8f6586c1bda1df0a17c7a1fd80aae6905"
},
{
"amount": "693.68209419841605",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
"tx": "0x1b34e389cc5a8530434dd873000f7b9f6289f08b21e9285601897ca428a72e5b"
},
{
"amount": "340.0311165224973",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
"tx": "0x85229baef1e2ddcb37b92221d742c81c70e47d34002d6eaa8fb7c7048e9119d9"
},
{
"amount": "579.636872035866225",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@ -17411,6 +17555,24 @@
"tranche_id": 2,
"tx": "0x148f389a5771abdc96c5a51c1fc0e306d135763c60f6839db6763690022a1a36"
},
{
"amount": "398.806145147265375",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
"tranche_id": 2,
"tx": "0x4961efbe6ce942c38f74c5cbf8a5c7f8f6586c1bda1df0a17c7a1fd80aae6905"
},
{
"amount": "693.68209419841605",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
"tranche_id": 2,
"tx": "0x1b34e389cc5a8530434dd873000f7b9f6289f08b21e9285601897ca428a72e5b"
},
{
"amount": "340.0311165224973",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
"tranche_id": 2,
"tx": "0x85229baef1e2ddcb37b92221d742c81c70e47d34002d6eaa8fb7c7048e9119d9"
},
{
"amount": "579.636872035866225",
"user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@ -17551,8 +17713,8 @@
}
],
"total_tokens": "194999.1675",
"withdrawn_tokens": "13652.2521999360072",
"remaining_tokens": "181346.9153000639928"
"withdrawn_tokens": "15084.771555804185925",
"remaining_tokens": "179914.395944195814075"
},
{
"address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@ -18991,8 +19153,8 @@
"tranche_start": "2021-11-05T00:00:00.000Z",
"tranche_end": "2023-05-05T00:00:00.000Z",
"total_added": "14597706.0446472999",
"total_removed": "2413723.131389663831937297",
"locked_amount": "7880269.64303812390931654596122858",
"total_removed": "2416064.425425840477256547",
"locked_amount": "7793368.01462647593665331865886541",
"deposits": [
{
"amount": "129284.449",
@ -19276,6 +19438,26 @@
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tx": "0x5b2ba568e3f60b624456972f011948b6870274b94ddba2f11eb876b4e875be1a"
},
{
"amount": "430.6491357418236805",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tx": "0x63919ba0a519b04dfe5a5b222e5952117f1cdbb1e6194ae85b22a4ed8cef6fa5"
},
{
"amount": "586.7623058017099795",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tx": "0xd2d49b3e73cd00446605bc1838132e4a985c89452600447ec1886cd64f54c200"
},
{
"amount": "694.13150009555900275",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tx": "0xc541f5d785515b5ebd43f50aeb4bb972ae35998638f1c803f46aaab7810ace7e"
},
{
"amount": "629.7510945375526565",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tx": "0xd3b5acda2db6f999875f4a8c747cb0f711cd4fc4b183c2d05618822d7b988237"
},
{
"amount": "509.31853983395369725",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@ -21004,6 +21186,30 @@
"tranche_id": 3,
"tx": "0x5b2ba568e3f60b624456972f011948b6870274b94ddba2f11eb876b4e875be1a"
},
{
"amount": "430.6491357418236805",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tranche_id": 3,
"tx": "0x63919ba0a519b04dfe5a5b222e5952117f1cdbb1e6194ae85b22a4ed8cef6fa5"
},
{
"amount": "586.7623058017099795",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tranche_id": 3,
"tx": "0xd2d49b3e73cd00446605bc1838132e4a985c89452600447ec1886cd64f54c200"
},
{
"amount": "694.13150009555900275",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tranche_id": 3,
"tx": "0xc541f5d785515b5ebd43f50aeb4bb972ae35998638f1c803f46aaab7810ace7e"
},
{
"amount": "629.7510945375526565",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
"tranche_id": 3,
"tx": "0xd3b5acda2db6f999875f4a8c747cb0f711cd4fc4b183c2d05618822d7b988237"
},
{
"amount": "509.31853983395369725",
"user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@ -22350,8 +22556,8 @@
}
],
"total_tokens": "359123.469575",
"withdrawn_tokens": "164980.154441085289241",
"remaining_tokens": "194143.315133914710759"
"withdrawn_tokens": "167321.44847726193456025",
"remaining_tokens": "191802.02109773806543975"
},
{
"address": "0xBdd412797c1B78535Afc5F71503b91fAbD0160fB",
@ -23414,8 +23620,8 @@
"tranche_start": "2021-10-05T00:00:00.000Z",
"tranche_end": "2023-04-05T00:00:00.000Z",
"total_added": "5778205.3912159303",
"total_removed": "1543188.041113165491270727",
"locked_amount": "2796638.79189818404440572191528324",
"total_removed": "1572374.955637071973431516",
"locked_amount": "2762303.432936069128726079669817045",
"deposits": [
{
"amount": "552496.6455",
@ -23569,6 +23775,16 @@
"user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
"tx": "0x9c4cfa505550e13a41c2eb84a767412539ccae45bb280b5235423aadce942f2e"
},
{
"amount": "4864.10259512983202665",
"user": "0x6ae83EAB68b7112BaD5AfD72d6B24546AbFF137D",
"tx": "0x36fed3740bfbe979fd84ff55a1f65310eaf83047b27a9dc5516e083acfcc3b3f"
},
{
"amount": "24322.811928776650134139",
"user": "0xC24da173A250e9Ca5c54870639EbE5f88be5102d",
"tx": "0xc391f34bee2ee3186396191a8828e498e817ec73ebde827b525322561d6c10ac"
},
{
"amount": "4089.266768653121589",
"user": "0xafa64cCa337eFEE0AD827F6C2684e69275226e90",
@ -24191,6 +24407,12 @@
}
],
"withdrawals": [
{
"amount": "4864.10259512983202665",
"user": "0x6ae83EAB68b7112BaD5AfD72d6B24546AbFF137D",
"tranche_id": 4,
"tx": "0x36fed3740bfbe979fd84ff55a1f65310eaf83047b27a9dc5516e083acfcc3b3f"
},
{
"amount": "3536.43115201266299695",
"user": "0x6ae83EAB68b7112BaD5AfD72d6B24546AbFF137D",
@ -24223,8 +24445,8 @@
}
],
"total_tokens": "92082.572555",
"withdrawn_tokens": "42713.498699646151249",
"remaining_tokens": "49369.073855353848751"
"withdrawn_tokens": "47577.60129477598327565",
"remaining_tokens": "44504.97126022401672435"
},
{
"address": "0x1dC9B91DE003fd503F25cB5d114cf0fc68F7aFe6",
@ -24252,6 +24474,12 @@
}
],
"withdrawals": [
{
"amount": "24322.811928776650134139",
"user": "0xC24da173A250e9Ca5c54870639EbE5f88be5102d",
"tranche_id": 4,
"tx": "0xc391f34bee2ee3186396191a8828e498e817ec73ebde827b525322561d6c10ac"
},
{
"amount": "17683.07845319664597116",
"user": "0xC24da173A250e9Ca5c54870639EbE5f88be5102d",
@ -24290,8 +24518,8 @@
}
],
"total_tokens": "460415.072915097",
"withdrawn_tokens": "213567.593206108177102902",
"remaining_tokens": "246847.479708988822897098"
"withdrawn_tokens": "237890.405134884827237041",
"remaining_tokens": "222524.667780212172762959"
},
{
"address": "0xd66e4853c0880df150e7329974715BFC8d2da47D",
@ -24615,7 +24843,7 @@
"tranche_end": "2023-06-05T00:00:00.000Z",
"total_added": "472355.6199999996",
"total_removed": "279.2296426169",
"locked_amount": "421557.080277297961550599391172",
"locked_amount": "417350.6648096711466747044799594",
"deposits": [
{
"amount": "3000",
@ -50413,7 +50641,7 @@
"tranche_start": "2021-12-05T00:00:00.000Z",
"tranche_end": "2022-06-05T00:00:00.000Z",
"total_added": "171288.42",
"total_removed": "36329.8823647506377",
"total_removed": "38047.7065343307989",
"locked_amount": "0",
"deposits": [
{
@ -54678,6 +54906,61 @@
"user": "0x5cce57661D758497446B57592D31667aafd60465",
"tx": "0x8d9b31eaaecaa4f74f05f93d33e61d0691eba3a6f23a9033dbfcaeca1c9a00c4"
},
{
"amount": "250",
"user": "0x57a88037954e15AFFDf9bc29097e0B5f5A1BfF35",
"tx": "0x3da3cd5b323439c576ad7a3410d833da0da994ee652b29dd751a4c0edbf0ca99"
},
{
"amount": "250",
"user": "0x5f3Bce4B242d00ED748d48172C1f2D47A0bcB19B",
"tx": "0xc06577f7fd53a100da581edbc8231a870d7b148329c8aa250eb942473004e5e6"
},
{
"amount": "22.830993081",
"user": "0xe627552C6338855983a147fa5235E5D92a3C2891",
"tx": "0x3c75d0f2db07e4b2c54411e3d1a6124e63bc0f99ca4d171bd8679158aee3e698"
},
{
"amount": "117.3375178075",
"user": "0xE8E8Ee384f5751Df12b5FA53203Dae5BC739493A",
"tx": "0x6d40af7a502c2fb843a6bdd7313a5c66811e62cadc5a75521aa49d886635634d"
},
{
"amount": "116.827485434478",
"user": "0x204A4128c015Ca88E7279E07B35F62dca12b3BFc",
"tx": "0x04b50ec6c4ff0f0cc3d9f2b500e6e91e920c901c98241d4ea595c03dfef12dfb"
},
{
"amount": "117.344131565",
"user": "0xEa530644eD9fbb022bBDBe54c0CF73Be49C68D64",
"tx": "0xe297545c0eb18382b44e8bc9fdd1fb78db661757843ef2f5513d980a470ed873"
},
{
"amount": "116.1440755221832",
"user": "0x3752a11Ecf3b01fca00dDe8feB3DC421eBa8a279",
"tx": "0xa789793e6cad59188752a73b219c335d19aaf5a2c7199edf45db321a92a6c0c9"
},
{
"amount": "117.33996617",
"user": "0x23A9974c47827A596FF04930308ed49afAE3B32e",
"tx": "0x69b4d26b8ecf677bc94a8b715fd4c7f56cfb535f50cb8cbf01f06520917cf97f"
},
{
"amount": "110",
"user": "0x09a4E26d69821EDEffa5Eb29f134D0d8cad8EfC4",
"tx": "0xaf4d41f0ec93d00ba98766ffea1806375add6f99baf5a3f71033a78afcc8ffb2"
},
{
"amount": "250",
"user": "0xcF3c43cFF5C96FE9B65FE35dD2e7BF49DB66F1fE",
"tx": "0xf368a5e2e5cd7bcbfbbec26d2620397acf344da7363d34c845d35b8e0037e7bd"
},
{
"amount": "250",
"user": "0xC41d8caeD946723bFc670FCc837C8473437982F7",
"tx": "0x7169697982aca05b9a8e121d65c96458d745788f7e127523160a8803f3063626"
},
{
"amount": "60.4448387275",
"user": "0xEe3183EcE9ee7d73Fb7bA7F4eB262A2dE68C42B0",
@ -56736,6 +57019,12 @@
}
],
"withdrawals": [
{
"amount": "22.830993081",
"user": "0xe627552C6338855983a147fa5235E5D92a3C2891",
"tranche_id": 6,
"tx": "0x3c75d0f2db07e4b2c54411e3d1a6124e63bc0f99ca4d171bd8679158aee3e698"
},
{
"amount": "24.17784646",
"user": "0xe627552C6338855983a147fa5235E5D92a3C2891",
@ -56756,8 +57045,8 @@
}
],
"total_tokens": "100",
"withdrawn_tokens": "77.169006919",
"remaining_tokens": "22.830993081"
"withdrawn_tokens": "100",
"remaining_tokens": "0"
},
{
"address": "0x2394462d77c51A174D912E229d426917051af04F",
@ -62204,10 +62493,17 @@
"tx": "0x057f65938b1360b6d2c4ebf5e789c67897cf60cb6a13f947004def03891afbd8"
}
],
"withdrawals": [],
"withdrawals": [
{
"amount": "110",
"user": "0x09a4E26d69821EDEffa5Eb29f134D0d8cad8EfC4",
"tranche_id": 6,
"tx": "0xaf4d41f0ec93d00ba98766ffea1806375add6f99baf5a3f71033a78afcc8ffb2"
}
],
"total_tokens": "110",
"withdrawn_tokens": "0",
"remaining_tokens": "110"
"withdrawn_tokens": "110",
"remaining_tokens": "0"
},
{
"address": "0xc25d35024Dd497D3825115828994Bb08D12a3aa7",
@ -65914,10 +66210,17 @@
"tx": "0xb1425d9b0d5f10c5b06236d6f9d61ebddd21c4027e0f41deb5ec227a1753c715"
}
],
"withdrawals": [],
"withdrawals": [
{
"amount": "250",
"user": "0xcF3c43cFF5C96FE9B65FE35dD2e7BF49DB66F1fE",
"tranche_id": 6,
"tx": "0xf368a5e2e5cd7bcbfbbec26d2620397acf344da7363d34c845d35b8e0037e7bd"
}
],
"total_tokens": "250",
"withdrawn_tokens": "0",
"remaining_tokens": "250"
"withdrawn_tokens": "250",
"remaining_tokens": "0"
},
{
"address": "0x3db215C9a674496882ed88FfEdAAa477Fdd92644",
@ -66197,6 +66500,12 @@
}
],
"withdrawals": [
{
"amount": "117.3375178075",
"user": "0xE8E8Ee384f5751Df12b5FA53203Dae5BC739493A",
"tranche_id": 6,
"tx": "0x6d40af7a502c2fb843a6bdd7313a5c66811e62cadc5a75521aa49d886635634d"
},
{
"amount": "132.6624821925",
"user": "0xE8E8Ee384f5751Df12b5FA53203Dae5BC739493A",
@ -66205,8 +66514,8 @@
}
],
"total_tokens": "250",
"withdrawn_tokens": "132.6624821925",
"remaining_tokens": "117.3375178075"
"withdrawn_tokens": "250",
"remaining_tokens": "0"
},
{
"address": "0x23A9974c47827A596FF04930308ed49afAE3B32e",
@ -66219,6 +66528,12 @@
}
],
"withdrawals": [
{
"amount": "117.33996617",
"user": "0x23A9974c47827A596FF04930308ed49afAE3B32e",
"tranche_id": 6,
"tx": "0x69b4d26b8ecf677bc94a8b715fd4c7f56cfb535f50cb8cbf01f06520917cf97f"
},
{
"amount": "132.66003383",
"user": "0x23A9974c47827A596FF04930308ed49afAE3B32e",
@ -66227,8 +66542,8 @@
}
],
"total_tokens": "250",
"withdrawn_tokens": "132.66003383",
"remaining_tokens": "117.33996617"
"withdrawn_tokens": "250",
"remaining_tokens": "0"
},
{
"address": "0x3752a11Ecf3b01fca00dDe8feB3DC421eBa8a279",
@ -66241,6 +66556,12 @@
}
],
"withdrawals": [
{
"amount": "116.1440755221832",
"user": "0x3752a11Ecf3b01fca00dDe8feB3DC421eBa8a279",
"tranche_id": 6,
"tx": "0xa789793e6cad59188752a73b219c335d19aaf5a2c7199edf45db321a92a6c0c9"
},
{
"amount": "131.2759244778168",
"user": "0x3752a11Ecf3b01fca00dDe8feB3DC421eBa8a279",
@ -66249,8 +66570,8 @@
}
],
"total_tokens": "247.42",
"withdrawn_tokens": "131.2759244778168",
"remaining_tokens": "116.1440755221832"
"withdrawn_tokens": "247.42",
"remaining_tokens": "0"
},
{
"address": "0x204A4128c015Ca88E7279E07B35F62dca12b3BFc",
@ -66263,6 +66584,12 @@
}
],
"withdrawals": [
{
"amount": "116.827485434478",
"user": "0x204A4128c015Ca88E7279E07B35F62dca12b3BFc",
"tranche_id": 6,
"tx": "0x04b50ec6c4ff0f0cc3d9f2b500e6e91e920c901c98241d4ea595c03dfef12dfb"
},
{
"amount": "132.092514565522",
"user": "0x204A4128c015Ca88E7279E07B35F62dca12b3BFc",
@ -66271,8 +66598,8 @@
}
],
"total_tokens": "248.92",
"withdrawn_tokens": "132.092514565522",
"remaining_tokens": "116.827485434478"
"withdrawn_tokens": "248.92",
"remaining_tokens": "0"
},
{
"address": "0xEa530644eD9fbb022bBDBe54c0CF73Be49C68D64",
@ -66285,6 +66612,12 @@
}
],
"withdrawals": [
{
"amount": "117.344131565",
"user": "0xEa530644eD9fbb022bBDBe54c0CF73Be49C68D64",
"tranche_id": 6,
"tx": "0xe297545c0eb18382b44e8bc9fdd1fb78db661757843ef2f5513d980a470ed873"
},
{
"amount": "132.655868435",
"user": "0xEa530644eD9fbb022bBDBe54c0CF73Be49C68D64",
@ -66293,8 +66626,8 @@
}
],
"total_tokens": "250",
"withdrawn_tokens": "132.655868435",
"remaining_tokens": "117.344131565"
"withdrawn_tokens": "250",
"remaining_tokens": "0"
},
{
"address": "0xB93EB9807aC74B3004B38E5fB66605578C86A145",
@ -69208,10 +69541,17 @@
"tx": "0xb59405747c8088945a412703637a7b422f3639439ec2ee15e180c0a2a0d71ee4"
}
],
"withdrawals": [],
"withdrawals": [
{
"amount": "250",
"user": "0xC41d8caeD946723bFc670FCc837C8473437982F7",
"tranche_id": 6,
"tx": "0x7169697982aca05b9a8e121d65c96458d745788f7e127523160a8803f3063626"
}
],
"total_tokens": "250",
"withdrawn_tokens": "0",
"remaining_tokens": "250"
"withdrawn_tokens": "250",
"remaining_tokens": "0"
},
{
"address": "0xED380970F4f0746C56C033f00507634a985ec330",
@ -69757,10 +70097,17 @@
"tx": "0xe32a466fc780a0fb3fd84a804f622931ebfaf3f428bff0dc6d141270410e75f8"
}
],
"withdrawals": [],
"withdrawals": [
{
"amount": "250",
"user": "0x5f3Bce4B242d00ED748d48172C1f2D47A0bcB19B",
"tranche_id": 6,
"tx": "0xc06577f7fd53a100da581edbc8231a870d7b148329c8aa250eb942473004e5e6"
}
],
"total_tokens": "250",
"withdrawn_tokens": "0",
"remaining_tokens": "250"
"withdrawn_tokens": "250",
"remaining_tokens": "0"
},
{
"address": "0x57a88037954e15AFFDf9bc29097e0B5f5A1BfF35",
@ -69772,10 +70119,17 @@
"tx": "0xe32a466fc780a0fb3fd84a804f622931ebfaf3f428bff0dc6d141270410e75f8"
}
],
"withdrawals": [],
"withdrawals": [
{
"amount": "250",
"user": "0x57a88037954e15AFFDf9bc29097e0B5f5A1BfF35",
"tranche_id": 6,
"tx": "0x3da3cd5b323439c576ad7a3410d833da0da994ee652b29dd751a4c0edbf0ca99"
}
],
"total_tokens": "250",
"withdrawn_tokens": "0",
"remaining_tokens": "250"
"withdrawn_tokens": "250",
"remaining_tokens": "0"
},
{
"address": "0x949ECa8174BBa367901e9a195B77B2eA7d862c43",

4
apps/static/src/assets/stagnet1-tranches.json
View File

@ -38,7 +38,7 @@
"tranche_end": "2022-11-26T13:48:10.000Z",
"total_added": "100",
"total_removed": "0",
"locked_amount": "37.074508498224257",
"locked_amount": "36.18399923896499",
"deposits": [
{
"amount": "100",
@ -242,7 +242,7 @@
"tranche_end": "2022-10-12T00:53:20.000Z",
"total_added": "1100",
"total_removed": "673.04388635",
"locked_amount": "270.58154807204466",
"locked_amount": "260.785946220192745",
"deposits": [
{
"amount": "1000",

2
apps/static/src/assets/testnet-tranches.json
View File

@ -69,7 +69,7 @@
"tranche_end": "2022-10-12T00:53:20.000Z",
"total_added": "1010.000000000000000001",
"total_removed": "668.4622323651",
"locked_amount": "248.4430577752410060002459832255200406",
"locked_amount": "239.44891425672242950023707813292744795",
"deposits": [
{
"amount": "1000",

2
apps/stats-e2e/cypress.config.js
View File

@ -15,5 +15,7 @@ module.exports = defineConfig({
videosFolder: '../../dist/cypress/apps/explorer-e2e/videos',
screenshotsFolder: '../../dist/cypress/apps/explorer-e2e/screenshots',
chromeWebSecurity: false,
viewportWidth: 1440,
viewportHeight: 900,
},
});

2
apps/token-e2e/cypress.config.js
View File

@ -14,6 +14,8 @@ module.exports = defineConfig({
videosFolder: '../../dist/cypress/apps/explorer-e2e/videos',
screenshotsFolder: '../../dist/cypress/apps/explorer-e2e/screenshots',
chromeWebSecurity: false,
viewportWidth: 1440,
viewportHeight: 900,
},
env: {
ethProviderUrl: 'http://localhost:8545/',

650
apps/token-e2e/src/integration/flow/staking-flow.cy.js
View File

@ -1,28 +1,44 @@
const pageSpinner = 'splash-loader';
const menuBar = 'nav';
const validatorList = '[data-testid="node-list-item-name"]';
const removeStakeRadioButton = '[data-testid="remove-stake-radio"]';
const tokenAmountInputBox = '[data-testid="token-amount-input"]';
const tokenSubmitButton = '[data-testid="token-input-submit-button"]';
/// <reference types="cypress" />
const stakeValidatorList = '[data-testid="node-list-item-name"]';
const stakeValidatorWithinList = '[data-testid="node-list-item"]';
const stakeRemoveStakeRadioButton = '[data-testid="remove-stake-radio"]';
const stakeTokenAmountInputBox = '[data-testid="token-amount-input"]';
const stakeTokenSubmitButton = '[data-testid="token-input-submit-button"]';
const stakeNextEpochValue = '[data-testid="stake-next-epoch"]';
const vegaWalletContainer = '[data-testid="vega-wallet"]';
const stakeThisEpochValue = '[data-testid="stake-this-epoch"]';
const stakeAddStakeRadioButton = '[data-testid="add-stake-radio"]';
const stakeMaximumTokens = '[data-testid="token-amount-use-maximum"]';
const vegaWalletPublicKeyShort = Cypress.env('vegaWalletPublicKeyShort');
const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
const vegaWalletUnstakedBalance =
'[data-testid="vega-wallet-balance-unstaked"]';
const vegaWalletStakedBalances =
'[data-testid="vega-wallet-balance-staked-validators"]';
const vegaWalletThisEpochBalances =
'[data-testid="vega-wallet-balance-this-epoch"]';
const vegaWalletNextEpochBalances =
'[data-testid="vega-wallet-balance-next-epoch"]';
const ethWalletAssociatedBalances =
'[data-testid="eth-wallet-associated-balances"]';
const ethWalletTotalAssociatedBalance = '[data-testid="currency-locked"]';
const ethWalletContainer = '[data-testid="ethereum-wallet"]';
const txTimeout = { timeout: 40000 };
const epochTimeout = { timeout: 10000 };
context('Staking Flow - with eth and vega wallets connected', function () {
before('visit staking tab and connect vega wallet', function () {
cy.vega_wallet_import();
cy.visit('/');
cy.get(menuBar, { timeout: 20000 }).should('be.visible');
cy.verify_page_header('The $VEGA token');
cy.vega_wallet_connect();
cy.vega_wallet_set_specified_approval_amount('1000');
cy.reload();
cy.get(menuBar, { timeout: 20000 }).should('be.visible');
cy.verify_page_header('The $VEGA token');
cy.ethereum_wallet_connect();
cy.navigate_to('staking');
cy.get(pageSpinner, { timeout: 20000 }).should('not.exist');
cy.get(validatorList).first().invoke('text').as('validatorName');
cy.get(validatorList).last().invoke('text').as('otherValidatorName');
cy.wait_for_spinner();
cy.get(stakeValidatorList).first().invoke('text').as('validatorName');
cy.get(stakeValidatorList).last().invoke('text').as('otherValidatorName');
});
describe('Eth wallet - contains VEGA tokens', function () {
@ -36,219 +52,505 @@ context('Staking Flow - with eth and vega wallets connected', function () {
it('Able to stake against a validator', function () {
cy.staking_page_associate_tokens('3');
cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
cy.ethereum_wallet_check_associated_value_is('3.0');
cy.ethereum_wallet_check_associated_vega_key_value_is(
vegaWalletPublicKeyShort,
'3.000000000000000000'
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.get(ethWalletTotalAssociatedBalance, txTimeout)
.contains('3.0', txTimeout)
.should('be.visible');
cy.get(ethWalletAssociatedBalances, txTimeout)
.contains(vegaWalletPublicKeyShort)
.parent()
.should('contain', 3.0, txTimeout);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('2');
vega_wallet_check_validator_stake_next_epoch_value_is(
this.validatorName,
'2.000000000000000000'
cy.get(vegaWalletNextEpochBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'Next epoch');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
1.0,
txTimeout
);
cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
vega_wallet_check_validator_staked_value_is(
this.validatorName,
'2.000000000000000000'
);
staking_validator_page_check_stake_next_epoch_value('2.0');
staking_validator_page_check_stake_this_epoch_value('2.0');
cy.get(vegaWalletStakedBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName);
cy.get(stakeNextEpochValue, epochTimeout)
.contains(2.0, epochTimeout)
.should('be.visible');
cy.get(stakeThisEpochValue, epochTimeout)
.contains(2.0, epochTimeout)
.should('be.visible');
cy.navigate_to('staking');
cy.get(stakeValidatorWithinList, epochTimeout)
.contains(this.validatorName)
.parent()
.contains('Total stake')
.parent()
.should('contain', '2.0')
.and('contain', '100%');
});
it('Able to stake against mulitple validators', function () {
cy.staking_page_associate_tokens('5');
cy.vega_wallet_check_unstaked_value_is('5.000000000000000000');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
5.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('2');
vega_wallet_check_validator_staked_value_is(
this.validatorName,
'2.000000000000000000'
);
cy.get(vegaWalletStakedBalances, txTimeout)
.contains(this.validatorName, txTimeout)
.parent()
.should('contain', 2.0, txTimeout);
cy.navigate_to('staking');
cy.get(validatorList).contains(this.otherValidatorName).click();
cy.get(stakeValidatorList).contains(this.otherValidatorName).click();
cy.staking_validator_page_add_stake('1');
vega_wallet_check_validator_staked_value_is(
this.otherValidatorName,
'1.000000000000000000'
cy.get(vegaWalletStakedBalances, txTimeout)
.should('have.length', 2, txTimeout)
.contains(this.otherValidatorName, txTimeout)
.parent()
.should('contain', 1.0, txTimeout);
cy.get(vegaWalletStakedBalances, txTimeout)
.contains(this.validatorName, txTimeout)
.parent()
.should('contain', 2.0, txTimeout);
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
2.0,
txTimeout
);
cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
cy.navigate_to('staking');
cy.get(stakeValidatorWithinList, epochTimeout)
.contains(this.validatorName)
.parent()
.contains('Total stake')
.parent()
.should('contain', '2.0')
.and('contain', '66.67%');
cy.get(stakeValidatorWithinList, epochTimeout)
.contains(this.otherValidatorName)
.parent()
.contains('Total stake')
.parent()
.should('contain', '1.0')
.and('contain', '33.33%');
});
it.skip('Able to remove part of a stake against a validator', function () {
it('Able to remove part of a stake against a validator', function () {
cy.staking_page_associate_tokens('4');
cy.vega_wallet_check_unstaked_value_is('4.000000000000000000');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
4.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('3');
staking_validator_page_check_stake_next_epoch_value('3.0');
vega_wallet_check_validator_stake_next_epoch_value_is(
this.validatorName,
'3.000000000000000000'
cy.get(stakeNextEpochValue, epochTimeout)
.contains(3.0, epochTimeout)
.should('be.visible');
cy.get(vegaWalletNextEpochBalances, txTimeout)
.should('contain', 3.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'Next epoch');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
1.0,
txTimeout
);
cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
cy.navigate_to('staking');
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_removeStake('1');
staking_validator_page_check_stake_next_epoch_value('2.0');
staking_validator_page_check_stake_this_epoch_value('3.0');
vega_wallet_check_validator_stake_next_epoch_value_is(
this.validatorName,
'2.000000000000000000'
cy.staking_validator_page_remove_stake('1');
cy.get(stakeNextEpochValue, epochTimeout)
.contains(2.0, epochTimeout)
.should('be.visible');
cy.get(vegaWalletNextEpochBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'Next epoch');
cy.get(vegaWalletThisEpochBalances, txTimeout)
.should('contain', 3.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'This Epoch');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
2.0,
txTimeout
);
vega_wallet_check_validator_stake_this_epoch_value_is(
this.validatorName,
'3.000000000000000000'
);
cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
vega_wallet_check_validator_staked_value_is(
this.validatorName,
'2.000000000000000000'
);
staking_validator_page_check_stake_next_epoch_value('2.0');
staking_validator_page_check_stake_this_epoch_value('2.0');
cy.get(vegaWalletStakedBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName);
cy.get(stakeNextEpochValue, epochTimeout)
.contains(2.0, epochTimeout)
.should('be.visible');
cy.get(stakeThisEpochValue, epochTimeout)
.contains(2.0, epochTimeout)
.should('be.visible');
cy.navigate_to('staking');
cy.get(stakeValidatorWithinList, epochTimeout)
.contains(this.validatorName)
.parent()
.contains('Total stake')
.parent()
.should('contain', '2.0')
.and('contain', '100%');
});
it('Able to remove a full stake against a validator', function () {
cy.staking_page_associate_tokens('3');
cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('1');
vega_wallet_check_validator_stake_next_epoch_value_is(
this.validatorName,
'1.000000000000000000'
cy.get(vegaWalletNextEpochBalances, txTimeout)
.should('contain', 1.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'Next epoch');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
2.0,
txTimeout
);
cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
cy.navigate_to('staking');
cy.get(validatorList).contains(this.validatorName).click();
cy.staking_validator_page_removeStake('1');
staking_validator_page_check_stake_next_epoch_value('0.0');
cy.get(stakeValidatorList).contains(this.validatorName).click();
vega_wallet_check_validator_stake_this_epoch_value_is(
this.validatorName,
'1.000000000000000000'
cy.staking_validator_page_remove_stake('1');
cy.get(stakeNextEpochValue, epochTimeout)
.contains(0.0, epochTimeout)
.should('be.visible');
cy.get(vegaWalletThisEpochBalances, txTimeout)
.should('contain', 1.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'This Epoch');
cy.get(vegaWalletNextEpochBalances, txTimeout)
.should('contain', 0.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'Next epoch');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
vega_wallet_check_validator_stake_next_epoch_value_is(
this.validatorName,
'0.000000000000000000'
);
cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
staking_validator_page_check_stake_next_epoch_value('0.0');
staking_validator_page_check_stake_this_epoch_value('0.0');
vega_wallet_check_validator_no_longer_showing(this.validatorName);
cy.get(stakeNextEpochValue, epochTimeout)
.contains(0.0, epochTimeout)
.should('be.visible');
cy.get(stakeThisEpochValue, epochTimeout)
.contains(0.0, epochTimeout)
.should('be.visible');
cy.get(vegaWalletStakedBalances, txTimeout)
.contains(this.validatorName, txTimeout)
.should('not.exist', txTimeout);
cy.navigate_to('staking');
cy.get(stakeValidatorWithinList, epochTimeout)
.contains(this.validatorName)
.parent()
.contains('Total stake')
.parent()
.should('contain', '0.0');
});
it.skip('Unable to remove a stake with a negative value for a validator', function () {
it('Unable to remove a stake with a negative value for a validator', function () {
cy.staking_page_associate_tokens('3');
cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('2');
staking_validator_page_check_stake_next_epoch_value('2.0');
vega_wallet_check_validator_stake_next_epoch_value_is(
this.validatorName,
'2.000000000000000000'
cy.get(stakeNextEpochValue, epochTimeout)
.contains(2.0, epochTimeout)
.should('be.visible');
cy.get(vegaWalletNextEpochBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'Next epoch');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
cy.navigate_to('staking');
cy.get(validatorList).contains(this.validatorName).click();
cy.get(removeStakeRadioButton).click({ force: true });
cy.get(tokenAmountInputBox).type('-0.1');
cy.contains('Waiting for next epoch to start', { timeout: 10000 });
cy.get(tokenSubmitButton)
.should('be.disabled', { timeout: 8000 })
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.get(stakeRemoveStakeRadioButton).click({ force: true });
cy.get(stakeTokenAmountInputBox).type('-0.1');
cy.contains('Waiting for next epoch to start', epochTimeout);
cy.get(stakeTokenSubmitButton)
.should('be.disabled', epochTimeout)
.and('contain', `Remove -0.1 $VEGA tokens at the end of epoch`)
.and('be.visible');
});
it.skip('Unable to remove a stake greater than staked amount next epoch for a validator', function () {
it('Unable to remove a stake greater than staked amount next epoch for a validator', function () {
cy.staking_page_associate_tokens('3');
cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('2');
staking_validator_page_check_stake_next_epoch_value('2.0');
vega_wallet_check_validator_stake_next_epoch_value_is(
this.validatorName,
'2.000000000000000000'
cy.get(stakeNextEpochValue, epochTimeout)
.contains(2.0, epochTimeout)
.should('be.visible');
cy.get(vegaWalletNextEpochBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName)
.and('contain', 'Next epoch');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
1.0,
txTimeout
);
cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
cy.navigate_to('staking');
cy.get(validatorList).contains(this.validatorName).click();
cy.get(removeStakeRadioButton).click({ force: true });
cy.get(tokenAmountInputBox).type(4);
cy.contains('Waiting for next epoch to start', { timeout: 10000 });
cy.get(tokenSubmitButton)
.should('be.disabled', { timeout: 8000 })
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.get(stakeRemoveStakeRadioButton).click({ force: true });
cy.get(stakeTokenAmountInputBox).type(4);
cy.contains('Waiting for next epoch to start', epochTimeout);
cy.get(stakeTokenSubmitButton)
.should('be.disabled', epochTimeout)
.and('contain', `Remove 4 $VEGA tokens at the end of epoch`)
.and('be.visible');
});
it.skip('Disassociating all tokens - removes all staked tokens', function () {
it('Disassociating all tokens - removes all staked tokens', function () {
cy.staking_page_associate_tokens('3');
cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('2');
cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
vega_wallet_check_validator_staked_value_is(
this.validatorName,
'2.000000000000000000'
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
1.0,
txTimeout
);
cy.get(vegaWalletStakedBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName);
cy.navigate_to('staking');
cy.staking_page_disassociate_all_tokens();
cy.ethereum_wallet_check_associated_vega_key_is_no_longer_showing(
vegaWalletPublicKeyShort
cy.get(ethWalletContainer).within(() => {
cy.contains(vegaWalletPublicKeyShort, { timeout: 20000 }).should(
'not.exist'
);
});
cy.get(ethWalletTotalAssociatedBalance, txTimeout)
.contains('0.0', txTimeout)
.should('be.visible');
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
'0.000000000000000000',
txTimeout
);
cy.ethereum_wallet_check_associated_value_is('0.0');
cy.vega_wallet_check_associated_value_is('0.000000000000000000');
vega_wallet_check_validator_no_longer_showing(this.validatorName);
cy.get(vegaWalletStakedBalances, txTimeout)
.contains(this.validatorName, txTimeout)
.should('not.exist', txTimeout);
cy.navigate_to('staking');
cy.get(stakeValidatorWithinList, epochTimeout)
.contains(this.validatorName)
.parent()
.contains('Total stake')
.parent()
.should('contain', '0.0');
});
it('Disassociating some tokens - prioritizes unstaked tokens', function () {
cy.staking_page_associate_tokens('3');
cy.vega_wallet_check_unstaked_value_is('3.000000000000000000');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(validatorList).contains(this.validatorName).click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('2');
cy.vega_wallet_check_unstaked_value_is('1.000000000000000000');
vega_wallet_check_validator_staked_value_is(
this.validatorName,
'2.000000000000000000'
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
1.0,
txTimeout
);
cy.get(vegaWalletStakedBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName);
cy.navigate_to('staking');
cy.staking_page_disassociate_tokens('1');
cy.ethereum_wallet_check_associated_value_is('2.0');
cy.vega_wallet_check_associated_value_is('2.000000000000000000');
vega_wallet_check_validator_staked_value_is(
this.validatorName,
'2.000000000000000000'
cy.get(ethWalletTotalAssociatedBalance, txTimeout)
.contains('2.0', txTimeout)
.should('be.visible');
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
'2.000000000000000000',
txTimeout
);
cy.get(vegaWalletStakedBalances, txTimeout)
.should('contain', 2.0, txTimeout)
.and('contain', this.validatorName);
cy.navigate_to('staking');
cy.get(stakeValidatorWithinList, epochTimeout)
.contains(this.validatorName)
.parent()
.contains('Total stake')
.parent()
.should('contain', '2.0')
.and('contain', '100%');
});
it('Selecting use maximum where tokens are allready staked - suggests the unstaked token amount', function () {
cy.staking_page_associate_tokens('3');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
3.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.get(stakeValidatorList).contains(this.validatorName).click();
cy.staking_validator_page_add_stake('2');
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
1.0,
txTimeout
);
cy.navigate_to('staking');
cy.get(stakeValidatorList).contains(this.otherValidatorName).click();
cy.get(stakeAddStakeRadioButton).click({ force: true });
cy.get(stakeMaximumTokens, { timeout: 60000 }).click();
cy.get(stakeTokenSubmitButton).should('contain', 'Add 1 $VEGA tokens');
});
after(
@ -259,77 +561,3 @@ context('Staking Flow - with eth and vega wallets connected', function () {
);
});
});
function staking_validator_page_check_stake_next_epoch_value(expectedVal) {
cy.highlight(
`Checking Staking Page - Validator Stake Next Epoch Value is ${expectedVal}`
);
cy.get(stakeNextEpochValue, { timeout: 10000 })
.contains(expectedVal, { timeout: 10000 })
.should('be.visible');
}
function staking_validator_page_check_stake_this_epoch_value(expectedVal) {
cy.highlight(
`Checking Staking Page - Validator Stake This Epoch Value is ${expectedVal}`
);
cy.get(stakeNextEpochValue, { timeout: 10000 })
.contains(expectedVal, { timeout: 10000 })
.should('be.visible');
}
function vega_wallet_check_validator_stake_next_epoch_value_is(
validatorName,
expectedVal
) {
cy.highlight(
`Checking vega wallet - Stake Next Epoch Value for ${validatorName} is ${expectedVal}`
);
cy.get(vegaWalletContainer).within(() => {
cy.contains(`${validatorName} (Next epoch)`, { timeout: 40000 })
.siblings()
.contains(expectedVal, { timeout: 40000 })
.should('be.visible');
});
}
function vega_wallet_check_validator_stake_this_epoch_value_is(
validatorName,
expectedVal
) {
cy.highlight(
`Checking vega wallet - Stake This Epoch Value for ${validatorName} is ${expectedVal}`
);
cy.get(vegaWalletContainer).within(() => {
cy.contains(`${validatorName} (This Epoch)`, { timeout: 40000 })
.siblings()
.contains(expectedVal, { timeout: 40000 })
.should('be.visible');
});
}
function vega_wallet_check_validator_no_longer_showing(validatorName) {
cy.highlight(
`Checking Validator and therefore stake removed for ${validatorName}`
);
cy.get(vegaWalletContainer).within(() => {
cy.contains(`${validatorName}`, { timeout: 40000 }).should('not.exist', {
timeout: 40000,
});
});
}
function vega_wallet_check_validator_staked_value_is(
validatorName,
expectedVal
) {
cy.highlight(
`Checking Validator Stake Value for ${validatorName} is ${expectedVal}`
);
cy.get(vegaWalletContainer).within(() => {
cy.contains(`${validatorName}`, { timeout: 40000 })
.siblings()
.contains(expectedVal, { timeout: 40000 })
.should('be.visible');
});
}

162
apps/token-e2e/src/integration/flow/token-association-flow.cy.js
View File

@ -1,7 +1,12 @@
const pageSpinner = 'splash-loader';
const menuBar = 'nav';
const validatorList = '[data-testid="node-list-item-name"]';
const ethWalletContainer = '[data-testid="ethereum-wallet"]';
const ethWalletAssociatedBalances =
'[data-testid="eth-wallet-associated-balances"]';
const ethWalletTotalAssociatedBalance = '[data-testid="currency-locked"]';
const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
const vegaWalletUnstakedBalance =
'[data-testid="vega-wallet-balance-unstaked"]';
const txTimeout = { timeout: 40000 };
const vegaWalletPublicKeyShort = Cypress.env('vegaWalletPublicKeyShort');
context(
@ -10,14 +15,14 @@ context(
before('visit staking tab and connect vega wallet', function () {
cy.vega_wallet_import();
cy.visit('/');
cy.get(menuBar, { timeout: 20000 }).should('be.visible');
cy.verify_page_header('The $VEGA token');
cy.vega_wallet_connect();
cy.vega_wallet_set_specified_approval_amount('1000');
cy.reload();
cy.get(menuBar, { timeout: 20000 }).should('be.visible');
cy.verify_page_header('The $VEGA token');
cy.ethereum_wallet_connect();
cy.navigate_to('staking');
cy.get(pageSpinner, { timeout: 20000 }).should('not.exist');
cy.wait_for_spinner();
cy.get(validatorList).first().invoke('text').as('validatorName');
});
@ -27,71 +32,140 @@ context(
function () {
cy.vega_wallet_teardown();
cy.navigate_to('staking');
cy.get(pageSpinner, { timeout: 20000 }).should('not.exist');
cy.wait_for_spinner();
}
);
it('Able to associate tokens', function () {
cy.staking_page_associate_tokens('2');
cy.ethereum_wallet_check_associated_vega_key_value_is(
vegaWalletPublicKeyShort,
'2.000000000000000000'
cy.get(ethWalletAssociatedBalances, txTimeout)
.contains(vegaWalletPublicKeyShort)
.parent()
.should('contain', 2.0, txTimeout);
cy.get(ethWalletTotalAssociatedBalance, txTimeout)
.contains('2.0', txTimeout)
.should('be.visible');
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
2.0,
txTimeout
);
cy.get(vegaWalletUnstakedBalance, txTimeout).should(
'contain',
2.0,
txTimeout
);
cy.ethereum_wallet_check_associated_value_is('2.0');
cy.vega_wallet_check_associated_value_is('2.000000000000000000');
cy.vega_wallet_check_unstaked_value_is('2.000000000000000000');
});
it('Able to disassociate tokens', function () {
cy.staking_page_associate_tokens('2');
cy.ethereum_wallet_check_associated_vega_key_value_is(
vegaWalletPublicKeyShort,
'2.000000000000000000'
);
cy.vega_wallet_check_associated_value_is('2.000000000000000000');
cy.get(ethWalletAssociatedBalances, txTimeout)
.contains(vegaWalletPublicKeyShort)
.parent()
.should('contain', 2.0, txTimeout);
cy.get(ethWalletTotalAssociatedBalance, txTimeout)
.contains('2.0', txTimeout)
.should('be.visible');
cy.get('button').contains('Select a validator to nominate').click();
cy.staking_page_disassociate_tokens('1');
cy.ethereum_wallet_check_associated_vega_key_value_is(
vegaWalletPublicKeyShort,
'1.000000000000000000'
);
cy.ethereum_wallet_check_associated_value_is('1.0');
cy.vega_wallet_check_associated_value_is('1.000000000000000000');
cy.get(ethWalletAssociatedBalances, txTimeout)
.contains(vegaWalletPublicKeyShort)
.parent()
.should('contain', 1.0, txTimeout);
cy.get(ethWalletTotalAssociatedBalance, txTimeout)
.contains('1.0', txTimeout)
.should('be.visible');
});
it('Able to associate more tokens than the approved amount of 1000 - requires re-approval', function () {
cy.staking_page_associate_tokens('1001', true);
cy.ethereum_wallet_check_associated_vega_key_value_is(
vegaWalletPublicKeyShort,
'1,001.000000000000000000'
cy.get(ethWalletAssociatedBalances, txTimeout)
.contains(vegaWalletPublicKeyShort)
.parent()
.should('contain', '1,001.000000000000000000', txTimeout);
cy.get(ethWalletTotalAssociatedBalance, txTimeout)
.contains('1,001.00', txTimeout)
.should('be.visible');
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
'1,001.000000000000000000',
txTimeout
);
cy.ethereum_wallet_check_associated_value_is('1,001.00');
cy.vega_wallet_check_associated_value_is('1,001.000000000000000000');
});
it('Able to disassociate a partial amount of tokens currently associated', function () {
cy.staking_page_associate_tokens('2');
cy.vega_wallet_check_associated_value_is('2.000000000000000000');
cy.get('button').contains('Select a validator to nominate').click();
cy.staking_page_disassociate_tokens('1');
cy.ethereum_wallet_check_associated_vega_key_value_is(
vegaWalletPublicKeyShort,
'1.000000000000000000'
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
2.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.staking_page_disassociate_tokens('1');
cy.get(ethWalletAssociatedBalances, txTimeout)
.contains(vegaWalletPublicKeyShort)
.parent()
.should('contain', 1.0, txTimeout);
cy.get(ethWalletAssociatedBalances, txTimeout)
.contains(vegaWalletPublicKeyShort)
.parent()
.should('contain', 1.0, txTimeout);
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
1.0,
txTimeout
);
cy.ethereum_wallet_check_associated_value_is('1.0');
cy.vega_wallet_check_associated_value_is('1.000000000000000000');
});
it('Able to disassociate all tokens', function () {
cy.staking_page_associate_tokens('2');
cy.vega_wallet_check_associated_value_is('2.000000000000000000');
cy.get('button').contains('Select a validator to nominate').click();
cy.staking_page_disassociate_all_tokens();
cy.ethereum_wallet_check_associated_vega_key_is_no_longer_showing(
vegaWalletPublicKeyShort
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
2.0,
txTimeout
);
cy.get('button').contains('Select a validator to nominate').click();
cy.staking_page_disassociate_all_tokens();
cy.get(ethWalletContainer).within(() => {
cy.contains(vegaWalletPublicKeyShort, { timeout: 20000 }).should(
'not.exist'
);
});
cy.get(ethWalletContainer).within(() => {
cy.contains(vegaWalletPublicKeyShort, { timeout: 20000 }).should(
'not.exist'
);
});
cy.get(vegaWalletAssociatedBalance, txTimeout).should(
'contain',
0.0,
txTimeout
);
cy.ethereum_wallet_check_associated_value_is('0.0');
cy.vega_wallet_check_associated_value_is('0.000000000000000000');
});
});
}

5
apps/token-e2e/src/support/common.functions.js
View File

@ -14,6 +14,7 @@ const navigation = {
rewards: '[href="/rewards"]',
withdraw: '[href="/withdraw"]',
governance: '[href="/governance"]',
pageSpinner: 'splash-loader',
};
Cypress.Commands.add('navigate_to', (page) => {
@ -31,3 +32,7 @@ Cypress.Commands.add('verify_tab_highlighted', (page) => {
Cypress.Commands.add('verify_page_header', (text) => {
return cy.get('header h1').should('be.visible').and('have.text', text);
});
Cypress.Commands.add('wait_for_spinner', () => {
cy.get(navigation.pageSpinner, { timeout: 20000 }).should('not.exist');
});

10
apps/token-e2e/src/support/staking.functions.js
View File

@ -9,7 +9,6 @@ const associateWalletRadioButton = '[data-testid="associate-radio-wallet"]';
const stakeMaximumTokens = '[data-testid="token-amount-use-maximum"]';
Cypress.Commands.add('wait_for_begining_of_epoch', () => {
cy.highlight(`Waiting for next epoch to start`);
cy.contains('Waiting for next epoch to start', { timeout: 10000 }).should(
'not.exist'
);
@ -26,13 +25,9 @@ Cypress.Commands.add('staking_validator_page_add_stake', (stake) => {
.and('contain', `Add ${stake} $VEGA tokens`)
.and('be.visible')
.click();
cy.contains(
'At the beginning of the next epoch your $VEGA will be nominated to the validator',
{ timeout: 20000 }
).should('be.visible');
});
Cypress.Commands.add('staking_validator_page_removeStake', (stake) => {
Cypress.Commands.add('staking_validator_page_remove_stake', (stake) => {
cy.highlight(`Removing a stake of ${stake}`);
cy.get(removeStakeRadioButton).click({ force: true });
cy.get(tokenAmountInputBox).type(stake);
@ -42,9 +37,6 @@ Cypress.Commands.add('staking_validator_page_removeStake', (stake) => {
.and('contain', `Remove ${stake} $VEGA tokens at the end of epoch`)
.and('be.visible')
.click();
cy.contains(`${stake} $VEGA has been removed from validator`).should(
'be.visible'
);
});
Cypress.Commands.add(

39
apps/token-e2e/src/support/wallet-eth.functions.js
View File

@ -16,42 +16,3 @@ Cypress.Commands.add('ethereum_wallet_connect', () => {
cy.contains('Locked', { timeout: 15000 }).should('be.visible');
});
});
Cypress.Commands.add(
'ethereum_wallet_check_associated_value_is',
(expectedVal) => {
cy.highlight(`Checking Eth Wallet - Associated Value is ${expectedVal}`);
cy.get(ethWalletContainer).within(() => {
cy.contains('Associated', { timeout: 20000 })
.parent()
.siblings()
.contains(expectedVal, { timeout: 40000 })
.should('be.visible');
});
}
);
Cypress.Commands.add(
'ethereum_wallet_check_associated_vega_key_value_is',
(vegaShortPublicKey, expectedVal) => {
cy.highlight(
`Checking Eth Wallet - Vega Key Associated Value is ${expectedVal} for key ${vegaShortPublicKey}`
);
cy.get(ethWalletContainer).within(() => {
cy.contains(vegaShortPublicKey, { timeout: 20000 })
.parent()
.contains(expectedVal, { timeout: 40000 })
.should('be.visible');
});
}
);
Cypress.Commands.add(
'ethereum_wallet_check_associated_vega_key_is_no_longer_showing',
(vegaShortPublicKey) => {
cy.highlight('Checking Eth Wallet - Vega Key Associated is not showing');
cy.get(ethWalletContainer).within(() => {
cy.contains(vegaShortPublicKey, { timeout: 20000 }).should('not.exist');
});
}
);

8
apps/token-e2e/src/support/wallet-teardown.functions.js
View File

@ -5,6 +5,7 @@ import {
} from '@vegaprotocol/smart-contracts';
import { ethers, Wallet } from 'ethers';
const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
const vegaWalletMnemonic = Cypress.env('vegaWalletMnemonic');
const vegaWalletPubKey = Cypress.env('vegaWalletPublicKey');
const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
@ -41,7 +42,12 @@ before('Vega wallet teardown prep', function () {
Cypress.Commands.add('vega_wallet_teardown', function () {
cy.vega_wallet_teardown_staking(this.stakingBridgeContract);
cy.vega_wallet_teardown_vesting(this.vestingContract);
cy.vega_wallet_check_associated_value_is('0.000000000000000000');
cy.get(vegaWalletAssociatedBalance, { timeout: transactionTimeout }).should(
'contain',
'0.000000000000000000',
{ timeout: transactionTimeout }
);
});
Cypress.Commands.add(

21
apps/token-e2e/src/support/wallet-vega.functions.js
View File

@ -33,24 +33,3 @@ Cypress.Commands.add('vega_wallet_connect', () => {
});
cy.contains(`${vegaWalletName} key`, { timeout: 20000 }).should('be.visible');
});
Cypress.Commands.add('vega_wallet_check_unstaked_value_is', (expectedVal) => {
cy.highlight(`Checking vega wallet - Unstaked Value is ${expectedVal}`);
cy.get(vegaWalletContainer).within(() => {
cy.contains('Unstaked', { timeout: 40000 })
.siblings()
.contains(expectedVal, { timeout: 40000 })
.should('be.visible');
});
});
Cypress.Commands.add('vega_wallet_check_associated_value_is', (expectedVal) => {
cy.highlight(`Checking vega wallet - Associated Value is ${expectedVal}`);
cy.get(vegaWalletContainer).within(() => {
cy.contains('Associated', { timeout: 40000 })
.parent()
.siblings()
.contains(expectedVal, { timeout: 40000 })
.should('be.visible');
});
});

14
apps/token/src/components/eth-wallet/eth-wallet.tsx
View File

@ -83,12 +83,14 @@ const AssociatedAmounts = ({
/>
{vestingAssociationByVegaKey.map(([key, amount]) => {
return (
<WalletCardRow
key={key}
label={removeLeadingAddressSymbol(key)}
value={amount}
dark={true}
/>
<div data-testid="eth-wallet-associated-balances">
<WalletCardRow
key={key}
label={removeLeadingAddressSymbol(key)}
value={amount}
dark={true}
/>
</div>
);
})}
</div>

42
apps/token/src/components/vega-wallet/vega-wallet.tsx
View File

@ -154,31 +154,37 @@ const VegaWalletConnected = ({ vegaKeys }: VegaWalletConnectedProps) => {
balance={currentStakeAvailable}
dark={true}
/>
<WalletCardRow label={t('unstaked')} value={unstaked} dark={true} />
<div data-testid="vega-wallet-balance-unstaked">
<WalletCardRow label={t('unstaked')} value={unstaked} dark={true} />
</div>
{delegatedNodes.length ? (
<WalletCardRow label={t('stakedValidators')} dark={true} bold={true} />
) : null}
{delegatedNodes.map((d) => (
<div key={d.nodeId}>
<div key={d.nodeId} data-testid="vega-wallet-balance-staked-validators">
{d.currentEpochStake && d.currentEpochStake.isGreaterThan(0) && (
<WalletCardRow
label={`${d.name || truncateMiddle(d.nodeId)} ${
d.hasStakePending ? `(${t('thisEpoch')})` : ''
}`}
link={`${Routes.STAKING}/${d.nodeId}`}
value={d.currentEpochStake}
dark={true}
/>
<div data-testid="vega-wallet-balance-this-epoch">
<WalletCardRow
label={`${d.name || truncateMiddle(d.nodeId)} ${
d.hasStakePending ? `(${t('thisEpoch')})` : ''
}`}
link={`${Routes.STAKING}/${d.nodeId}`}
value={d.currentEpochStake}
dark={true}
/>
</div>
)}
{d.hasStakePending && (
<WalletCardRow
label={`${d.name || truncateMiddle(d.nodeId)} (${t(
'nextEpoch'
)})`}
link={`${Routes.STAKING}/${d.nodeId}`}
value={d.nextEpochStake}
dark={true}
/>
<div data-testid="vega-wallet-balance-next-epoch">
<WalletCardRow
label={`${d.name || truncateMiddle(d.nodeId)} (${t(
'nextEpoch'
)})`}
link={`${Routes.STAKING}/${d.nodeId}`}
value={d.nextEpochStake}
dark={true}
/>
</div>
)}
</div>
))}

2
apps/trading-e2e/cypress.config.js
View File

@ -27,6 +27,8 @@ module.exports = defineConfig({
chromeWebSecurity: false,
projectId: 'et4snf',
defaultCommandTimeout: 10000,
viewportWidth: 1440,
viewportHeight: 900,
},
env: {
TRADING_TEST_VEGA_WALLET_NAME: 'UI_Trading_Test',

2
apps/trading-e2e/src/integration/deposit.cy.ts
View File

@ -1,10 +1,12 @@
import { aliasQuery } from '@vegaprotocol/cypress';
import { generateDepositPage } from '../support/mocks/generate-deposit-page';
import { generateNetworkParameters } from '../support/mocks/generate-network-parameters';
describe('deposit form validation', () => {
beforeEach(() => {
cy.mockWeb3Provider();
cy.mockGQL((req) => {
aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
aliasQuery(req, 'DepositPage', generateDepositPage());
});
cy.visit('/portfolio/deposit');

6
apps/trading-e2e/src/integration/home.cy.ts
View File

@ -32,11 +32,11 @@ describe('home', () => {
});
cy.visit('/');
cy.wait('@GQL');
cy.contains('Loading...').should('be.visible');
cy.contains('Loading...').should('not.exist');
cy.get('main[data-testid="market"]').should('exist'); // Wait for page to be rendered to before checking url
cy.wait('@GQL');
cy.get('main[data-testid="market"]', { timeout: 20000 }).should('exist'); // Wait for page to be rendered to before checking url
cy.url().should('include', `/markets/${oldestMarket.id}`); // Should redirect to oldest market
});

34
apps/trading-e2e/src/integration/markets.cy.ts
View File

@ -25,7 +25,7 @@ describe('markets table', () => {
const expectedMarketHeaders = [
'Market',
'Settlement asset',
'State',
'Trading mode',
'Best bid',
'Best offer',
'Mark price',
@ -64,44 +64,22 @@ describe('markets table', () => {
mockTradingPage(req, MarketState.Active);
});
// click on active market
// click on market
cy.get('[role="gridcell"][col-id=data]').should('be.visible');
cy.get('[role="gridcell"][col-id=data]').contains('Active').click();
cy.get('[role="gridcell"][col-id=name]').contains('ACTIVE MARKET').click();
cy.wait('@Market');
cy.get('.ag-root-wrapper').should('be.visible');
cy.contains('ACTIVE MARKET');
cy.url().should('include', '/markets/market-0');
verifyMarketSummaryDisplayed('Active');
verifyMarketSummaryDisplayed();
});
it('can select a suspended market', () => {
cy.wait('@Markets');
cy.get('.ag-root-wrapper').should('be.visible');
cy.mockGQL((req) => {
mockTradingPage(req, MarketState.Suspended);
});
// click on active market
cy.get('[role="gridcell"][col-id=data]').should('be.visible');
cy.get('[role="gridcell"][col-id=data]').contains('Suspended').click();
cy.wait('@Market');
cy.contains('SUSPENDED MARKET');
cy.url().should('include', '/markets/market-1');
verifyMarketSummaryDisplayed('Suspended');
});
function verifyMarketSummaryDisplayed(expectedMarketState: string) {
function verifyMarketSummaryDisplayed() {
const marketSummaryBlock = 'market-summary';
const percentageValue = 'price-change-percentage';
const priceChangeValue = 'price-change';
const tradingVolume = 'trading-volume';
const tradingMode = 'trading-mode';
const marketState = 'market-state';
cy.getByTestId(marketSummaryBlock).within(() => {
cy.contains('Change (24h)');
@ -111,8 +89,6 @@ describe('markets table', () => {
cy.getByTestId(tradingVolume).should('not.be.empty');
cy.contains('Trading mode');
cy.getByTestId(tradingMode).should('not.be.empty');
cy.contains('State');
cy.getByTestId(marketState).should('have.text', expectedMarketState);
});
}
});

6
apps/trading-e2e/src/integration/portfolio-fills.cy.ts
View File

@ -2,6 +2,7 @@ import { aliasQuery } from '@vegaprotocol/cypress';
import { generateFill, generateFills } from '../support/mocks/generate-fills';
import { Side } from '@vegaprotocol/types';
import { connectVegaWallet } from '../support/vega-wallet';
import { generateNetworkParameters } from '../support/mocks/generate-network-parameters';
describe('fills', () => {
before(() => {
@ -45,7 +46,7 @@ describe('fills', () => {
];
const result = generateFills({
party: {
tradesPaged: {
tradesConnection: {
edges: fills.map((f, i) => {
return {
__typename: 'TradeEdge',
@ -58,6 +59,7 @@ describe('fills', () => {
});
cy.mockGQL((req) => {
aliasQuery(req, 'Fills', result);
aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
});
cy.visit('/portfolio');
cy.get('main[data-testid="portfolio"]').should('exist');
@ -65,7 +67,7 @@ describe('fills', () => {
it('renders fills', () => {
cy.getByTestId('Fills').click();
cy.getByTestId('tab-fills').contains('Please connect Vega wallet');
cy.getByTestId('tab-fills').contains('Connect your Vega wallet');
connectVegaWallet();

2
apps/trading-e2e/src/integration/trading-accounts.cy.ts
View File

@ -11,7 +11,7 @@ beforeEach(() => {
describe('accounts', () => {
it('renders accounts', () => {
cy.getByTestId('Accounts').click();
cy.getByTestId('Collateral').click();
cy.getByTestId('tab-accounts').contains('Please connect Vega wallet');
connectVegaWallet();

2
apps/trading-e2e/src/integration/withdraw.cy.ts
View File

@ -1,5 +1,6 @@
import { aliasQuery } from '@vegaprotocol/cypress';
import { connectEthereumWallet } from '../support/ethereum-wallet';
import { generateNetworkParameters } from '../support/mocks/generate-network-parameters';
import { generateWithdrawPageQuery } from '../support/mocks/generate-withdraw-page-query';
import { connectVegaWallet } from '../support/vega-wallet';
@ -15,6 +16,7 @@ describe('withdraw', () => {
cy.mockWeb3Provider();
cy.mockGQL((req) => {
aliasQuery(req, 'WithdrawPageQuery', generateWithdrawPageQuery());
aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
});
cy.visit('/portfolio/withdraw');

5
apps/trading-e2e/src/integration/withdrawals.cy.ts
View File

@ -1,5 +1,6 @@
import { aliasQuery } from '@vegaprotocol/cypress';
import { connectEthereumWallet } from '../support/ethereum-wallet';
import { generateNetworkParameters } from '../support/mocks/generate-network-parameters';
import { generateWithdrawals } from '../support/mocks/generate-withdrawals';
import { connectVegaWallet } from '../support/vega-wallet';
@ -8,6 +9,7 @@ describe('withdrawals', () => {
cy.mockWeb3Provider();
cy.mockGQL((req) => {
aliasQuery(req, 'Withdrawals', generateWithdrawals());
aliasQuery(req, 'NetworkParamsQuery', generateNetworkParameters());
});
cy.visit('/portfolio/withdrawals');
@ -16,8 +18,6 @@ describe('withdrawals', () => {
// It also requires connection Ethereum wallet
connectEthereumWallet();
cy.contains('Withdrawals');
});
it('renders history of withdrawals', () => {
@ -27,7 +27,6 @@ describe('withdrawals', () => {
const etherScanLink = `${Cypress.env(
'ETHERSCAN_URL'
)}/tx/0x5d7b1a35ba6bd23be17bb7a159c13cdbb3121fceb94e9c6c510f5503dce48d03`;
cy.contains('Withdrawals');
const row = '.ag-center-cols-container[role="rowgroup"] > [role="row"]';

10
apps/trading-e2e/src/support/mocks/generate-fills.ts
View File

@ -1,13 +1,13 @@
import type {
Fills,
Fills_party_tradesPaged_edges_node,
Fills_party_tradesConnection_edges_node,
} from '@vegaprotocol/fills';
import { Side } from '@vegaprotocol/types';
import merge from 'lodash/merge';
import type { PartialDeep } from 'type-fest';
export const generateFills = (override?: PartialDeep<Fills>): Fills => {
const fills: Fills_party_tradesPaged_edges_node[] = [
const fills: Fills_party_tradesConnection_edges_node[] = [
generateFill({
buyer: {
id: Cypress.env('VEGA_PUBLIC_KEY'),
@ -49,7 +49,7 @@ export const generateFills = (override?: PartialDeep<Fills>): Fills => {
const defaultResult: Fills = {
party: {
id: 'buyer-id',
tradesPaged: {
tradesConnection: {
__typename: 'TradeConnection',
totalCount: 1,
edges: fills.map((f) => {
@ -73,9 +73,9 @@ export const generateFills = (override?: PartialDeep<Fills>): Fills => {
};
export const generateFill = (
override?: PartialDeep<Fills_party_tradesPaged_edges_node>
override?: PartialDeep<Fills_party_tradesConnection_edges_node>
) => {
const defaultFill: Fills_party_tradesPaged_edges_node = {
const defaultFill: Fills_party_tradesConnection_edges_node = {
__typename: 'Trade',
id: '0',
createdAt: new Date().toISOString(),

37
apps/trading-e2e/src/support/mocks/generate-network-parameters.ts Normal file
View File

@ -0,0 +1,37 @@
import merge from 'lodash/merge';
import type { NetworkParamsQuery } from '@vegaprotocol/web3';
import type { PartialDeep } from 'type-fest';
export const generateNetworkParameters = (
override?: PartialDeep<NetworkParamsQuery>
): NetworkParamsQuery => {
const defaultResult: NetworkParamsQuery = {
networkParameters: [
{
__typename: 'NetworkParameter',
key: 'blockchains.ethereumConfig',
value: JSON.stringify({
network_id: '3',
chain_id: '3',
collateral_bridge_contract: {
address: '0x947893AaA0A7b55f66990b3B4781514b691Fdd4a',
},
multisig_control_contract: {
address: '0xaE15126d2d1fAbF7cfA7cAD3cbD4921DfC87F620',
deployment_block_height: 12341882,
},
staking_bridge_contract: {
address: '0x7896C9491962D5839783CB6e0492ECebd34Bb35F',
deployment_block_height: 11177313,
},
token_vesting_contract: {
address: '0x9F10cBeEf03A564Fb914c2010c0Cd55E9BB11406',
deployment_block_height: 11177353,
},
confirmations: 3,
}),
},
],
};
return merge(defaultResult, override);
};

1
apps/trading/.env
View File

@ -1,6 +1,5 @@
# App configuration variables
NX_VEGA_ENV=TESTNET
NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
NX_VEGA_URL=https://lb.testnet.vega.xyz/query
NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
NX_ETHERSCAN_URL=https://ropsten.etherscan.io

1
apps/trading/.env.testnet
View File

@ -1,6 +1,5 @@
# App configuration variables
NX_VEGA_ENV=TESTNET
NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
NX_VEGA_URL=https://lb.testnet.vega.xyz/query
NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8

4
apps/trading/components/navbar/navbar.tsx
View File

@ -10,7 +10,7 @@ export const Navbar = () => {
<Link href="/" passHref={true}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="px-[26px]">
<Vega className="fill-black dark:fill-white" />
<Vega className="fill-white" />
</a>
</Link>
{[
@ -39,7 +39,7 @@ const NavLink = ({ name, path, exact, testId = name }: NavLinkProps) => {
'uppercase xs:text-ui sm:text-body-large md:text-h5 lg:text-h4',
{
'bg-vega-pink dark:bg-vega-yellow text-white dark:text-black': isActive,
'text-black dark:text-white': !isActive,
'text-white': !isActive,
}
);
return (

6
apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx
View File

@ -24,12 +24,14 @@ export const VegaWalletConnectButton = ({
return (
<span>
{isConnected && (
<span className="text-ui-small font-mono mr-2">Vega key:</span>
<span className="text-ui-small font-mono mr-2 text-white-90">
Vega key:
</span>
)}
<button
data-testid={isConnected ? 'manage-vega-wallet' : 'connect-vega-wallet'}
onClick={handleClick}
className="ml-auto inline-block text-ui-small font-mono hover:underline"
className="ml-auto inline-block text-ui-small font-mono hover:underline text-white-90"
>
{isConnected ? truncateByChars(keypair.pub) : 'Connect Vega wallet'}
</button>

1
apps/trading/components/web3-container/web3-container.spec.tsx
View File

@ -43,6 +43,7 @@ const networkParamsQueryMock: MockedResponse<NetworkParamsQuery> = {
const mockEnvironment = {
VEGA_ENV: 'TESTNET',
VEGA_URL: 'https://vega-node.url',
VEGA_NETWORKS: JSON.stringify({}),
GIT_BRANCH: 'test',
GIT_COMMIT_HASH: 'abcdef',

4
apps/trading/pages/_app.page.tsx
View File

@ -28,9 +28,9 @@ function AppBody({ Component, pageProps }: AppProps) {
return (
<ThemeContext.Provider value={theme}>
<div className="h-full dark:bg-black dark:text-white-60 bg-white relative z-0 text-black-60 grid grid-rows-[min-content,1fr]">
<div className="h-full text-white relative text-black-60 dark:text-white-60 z-0 grid grid-rows-[min-content,1fr]">
<AppLoader>
<div className="flex items-stretch border-b-[7px] border-vega-pink dark:border-vega-yellow">
<div className="flex items-stretch border-b-[7px] bg-black border-vega-pink dark:border-vega-yellow">
<Navbar />
<div className="flex items-center gap-4 ml-auto mr-8">
<VegaWalletConnectButton

2
apps/trading/pages/markets/[marketId].page.tsx
View File

@ -20,6 +20,7 @@ const MARKET_QUERY = gql`
tradingMode
state
decimalPlaces
positionDecimalPlaces
data {
market {
id
@ -31,6 +32,7 @@ const MARKET_QUERY = gql`
bestStaticBidVolume
bestStaticOfferVolume
indicativeVolume
trigger
}
tradableInstrument {
instrument {

12
apps/trading/pages/markets/__generated__/Market.ts generated
View File

@ -3,7 +3,7 @@
// @generated
// This file was automatically generated and should not be edited.
import { Interval, MarketTradingMode, MarketState } from "@vegaprotocol/types";
import { Interval, MarketTradingMode, MarketState, AuctionTrigger } from "@vegaprotocol/types";
// ====================================================
// GraphQL query operation: Market
@ -47,6 +47,10 @@ export interface Market_market_data {
* the aggregated volume being offered at the best static offer price, excluding pegged orders.
*/
bestStaticOfferVolume: string;
/**
* what triggered an auction (if an auction was started)
*/
trigger: AuctionTrigger;
}
export interface Market_market_tradableInstrument_instrument_metadata {
@ -144,6 +148,12 @@ export interface Market_market {
* GBX (pence) 1 4 GBP 0.000001 ( 0.0001p)
*/
decimalPlaces: number;
/**
* positionDecimalPlaces indicated the number of decimal places that an integer must be shifted in order to get a correct size (uint64).
* i.e. 0 means there are no fractional orders for the market, and order sizes are always whole sizes.
* 2 means sizes given as 10^2 * desired size, e.g. a desired size of 1.23 is represented as 123 in this market.
*/
positionDecimalPlaces: number;
/**
* marketData for the given market
*/

65
apps/trading/pages/markets/trade-grid.tsx
View File

@ -11,7 +11,11 @@ import { TradesContainer } from '@vegaprotocol/trades';
import { PositionsContainer } from '@vegaprotocol/positions';
import { OrderbookContainer } from '@vegaprotocol/market-depth';
import type { Market_market } from './__generated__/Market';
import { t } from '@vegaprotocol/react-helpers';
import {
addDecimalsFormatNumber,
formatLabel,
t,
} from '@vegaprotocol/react-helpers';
import { AccountsContainer } from '@vegaprotocol/accounts';
import { DepthChartContainer } from '@vegaprotocol/market-depth';
import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
@ -23,17 +27,19 @@ import {
PriceCellChange,
} from '@vegaprotocol/ui-toolkit';
import type { CandleClose } from '@vegaprotocol/types';
import { AuctionTrigger } from '@vegaprotocol/types';
import { MarketTradingMode } from '@vegaprotocol/types';
const TradingViews = {
Candles: CandlesChartContainer,
Depth: DepthChartContainer,
Ticket: DealTicketContainer,
Orderbook: OrderbookContainer,
Orders: OrderListContainer,
Positions: PositionsContainer,
Accounts: AccountsContainer,
Trades: TradesContainer,
Info: MarketInfoContainer,
Orderbook: OrderbookContainer,
Trades: TradesContainer,
Positions: PositionsContainer,
Orders: OrderListContainer,
Collateral: AccountsContainer,
};
type TradingView = keyof typeof TradingViews;
@ -53,9 +59,9 @@ export const TradeMarketHeader = ({
.filter((c): c is CandleClose => c !== null);
const headerItemClassName = 'whitespace-nowrap flex flex-col';
const itemClassName =
'font-sans font-normal mb-0 text-dark/80 dark:text-white/80 text-ui-small';
'font-sans font-normal mb-0 text-black-60 dark:text-white-80 text-ui-small';
const itemValueClassName =
'capitalize font-sans tracking-tighter text-black dark:text-white text-ui';
'font-sans tracking-tighter text-black dark:text-white text-ui';
const headerClassName = classNames(
'w-full p-8 bg-white dark:bg-black',
className
@ -66,7 +72,7 @@ export const TradeMarketHeader = ({
<div className="flex flex-col md:flex-row gap-20 md:gap-64 ml-auto mr-8">
<button
onClick={() => setOpen(!open)}
className="shrink-0 dark:text-vega-yellow text-black text-h5 flex items-center gap-8 px-4 py-0 h-37 hover:bg-black/20 dark:hover:bg-white/20"
className="shrink-0 text-vega-pink dark:text-vega-yellow font-medium text-h5 flex items-center gap-8 px-4 py-0 h-37 hover:bg-black/10 dark:hover:bg-white/20"
>
<span className="break-words text-left">{market.name}</span>
<ArrowDown color="yellow" borderX={8} borderTop={12} />
@ -74,7 +80,7 @@ export const TradeMarketHeader = ({
<div
data-testid="market-summary"
className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap w-[400px]"
className="flex flex-auto items-start gap-64 overflow-x-auto whitespace-nowrap"
>
<div className={headerItemClassName}>
<span className={itemClassName}>Change (24h)</span>
@ -87,20 +93,23 @@ export const TradeMarketHeader = ({
<span className={itemClassName}>Volume</span>
<span data-testid="trading-volume" className={itemValueClassName}>
{market.data && market.data.indicativeVolume !== '0'
? market.data.indicativeVolume
? addDecimalsFormatNumber(
market.data.indicativeVolume,
market.positionDecimalPlaces
)
: '-'}
</span>
</div>
<div className={headerItemClassName}>
<span className={itemClassName}>Trading mode</span>
<span data-testid="trading-mode" className={itemValueClassName}>
{market.tradingMode}
</span>
</div>
<div className={headerItemClassName}>
<span className={itemClassName}>State</span>
<span data-testid="market-state" className={itemValueClassName}>
{market.state}
{market.tradingMode === MarketTradingMode.MonitoringAuction &&
market.data?.trigger &&
market.data.trigger !== AuctionTrigger.Unspecified
? `${formatLabel(
market.tradingMode
)} - ${market.data?.trigger.toLowerCase()}`
: formatLabel(market.tradingMode)}
</span>
</div>
</div>
@ -116,8 +125,8 @@ interface TradeGridProps {
export const TradeGrid = ({ market }: TradeGridProps) => {
const wrapperClasses = classNames(
'h-full max-h-full',
'grid gap-4 grid-cols-[1fr_375px_460px] grid-rows-[min-content_1fr_300px]',
'bg-black-10 dark:bg-white-10',
'grid gap-x-8 gap-y-4 grid-cols-[1fr_325px_425px] grid-rows-[min-content_1fr_200px]',
'bg-black-10 dark:bg-black-70',
'text-ui'
);
@ -150,24 +159,24 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
</TradeGridChild>
<TradeGridChild className="row-start-2 row-end-3 col-start-3 col-end-4">
<Tabs>
<Tab id="trades" name={t('Trades')}>
<TradingViews.Trades marketId={market.id} />
</Tab>
<Tab id="orderbook" name={t('Orderbook')}>
<TradingViews.Orderbook marketId={market.id} />
</Tab>
<Tab id="trades" name={t('Trades')}>
<TradingViews.Trades marketId={market.id} />
</Tab>
</Tabs>
</TradeGridChild>
<TradeGridChild className="col-span-3">
<Tabs>
<Tab id="orders" name={t('Orders')}>
<TradingViews.Orders />
</Tab>
<Tab id="positions" name={t('Positions')}>
<TradingViews.Positions />
</Tab>
<Tab id="accounts" name={t('Accounts')}>
<TradingViews.Accounts />
<Tab id="orders" name={t('Orders')}>
<TradingViews.Orders />
</Tab>
<Tab id="accounts" name={t('Collateral')}>
<TradingViews.Collateral />
</Tab>
</Tabs>
</TradeGridChild>

15
apps/trading/pages/portfolio/deposits-container.tsx Normal file
View File

@ -0,0 +1,15 @@
import { t } from '@vegaprotocol/react-helpers';
import { AnchorButton } from '@vegaprotocol/ui-toolkit';
export const DepositsContainer = () => {
return (
<div className="grid grid-cols-[1fr_min-content] gap-12 h-full">
<div />
<div className="p-12">
<AnchorButton data-testid="deposit" href="/portfolio/deposit">
{t('Deposit')}
</AnchorButton>
</div>
</div>
);
};

70
apps/trading/pages/portfolio/index.page.tsx
View File

@ -3,11 +3,13 @@ import { t } from '@vegaprotocol/react-helpers';
import { PositionsContainer } from '@vegaprotocol/positions';
import { OrderListContainer } from '@vegaprotocol/orders';
import { AccountsContainer } from '@vegaprotocol/accounts';
import { AnchorButton, Tab, Tabs } from '@vegaprotocol/ui-toolkit';
import { WithdrawalsContainer } from './withdrawals/withdrawals-container';
import { Tab, Tabs } from '@vegaprotocol/ui-toolkit';
import { WithdrawalsContainer } from './withdrawals-container';
import { FillsContainer } from '@vegaprotocol/fills';
import classNames from 'classnames';
import type { ReactNode } from 'react';
import { VegaWalletContainer } from '../../components/vega-wallet-container';
import { DepositsContainer } from './deposits-container';
const Portfolio = () => {
const wrapperClasses = classNames(
@ -22,54 +24,58 @@ const Portfolio = () => {
<PortfolioGridChild>
<Tabs>
<Tab id="positions" name={t('Positions')}>
<div className={tabContentClassName}>
<h4 className="text-h4 text-black dark:text-white p-8">
{t('Positions')}
</h4>
<div>
<PositionsContainer />
<VegaWalletContainer>
<div className={tabContentClassName}>
<h4 className="text-h4 text-black dark:text-white p-8">
{t('Positions')}
</h4>
<div>
<PositionsContainer />
</div>
</div>
</div>
</VegaWalletContainer>
</Tab>
<Tab id="orders" name={t('Orders')}>
<div className={tabContentClassName}>
<h4 className="text-h4 text-black dark:text-white p-8">
{t('Orders')}
</h4>
<div>
<OrderListContainer />
<VegaWalletContainer>
<div className={tabContentClassName}>
<h4 className="text-h4 text-black dark:text-white p-8">
{t('Orders')}
</h4>
<div>
<OrderListContainer />
</div>
</div>
</div>
</VegaWalletContainer>
</Tab>
<Tab id="fills" name={t('Fills')}>
<div className={tabContentClassName}>
<h4 className="text-h4 text-black dark:text-white p-8">
{t('Fills')}
</h4>
<div>
<FillsContainer />
<VegaWalletContainer>
<div className={tabContentClassName}>
<h4 className="text-h4 text-black dark:text-white p-8">
{t('Fills')}
</h4>
<div>
<FillsContainer />
</div>
</div>
</div>
</VegaWalletContainer>
</Tab>
</Tabs>
</PortfolioGridChild>
<PortfolioGridChild>
<Tabs>
<Tab id="collateral" name={t('Collateral')}>
<AccountsContainer />
<VegaWalletContainer>
<AccountsContainer />
</VegaWalletContainer>
</Tab>
<Tab id="deposits" name={t('Deposits')}>
<div className={tabContentClassName}>
<div className="p-8">
<AnchorButton data-testid="deposit" href="/portfolio/deposit">
{t('Deposit')}
</AnchorButton>
</div>
</div>
<DepositsContainer />
</Tab>
<Tab id="withdrawals" name={t('Withdrawals')}>
<Web3Container>
<WithdrawalsContainer />
<VegaWalletContainer>
<WithdrawalsContainer />
</VegaWalletContainer>
</Web3Container>
</Tab>
</Tabs>

14
apps/trading/pages/portfolio/withdrawals/withdrawals-container.tsx → apps/trading/pages/portfolio/withdrawals-container.tsx
View File

@ -1,6 +1,7 @@
import orderBy from 'lodash/orderBy';
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
import { useWithdrawals, WithdrawalsTable } from '@vegaprotocol/withdraws';
import Link from 'next/link';
export const WithdrawalsContainer = () => {
const { data, loading, error } = useWithdrawals();
@ -16,7 +17,16 @@ export const WithdrawalsContainer = () => {
(w) => new Date(w.createdTimestamp).getTime(),
'desc'
);
return <WithdrawalsTable withdrawals={withdrawals} />;
return (
<div className="grid grid-cols-[1fr_min-content] gap-12 h-full">
<WithdrawalsTable withdrawals={withdrawals} />
<div className="p-12">
<Link href="/portfolio/withdraw" passHref={true}>
<Button data-testid="start-withdrawal">Withdraw</Button>
</Link>
</div>
</div>
);
}}
/>
);

17
apps/trading/pages/portfolio/withdrawals/index.page.tsx
View File

@ -1,25 +1,12 @@
import { t } from '@vegaprotocol/react-helpers';
import { AnchorButton } from '@vegaprotocol/ui-toolkit';
import { VegaWalletContainer } from '../../../components/vega-wallet-container';
import { Web3Container } from '../../../components/web3-container';
import { WithdrawalsContainer } from './withdrawals-container';
import { WithdrawalsContainer } from '../withdrawals-container';
const Withdrawals = () => {
return (
<VegaWalletContainer>
<Web3Container>
<div className="h-full grid grid grid-rows-[min-content,1fr]">
<header className="flex justify-between p-24">
<h1 className="text-h3">{t('Withdrawals')}</h1>
<AnchorButton
href="/portfolio/withdraw"
data-testid="start-withdrawal"
>
{t('Start withdrawal')}
</AnchorButton>
</header>
<WithdrawalsContainer />
</div>
<WithdrawalsContainer />
</Web3Container>
</VegaWalletContainer>
);

2
libs/deal-ticket/src/components/deal-ticket-limit-amount.tsx
View File

@ -32,7 +32,7 @@ export const DealTicketLimitAmount = ({
/>
</FormGroup>
</div>
<div>@</div>
<div className="pt-4 text-black dark:text-white">@</div>
<div className="flex-1">
<FormGroup
labelFor="input-price-quote"

7
libs/deal-ticket/src/components/deal-ticket-market-amount.tsx
View File

@ -33,8 +33,11 @@ export const DealTicketMarketAmount = ({
/>
</FormGroup>
</div>
<div className="pt-4">@</div>
<div className="flex-1 pt-4" data-testid="last-price">
<div className="pt-4 text-black dark:text-white">@</div>
<div
className="flex-1 pt-4 text-black dark:text-white"
data-testid="last-price"
>
{price && quoteName ? (
<>
~{price} {quoteName}

30
libs/deal-ticket/src/components/deal-ticket.tsx
View File

@ -4,7 +4,11 @@ import {
VegaWalletOrderType,
VegaWalletOrderTimeInForce,
} from '@vegaprotocol/wallet';
import { t, addDecimal, toDecimal } from '@vegaprotocol/react-helpers';
import {
t,
toDecimal,
addDecimalsFormatNumber,
} from '@vegaprotocol/react-helpers';
import { Button, InputError } from '@vegaprotocol/ui-toolkit';
import { TypeSelector } from './type-selector';
import { SideSelector } from './side-selector';
@ -43,26 +47,26 @@ export const DealTicket = ({
const step = toDecimal(market.positionDecimalPlaces);
const orderType = watch('type');
const orderTimeInForce = watch('timeInForce');
const invalidText = useOrderValidation({
const { message, isDisabled: disabled } = useOrderValidation({
step,
market,
orderType,
orderTimeInForce,
fieldErrors: errors,
});
const isDisabled = transactionStatus === 'pending' || Boolean(invalidText);
const isDisabled = transactionStatus === 'pending' || disabled;
const onSubmit = useCallback(
(order: Order) => {
if (!isDisabled && !invalidText) {
if (!isDisabled) {
submit(order);
}
},
[isDisabled, invalidText, submit]
[isDisabled, submit]
);
return (
<form onSubmit={handleSubmit(onSubmit)} className="px-4 py-8" noValidate>
<form onSubmit={handleSubmit(onSubmit)} className="px-12 py-8" noValidate>
<Controller
name="type"
control={control}
@ -83,7 +87,10 @@ export const DealTicket = ({
register={register}
price={
market.depth.lastTrade
? addDecimal(market.depth.lastTrade.price, market.decimalPlaces)
? addDecimalsFormatNumber(
market.depth.lastTrade.price,
market.decimalPlaces
)
: undefined
}
quoteName={market.tradableInstrument.instrument.product.quoteName}
@ -118,9 +125,12 @@ export const DealTicket = ({
>
{transactionStatus === 'pending' ? t('Pending...') : t('Place order')}
</Button>
{invalidText && (
<InputError className="mb-8" data-testid="dealticket-error-message">
{invalidText}
{message && (
<InputError
className="mt-12 mb-12"
data-testid="dealticket-error-message"
>
{message}
</InputError>
)}
</form>

2
libs/deal-ticket/src/components/info-market.tsx
View File

@ -134,7 +134,7 @@ export const MarketInfoContainer = ({ marketId }: MarketInfoContainerProps) => {
export const Info = ({ market }: InfoProps) => {
const headerClassName =
'text-h5 font-bold uppercase text-black dark:text-white';
'text-h5 font-medium uppercase text-black dark:text-white';
const marketDataPanels = [
{
title: t('Current fees'),

15
libs/deposits/src/lib/deposit-limits.tsx
View File

@ -8,12 +8,19 @@ interface DepositLimitsProps {
}
export const DepositLimits = ({ limits }: DepositLimitsProps) => {
const maxLimit = limits.max.isEqualTo(Infinity)
? t('No limit')
: limits.max.toString();
let maxLimit = '';
if (limits.max.isEqualTo(Infinity)) {
maxLimit = t('No limit');
} else if (limits.max.isGreaterThan(1_000_000)) {
maxLimit = t('1m+');
} else {
maxLimit = limits.max.toString();
}
return (
<>
<p className="text-ui font-bold">{t('Temporary deposit limits')}</p>
<p className="text-ui font-bold">{t('Deposit limits')}</p>
<table className="w-full text-ui">
<tbody>
<tr>

2
libs/deposits/src/lib/deposit-manager.tsx
View File

@ -77,7 +77,7 @@ export const DepositManager = ({
const allowance = useGetAllowance(tokenContract, decimals);
// Set up approve transaction
const approve = useSubmitApproval(tokenContract);
const approve = useSubmitApproval(tokenContract, decimals);
// Set up deposit transaction
const { confirmationEvent, ...deposit } = useSubmitDeposit();

16
libs/deposits/src/lib/use-submit-approval.ts
View File

@ -1,17 +1,21 @@
import { removeDecimal } from '@vegaprotocol/react-helpers';
import type { Token } from '@vegaprotocol/smart-contracts';
import { useEthereumConfig, useEthereumTransaction } from '@vegaprotocol/web3';
export const useSubmitApproval = (contract: Token | null) => {
export const useSubmitApproval = (
contract: Token | null,
decimals: number | undefined
) => {
const { config } = useEthereumConfig();
const transaction = useEthereumTransaction(() => {
if (!contract || !config) {
if (!contract || !config || decimals === undefined) {
return null;
}
return contract.approve(
config.collateral_bridge_contract.address,
Number.MAX_SAFE_INTEGER.toString()
);
const amount = removeDecimal('1000000', decimals);
return contract.approve(config.collateral_bridge_contract.address, amount);
});
return transaction;

1
libs/environment/src/components/network-loader/index.ts
View File

@ -1 +0,0 @@
export * from './network-loader';

1
libs/environment/src/components/network-loader/index.tsx Normal file
View File

@ -0,0 +1 @@
export { NetworkLoader } from './network-loader';

136
libs/environment/src/components/network-loader/network-loader.tsx
View File

@ -1,128 +1,8 @@
import { useState, useEffect, useMemo } from 'react';
import { useMemo } from 'react';
import type { ReactNode } from 'react';
import type { ApolloClient } from '@apollo/client';
import { ApolloProvider } from '@apollo/client';
import {
Callout,
Intent,
Button,
Icon,
Loader,
} from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/react-helpers';
import { useEnvironment } from '../../hooks';
import type { ConfigStatus } from '../../types';
type MessageComponentProps = {
children: ReactNode;
};
const StatusMessage = ({ children }: MessageComponentProps) => (
<div className="flex items-center fixed bottom-0 right-0 px-16 bg-intent-highlight text-black">
{children}
</div>
);
type ErrorComponentProps = MessageComponentProps & {
children?: ReactNode;
showTryAgain?: boolean;
};
const Error = ({ children, showTryAgain }: ErrorComponentProps) => (
<div>
<div className="mb-16">{children}</div>
{showTryAgain && (
<Button
className="mt-8"
variant="secondary"
onClick={() => window.location.reload()}
>
{t('Try again')}
</Button>
)}
</div>
);
type StatusComponentProps = {
status: ConfigStatus;
children?: ReactNode;
};
const StatusComponent = ({ status, children }: StatusComponentProps) => {
switch (status) {
case 'error-loading-config':
return (
<Callout
title={t('Error')}
intent={Intent.Danger}
iconName="error"
iconDescription={t('Error')}
children={
<Error>
{t('There was an error fetching the network configuration.')}
</Error>
}
/>
);
case 'error-validating-config':
return (
<Callout
title={t('Error')}
intent={Intent.Danger}
iconName="error"
iconDescription={t('Error')}
children={
<Error>
{t('The network configuration for the app is invalid.')}
</Error>
}
/>
);
case 'error-loading-node':
return (
<Callout
title={t('Error')}
intent={Intent.Danger}
iconName="error"
iconDescription={t('Error')}
children={
<Error showTryAgain>{t('Failed to connect to a data node.')}</Error>
}
/>
);
case 'idle':
case 'loading-config':
return (
<>
{children}
<StatusMessage>
<Loader size="small" forceTheme="light" />
<span className="ml-8">{t('Loading configuration...')}</span>
</StatusMessage>
</>
);
case 'loading-node':
return (
<>
{children}
<StatusMessage>
<Loader size="small" forceTheme="light" />
<span className="ml-8">{t('Finding a node...')}</span>
</StatusMessage>
</>
);
case 'success':
return (
<>
{children}
<StatusMessage>
<Icon name="antenna" />
<span className="ml-8">{t("You're connected!")}</span>
</StatusMessage>
</>
);
}
};
type NetworkLoaderProps<T> = {
children?: ReactNode;
@ -135,9 +15,7 @@ export function NetworkLoader<T>({
children,
createClient,
}: NetworkLoaderProps<T>) {
// this is to prevent an error rendering callouts on the server side
const [canShowCallout, setShowCallout] = useState(false);
const { configStatus, VEGA_URL } = useEnvironment();
const { VEGA_URL } = useEnvironment();
const client = useMemo(() => {
if (VEGA_URL) {
@ -146,16 +24,12 @@ export function NetworkLoader<T>({
return undefined;
}, [VEGA_URL, createClient]);
useEffect(() => {
setShowCallout(true);
}, []);
if (!client) {
return canShowCallout ? (
return (
<div className="h-full min-h-screen flex items-center justify-center">
<StatusComponent status={configStatus}>{skeleton}</StatusComponent>
{skeleton}
</div>
) : null;
);
}
return <ApolloProvider client={client}>{children}</ApolloProvider>;

6
libs/environment/src/components/network-switcher/network-switcher.tsx
View File

@ -30,8 +30,10 @@ export const NetworkSwitcher = ({ onConnect }: NetworkSwitcherProps) => {
control={control}
render={({ field }) => (
<Select value={field.value} onChange={field.onChange}>
{Object.keys(VEGA_NETWORKS).map((network) => (
<option value={network}>{network}</option>
{Object.keys(VEGA_NETWORKS).map((network, index) => (
<option key={index} value={network}>
{network}
</option>
))}
</Select>
)}

56
libs/environment/src/components/node-switcher-dialog/node-switcher-dialog.tsx
View File

@ -1,27 +1,59 @@
import type { ComponentProps } from 'react';
import { Dialog } from '@vegaprotocol/ui-toolkit';
import { Dialog, Loader } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/react-helpers';
import { NodeSwitcher } from '../node-switcher';
import { useEnvironment } from '../../hooks/use-environment';
import type { Configuration } from '../../types';
type NodeSwitcherDialogProps = ComponentProps<typeof NodeSwitcher> & {
type NodeSwitcherDialogProps = Pick<
ComponentProps<typeof NodeSwitcher>,
'initialErrorType' | 'onConnect'
> & {
loading: boolean;
config?: Configuration;
dialogOpen: boolean;
toggleDialogOpen: (dialogOpen: boolean) => void;
setDialogOpen: (dialogOpen: boolean) => void;
};
export const NodeSwitcherDialog = ({
config,
loading,
initialErrorType,
dialogOpen,
toggleDialogOpen,
setDialogOpen,
onConnect,
}: NodeSwitcherDialogProps) => {
const { VEGA_ENV } = useEnvironment();
return (
<Dialog open={dialogOpen} onChange={toggleDialogOpen}>
<NodeSwitcher
config={config}
onConnect={(url) => {
onConnect(url);
toggleDialogOpen(false);
}}
/>
<Dialog open={dialogOpen} onChange={setDialogOpen}>
<div className="uppercase text-h3 text-center mb-8">
{t('Connected node')}
</div>
{!config && loading && (
<div className="py-16">
<p className="mb-32 text-center">{t('Loading configuration...')}</p>
<Loader size="large" />
</div>
)}
{config && dialogOpen && (
<>
<p className="mb-32 text-center">
{t(`This app will only work on a `)}
<span className="font-mono capitalize">
{VEGA_ENV.toLowerCase()}
</span>
{t(' chain ID')}
</p>
<NodeSwitcher
config={config}
initialErrorType={initialErrorType}
onConnect={(url) => {
onConnect(url);
setDialogOpen(false);
}}
/>
</>
)}
</Dialog>
);
};

23
libs/environment/src/components/node-switcher/__generated__/BlockHeightStats.ts generated
View File

@ -1,23 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// @generated
// This file was automatically generated and should not be edited.
// ====================================================
// GraphQL query operation: BlockHeightStats
// ====================================================
export interface BlockHeightStats_statistics {
__typename: "Statistics";
/**
* Current block number
*/
blockHeight: string;
}
export interface BlockHeightStats {
/**
* get statistics about the vega node
*/
statistics: BlockHeightStats_statistics;
}

25
libs/environment/src/components/node-switcher/layout-cell.tsx
View File

@ -3,6 +3,7 @@ import classnames from 'classnames';
import { t } from '@vegaprotocol/react-helpers';
type LayoutCellProps = {
label?: string;
hasError?: boolean;
isLoading?: boolean;
children?: ReactNode;
@ -10,17 +11,27 @@ type LayoutCellProps = {
export const LayoutCell = ({
hasError,
label,
isLoading,
children,
}: LayoutCellProps) => {
const classes = [
'px-8 lg:text-right flex justify-between lg:block',
'bg-white-60 dark:bg-black-60 lg:bg-transparent lg:dark:bg-transparent',
'm-2 lg:m-0',
];
return (
<div
className={classnames('px-8 text-right', {
'text-danger': !isLoading && hasError,
'text-white-60 dark:text-black-60': isLoading,
})}
>
{isLoading ? t('Checking') : children || '-'}
<div className={classnames(classes)}>
{label && <span className="lg:hidden">{label}</span>}
<span
className={classnames('font-mono', {
'text-danger': !isLoading && hasError,
'text-white-60 dark:text-black-60': isLoading,
})}
>
{isLoading ? t('Checking') : children || '-'}
</span>
</div>
);
};

2
libs/environment/src/components/node-switcher/layout-row.tsx
View File

@ -6,7 +6,7 @@ type LayoutRowProps = {
export const LayoutRow = ({ children }: LayoutRowProps) => {
return (
<div className="grid gap-4 py-8 w-full grid-cols-[minmax(200px,_1fr),_150px_125px_100px]">
<div className="lg:grid lg:gap-4 py-8 w-full lg:h-[42px] lg:grid-cols-[minmax(200px,_1fr),_150px_125px_100px]">
{children}
</div>
);

17
libs/environment/src/components/node-switcher/node-block-height.tsx
View File

@ -1,6 +1,7 @@
import { useEffect } from 'react';
import { gql, useQuery } from '@apollo/client';
import type { BlockHeightStats } from './__generated__/BlockHeightStats';
import { useQuery } from '@apollo/client';
import type { Statistics } from '../../utils/__generated__/Statistics';
import { STATS_QUERY } from '../../utils/request-node';
type NodeBlockHeightProps = {
value?: number;
@ -9,17 +10,9 @@ type NodeBlockHeightProps = {
const POLL_INTERVAL = 3000;
const BLOCK_HEIGHT_QUERY = gql`
query BlockHeightStats {
statistics {
blockHeight
}
}
`;
export const NodeBlockHeight = ({ value, setValue }: NodeBlockHeightProps) => {
const { data, startPolling, stopPolling } = useQuery<BlockHeightStats>(
BLOCK_HEIGHT_QUERY,
const { data, startPolling, stopPolling } = useQuery<Statistics>(
STATS_QUERY,
{
pollInterval: POLL_INTERVAL,
}

17
libs/environment/src/components/node-switcher/node-error.tsx
View File

@ -1,3 +1,16 @@
export const NodeError = () => {
return <div />;
type NodeErrorProps = {
headline?: string;
message?: string;
};
export const NodeError = ({ headline, message }: NodeErrorProps) => {
if (!headline && !message) {
return null;
}
return (
<div className="p-16 my-16 border border-danger">
<p className="font-bold">{headline}</p>
<p>{message}</p>
</div>
);
};

97
libs/environment/src/components/node-switcher/node-stats.tsx
View File

@ -1,55 +1,57 @@
import type { ReactNode } from 'react';
import { useEffect, useState, useCallback } from 'react';
import { ApolloProvider } from '@apollo/client';
import { t } from '@vegaprotocol/react-helpers';
import type { NodeData } from '../../types';
import { createClient } from '../../utils/apollo-client';
import { useNode } from '../../hooks/use-node';
import type createClient from '../../utils/apollo-client';
import { LayoutRow } from './layout-row';
import { LayoutCell } from './layout-cell';
import { NodeBlockHeight } from './node-block-height';
type NodeStatsContentProps = {
data: NodeData;
data?: NodeData;
highestBlock: number;
setBlock: (value: number) => void;
children: ReactNode;
children?: ReactNode;
};
const getResponseTimeDisplayValue = (
responseTime: NodeData['responseTime']
responseTime?: NodeData['responseTime']
) => {
if (typeof responseTime.value === 'number') {
if (typeof responseTime?.value === 'number') {
return `${Number(responseTime.value).toFixed(2)}ms`;
}
if (responseTime.hasError) {
if (responseTime?.hasError) {
return t('n/a');
}
return '-';
};
const getBlockDisplayValue = (block: NodeData['block']) => {
if (block.value) {
return '';
const getBlockDisplayValue = (
block: NodeData['block'] | undefined,
setBlock: (block: number) => void
) => {
if (block?.value) {
return <NodeBlockHeight value={block?.value} setValue={setBlock} />;
}
if (block.hasError) {
if (block?.hasError) {
return t('n/a');
}
return '-';
};
const getSslDisplayValue = (ssl: NodeData['ssl']) => {
if (ssl.value) {
const getSslDisplayValue = (ssl?: NodeData['ssl']) => {
if (ssl?.value) {
return t('Yes');
}
if (ssl.hasError) {
if (ssl?.hasError) {
return t('No');
}
return '-';
};
const NodeStatsContent = ({
data: { url, responseTime, block, ssl },
// @ts-ignore Allow defaulting to an empty object
data = {},
highestBlock,
setBlock,
children,
@ -58,24 +60,28 @@ const NodeStatsContent = ({
<LayoutRow>
{children}
<LayoutCell
isLoading={responseTime.isLoading}
hasError={responseTime.hasError}
label={t('Response time')}
isLoading={data.responseTime?.isLoading}
hasError={data.responseTime?.hasError}
>
{getResponseTimeDisplayValue(responseTime)}
{getResponseTimeDisplayValue(data.responseTime)}
</LayoutCell>
<LayoutCell
isLoading={block.isLoading}
label={t('Block')}
isLoading={data.block?.isLoading}
hasError={
block.hasError || (!!block.value && highestBlock > block.value)
data.block?.hasError ||
(!!data.block?.value && highestBlock > data.block.value)
}
>
{url && block.value && (
<NodeBlockHeight value={block.value} setValue={setBlock} />
)}
{getBlockDisplayValue(block)}
{getBlockDisplayValue(data.block, setBlock)}
</LayoutCell>
<LayoutCell isLoading={ssl.isLoading} hasError={ssl.hasError}>
{getSslDisplayValue(ssl)}
<LayoutCell
label={t('SSL')}
isLoading={data.ssl?.isLoading}
hasError={data.ssl?.hasError}
>
{getSslDisplayValue(data.ssl)}
</LayoutCell>
</LayoutRow>
);
@ -95,47 +101,28 @@ const Wrapper = ({ client, children }: WrapperProps) => {
};
export type NodeStatsProps = {
url?: string;
data?: NodeData;
client?: ReturnType<typeof createClient>;
highestBlock: number;
setBlock: (value: number) => void;
render: (data: NodeData) => ReactNode;
children?: ReactNode;
};
export const NodeStats = ({
url,
data,
client,
highestBlock,
render,
children,
setBlock,
}: NodeStatsProps) => {
const [client, setClient] = useState<
undefined | ReturnType<typeof createClient>
>();
const { state, reset, updateBlockState } = useNode(url, client);
useEffect(() => {
client?.stop();
reset();
setClient(url ? createClient(url) : undefined);
return () => client?.stop();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [url]);
const onHandleBlockChange = useCallback(
(value: number) => {
updateBlockState(value);
setBlock(value);
},
[updateBlockState, setBlock]
);
return (
<Wrapper client={client}>
<NodeStatsContent
data={state}
data={data}
highestBlock={highestBlock}
setBlock={onHandleBlockChange}
setBlock={setBlock}
>
{render(state)}
{children}
</NodeStatsContent>
</Wrapper>
);

206
libs/environment/src/components/node-switcher/node-switcher.tsx
View File

@ -1,16 +1,32 @@
import { useState } from 'react';
import { useState, useMemo } from 'react';
import { t } from '@vegaprotocol/react-helpers';
import { RadioGroup, Button, Radio } from '@vegaprotocol/ui-toolkit';
import {
RadioGroup,
Button,
Input,
Link,
Radio,
} from '@vegaprotocol/ui-toolkit';
import { useEnvironment } from '../../hooks/use-environment';
import type { Configuration, NodeData, Networks } from '../../types';
import { useNodes } from '../../hooks/use-nodes';
import {
getIsNodeLoading,
getIsNodeDisabled,
getIsFormDisabled,
getErrorType,
getErrorByType,
getHasInvalidChain,
} from '../../utils/validate-node';
import { CUSTOM_NODE_KEY } from '../../types';
import type { Configuration, NodeData, ErrorType, Networks } from '../../types';
import { LayoutRow } from './layout-row';
import { LayoutCell } from './layout-cell';
import { NodeError } from './node-error';
import { NodeStats } from './node-stats';
type NodeSwitcherProps = {
error?: string;
config: Configuration;
initialErrorType?: ErrorType;
onConnect: (url: string) => void;
};
@ -18,85 +34,153 @@ const getDefaultNode = (urls: string[], currentUrl?: string) => {
return currentUrl && urls.includes(currentUrl) ? currentUrl : undefined;
};
const getIsLoading = ({ chain, responseTime, block, ssl }: NodeData) => {
return (
chain.isLoading ||
responseTime.isLoading ||
block.isLoading ||
ssl.isLoading
);
const getHighestBlock = (env: Networks, state: Record<string, NodeData>) => {
return Object.keys(state).reduce((acc, node) => {
if (getHasInvalidChain(env, state[node].chain.value)) return acc;
const value = Number(state[node].block.value);
return value ? Math.max(acc, value) : acc;
}, 0);
};
const getHasMatchingChain = (env: Networks, chain?: string) => {
return chain?.includes(env.toLowerCase()) ?? false;
};
const getIsDisabled = (env: Networks, data: NodeData) => {
const { chain, responseTime, block, ssl } = data;
return (
!getHasMatchingChain(env, data.chain.value) ||
getIsLoading(data) ||
chain.hasError ||
responseTime.hasError ||
block.hasError ||
ssl.hasError
);
};
export const NodeSwitcher = ({ config, onConnect }: NodeSwitcherProps) => {
export const NodeSwitcher = ({
config,
initialErrorType,
onConnect,
}: NodeSwitcherProps) => {
const { VEGA_ENV, VEGA_URL } = useEnvironment();
const [node, setNode] = useState(getDefaultNode(config.hosts, VEGA_URL));
const [highestBlock, setHighestBlock] = useState(0);
const [networkError, setNetworkError] = useState(
getErrorByType(initialErrorType, VEGA_ENV, VEGA_URL)
);
const [customNodeText, setCustomNodeText] = useState('');
const [nodeRadio, setNodeRadio] = useState(
getDefaultNode(config.hosts, VEGA_URL)
);
const { state, clients, updateNodeUrl, updateNodeBlock } = useNodes(
VEGA_ENV,
config
);
const highestBlock = useMemo(
() => getHighestBlock(VEGA_ENV, state),
[VEGA_ENV, state]
);
const customUrl = state[CUSTOM_NODE_KEY]?.url;
const onSubmit = (node: ReturnType<typeof getDefaultNode>) => {
if (node) {
onConnect(node);
if (node && state[node]) {
onConnect(state[node].url);
}
};
const isSubmitDisabled = !node;
const isSubmitDisabled = getIsFormDisabled(
nodeRadio,
customNodeText,
VEGA_ENV,
state
);
const customNodeData =
nodeRadio &&
state[CUSTOM_NODE_KEY] &&
state[CUSTOM_NODE_KEY].url === customNodeText
? state[nodeRadio]
: undefined;
const customNodeError = getErrorByType(
getErrorType(VEGA_ENV, customNodeData),
VEGA_ENV,
customUrl
);
return (
<div className="text-black dark:text-white w-full">
<NodeError />
<form onSubmit={() => onSubmit(node)}>
<p className="text-body-large font-bold mb-32">
<div className="text-black dark:text-white w-full lg:min-w-[800px]">
<NodeError {...(customNodeError || networkError)} />
<form onSubmit={() => onSubmit(nodeRadio)}>
<p className="text-body-large font-bold mt-16 mb-32">
{t('Select a GraphQL node to connect to:')}
</p>
<div>
<LayoutRow>
<div />
<LayoutCell>{t('Response time')}</LayoutCell>
<LayoutCell>{t('Block')}</LayoutCell>
<LayoutCell>{t('SSL')}</LayoutCell>
</LayoutRow>
<div className="hidden lg:block">
<LayoutRow>
<div />
<span className="px-8 text-right">{t('Response time')}</span>
<span className="px-8 text-right">{t('Block')}</span>
<span className="px-8 text-right">{t('SSL')}</span>
</LayoutRow>
</div>
<RadioGroup
className="block"
value={node}
onChange={(value) => setNode(value)}
value={nodeRadio}
onChange={(value) => {
setNodeRadio(value);
setNetworkError(null);
}}
>
<div>
{config.hosts.map((url, index) => (
<div className="w-full">
{config.hosts.map((node, index) => (
<NodeStats
key={index}
url={url}
data={state[node]}
client={clients[node]}
highestBlock={highestBlock}
setBlock={(block) =>
setHighestBlock(Math.max(block, highestBlock))
}
render={(data) => (
<div>
<Radio
id={`node-url-${index}`}
labelClassName="whitespace-nowrap text-ellipsis overflow-hidden"
value={url}
label={url}
disabled={getIsDisabled(VEGA_ENV, data)}
setBlock={(block) => updateNodeBlock(node, block)}
>
<div className="mb-8 break-all">
<Radio
id={`node-url-${index}`}
labelClassName="whitespace-nowrap text-ellipsis overflow-hidden"
value={node}
label={node}
disabled={getIsNodeDisabled(VEGA_ENV, state[node])}
/>
</div>
</NodeStats>
))}
<NodeStats
data={state[CUSTOM_NODE_KEY]}
client={customUrl ? clients[customUrl] : undefined}
highestBlock={highestBlock}
setBlock={(block) => updateNodeBlock(CUSTOM_NODE_KEY, block)}
>
<div className="flex w-full mb-8">
<Radio
id={`node-url-custom`}
value={CUSTOM_NODE_KEY}
label={
nodeRadio === CUSTOM_NODE_KEY || !!state[CUSTOM_NODE_KEY]
? ''
: t('Other')
}
/>
{(customNodeText || nodeRadio === CUSTOM_NODE_KEY) && (
<div className="flex w-full gap-8">
<Input
placeholder="https://"
value={customNodeText}
hasError={
!!customNodeText &&
!!(
customNodeError?.headline ||
customNodeError?.message
)
}
onChange={(e) => setCustomNodeText(e.target.value)}
/>
<Link
aria-disabled={!customNodeText}
onClick={() => {
setNetworkError(null);
updateNodeUrl(CUSTOM_NODE_KEY, customNodeText);
}}
>
{state[CUSTOM_NODE_KEY] &&
getIsNodeLoading(state[CUSTOM_NODE_KEY])
? t('Checking')
: t('Check')}
</Link>
</div>
)}
/>
))}
</div>
</NodeStats>
</div>
</RadioGroup>
</div>

82
libs/environment/src/hooks/mocks/apollo-client.tsx Normal file
View File

@ -0,0 +1,82 @@
import {
STATS_QUERY,
TIME_UPDATE_SUBSCRIPTION,
} from '../../utils/request-node';
import type { Statistics } from '../../utils/__generated__/Statistics';
import type { BlockTime } from '../../utils/__generated__/BlockTime';
import { Networks } from '../../types';
import type { RequestHandlerResponse } from 'mock-apollo-client';
import { createMockClient } from 'mock-apollo-client';
export type MockRequestConfig = {
hasError?: boolean;
delay?: number;
};
type MockClientProps = {
network?: Networks;
statistics?: MockRequestConfig;
busEvents?: MockRequestConfig;
};
export const getMockBusEventsResult = (): BlockTime => ({
busEvents: [
{
__typename: 'BusEvent',
eventId: '0',
},
],
});
export const getMockStatisticsResult = (
env: Networks = Networks.TESTNET
): Statistics => ({
statistics: {
__typename: 'Statistics',
chainId: `${env.toLowerCase()}-0123`,
blockHeight: '11',
},
});
export const getMockQueryResult = (env: Networks): Statistics => ({
statistics: {
__typename: 'Statistics',
chainId: `${env.toLowerCase()}-0123`,
blockHeight: '11',
},
});
function getHandler<T>(
{ hasError, delay = 0 }: MockRequestConfig = {},
result: T
) {
return () =>
new Promise<RequestHandlerResponse<T>>((resolve, reject) => {
setTimeout(() => {
if (hasError) {
reject(new Error('Failed to execute query.'));
return;
}
resolve({ data: result });
}, delay);
});
}
export default function ({
network,
statistics,
busEvents,
}: MockClientProps = {}) {
const mockClient = createMockClient();
mockClient.setRequestHandler(
STATS_QUERY,
getHandler(statistics, getMockStatisticsResult(network))
);
mockClient.setRequestHandler(
TIME_UPDATE_SUBSCRIPTION,
getHandler(busEvents, getMockBusEventsResult())
);
return mockClient;
}

323
libs/environment/src/hooks/use-config.spec.tsx
View File

@ -1,19 +1,17 @@
import { renderHook } from '@testing-library/react-hooks';
import type { EnvironmentWithOptionalUrl } from './use-config';
import { useConfig, LOCAL_STORAGE_NETWORK_KEY } from './use-config';
import { Networks } from '../types';
import { useConfig } from './use-config';
import { Networks, ErrorType } from '../types';
type HostMapping = Record<string, number | Error>;
const mockHostsMap: HostMapping = {
'https://host1.com': 300,
'https://host2.com': 500,
'https://host3.com': 100,
'https://host4.com': 650,
const mockConfig = {
hosts: [
'https://vega-host-1.com',
'https://vega-host-2.com',
'https://vega-host-3.com',
'https://vega-host-4.com',
],
};
const hostList = Object.keys(mockHostsMap);
const mockEnvironment: EnvironmentWithOptionalUrl = {
VEGA_ENV: Networks.TESTNET,
VEGA_CONFIG_URL: 'https://vega.url/config.json',
@ -26,281 +24,110 @@ const mockEnvironment: EnvironmentWithOptionalUrl = {
GITHUB_FEEDBACK_URL: 'https://github.com/test/feedback',
};
function setupFetch(configUrl: string, hostMap: HostMapping) {
const hostUrls = Object.keys(hostMap);
function setupFetch(configUrl: string) {
return (url: RequestInfo) => {
if (url === configUrl) {
return Promise.resolve({
ok: true,
json: () => Promise.resolve({ hosts: hostUrls }),
json: () => Promise.resolve(mockConfig),
} as Response);
}
if (hostUrls.includes(url as string)) {
const value = hostMap[url as string];
return new Promise<Response>((resolve, reject) => {
if (typeof value === 'number') {
setTimeout(() => {
resolve({ ok: true } as Response);
}, value);
} else {
reject(value);
}
});
}
return Promise.resolve({
ok: true,
} as Response);
};
}
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => {};
global.fetch = jest.fn();
const mockUpdate = jest.fn();
const onError = jest.fn();
beforeAll(() => {
jest.useFakeTimers();
});
beforeEach(() => {
jest.useFakeTimers();
mockUpdate.mockClear();
onError.mockClear();
window.localStorage.clear();
// @ts-ignore typescript doesn't recognise the mocked instance
global.fetch.mockReset();
// @ts-ignore typescript doesn't recognise the mocked instance
global.fetch.mockImplementation(
setupFetch(mockEnvironment.VEGA_CONFIG_URL ?? '', mockHostsMap)
setupFetch(mockEnvironment.VEGA_CONFIG_URL ?? '')
);
});
afterAll(() => {
// @ts-ignore: typescript doesn't recognise the mocked fetch instance
fetch.mockRestore();
jest.clearAllMocks();
});
describe('useConfig hook', () => {
it('updates the environment with a host url from the network configuration', async () => {
const allowedStatuses = [
'idle',
'loading-config',
'loading-node',
'success',
];
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, mockUpdate)
);
await waitForNextUpdate();
jest.runAllTimers();
await waitForNextUpdate();
expect(result.current.status).toBe('success');
result.all.forEach((state) => {
expect(allowedStatuses).toContain('status' in state && state.status);
});
// fetches config
expect(fetch).toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
// calls each node
hostList.forEach((url) => {
expect(fetch).toHaveBeenCalledWith(url);
});
// updates the environment
expect(hostList).toContain(mockUpdate.mock.calls[0][0]({}).VEGA_URL);
});
it('uses the host from the configuration which responds first', async () => {
const shortestResponseTime = Object.values(mockHostsMap).sort()[0];
const expectedHost = hostList.find((url: keyof typeof mockHostsMap) => {
return mockHostsMap[url] === shortestResponseTime;
});
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, mockUpdate)
);
await waitForNextUpdate();
jest.runAllTimers();
await waitForNextUpdate();
expect(result.current.status).toBe('success');
expect(mockUpdate.mock.calls[0][0]({}).VEGA_URL).toBe(expectedHost);
});
it('ignores failing hosts and uses one which returns a success response', async () => {
const mockHostsMapScoped = {
'https://host1.com': 350,
'https://host2.com': new Error('Server error'),
'https://host3.com': 230,
'https://host4.com': new Error('Server error'),
it("doesn't update when there is no VEGA_CONFIG_URL in the environment", async () => {
const mockEnvWithoutUrl = {
...mockEnvironment,
VEGA_CONFIG_URL: undefined,
};
const { result } = renderHook(() => useConfig(mockEnvWithoutUrl, onError));
expect(result.current.config).toBe(undefined);
});
it('fetches configuration from the provided url', async () => {
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, onError)
);
await waitForNextUpdate();
expect(fetch).toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
expect(result.current.config).toEqual(mockConfig);
});
it('caches the configuration', async () => {
const { result: firstResult, waitForNextUpdate: waitForFirstUpdate } =
renderHook(() => useConfig(mockEnvironment, onError));
await waitForFirstUpdate();
expect(fetch).toHaveBeenCalledTimes(1);
expect(firstResult.current.config).toEqual(mockConfig);
const { result: secondResult } = renderHook(() =>
useConfig(mockEnvironment, onError)
);
expect(fetch).toHaveBeenCalledTimes(1);
expect(secondResult.current.config).toEqual(mockConfig);
});
it('executes the error callback when the config endpoint fails', async () => {
// @ts-ignore typescript doesn't recognise the mocked instance
global.fetch.mockImplementation(
setupFetch(mockEnvironment.VEGA_CONFIG_URL ?? '', mockHostsMapScoped)
global.fetch.mockImplementation(() => Promise.reject());
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, onError)
);
await waitForNextUpdate();
expect(result.current.config).toEqual({ hosts: [] });
expect(onError).toHaveBeenCalledWith(ErrorType.CONFIG_LOAD_ERROR);
});
it('executes the error callback when the config validation fails', async () => {
// @ts-ignore typescript doesn't recognise the mocked instance
global.fetch.mockImplementation(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ data: 'not-valid-config' }),
})
);
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, mockUpdate)
useConfig(mockEnvironment, onError)
);
await waitForNextUpdate();
jest.runAllTimers();
await waitForNextUpdate();
expect(result.current.status).toBe('success');
expect(mockUpdate.mock.calls[0][0]({}).VEGA_URL).toBe('https://host3.com');
});
it('returns the correct error status for when the config cannot be accessed', async () => {
// @ts-ignore typescript doesn't recognise the mocked instance
global.fetch.mockImplementation((url: RequestInfo) => {
if (url === mockEnvironment.VEGA_CONFIG_URL) {
return Promise.reject(new Error('Server error'));
}
return Promise.resolve({ ok: true } as Response);
});
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, mockUpdate)
);
await waitForNextUpdate();
expect(result.current.status).toBe('error-loading-config');
expect(mockUpdate).not.toHaveBeenCalled();
});
it('returns the correct error status for when the config is not valid', async () => {
// @ts-ignore typescript doesn't recognise the mocked instance
global.fetch.mockImplementation((url: RequestInfo) => {
if (url === mockEnvironment.VEGA_CONFIG_URL) {
return Promise.resolve({
ok: true,
json: () => Promise.resolve({ some: 'data' }),
});
}
return Promise.resolve({ ok: true } as Response);
});
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, mockUpdate)
);
await waitForNextUpdate();
expect(result.current.status).toBe('error-validating-config');
expect(mockUpdate).not.toHaveBeenCalled();
});
it('returns the correct error status for when no hosts can be accessed', async () => {
const mockHostsMapScoped = {
'https://host1.com': new Error('Server error'),
'https://host2.com': new Error('Server error'),
'https://host3.com': new Error('Server error'),
'https://host4.com': new Error('Server error'),
};
// @ts-ignore typescript doesn't recognise the mocked instance
global.fetch.mockImplementation(
setupFetch(mockEnvironment.VEGA_CONFIG_URL ?? '', mockHostsMapScoped)
);
const { result, waitForNextUpdate } = renderHook(() =>
useConfig(mockEnvironment, mockUpdate)
);
await waitForNextUpdate();
expect(result.current.status).toBe('error-loading-node');
expect(mockUpdate).not.toHaveBeenCalled();
});
it('caches the list of networks', async () => {
const run1 = renderHook(() => useConfig(mockEnvironment, mockUpdate));
await run1.waitForNextUpdate();
jest.runAllTimers();
await run1.waitForNextUpdate();
expect(run1.result.current.status).toBe('success');
expect(fetch).toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
// @ts-ignore typescript doesn't recognise the mocked instance
fetch.mockClear();
const run2 = renderHook(() => useConfig(mockEnvironment, mockUpdate));
jest.runAllTimers();
await run2.waitForNextUpdate();
expect(run2.result.current.status).toBe('success');
expect(fetch).not.toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
});
it('caches the list of networks between runs', async () => {
const run1 = renderHook(() => useConfig(mockEnvironment, mockUpdate));
await run1.waitForNextUpdate();
jest.runAllTimers();
await run1.waitForNextUpdate();
expect(run1.result.current.status).toBe('success');
expect(fetch).toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
// @ts-ignore typescript doesn't recognise the mocked instance
fetch.mockClear();
const run2 = renderHook(() => useConfig(mockEnvironment, mockUpdate));
jest.runAllTimers();
await run2.waitForNextUpdate();
expect(run2.result.current.status).toBe('success');
expect(fetch).not.toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
});
it('refetches the network configuration and resets the cache when malformed data found in the storage', async () => {
window.localStorage.setItem(
`${LOCAL_STORAGE_NETWORK_KEY}-${mockEnvironment.VEGA_ENV}`,
'{not:{valid:{json'
);
const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(noop);
const run1 = renderHook(() => useConfig(mockEnvironment, mockUpdate));
await run1.waitForNextUpdate();
jest.runAllTimers();
await run1.waitForNextUpdate();
expect(run1.result.current.status).toBe('success');
expect(fetch).toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
expect(consoleWarnSpy).toHaveBeenCalled();
consoleWarnSpy.mockRestore();
});
it('refetches the network configuration and resets the cache when invalid data found in the storage', async () => {
window.localStorage.setItem(
`${LOCAL_STORAGE_NETWORK_KEY}-${mockEnvironment.VEGA_ENV}`,
JSON.stringify({ invalid: 'data' })
);
const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(noop);
const run1 = renderHook(() => useConfig(mockEnvironment, mockUpdate));
await run1.waitForNextUpdate();
jest.runAllTimers();
await run1.waitForNextUpdate();
expect(run1.result.current.status).toBe('success');
expect(fetch).toHaveBeenCalledWith(mockEnvironment.VEGA_CONFIG_URL);
expect(consoleSpy).toHaveBeenCalled();
consoleSpy.mockRestore();
expect(result.current.config).toBe(undefined);
expect(onError).toHaveBeenCalledWith(ErrorType.CONFIG_VALIDATION_ERROR);
});
});

105
libs/environment/src/hooks/use-config.tsx
View File

@ -1,33 +1,26 @@
import type { Dispatch, SetStateAction } from 'react';
import { useState, useEffect } from 'react';
import { LocalStorage } from '@vegaprotocol/react-helpers';
import type {
Environment,
Configuration,
ConfigStatus,
Networks,
} from '../types';
import { ErrorType } from '../types';
import type { Environment, Configuration, Networks } from '../types';
import { validateConfiguration } from '../utils/validate-configuration';
import { promiseRaceToSuccess } from '../utils/promise-race-success';
export const LOCAL_STORAGE_NETWORK_KEY = 'vegaNetworkConfig';
export type EnvironmentWithOptionalUrl = Partial<Environment> &
Omit<Environment, 'VEGA_URL'>;
const requestToNode = async (url: string, index: number): Promise<number> => {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed connecting to node: ${url}.`);
const compileHosts = (hosts: string[], envUrl?: string) => {
if (envUrl && !hosts.includes(envUrl)) {
return [...hosts, envUrl];
}
return index;
return hosts;
};
const getCacheKey = (env: Networks) => `${LOCAL_STORAGE_NETWORK_KEY}-${env}`;
const getCachedConfig = (env: Networks) => {
const key = getCacheKey(env);
const value = LocalStorage.getItem(key);
const cacheKey = getCacheKey(env);
const value = LocalStorage.getItem(cacheKey);
if (value) {
try {
@ -40,9 +33,9 @@ const getCachedConfig = (env: Networks) => {
return config;
} catch (err) {
LocalStorage.removeItem(key);
LocalStorage.removeItem(cacheKey);
console.warn(
'Malformed data found for network configuration. Removed and continuing...'
'Malformed data found for network configuration. Removed cached configuration, continuing...'
);
}
}
@ -52,80 +45,54 @@ const getCachedConfig = (env: Networks) => {
export const useConfig = (
environment: EnvironmentWithOptionalUrl,
updateEnvironment: Dispatch<SetStateAction<Environment>>
onError: (errorType: ErrorType) => void
) => {
const [loading, setLoading] = useState(false);
const [config, setConfig] = useState<Configuration | undefined>(
getCachedConfig(environment.VEGA_ENV)
);
const [status, setStatus] = useState<ConfigStatus>(
environment.VEGA_CONFIG_URL ? 'idle' : 'success'
);
useEffect(() => {
if (!config && status === 'idle') {
(async () => {
setStatus('loading-config');
let isMounted = true;
(async () => {
if (!config && environment.VEGA_CONFIG_URL) {
isMounted && setLoading(true);
try {
const response = await fetch(environment.VEGA_CONFIG_URL ?? '');
const response = await fetch(environment.VEGA_CONFIG_URL);
const configData: Configuration = await response.json();
if (validateConfiguration(configData)) {
setStatus('error-validating-config');
onError(ErrorType.CONFIG_VALIDATION_ERROR);
isMounted && setLoading(false);
return;
}
setConfig({ hosts: configData.hosts });
const hosts = compileHosts(configData.hosts, environment.VEGA_URL);
isMounted && setConfig({ hosts });
LocalStorage.setItem(
getCacheKey(environment.VEGA_ENV),
JSON.stringify({ hosts: configData.hosts })
JSON.stringify({ hosts })
);
isMounted && setLoading(false);
} catch (err) {
setStatus('error-loading-config');
if (isMounted) {
setLoading(false);
setConfig({ hosts: [] });
}
onError(ErrorType.CONFIG_LOAD_ERROR);
}
})();
}
}
})();
return () => {
isMounted = false;
};
// load config only once per runtime
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [environment.VEGA_CONFIG_URL, !!config, status, setStatus, setConfig]);
useEffect(() => {
if (
config &&
!['loading-node', 'success', 'error-loading-node'].includes(status)
) {
(async () => {
setStatus('loading-node');
// if there's only one configured node to choose from, set is as the env url
if (config.hosts.length === 1) {
setStatus('success');
updateEnvironment((prevEnvironment) => ({
...prevEnvironment,
VEGA_URL: prevEnvironment.VEGA_URL || config.hosts[0],
}));
return;
}
// when there are multiple possible hosts, set the env url to the node which responds first
try {
const requests = config.hosts.map(requestToNode);
const index = await promiseRaceToSuccess(requests);
setStatus('success');
updateEnvironment((prevEnvironment) => ({
...prevEnvironment,
VEGA_URL: prevEnvironment.VEGA_URL || config.hosts[index],
}));
} catch (err) {
setStatus('error-loading-node');
}
})();
}
// load config only once per runtime
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [status, !!config, setStatus, updateEnvironment]);
}, [environment.VEGA_CONFIG_URL, !!config, onError, setLoading]);
return {
status,
loading,
config,
};
};

444
libs/environment/src/hooks/use-environment.spec.tsx
View File

@ -1,8 +1,22 @@
import type { ComponentProps } from 'react';
// having the node switcher dialog in the environment provider breaks the test renderer
// workaround based on: https://github.com/facebook/react/issues/11565
import type { ComponentProps, ReactNode } from 'react';
import { renderHook } from '@testing-library/react-hooks';
import type { EnvironmentState } from './use-environment';
import createClient from '../utils/apollo-client';
import { useEnvironment, EnvironmentProvider } from './use-environment';
import { Networks } from '../types';
import { Networks, ErrorType } from '../types';
import type { MockRequestConfig } from './mocks/apollo-client';
import createMockClient from './mocks/apollo-client';
import { getErrorByType } from '../utils/validate-node';
jest.mock('../utils/apollo-client');
jest.mock('react-dom', () => ({
...jest.requireActual('react-dom'),
createPortal: (node: ReactNode) => node,
}));
global.fetch = jest.fn();
const MockWrapper = (props: ComponentProps<typeof EnvironmentProvider>) => {
return <EnvironmentProvider {...props} />;
@ -10,26 +24,10 @@ const MockWrapper = (props: ComponentProps<typeof EnvironmentProvider>) => {
const MOCK_HOST = 'https://vega.host/query';
global.fetch = jest.fn();
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => {};
const mockFetch = (url: RequestInfo) => {
if (url === mockEnvironmentState.VEGA_CONFIG_URL) {
return Promise.resolve({
ok: true,
json: () =>
Promise.resolve({
hosts: [MOCK_HOST],
}),
} as Response);
}
return Promise.resolve({ ok: true } as Response);
};
const mockEnvironmentState: EnvironmentState = {
configStatus: 'success',
const mockEnvironmentState = {
VEGA_URL: 'https://vega.xyz',
VEGA_ENV: Networks.TESTNET,
VEGA_CONFIG_URL: 'https://vega.xyz/testnet-config.json',
@ -45,25 +43,76 @@ const mockEnvironmentState: EnvironmentState = {
GIT_COMMIT_HASH: 'abcde01234',
GITHUB_FEEDBACK_URL: 'https://github.com/test/feedback',
setNodeSwitcherOpen: noop,
networkError: undefined,
};
const MOCK_DURATION = 76;
window.performance.getEntriesByName = jest
.fn()
.mockImplementation((url: string) => [
{
entryType: 'resource',
name: url,
startTime: 0,
toJSON: () => ({}),
duration: MOCK_DURATION,
},
]);
function setupFetch(
configUrl: string = mockEnvironmentState.VEGA_CONFIG_URL,
hosts?: string[]
) {
return (url: RequestInfo) => {
if (url === configUrl) {
return Promise.resolve({
ok: true,
json: () => Promise.resolve({ hosts: hosts || [MOCK_HOST] }),
} as Response);
}
return Promise.resolve({
ok: true,
} as Response);
};
}
const getQuickestNode = (mockNodes: Record<string, MockRequestConfig>) => {
const { nodeUrl } = Object.keys(mockNodes).reduce<{
nodeUrl?: string;
delay: number;
}>(
(acc, url) => {
const { delay = 0, hasError = false } = mockNodes[url];
if (!hasError && delay < acc.delay) {
return { nodeUrl: url, delay };
}
return acc;
},
{ nodeUrl: undefined, delay: Infinity }
);
return nodeUrl;
};
beforeEach(() => {
// @ts-ignore typscript doesn't recognise the mock implementation
global.fetch.mockReset();
// @ts-ignore typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(mockFetch);
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(setupFetch());
window.localStorage.clear();
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() => createMockClient());
process.env['NX_VEGA_URL'] = mockEnvironmentState.VEGA_URL;
process.env['NX_VEGA_ENV'] = mockEnvironmentState.VEGA_ENV;
process.env['NX_VEGA_CONFIG_URL'] = mockEnvironmentState.VEGA_CONFIG_URL;
process.env['NX_ETHEREUM_PROVIDER_URL'] =
mockEnvironmentState.ETHEREUM_PROVIDER_URL;
process.env['NX_ETHERSCAN_URL'] = mockEnvironmentState.ETHERSCAN_URL;
process.env['NX_VEGA_NETWORKS'] = JSON.stringify(
mockEnvironmentState.VEGA_NETWORKS
);
process.env['NX_ETHEREUM_PROVIDER_URL'] =
mockEnvironmentState.ETHEREUM_PROVIDER_URL;
process.env['NX_ETHERSCAN_URL'] = mockEnvironmentState.ETHERSCAN_URL;
process.env['NX_GIT_BRANCH'] = mockEnvironmentState.GIT_BRANCH;
process.env['NX_GIT_ORIGIN_URL'] = mockEnvironmentState.GIT_ORIGIN_URL;
process.env['NX_GIT_COMMIT_HASH'] = mockEnvironmentState.GIT_COMMIT_HASH;
@ -72,20 +121,18 @@ beforeEach(() => {
});
afterAll(() => {
// @ts-ignore: typescript doesn't recognise the mocked fetch instance
fetch.mockRestore();
window.localStorage.clear();
delete process.env['NX_VEGA_URL'];
delete process.env['NX_VEGA_ENV'];
delete process.env['NX_VEGA_CONFIG_URL'];
delete process.env['NX_VEGA_NETWORKS'];
delete process.env['NX_ETHEREUM_PROVIDER_URL'];
delete process.env['NX_ETHERSCAN_URL'];
delete process.env['NX_VEGA_NETWORKS'];
delete process.env['NX_GIT_BRANCH'];
delete process.env['NX_GIT_ORIGIN_URL'];
delete process.env['NX_GIT_COMMIT_HASH'];
delete process.env['NX_GITHUB_FEEDBACK_URL'];
jest.clearAllMocks();
});
describe('useEnvironment hook', () => {
@ -114,21 +161,6 @@ describe('useEnvironment hook', () => {
});
});
it('allows for the VEGA_URL to be missing when there is a VEGA_CONFIG_URL present', async () => {
delete process.env['NX_VEGA_URL'];
const { result, waitForNextUpdate } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitForNextUpdate();
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
VEGA_URL: MOCK_HOST,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
it('allows for the VEGA_NETWORKS to be missing from the environment', async () => {
delete process.env['NX_VEGA_NETWORKS'];
const { result, waitForNextUpdate } = renderHook(() => useEnvironment(), {
@ -214,6 +246,9 @@ describe('useEnvironment hook', () => {
`(
'uses correct default ethereum connection variables in $env',
async ({ env, etherscanUrl, providerUrl }) => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() => createMockClient({ network: env }));
process.env['NX_VEGA_ENV'] = env;
delete process.env['NX_ETHEREUM_PROVIDER_URL'];
delete process.env['NX_ETHERSCAN_URL'];
@ -251,4 +286,319 @@ describe('useEnvironment hook', () => {
`The NX_ETHEREUM_PROVIDER_URL environment variable must be a valid url`
);
});
describe('node selection', () => {
it('updates the VEGA_URL from the config when it is missing from the environment', async () => {
delete process.env['NX_VEGA_URL'];
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
VEGA_URL: MOCK_HOST,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('updates the VEGA_URL with the quickest node to respond from the config urls', async () => {
delete process.env['NX_VEGA_URL'];
const mockNodes: Record<string, MockRequestConfig> = {
'https://mock-node-1.com': { hasError: false, delay: 4 },
'https://mock-node-2.com': { hasError: false, delay: 5 },
'https://mock-node-3.com': { hasError: false, delay: 8 },
'https://mock-node-4.com': { hasError: false, delay: 0 },
};
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(
setupFetch(mockEnvironmentState.VEGA_CONFIG_URL, Object.keys(mockNodes))
);
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation((url: keyof typeof mockNodes) => {
return createMockClient({ statistics: mockNodes[url] });
});
const nodeUrl = getQuickestNode(mockNodes);
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
VEGA_URL: nodeUrl,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('ignores failing nodes and selects the first successful one to use', async () => {
delete process.env['NX_VEGA_URL'];
const mockNodes: Record<string, MockRequestConfig> = {
'https://mock-node-1.com': { hasError: true, delay: 4 },
'https://mock-node-2.com': { hasError: false, delay: 5 },
'https://mock-node-3.com': { hasError: false, delay: 8 },
'https://mock-node-4.com': { hasError: true, delay: 0 },
};
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(
setupFetch(mockEnvironmentState.VEGA_CONFIG_URL, Object.keys(mockNodes))
);
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation((url: keyof typeof mockNodes) => {
return createMockClient({ statistics: mockNodes[url] });
});
const nodeUrl = getQuickestNode(mockNodes);
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
VEGA_URL: nodeUrl,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('has a network error when cannot connect to any nodes', async () => {
delete process.env['NX_VEGA_URL'];
const mockNodes: Record<string, MockRequestConfig> = {
'https://mock-node-1.com': { hasError: true, delay: 4 },
'https://mock-node-2.com': { hasError: true, delay: 5 },
'https://mock-node-3.com': { hasError: true, delay: 8 },
'https://mock-node-4.com': { hasError: true, delay: 0 },
};
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(
setupFetch(mockEnvironmentState.VEGA_CONFIG_URL, Object.keys(mockNodes))
);
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation((url: keyof typeof mockNodes) => {
return createMockClient({ statistics: mockNodes[url] });
});
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
VEGA_URL: undefined,
networkError: ErrorType.CONNECTION_ERROR_ALL,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('has a network error when it cannot fetch the network config and there is no VEGA_URL in the environment', async () => {
delete process.env['NX_VEGA_URL'];
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(() => {
throw new Error('Cannot fetch');
});
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
VEGA_URL: undefined,
networkError: ErrorType.CONFIG_LOAD_ERROR,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('logs an error when it cannot fetch the network config and there is a VEGA_URL in the environment', async () => {
const consoleWarnSpy = jest
.spyOn(console, 'warn')
.mockImplementation(noop);
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(() => {
throw new Error('Cannot fetch');
});
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
expect(consoleWarnSpy).toHaveBeenCalledWith(
getErrorByType(
ErrorType.CONFIG_LOAD_ERROR,
mockEnvironmentState.VEGA_ENV
)?.headline
);
});
});
// SKIP due to https://github.com/facebook/jest/issues/12670
// eslint-disable-next-line jest/no-disabled-tests
it.skip('has a network error when the config is invalid and there is no VEGA_URL in the environment', async () => {
delete process.env['NX_VEGA_URL'];
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ some: 'invalid-object' }),
})
);
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
VEGA_URL: undefined,
networkError: ErrorType.CONFIG_VALIDATION_ERROR,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
// SKIP due to https://github.com/facebook/jest/issues/12670
// eslint-disable-next-line jest/no-disabled-tests
it.skip('logs an error when the network config in invalid and there is a VEGA_URL in the environment', async () => {
const consoleWarnSpy = jest
.spyOn(console, 'warn')
.mockImplementation(noop);
// @ts-ignore: typscript doesn't recognise the mock implementation
global.fetch.mockImplementation(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve({ some: 'invalid-object' }),
})
);
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
expect(consoleWarnSpy).toHaveBeenCalledWith(
getErrorByType(
ErrorType.CONFIG_VALIDATION_ERROR,
mockEnvironmentState.VEGA_ENV
)?.headline
);
});
});
// SKIP due to https://github.com/facebook/jest/issues/12670
// eslint-disable-next-line jest/no-disabled-tests
it.skip('has a network error when the selected node is not a valid url', async () => {
process.env['NX_VEGA_URL'] = 'not-url';
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
networkError: ErrorType.INVALID_URL,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('has a network error when cannot connect to the selected node', async () => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() => {
return createMockClient({ statistics: { hasError: true } });
});
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
networkError: ErrorType.CONNECTION_ERROR,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('has a network error when the selected node is not on the correct network', async () => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() => {
return createMockClient({ network: Networks.MAINNET });
});
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
networkError: ErrorType.INVALID_NETWORK,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
it('has a network error when the selected node has not ssl available', async () => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() => {
return createMockClient({ busEvents: { hasError: true } });
});
const { result, waitFor } = renderHook(() => useEnvironment(), {
wrapper: MockWrapper,
});
await waitFor(() => {
expect(result.error).toBe(undefined);
expect(result.current).toEqual({
...mockEnvironmentState,
networkError: ErrorType.SSL_ERROR,
setNodeSwitcherOpen: result.current.setNodeSwitcherOpen,
});
});
});
});
});

96
libs/environment/src/hooks/use-environment.tsx
View File

@ -1,11 +1,18 @@
import type { ReactNode } from 'react';
import { useState, createContext, useContext } from 'react';
import { useEffect, useState, createContext, useContext } from 'react';
import { NodeSwitcherDialog } from '../components/node-switcher-dialog';
import { useConfig } from './use-config';
import { useNodes } from './use-nodes';
import { compileEnvironment } from '../utils/compile-environment';
import { validateEnvironment } from '../utils/validate-environment';
import type { Environment, RawEnvironment, ConfigStatus } from '../types';
import {
getErrorType,
getErrorByType,
getIsNodeLoading,
} from '../utils/validate-node';
import { ErrorType } from '../types';
import type { Environment, RawEnvironment, NodeData } from '../types';
type EnvironmentProviderProps = {
definitions?: Partial<RawEnvironment>;
@ -13,24 +20,77 @@ type EnvironmentProviderProps = {
};
export type EnvironmentState = Environment & {
configStatus: ConfigStatus;
networkError?: ErrorType;
setNodeSwitcherOpen: () => void;
};
const EnvironmentContext = createContext({} as EnvironmentState);
const hasFinishedLoading = (node: NodeData) =>
node.initialized && !getIsNodeLoading(node) && !node.verified;
export const EnvironmentProvider = ({
definitions,
children,
}: EnvironmentProviderProps) => {
const [networkError, setNetworkError] = useState<undefined | ErrorType>();
const [isNodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
const [environment, updateEnvironment] = useState<Environment>(
compileEnvironment(definitions)
);
const { status: configStatus, config } = useConfig(
environment,
updateEnvironment
);
const { loading, config } = useConfig(environment, (errorType) => {
if (!environment.VEGA_URL) {
setNetworkError(errorType);
setNodeSwitcherOpen(true);
} else {
const error = getErrorByType(errorType, environment.VEGA_ENV);
error && console.warn(error.headline);
}
});
const { state: nodes, clients } = useNodes(environment.VEGA_ENV, config);
const nodeKeys = Object.keys(nodes);
useEffect(() => {
if (!environment.VEGA_URL) {
const successfulNodeKey = nodeKeys.find(
(key) => nodes[key].verified
) as keyof typeof nodes;
if (successfulNodeKey && nodes[successfulNodeKey]) {
Object.keys(clients).forEach((node) => clients[node]?.stop());
updateEnvironment((prevEnvironment) => ({
...prevEnvironment,
VEGA_URL: nodes[successfulNodeKey].url,
}));
}
}
// if the selected node has errors
if (environment.VEGA_URL && nodes[environment.VEGA_URL]) {
const errorType = getErrorType(
environment.VEGA_ENV,
nodes[environment.VEGA_URL]
);
if (errorType !== null) {
Object.keys(clients).forEach((node) => clients[node]?.stop());
setNetworkError(errorType);
setNodeSwitcherOpen(true);
return;
}
}
// if the config doesn't contain nodes the app can connect to
if (
nodeKeys.length > 0 &&
nodeKeys.filter((key) => hasFinishedLoading(nodes[key])).length ===
nodeKeys.length
) {
Object.keys(clients).forEach((node) => clients[node]?.stop());
setNetworkError(ErrorType.CONNECTION_ERROR_ALL);
setNodeSwitcherOpen(true);
}
// prevent infinite render loop by skipping deps which will change as a result
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [environment.VEGA_URL, nodes]);
const errorMessage = validateEnvironment(environment);
@ -42,20 +102,20 @@ export const EnvironmentProvider = ({
<EnvironmentContext.Provider
value={{
...environment,
configStatus,
networkError,
setNodeSwitcherOpen: () => setNodeSwitcherOpen(true),
}}
>
{config && (
<NodeSwitcherDialog
dialogOpen={isNodeSwitcherOpen}
toggleDialogOpen={setNodeSwitcherOpen}
config={config}
onConnect={(url) =>
updateEnvironment((env) => ({ ...env, VEGA_URL: url }))
}
/>
)}
<NodeSwitcherDialog
dialogOpen={isNodeSwitcherOpen}
initialErrorType={networkError}
setDialogOpen={setNodeSwitcherOpen}
loading={loading}
config={config}
onConnect={(url) =>
updateEnvironment((env) => ({ ...env, VEGA_URL: url }))
}
/>
{children}
</EnvironmentContext.Provider>
);

267
libs/environment/src/hooks/use-node.spec.tsx
View File

@ -1,267 +0,0 @@
import { renderHook, act } from '@testing-library/react-hooks';
import { MockedProvider } from '@apollo/client/testing';
import { useNode, STATS_QUERY, TIME_UPDATE_SUBSCRIPTION } from './use-node';
const MOCK_DURATION = 1073;
const MOCK_STATISTICS_QUERY_RESULT = {
blockHeight: '11',
chainId: 'testnet_01234',
};
const initialState = {
url: '',
responseTime: {
isLoading: false,
hasError: false,
value: undefined,
},
block: {
isLoading: false,
hasError: false,
value: undefined,
},
ssl: {
isLoading: false,
hasError: false,
value: undefined,
},
chain: {
isLoading: false,
hasError: false,
value: undefined,
},
};
const createMockClient = ({
failStats = false,
failSubscription = false,
}: { failStats?: boolean; failSubscription?: boolean } = {}) => {
const provider = new MockedProvider({
mocks: [
{
request: {
query: STATS_QUERY,
},
result: failStats
? undefined
: {
data: {
statistics: {
__typename: 'Statistics',
...MOCK_STATISTICS_QUERY_RESULT,
},
},
},
},
{
request: {
query: TIME_UPDATE_SUBSCRIPTION,
},
result: failSubscription
? undefined
: {
data: {
busEvents: {
eventId: 'time-0',
},
},
},
},
],
});
return provider.state.client;
};
window.performance.getEntriesByName = jest
.fn()
.mockImplementation((url: string) => [
{
entryType: 'resource',
name: url,
startTime: 0,
toJSON: () => ({}),
duration: MOCK_DURATION,
},
]);
afterAll(() => {
// @ts-ignore allow deleting the spy function after we're done with the tests
delete window.performance.getEntriesByName;
});
describe('useNode hook', () => {
it('returns the default state when no arguments provided', () => {
const { result } = renderHook(() => useNode());
expect(result.current.state).toEqual(initialState);
});
it('returns the default state when no url provided', () => {
const client = createMockClient();
const { result } = renderHook(() => useNode(undefined, client));
expect(result.current.state).toEqual(initialState);
});
it('returns the default state when no client provided', () => {
const url = 'https://some.url';
const { result } = renderHook(() => useNode(url, undefined));
expect(result.current.state).toEqual({ ...initialState, url });
});
it('sets loading state while waiting for the results', async () => {
const url = 'https://some.url';
const client = createMockClient();
const { result, waitForNextUpdate } = renderHook(() =>
useNode(url, client)
);
expect(result.current.state).toEqual({
url,
responseTime: {
isLoading: true,
hasError: false,
value: undefined,
},
block: {
isLoading: true,
hasError: false,
value: undefined,
},
ssl: {
isLoading: true,
hasError: false,
value: undefined,
},
chain: {
isLoading: true,
hasError: false,
value: undefined,
},
});
await waitForNextUpdate();
});
it('sets statistics results', async () => {
const url = 'https://some.url';
const client = createMockClient();
const { result, waitFor } = renderHook(() => useNode(url, client));
await waitFor(() => {
expect(result.current.state.block).toEqual({
isLoading: false,
hasError: false,
value: Number(MOCK_STATISTICS_QUERY_RESULT.blockHeight),
});
expect(result.current.state.chain).toEqual({
isLoading: false,
hasError: false,
value: MOCK_STATISTICS_QUERY_RESULT.chainId,
});
expect(result.current.state.responseTime).toEqual({
isLoading: false,
hasError: false,
value: MOCK_DURATION,
});
});
});
it('sets subscription result', async () => {
const url = 'https://some.url';
const client = createMockClient();
const { result, waitFor } = renderHook(() => useNode(url, client));
await waitFor(() => {
expect(result.current.state.ssl).toEqual({
isLoading: false,
hasError: false,
value: true,
});
});
});
it('sets error when statistics request fails', async () => {
const url = 'https://some.url';
const client = createMockClient({ failStats: true });
const { result, waitFor } = renderHook(() => useNode(url, client));
await waitFor(() => {
expect(result.current.state.block).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
expect(result.current.state.chain).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
expect(result.current.state.responseTime).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
});
});
it('sets error when subscription request fails', async () => {
const url = 'https://some.url';
const client = createMockClient({ failSubscription: true });
const { result, waitFor } = renderHook(() => useNode(url, client));
await waitFor(() => {
expect(result.current.state.ssl).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
});
});
it('allows updating block values', async () => {
const url = 'https://some.url';
const client = createMockClient({ failSubscription: true });
const { result, waitFor } = renderHook(() => useNode(url, client));
await waitFor(() => {
expect(result.current.state.block.value).toEqual(11);
});
act(() => {
result.current.updateBlockState(12);
});
await waitFor(() => {
expect(result.current.state.block.value).toEqual(12);
});
});
it('allows resetting the state to defaults', async () => {
const url = 'https://some.url';
const client = createMockClient();
const { result, waitFor } = renderHook(() => useNode(url, client));
await waitFor(() => {
expect(result.current.state.block.value).toBe(
Number(MOCK_STATISTICS_QUERY_RESULT.blockHeight)
);
expect(result.current.state.chain.value).toBe(
MOCK_STATISTICS_QUERY_RESULT.chainId
);
expect(result.current.state.responseTime.value).toBe(MOCK_DURATION);
expect(result.current.state.ssl.value).toBe(true);
});
act(() => {
result.current.reset();
});
expect(result.current.state).toEqual({ ...initialState, url });
});
});

188
libs/environment/src/hooks/use-node.tsx
View File

@ -1,188 +0,0 @@
import { useEffect, useReducer } from 'react';
import { produce } from 'immer';
import { gql } from '@apollo/client';
import type { createClient } from '../utils/apollo-client';
import type { NodeData } from '../types';
import type { Statistics } from './__generated__/Statistics';
type StatisticsPayload = {
block: NodeData['block']['value'];
chain: NodeData['chain']['value'];
responseTime: NodeData['responseTime']['value'];
};
export const STATS_QUERY = gql`
query Statistics {
statistics {
chainId
blockHeight
}
}
`;
export const TIME_UPDATE_SUBSCRIPTION = gql`
subscription BlockTime {
busEvents(types: TimeUpdate, batchSize: 1) {
eventId
}
}
`;
enum ACTION {
GET_STATISTICS,
GET_STATISTICS_SUCCESS,
GET_STATISTICS_FAILURE,
CHECK_SUBSCRIPTION,
CHECK_SUBSCRIPTION_SUCCESS,
CHECK_SUBSCRIPTION_FAILURE,
UPDATE_BLOCK,
RESET_STATE,
}
function withData<T>(value?: T) {
return {
isLoading: false,
hasError: false,
value,
};
}
function withError<T>(value?: T) {
return {
isLoading: false,
hasError: true,
value,
};
}
const getInitialState = (url?: string): NodeData => ({
url: url ?? '',
responseTime: withData(),
block: withData(),
ssl: withData(),
chain: withData(),
});
const getResponseTime = (url: string) => {
const requests = window.performance.getEntriesByName(url);
const { duration } = (requests.length && requests[requests.length - 1]) || {};
return duration;
};
type ActionType<T extends ACTION, P = undefined> = {
type: T;
payload?: P;
};
type Action =
| ActionType<ACTION.GET_STATISTICS>
| ActionType<ACTION.GET_STATISTICS_SUCCESS, StatisticsPayload>
| ActionType<ACTION.GET_STATISTICS_FAILURE>
| ActionType<ACTION.CHECK_SUBSCRIPTION>
| ActionType<ACTION.CHECK_SUBSCRIPTION_SUCCESS>
| ActionType<ACTION.CHECK_SUBSCRIPTION_FAILURE>
| ActionType<ACTION.UPDATE_BLOCK, number>
| ActionType<ACTION.RESET_STATE>;
const reducer = (state: NodeData, action: Action) => {
switch (action.type) {
case ACTION.GET_STATISTICS:
return produce(state, (state) => {
state.block.isLoading = true;
state.chain.isLoading = true;
state.responseTime.isLoading = true;
});
case ACTION.GET_STATISTICS_SUCCESS:
return produce(state, (state) => {
state.block = withData(action.payload?.block);
state.chain = withData(action.payload?.chain);
state.responseTime = withData(action.payload?.responseTime);
});
case ACTION.GET_STATISTICS_FAILURE:
return produce(state, (state) => {
state.block = withError();
state.chain = withError();
state.responseTime = withError();
});
case ACTION.CHECK_SUBSCRIPTION:
return produce(state, (state) => {
state.ssl.isLoading = true;
});
case ACTION.CHECK_SUBSCRIPTION_SUCCESS:
return produce(state, (state) => {
state.ssl = withData(true);
});
case ACTION.CHECK_SUBSCRIPTION_FAILURE:
return produce(state, (state) => {
state.ssl = withError();
});
case ACTION.UPDATE_BLOCK:
return produce(state, (state) => {
state.block.value = action.payload;
});
case ACTION.RESET_STATE:
return produce(state, (state) => {
state.responseTime = withData();
state.block = withData();
state.ssl = withData();
state.chain = withData();
});
default:
return state;
}
};
export const useNode = (
url?: string,
client?: ReturnType<typeof createClient>
) => {
const [state, dispatch] = useReducer(reducer, getInitialState(url));
useEffect(() => {
if (client && url) {
dispatch({ type: ACTION.GET_STATISTICS });
dispatch({ type: ACTION.CHECK_SUBSCRIPTION });
client
.query<Statistics>({
query: STATS_QUERY,
})
.then((res) => {
dispatch({
type: ACTION.GET_STATISTICS_SUCCESS,
payload: {
chain: res.data.statistics.chainId,
block: Number(res.data.statistics.blockHeight),
responseTime: getResponseTime(url),
},
});
})
.catch(() => {
dispatch({ type: ACTION.GET_STATISTICS_FAILURE });
});
const subscription = client
.subscribe({
query: TIME_UPDATE_SUBSCRIPTION,
errorPolicy: 'all',
})
.subscribe({
next() {
dispatch({ type: ACTION.CHECK_SUBSCRIPTION_SUCCESS });
subscription.unsubscribe();
},
error() {
dispatch({ type: ACTION.CHECK_SUBSCRIPTION_FAILURE });
subscription.unsubscribe();
},
});
}
}, [client, url, dispatch]);
return {
state,
updateBlockState: (value: number) =>
dispatch({ type: ACTION.UPDATE_BLOCK, payload: value }),
reset: () => dispatch({ type: ACTION.RESET_STATE }),
};
};

401
libs/environment/src/hooks/use-nodes.spec.tsx Normal file
View File

@ -0,0 +1,401 @@
import { renderHook, act } from '@testing-library/react-hooks';
import { ApolloClient } from '@apollo/client';
import createClient from '../utils/apollo-client';
import { useNodes } from './use-nodes';
import { Networks } from '../types';
import createMockClient, {
getMockStatisticsResult,
} from './mocks/apollo-client';
jest.mock('../utils/apollo-client');
const MOCK_ENV = Networks.DEVNET;
const MOCK_DURATION = 1073;
const initialState = {
url: '',
verified: false,
initialized: false,
responseTime: {
isLoading: false,
hasError: false,
value: undefined,
},
block: {
isLoading: false,
hasError: false,
value: undefined,
},
ssl: {
isLoading: false,
hasError: false,
value: undefined,
},
chain: {
isLoading: false,
hasError: false,
value: undefined,
},
};
window.performance.getEntriesByName = jest
.fn()
.mockImplementation((url: string) => [
{
entryType: 'resource',
name: url,
startTime: 0,
toJSON: () => ({}),
duration: MOCK_DURATION,
},
]);
beforeEach(() => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() => createMockClient());
});
afterAll(() => {
jest.clearAllMocks();
});
describe('useNodes hook', () => {
it('returns the default state when empty config provided', () => {
const { result } = renderHook(() => useNodes(MOCK_ENV, { hosts: [] }));
expect(result.current.state).toEqual({});
});
it('sets loading state while waiting for the results', async () => {
const node = 'https://some.url';
const { result, waitForNextUpdate } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
expect(result.current.state[node]).toEqual({
...initialState,
url: node,
verified: false,
initialized: true,
responseTime: {
...initialState.responseTime,
isLoading: true,
},
block: {
...initialState.block,
isLoading: true,
},
chain: {
...initialState.chain,
isLoading: true,
},
ssl: {
...initialState.ssl,
isLoading: true,
},
});
await waitForNextUpdate();
});
it('sets statistics results', async () => {
const mockResult = getMockStatisticsResult();
const node = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
await waitFor(() => {
expect(result.current.state[node].block).toEqual({
isLoading: false,
hasError: false,
value: Number(mockResult.statistics.blockHeight),
});
expect(result.current.state[node].chain).toEqual({
isLoading: false,
hasError: false,
value: mockResult.statistics.chainId,
});
expect(result.current.state[node].responseTime).toEqual({
isLoading: false,
hasError: false,
value: MOCK_DURATION,
});
});
});
it('sets subscription result', async () => {
const node = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
await waitFor(() => {
expect(result.current.state[node].ssl).toEqual({
isLoading: false,
hasError: false,
value: true,
});
});
});
it('sets error when host in not a valid url', async () => {
const node = 'not-url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
await waitFor(() => {
expect(result.current.state[node].block.hasError).toBe(true);
expect(result.current.state[node].chain.hasError).toBe(true);
expect(result.current.state[node].responseTime.hasError).toBe(true);
expect(result.current.state[node].responseTime.hasError).toBe(true);
});
});
it('sets error when statistics request fails', async () => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() =>
createMockClient({ statistics: { hasError: true } })
);
const node = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
await waitFor(() => {
expect(result.current.state[node].block).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
expect(result.current.state[node].chain).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
expect(result.current.state[node].responseTime).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
});
});
it('sets error when subscription request fails', async () => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() =>
createMockClient({ busEvents: { hasError: true } })
);
const node = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
await waitFor(() => {
expect(result.current.state[node].ssl).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
});
});
it('allows updating block values', async () => {
const mockResult = getMockStatisticsResult();
const node = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
await waitFor(() => {
expect(result.current.state[node].block.value).toEqual(
Number(mockResult.statistics.blockHeight)
);
});
act(() => {
result.current.updateNodeBlock(node, 12);
});
await waitFor(() => {
expect(result.current.state[node].block.value).toEqual(12);
});
});
it('does nothing when calling the block update on a non-existing node', async () => {
const mockResult = getMockStatisticsResult();
const node = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
await waitFor(() => {
expect(result.current.state[node].block.value).toEqual(
Number(mockResult.statistics.blockHeight)
);
});
act(() => {
result.current.updateNodeBlock('https://non-existing.url', 12);
});
expect(result.current.state['https://non-existing.url']).toBe(undefined);
});
it('adds new node', async () => {
const node = 'custom-node-key';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [] })
);
expect(result.current.state[node]).toEqual(undefined);
act(() => {
result.current.addNode(node);
});
await waitFor(() => {
expect(result.current.state[node]).toEqual(initialState);
});
});
it('sets new url for node', async () => {
const node = 'https://some.url';
const newUrl = 'https://some-other.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [node] })
);
act(() => {
result.current.updateNodeUrl(node, newUrl);
});
await waitFor(() => {
expect(result.current.state[node].url).toBe(newUrl);
});
});
it('sets error when custom node has an invalid url', async () => {
const node = 'node-key';
const url = 'not-url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [] })
);
expect(result.current.state[node]).toBe(undefined);
act(() => {
result.current.updateNodeUrl(node, url);
});
await waitFor(() => {
expect(result.current.state[node].url).toBe(url);
expect(result.current.state[node].block.hasError).toBe(true);
expect(result.current.state[node].chain.hasError).toBe(true);
expect(result.current.state[node].responseTime.hasError).toBe(true);
expect(result.current.state[node].ssl.hasError).toBe(true);
});
});
it('sets error when custom node statistics request fails', async () => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() =>
createMockClient({ statistics: { hasError: true } })
);
const node = 'node-key';
const url = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [] })
);
expect(result.current.state[node]).toBe(undefined);
act(() => {
result.current.updateNodeUrl(node, url);
});
await waitFor(() => {
expect(result.current.state[node].block).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
expect(result.current.state[node].chain).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
expect(result.current.state[node].responseTime).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
});
});
it('sets error when custom node subscription fails', async () => {
// @ts-ignore allow adding a mock return value to mocked module
createClient.mockImplementation(() =>
createMockClient({ busEvents: { hasError: true } })
);
const node = 'node-key';
const url = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [] })
);
expect(result.current.state[node]).toBe(undefined);
act(() => {
result.current.updateNodeUrl(node, url);
});
await waitFor(() => {
expect(result.current.state[node].ssl).toEqual({
isLoading: false,
hasError: true,
value: undefined,
});
});
});
it('exposes a collection of clients', async () => {
const url1 = 'https://some.url';
const url2 = 'https://some-other.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [url1, url2] })
);
await waitFor(() => {
expect(result.current.clients[url1]).toBeInstanceOf(ApolloClient);
expect(result.current.clients[url2]).toBeInstanceOf(ApolloClient);
});
});
it('exposes a client for the custom node', async () => {
const node = 'node-key';
const url = 'https://some.url';
const { result, waitFor } = renderHook(() =>
useNodes(MOCK_ENV, { hosts: [] })
);
act(() => {
result.current.updateNodeUrl(node, url);
});
await waitFor(() => {
expect(result.current.clients[url]).toBeInstanceOf(ApolloClient);
});
});
});

260
libs/environment/src/hooks/use-nodes.tsx Normal file
View File

@ -0,0 +1,260 @@
import type { Dispatch } from 'react';
import { useState, useEffect, useReducer } from 'react';
import { produce } from 'immer';
import type createClient from '../utils/apollo-client';
import { initializeNode } from '../utils/initialize-node';
import { getErrorType, getIsNodeLoading } from '../utils/validate-node';
import type { NodeData, Configuration, Networks } from '../types';
type StatisticsPayload = {
block: NodeData['block']['value'];
chain: NodeData['chain']['value'];
responseTime: NodeData['responseTime']['value'];
};
export enum ACTIONS {
GET_STATISTICS,
GET_STATISTICS_SUCCESS,
GET_STATISTICS_FAILURE,
CHECK_SUBSCRIPTION,
CHECK_SUBSCRIPTION_SUCCESS,
CHECK_SUBSCRIPTION_FAILURE,
ADD_NODE,
UPDATE_NODE_URL,
UPDATE_NODE_BLOCK,
}
type ActionType<T extends ACTIONS, P = undefined> = {
type: T;
node: string;
payload?: P;
};
export type Action =
| ActionType<ACTIONS.GET_STATISTICS, { url: string }>
| ActionType<ACTIONS.GET_STATISTICS_SUCCESS, StatisticsPayload>
| ActionType<ACTIONS.GET_STATISTICS_FAILURE>
| ActionType<ACTIONS.CHECK_SUBSCRIPTION, { url: string }>
| ActionType<ACTIONS.CHECK_SUBSCRIPTION_SUCCESS>
| ActionType<ACTIONS.CHECK_SUBSCRIPTION_FAILURE>
| ActionType<ACTIONS.ADD_NODE>
| ActionType<ACTIONS.UPDATE_NODE_URL, { url: string }>
| ActionType<ACTIONS.UPDATE_NODE_BLOCK, number>;
function withData<T>(value?: T) {
return {
isLoading: false,
hasError: false,
value,
};
}
function withError<T>(value?: T) {
return {
isLoading: false,
hasError: true,
value,
};
}
const getNodeData = (url?: string): NodeData => ({
url: url ?? '',
verified: false,
initialized: false,
responseTime: withData(),
block: withData(),
ssl: withData(),
chain: withData(),
});
const getInitialState = (config?: Configuration) =>
(config?.hosts ?? []).reduce<Record<string, NodeData>>(
(acc, url) => ({
...acc,
[url]: getNodeData(url),
}),
{}
);
type ClientCollection = Record<
string,
undefined | ReturnType<typeof createClient>
>;
type ClientData = {
clients: ClientCollection;
subscriptions: ReturnType<typeof initializeNode>['unsubscribe'][];
};
const initializeNodes = (
dispatch: Dispatch<Action>,
nodes: Record<string, string>
) => {
return Object.keys(nodes).reduce<ClientData>(
(acc, node) => {
const { client, unsubscribe } = initializeNode(
dispatch,
node,
nodes[node]
);
Object.assign(acc.clients, { [nodes[node]]: client });
acc.subscriptions.push(unsubscribe);
return acc;
},
{
clients: {},
subscriptions: [],
}
);
};
const reducer =
(env: Networks) => (state: Record<string, NodeData>, action: Action) => {
switch (action.type) {
case ACTIONS.GET_STATISTICS:
return produce(state, (state) => {
if (!state[action.node]) {
state[action.node] = getNodeData(action.payload?.url);
}
state[action.node].url = action.payload?.url ?? '';
state[action.node].initialized = true;
state[action.node].block.isLoading = true;
state[action.node].chain.isLoading = true;
state[action.node].responseTime.isLoading = true;
});
case ACTIONS.GET_STATISTICS_SUCCESS:
return produce(state, (state) => {
if (!state[action.node]) return;
state[action.node].block = withData(action.payload?.block);
state[action.node].chain = withData(action.payload?.chain);
state[action.node].responseTime = withData(
action.payload?.responseTime
);
state[action.node].verified =
!getIsNodeLoading(state[action.node]) &&
getErrorType(env, state[action.node]) === null;
});
case ACTIONS.GET_STATISTICS_FAILURE:
return produce(state, (state) => {
if (!state[action.node]) return;
state[action.node].block = withError();
state[action.node].chain = withError();
state[action.node].responseTime = withError();
});
case ACTIONS.CHECK_SUBSCRIPTION:
return produce(state, (state) => {
if (!state[action.node]) {
state[action.node] = getNodeData(action.payload?.url);
}
state[action.node].url = action.payload?.url ?? '';
state[action.node].ssl.isLoading = true;
state[action.node].initialized = true;
});
case ACTIONS.CHECK_SUBSCRIPTION_SUCCESS:
return produce(state, (state) => {
if (!state[action.node]) return;
state[action.node].ssl = withData(true);
state[action.node].verified =
!getIsNodeLoading(state[action.node]) &&
getErrorType(env, state[action.node]) === null;
});
case ACTIONS.CHECK_SUBSCRIPTION_FAILURE:
return produce(state, (state) => {
if (!state[action.node]) return;
state[action.node].ssl = withError();
});
case ACTIONS.ADD_NODE:
return produce(state, (state) => {
state[action.node] = getNodeData();
});
case ACTIONS.UPDATE_NODE_URL:
return produce(state, (state) => {
const existingNode = Object.keys(state).find(
(node) =>
action.node !== node && state[node].url === action.payload?.url
);
state[action.node] = existingNode
? state[existingNode]
: getNodeData(action.payload?.url);
});
case ACTIONS.UPDATE_NODE_BLOCK:
return produce(state, (state) => {
if (!state[action.node]) return;
state[action.node].block.value = action.payload;
});
default:
return state;
}
};
export const useNodes = (env: Networks, config?: Configuration) => {
const [clients, setClients] = useState<ClientCollection>({});
const [state, dispatch] = useReducer(reducer(env), getInitialState(config));
const configCacheKey = config?.hosts.join(';');
const allUrls = Object.keys(state).map((node) => state[node].url);
useEffect(() => {
return () => {
Object.keys(clients).forEach((url) => clients[url]?.stop());
};
// stop all created clients on unmount
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => {
const nodeUrlMap = (config?.hosts || []).reduce(
(acc, url) => ({ ...acc, [url]: url }),
{}
);
const { clients: newClients, subscriptions } = initializeNodes(
dispatch,
nodeUrlMap
);
setClients(newClients);
return () => {
subscriptions.forEach((unsubscribe) => unsubscribe());
};
// use primitive cache key to prevent infinite rerender loop
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [configCacheKey]);
useEffect(() => {
const allNodes = Object.keys(state);
const initializedUrls = Object.keys(clients);
const nodeUrlMap = allUrls
.filter((node) => !initializedUrls.includes(node))
.reduce<Record<string, string>>((acc, url) => {
const node = allNodes.find((key) => state[key].url === url);
if (node) {
acc[node] = url;
}
return acc;
}, {});
const { clients: newClients, subscriptions } = initializeNodes(
dispatch,
nodeUrlMap
);
setClients((prevClients) => ({
...prevClients,
...newClients,
}));
return () => {
subscriptions.forEach((unsubscribe) => unsubscribe());
};
// use primitive cache key to prevent infinite rerender loop
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [allUrls.join(';')]);
return {
state,
clients,
addNode: (node: string) => dispatch({ type: ACTIONS.ADD_NODE, node }),
updateNodeUrl: (node: string, url: string) =>
dispatch({ type: ACTIONS.UPDATE_NODE_URL, node, payload: { url } }),
updateNodeBlock: (node: string, value: number) =>
dispatch({ type: ACTIONS.UPDATE_NODE_BLOCK, node, payload: value }),
};
};

23
libs/environment/src/types.ts
View File

@ -6,6 +6,18 @@ import { Networks, ENV_KEYS } from './utils/validate-environment';
export { ENV_KEYS, Networks };
export const CUSTOM_NODE_KEY = 'custom';
export enum ErrorType {
INVALID_URL,
INVALID_NETWORK,
SSL_ERROR,
CONNECTION_ERROR,
CONNECTION_ERROR_ALL,
CONFIG_LOAD_ERROR,
CONFIG_VALIDATION_ERROR,
}
export type Environment = z.infer<typeof envSchema> & {
// provide this manually, zod fails to compile the correct type fot VEGA_NETWORKS
VEGA_NETWORKS: Partial<Record<Networks, string>>;
@ -17,15 +29,6 @@ export type RawEnvironment = Record<EnvKey, string>;
export type Configuration = z.infer<typeof configSchema>;
export type ConfigStatus =
| 'idle'
| 'success'
| 'loading-config'
| 'loading-node'
| 'error-loading-config'
| 'error-validating-config'
| 'error-loading-node';
type NodeCheck<T> = {
isLoading: boolean;
hasError: boolean;
@ -34,6 +37,8 @@ type NodeCheck<T> = {
export type NodeData = {
url: string;
verified: boolean;
initialized: boolean;
ssl: NodeCheck<boolean>;
block: NodeCheck<number>;
responseTime: NodeCheck<number>;

0
libs/environment/src/hooks/__generated__/BlockTime.ts → libs/environment/src/utils/__generated__/BlockTime.ts generated
View File

0
libs/environment/src/hooks/__generated__/Statistics.ts → libs/environment/src/utils/__generated__/Statistics.ts generated
View File

9
libs/environment/src/utils/apollo-client.tsx
View File

@ -14,13 +14,14 @@ import { RetryLink } from '@apollo/client/link/retry';
const isBrowser = typeof window !== 'undefined';
export function createClient(base?: string) {
export const GQL_PATH = 'query';
export default function createClient(base?: string) {
if (!base) {
throw new Error('Base must be passed into createClient!');
}
const gqlPath = 'query';
const urlHTTP = new URL(gqlPath, base);
const urlWS = new URL(gqlPath, base);
const urlHTTP = new URL(GQL_PATH, base);
const urlWS = new URL(GQL_PATH, base);
// Replace http with ws, preserving if its a secure connection eg. https => wss
urlWS.protocol = urlWS.protocol.replace('http', 'ws');

56
libs/environment/src/utils/initialize-node.tsx Normal file
View File

@ -0,0 +1,56 @@
import type { Dispatch } from 'react';
import { ACTIONS } from '../hooks/use-nodes';
import type { Action } from '../hooks/use-nodes';
import { requestNode } from './request-node';
import { GQL_PATH } from './apollo-client';
const getResponseTime = (url: string) => {
const requestUrl = new URL(GQL_PATH, url);
const requests = window.performance.getEntriesByName(requestUrl.href);
const { duration } = (requests.length && requests[requests.length - 1]) || {};
return duration;
};
export const initializeNode = (
dispatch: Dispatch<Action>,
node: string,
nodeUrl?: string
) => {
let isMounted = true;
const url = nodeUrl ?? node;
dispatch({ type: ACTIONS.GET_STATISTICS, node, payload: { url } });
dispatch({ type: ACTIONS.CHECK_SUBSCRIPTION, node, payload: { url } });
const client = requestNode(url, {
onStatsSuccess: (data) => {
isMounted &&
dispatch({
type: ACTIONS.GET_STATISTICS_SUCCESS,
node,
payload: {
chain: data.statistics.chainId,
block: Number(data.statistics.blockHeight),
responseTime: getResponseTime(url),
},
});
},
onStatsFailure: () => {
isMounted && dispatch({ type: ACTIONS.GET_STATISTICS_FAILURE, node });
},
onSubscriptionSuccess: () => {
isMounted && dispatch({ type: ACTIONS.CHECK_SUBSCRIPTION_SUCCESS, node });
},
onSubscriptionFailure: () => {
isMounted && dispatch({ type: ACTIONS.CHECK_SUBSCRIPTION_FAILURE, node });
},
});
return {
client,
unsubscribe: () => {
client?.stop();
isMounted = false;
},
};
};

22
libs/environment/src/utils/promise-race-success.ts
View File

@ -1,22 +0,0 @@
export function promiseRaceToSuccess<T>(requests: Array<Promise<T>>) {
return new Promise<T>((resolve, reject) => {
let hasResolved = false;
const failures = [];
requests.forEach((req) => {
req
.then((res) => {
if (!hasResolved) {
resolve(res);
hasResolved = true;
}
})
.catch((err) => {
failures.push(err);
if (failures.length === requests.length) {
reject(err);
}
});
});
});
}

76
libs/environment/src/utils/request-node.ts Normal file
View File

@ -0,0 +1,76 @@
import { gql } from '@apollo/client';
import createClient from './apollo-client';
import type { Statistics } from './__generated__/Statistics';
export const STATS_QUERY = gql`
query Statistics {
statistics {
chainId
blockHeight
}
}
`;
export const TIME_UPDATE_SUBSCRIPTION = gql`
subscription BlockTime {
busEvents(types: TimeUpdate, batchSize: 1) {
eventId
}
}
`;
type Callbacks = {
onStatsSuccess: (data: Statistics) => void;
onStatsFailure: () => void;
onSubscriptionSuccess: () => void;
onSubscriptionFailure: () => void;
};
export const requestNode = (
url: string,
{
onStatsSuccess,
onStatsFailure,
onSubscriptionSuccess,
onSubscriptionFailure,
}: Callbacks
) => {
try {
new URL(url);
} catch (err) {
onStatsFailure();
onSubscriptionFailure();
return;
}
const client = createClient(url);
client
.query<Statistics>({
query: STATS_QUERY,
})
.then((res) => {
onStatsSuccess(res.data);
})
.catch(() => {
onStatsFailure();
});
const subscription = client
.subscribe({
query: TIME_UPDATE_SUBSCRIPTION,
errorPolicy: 'all',
})
.subscribe({
next() {
onSubscriptionSuccess();
subscription.unsubscribe();
},
error() {
onSubscriptionFailure();
subscription.unsubscribe();
},
});
return client;
};

149
libs/environment/src/utils/validate-node.tsx Normal file
View File

@ -0,0 +1,149 @@
import { t } from '@vegaprotocol/react-helpers';
import { CUSTOM_NODE_KEY, ErrorType } from '../types';
import type { Networks, NodeData } from '../types';
export const getIsNodeLoading = ({
chain,
responseTime,
block,
ssl,
}: NodeData) => {
return (
chain.isLoading ||
responseTime.isLoading ||
block.isLoading ||
ssl.isLoading
);
};
export const getHasInvalidChain = (env: Networks, chain = '') => {
return !(chain.split('-')[0] === env.toLowerCase() ?? false);
};
export const getIsInvalidUrl = (url: string) => {
try {
new URL(url);
return false;
} catch (err) {
return true;
}
};
export const getIsNodeDisabled = (env: Networks, data?: NodeData) => {
return (
!!data &&
(getIsNodeLoading(data) ||
getHasInvalidChain(env, data.chain.value) ||
getIsInvalidUrl(data.url) ||
data.chain.hasError ||
data.responseTime.hasError ||
data.block.hasError ||
data.ssl.hasError)
);
};
export const getIsFormDisabled = (
currentNode: string | undefined,
inputText: string,
env: Networks,
state: Record<string, NodeData>
) => {
if (!currentNode) {
return true;
}
if (
currentNode === CUSTOM_NODE_KEY &&
state[CUSTOM_NODE_KEY] &&
inputText !== state[CUSTOM_NODE_KEY].url
) {
return true;
}
const data = state[currentNode];
return getIsNodeDisabled(env, data);
};
export const getErrorByType = (
errorType: ErrorType | undefined | null,
env: Networks,
url?: string
) => {
switch (errorType) {
case ErrorType.INVALID_URL:
return {
headline: t('Error: invalid url'),
message: t(url ? `${url} is not a valid url.` : ''),
};
case ErrorType.INVALID_NETWORK:
return {
headline: t(`Error: incorrect network`),
message: t(`This node is not on the ${env} network.`),
};
case ErrorType.SSL_ERROR:
return {
headline: t(`Error: the node you are reading from does not have SSL`),
message: t(
url
? `${url} does not have SSL. SSL is required to subscribe to data.`
: ''
),
};
case ErrorType.CONNECTION_ERROR:
return {
headline: t(`Error: can't connect to node`),
message: t(url ? `There was an error connecting to ${url}.` : ''),
};
case ErrorType.CONNECTION_ERROR_ALL:
return {
headline: t(`Error: can't connect to any of the nodes on the network`),
message: t(
`Please try entering a custom node address, or try again later.`
),
};
case ErrorType.CONFIG_VALIDATION_ERROR:
return {
headline: t(
`Error: the configuration found for the network ${env} is invalid`
),
message: t(
`Please try entering a custom node address, or try again later.`
),
};
case ErrorType.CONFIG_LOAD_ERROR:
return {
headline: t(`Error: can't load network configuration`),
message: t(
`You can try entering a custom node address, or try again later.`
),
};
default:
return null;
}
};
export const getErrorType = (env: Networks, data?: NodeData) => {
if (data && !getIsNodeLoading(data) && data.initialized) {
if (getIsInvalidUrl(data.url)) {
return ErrorType.INVALID_URL;
}
if (
data.chain.hasError ||
data.responseTime.hasError ||
data.block.hasError
) {
return ErrorType.CONNECTION_ERROR;
}
if (getHasInvalidChain(env, data.chain.value)) {
return ErrorType.INVALID_NETWORK;
}
if (data.ssl.hasError) {
return ErrorType.SSL_ERROR;
}
}
return null;
};

3
libs/environment/tsconfig.spec.json
View File

@ -14,6 +14,7 @@
"**/*.spec.js",
"**/*.test.jsx",
"**/*.spec.jsx",
"**/*.d.ts"
"**/*.d.ts",
"**/__mocks__/*.tsx"
]
}

52
libs/fills/src/lib/__generated__/Fills.ts generated
View File

@ -9,7 +9,7 @@ import { Pagination, Side } from "@vegaprotocol/types";
// GraphQL query operation: Fills
// ====================================================
export interface Fills_party_tradesPaged_edges_node_buyer {
export interface Fills_party_tradesConnection_edges_node_buyer {
__typename: "Party";
/**
* Party identifier
@ -17,7 +17,7 @@ export interface Fills_party_tradesPaged_edges_node_buyer {
id: string;
}
export interface Fills_party_tradesPaged_edges_node_seller {
export interface Fills_party_tradesConnection_edges_node_seller {
__typename: "Party";
/**
* Party identifier
@ -25,7 +25,7 @@ export interface Fills_party_tradesPaged_edges_node_seller {
id: string;
}
export interface Fills_party_tradesPaged_edges_node_buyerFee {
export interface Fills_party_tradesConnection_edges_node_buyerFee {
__typename: "TradeFee";
/**
* The maker fee, aggressive party to the other party (the one who had an order in the book)
@ -41,7 +41,7 @@ export interface Fills_party_tradesPaged_edges_node_buyerFee {
liquidityFee: string;
}
export interface Fills_party_tradesPaged_edges_node_sellerFee {
export interface Fills_party_tradesConnection_edges_node_sellerFee {
__typename: "TradeFee";
/**
* The maker fee, aggressive party to the other party (the one who had an order in the book)
@ -57,7 +57,7 @@ export interface Fills_party_tradesPaged_edges_node_sellerFee {
liquidityFee: string;
}
export interface Fills_party_tradesPaged_edges_node_market_tradableInstrument_instrument_product_settlementAsset {
export interface Fills_party_tradesConnection_edges_node_market_tradableInstrument_instrument_product_settlementAsset {
__typename: "Asset";
/**
* The id of the asset
@ -73,15 +73,15 @@ export interface Fills_party_tradesPaged_edges_node_market_tradableInstrument_in
decimals: number;
}
export interface Fills_party_tradesPaged_edges_node_market_tradableInstrument_instrument_product {
export interface Fills_party_tradesConnection_edges_node_market_tradableInstrument_instrument_product {
__typename: "Future";
/**
* The name of the asset (string)
*/
settlementAsset: Fills_party_tradesPaged_edges_node_market_tradableInstrument_instrument_product_settlementAsset;
settlementAsset: Fills_party_tradesConnection_edges_node_market_tradableInstrument_instrument_product_settlementAsset;
}
export interface Fills_party_tradesPaged_edges_node_market_tradableInstrument_instrument {
export interface Fills_party_tradesConnection_edges_node_market_tradableInstrument_instrument {
__typename: "Instrument";
/**
* Uniquely identify an instrument across all instruments available on Vega (string)
@ -94,18 +94,18 @@ export interface Fills_party_tradesPaged_edges_node_market_tradableInstrument_in
/**
* A reference to or instance of a fully specified product, including all required product parameters for that product (Product union)
*/
product: Fills_party_tradesPaged_edges_node_market_tradableInstrument_instrument_product;
product: Fills_party_tradesConnection_edges_node_market_tradableInstrument_instrument_product;
}
export interface Fills_party_tradesPaged_edges_node_market_tradableInstrument {
export interface Fills_party_tradesConnection_edges_node_market_tradableInstrument {
__typename: "TradableInstrument";
/**
* An instance of or reference to a fully specified instrument.
*/
instrument: Fills_party_tradesPaged_edges_node_market_tradableInstrument_instrument;
instrument: Fills_party_tradesConnection_edges_node_market_tradableInstrument_instrument;
}
export interface Fills_party_tradesPaged_edges_node_market {
export interface Fills_party_tradesConnection_edges_node_market {
__typename: "Market";
/**
* Market ID
@ -141,10 +141,10 @@ export interface Fills_party_tradesPaged_edges_node_market {
/**
* An instance of or reference to a tradable instrument.
*/
tradableInstrument: Fills_party_tradesPaged_edges_node_market_tradableInstrument;
tradableInstrument: Fills_party_tradesConnection_edges_node_market_tradableInstrument;
}
export interface Fills_party_tradesPaged_edges_node {
export interface Fills_party_tradesConnection_edges_node {
__typename: "Trade";
/**
* The hash of the trade data
@ -177,38 +177,38 @@ export interface Fills_party_tradesPaged_edges_node {
/**
* The party that bought
*/
buyer: Fills_party_tradesPaged_edges_node_buyer;
buyer: Fills_party_tradesConnection_edges_node_buyer;
/**
* The party that sold
*/
seller: Fills_party_tradesPaged_edges_node_seller;
seller: Fills_party_tradesConnection_edges_node_seller;
/**
* The fee paid by the buyer side of the trade
*/
buyerFee: Fills_party_tradesPaged_edges_node_buyerFee;
buyerFee: Fills_party_tradesConnection_edges_node_buyerFee;
/**
* The fee paid by the seller side of the trade
*/
sellerFee: Fills_party_tradesPaged_edges_node_sellerFee;
sellerFee: Fills_party_tradesConnection_edges_node_sellerFee;
/**
* The market the trade occurred on
*/
market: Fills_party_tradesPaged_edges_node_market;
market: Fills_party_tradesConnection_edges_node_market;
}
export interface Fills_party_tradesPaged_edges {
export interface Fills_party_tradesConnection_edges {
__typename: "TradeEdge";
node: Fills_party_tradesPaged_edges_node;
node: Fills_party_tradesConnection_edges_node;
cursor: string;
}
export interface Fills_party_tradesPaged_pageInfo {
export interface Fills_party_tradesConnection_pageInfo {
__typename: "PageInfo";
startCursor: string;
endCursor: string;
}
export interface Fills_party_tradesPaged {
export interface Fills_party_tradesConnection {
__typename: "TradeConnection";
/**
* The total number of trades in this connection
@ -217,11 +217,11 @@ export interface Fills_party_tradesPaged {
/**
* The trade in this connection
*/
edges: Fills_party_tradesPaged_edges[];
edges: Fills_party_tradesConnection_edges[];
/**
* The pagination information
*/
pageInfo: Fills_party_tradesPaged_pageInfo;
pageInfo: Fills_party_tradesConnection_pageInfo;
}
export interface Fills_party {
@ -230,7 +230,7 @@ export interface Fills_party {
* Party identifier
*/
id: string;
tradesPaged: Fills_party_tradesPaged;
tradesConnection: Fills_party_tradesConnection;
}
export interface Fills {

45
libs/fills/src/lib/fills-data-provider.ts
View File

@ -5,7 +5,7 @@ import type { PageInfo, Pagination } from '@vegaprotocol/react-helpers';
import type { FillFields } from './__generated__/FillFields';
import type {
Fills,
Fills_party_tradesPaged_edges,
Fills_party_tradesConnection_edges,
} from './__generated__/Fills';
import type { FillsSub } from './__generated__/FillsSub';
@ -17,19 +17,41 @@ const FILL_FRAGMENT = gql`
size
buyOrder
sellOrder
aggressor
buyer {
id
}
seller {
id
}
buyerFee {
makerFee
infrastructureFee
liquidityFee
}
sellerFee {
makerFee
infrastructureFee
liquidityFee
}
market {
id
name
decimalPlaces
positionDecimalPlaces
tradableInstrument {
instrument {
id
code
product {
... on Future {
settlementAsset {
id
symbol
decimals
}
}
}
}
}
}
@ -41,7 +63,7 @@ export const FILLS_QUERY = gql`
query Fills($partyId: ID!, $marketId: ID, $pagination: Pagination) {
party(id: $partyId) {
id
tradesPaged(marketId: $marketId, pagination: $pagination) {
tradesConnection(marketId: $marketId, pagination: $pagination) {
totalCount
edges {
node {
@ -67,7 +89,10 @@ export const FILLS_SUB = gql`
}
`;
const update = (data: Fills_party_tradesPaged_edges[], delta: FillFields[]) => {
const update = (
data: Fills_party_tradesConnection_edges[],
delta: FillFields[]
) => {
return produce(data, (draft) => {
delta.forEach((node) => {
const index = draft.findIndex((edge) => edge.node.id === node.id);
@ -80,21 +105,23 @@ const update = (data: Fills_party_tradesPaged_edges[], delta: FillFields[]) => {
});
};
const getData = (responseData: Fills): Fills_party_tradesPaged_edges[] | null =>
responseData.party?.tradesPaged.edges || null;
const getData = (
responseData: Fills
): Fills_party_tradesConnection_edges[] | null =>
responseData.party?.tradesConnection.edges || null;
const getPageInfo = (responseData: Fills): PageInfo | null =>
responseData.party?.tradesPaged.pageInfo || null;
responseData.party?.tradesConnection.pageInfo || null;
const getTotalCount = (responseData: Fills): number | undefined =>
responseData.party?.tradesPaged.totalCount;
responseData.party?.tradesConnection.totalCount;
const getDelta = (subscriptionData: FillsSub) => subscriptionData.trades || [];
const append = (
data: Fills_party_tradesPaged_edges[] | null,
data: Fills_party_tradesConnection_edges[] | null,
pageInfo: PageInfo,
insertionData: Fills_party_tradesPaged_edges[] | null,
insertionData: Fills_party_tradesConnection_edges[] | null,
insertionPageInfo: PageInfo | null,
pagination?: Pagination
) => {

10
libs/fills/src/lib/fills-manager.tsx
View File

@ -6,7 +6,7 @@ import { FillsTable } from './fills-table';
import type { IGetRowsParams } from 'ag-grid-community';
import { fillsDataProvider as dataProvider } from './fills-data-provider';
import type { Fills_party_tradesPaged_edges } from './__generated__/Fills';
import type { Fills_party_tradesConnection_edges } from './__generated__/Fills';
import type { FillsSub_trades } from './__generated__/FillsSub';
interface FillsManagerProps {
@ -15,11 +15,11 @@ interface FillsManagerProps {
export const FillsManager = ({ partyId }: FillsManagerProps) => {
const gridRef = useRef<AgGridReact | null>(null);
const dataRef = useRef<Fills_party_tradesPaged_edges[] | null>(null);
const dataRef = useRef<Fills_party_tradesConnection_edges[] | null>(null);
const totalCountRef = useRef<number | undefined>(undefined);
const update = useCallback(
({ data }: { data: Fills_party_tradesPaged_edges[] }) => {
({ data }: { data: Fills_party_tradesConnection_edges[] }) => {
if (!gridRef.current?.api) {
return false;
}
@ -35,7 +35,7 @@ export const FillsManager = ({ partyId }: FillsManagerProps) => {
data,
totalCount,
}: {
data: Fills_party_tradesPaged_edges[];
data: Fills_party_tradesConnection_edges[];
totalCount?: number;
}) => {
dataRef.current = data;
@ -48,7 +48,7 @@ export const FillsManager = ({ partyId }: FillsManagerProps) => {
const variables = useMemo(() => ({ partyId }), [partyId]);
const { data, error, loading, load, totalCount } = useDataProvider<
Fills_party_tradesPaged_edges[],
Fills_party_tradesConnection_edges[],
FillsSub_trades[]
>({ dataProvider, update, insert, variables });
totalCountRef.current = totalCount;

2
libs/fills/src/lib/fills-table.stories.tsx
View File

@ -16,7 +16,7 @@ Default.args = {
partyId: 'party-id',
datasource: {
getRows: makeGetRows(
fills.party?.tradesPaged.edges.map((e) => e.node) || []
fills.party?.tradesConnection.edges.map((e) => e.node) || []
),
},
};

14
libs/fills/src/lib/test-helpers.ts
View File

@ -1,14 +1,14 @@
import { Side } from '@vegaprotocol/types';
import merge from 'lodash/merge';
import type { IGetRowsParams } from 'ag-grid-community';
import type { PartialDeep } from 'type-fest';
import type {
Fills,
Fills_party_tradesPaged_edges_node,
Fills_party_tradesConnection_edges_node,
} from './__generated__/Fills';
import { Side } from '@vegaprotocol/types';
export const generateFills = (override?: PartialDeep<Fills>): Fills => {
const fills: Fills_party_tradesPaged_edges_node[] = [
const fills: Fills_party_tradesConnection_edges_node[] = [
generateFill({
buyer: {
id: 'party-id',
@ -50,7 +50,7 @@ export const generateFills = (override?: PartialDeep<Fills>): Fills => {
const defaultResult: Fills = {
party: {
id: 'buyer-id',
tradesPaged: {
tradesConnection: {
__typename: 'TradeConnection',
totalCount: 1,
edges: fills.map((f) => {
@ -74,9 +74,9 @@ export const generateFills = (override?: PartialDeep<Fills>): Fills => {
};
export const generateFill = (
override?: PartialDeep<Fills_party_tradesPaged_edges_node>
override?: PartialDeep<Fills_party_tradesConnection_edges_node>
) => {
const defaultFill: Fills_party_tradesPaged_edges_node = {
const defaultFill: Fills_party_tradesConnection_edges_node = {
__typename: 'Trade',
id: '0',
createdAt: new Date().toISOString(),
@ -135,7 +135,7 @@ export const generateFill = (
};
export const makeGetRows =
(data: Fills_party_tradesPaged_edges_node[]) =>
(data: Fills_party_tradesConnection_edges_node[]) =>
({ successCallback }: IGetRowsParams) => {
successCallback(data, data.length);
};

2
libs/market-depth/src/lib/orderbook-row.tsx
View File

@ -66,7 +66,7 @@ export const OrderbookRow = React.memo(
relativeAsk={cumulativeRelativeAsk}
relativeBid={cumulativeRelativeBid}
indicativeVolume={indicativeVolume}
className="pr-4"
className="pr-4 text-black dark:text-white"
/>
</>
);

4
libs/market-depth/src/lib/orderbook.tsx
View File

@ -282,7 +282,7 @@ export const Orderbook = ({
const hasData = renderedRows.data && renderedRows.data.length !== 0;
return (
<div
className={`h-full overflow-auto relative ${styles['scroll']}`}
className={`h-full overflow-auto relative ${styles['scroll']} pl-4 pt-4`}
onScroll={onScroll}
ref={scrollElement}
data-testid="scroll"
@ -354,7 +354,7 @@ export const Orderbook = ({
<select
onChange={(e) => onResolutionChange(Number(e.currentTarget.value))}
value={resolution}
className="block bg-black-25 dark:bg-white-25 text-black dark:text-white focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark focus-visible:outline-0 font-mono w-100 text-right w-full h-full"
className="block bg-black-10 dark:bg-black-70 text-black dark:text-white focus-visible:shadow-focus dark:focus-visible:shadow-focus-dark focus-visible:outline-0 font-mono w-100 text-right w-full h-full"
data-testid="resolution"
>
{new Array(3)

5
libs/market-list/src/lib/components/landing/landing-dialog.tsx
View File

@ -29,7 +29,10 @@ export const LandingDialog = ({ open, setOpen }: LandingDialogProps) => {
intent={Intent.Primary}
open={open}
onChange={setClose}
titleClassNames="font-bold font-sans text-3xl tracking-tight mb-0 pl-8"
titleClassNames={
'font-bold font-sans text-3xl tracking-tight mb-0 pl-8'
}
contentClassNames={'md:w-[520px] lg:w-[520px] w-full'}
>
<SelectMarketList data={data} onSelect={setClose} />
</Dialog>

6
libs/market-list/src/lib/components/landing/select-market-list.tsx
View File

@ -67,6 +67,7 @@ export const SelectMarketList = ({
onKeyPress={(event) => handleKeyPress(event, id)}
onClick={() => onSelect(id)}
data-testid={`market-link-${id}`}
className={`focus:decoration-vega-yellow`}
>
{marketName}
</a>
@ -106,7 +107,10 @@ export const SelectMarketList = ({
</tbody>
</table>
<a className={`${boldUnderlineClassNames} text-ui-small`} href="/markets">
<a
className={`${boldUnderlineClassNames} text-ui-small focus:decoration-vega-yellow`}
href="/markets"
>
{t('Or view full market list')}
</a>
</div>

6
libs/market-list/src/lib/components/markets-container/__generated__/MarketDataFields.ts generated
View File

@ -3,7 +3,7 @@
// @generated
// This file was automatically generated and should not be edited.
import { MarketState, MarketTradingMode } from "@vegaprotocol/types";
import { MarketState, MarketTradingMode, AuctionTrigger } from "@vegaprotocol/types";
// ====================================================
// GraphQL fragment: MarketDataFields
@ -43,4 +43,8 @@ export interface MarketDataFields {
* the mark price (actually an unsigned int)
*/
markPrice: string;
/**
* what triggered an auction (if an auction was started)
*/
trigger: AuctionTrigger;
}

6
libs/market-list/src/lib/components/markets-container/__generated__/MarketDataSub.ts generated
View File

@ -3,7 +3,7 @@
// @generated
// This file was automatically generated and should not be edited.
import { MarketState, MarketTradingMode } from "@vegaprotocol/types";
import { MarketState, MarketTradingMode, AuctionTrigger } from "@vegaprotocol/types";
// ====================================================
// GraphQL subscription operation: MarketDataSub
@ -43,6 +43,10 @@ export interface MarketDataSub_marketData {
* the mark price (actually an unsigned int)
*/
markPrice: string;
/**
* what triggered an auction (if an auction was started)
*/
trigger: AuctionTrigger;
}
export interface MarketDataSub {

6
libs/market-list/src/lib/components/markets-container/__generated__/Markets.ts generated
View File

@ -3,7 +3,7 @@
// @generated
// This file was automatically generated and should not be edited.
import { MarketState, MarketTradingMode } from "@vegaprotocol/types";
import { MarketState, MarketTradingMode, AuctionTrigger } from "@vegaprotocol/types";
// ====================================================
// GraphQL query operation: Markets
@ -43,6 +43,10 @@ export interface Markets_markets_data {
* the mark price (actually an unsigned int)
*/
markPrice: string;
/**
* what triggered an auction (if an auction was started)
*/
trigger: AuctionTrigger;
}
export interface Markets_markets_tradableInstrument_instrument_product_settlementAsset {

20
libs/market-list/src/lib/components/markets-container/market-list-table.tsx
View File

@ -4,11 +4,13 @@ import {
PriceFlashCell,
addDecimalsFormatNumber,
t,
formatLabel,
} from '@vegaprotocol/react-helpers';
import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
import { AgGridColumn } from 'ag-grid-react';
import type { AgGridReact } from 'ag-grid-react';
import type { Markets_markets } from '../__generated__/Markets';
import { MarketTradingMode, AuctionTrigger } from '@vegaprotocol/types';
interface MarketListTableProps {
datasource: IDatasource;
@ -44,13 +46,19 @@ export const MarketListTable = forwardRef<AgGridReact, MarketListTableProps>(
field="tradableInstrument.instrument.product.settlementAsset.symbol"
/>
<AgGridColumn
headerName={t('State')}
headerName={t('Trading mode')}
field="data"
valueFormatter={({ value }: ValueFormatterParams) =>
value === undefined
? value
: `${value.market.state} (${value.market.tradingMode})`
}
minWidth={200}
valueFormatter={({ value }: ValueFormatterParams) => {
if (!value) return value;
const { market, trigger } = value;
return market &&
market.tradingMode === MarketTradingMode.MonitoringAuction &&
trigger &&
trigger !== AuctionTrigger.Unspecified
? `${formatLabel(market.tradingMode)} - ${trigger.toLowerCase()}`
: formatLabel(market?.tradingMode);
}}
/>
<AgGridColumn
headerName={t('Best bid')}

6
libs/market-list/src/lib/components/markets-container/markets-container.tsx
View File

@ -10,6 +10,7 @@ import type {
Markets_markets_data,
} from '../../components/__generated__/Markets';
import { marketsDataProvider as dataProvider } from './markets-data-provider';
import { MarketState } from '@vegaprotocol/types';
export const MarketsContainer = () => {
const { push } = useRouter();
@ -28,14 +29,15 @@ export const MarketsContainer = () => {
Markets_markets_data
>({ dataProvider, update });
dataRef.current = data;
const getRows = async ({
successCallback,
startRow,
endRow,
}: IGetRowsParams) => {
const rowsThisBlock = dataRef.current
? dataRef.current.slice(startRow, endRow)
? dataRef.current
.slice(startRow, endRow)
.filter((m) => m.data?.market.state !== MarketState.Rejected)
: [];
const lastRow = dataRef.current?.length ?? -1;
successCallback(rowsThisBlock, lastRow);

1
libs/market-list/src/lib/components/markets-container/markets-data-provider.ts
View File

@ -21,6 +21,7 @@ const MARKET_DATA_FRAGMENT = gql`
bestBidPrice
bestOfferPrice
markPrice
trigger
}
`;

35
libs/market-list/src/lib/utils/market-list.utils.ts
View File

@ -1,3 +1,4 @@
import { MarketState } from '@vegaprotocol/types';
import orderBy from 'lodash/orderBy';
import type {
MarketList,
@ -11,22 +12,24 @@ export const lastPrice = ({ candles }: MarketList_markets) =>
export const mapDataToMarketList = ({ markets }: MarketList) =>
orderBy(
markets?.map((m) => {
return {
id: m.id,
decimalPlaces: m.decimalPlaces,
marketName: m.tradableInstrument.instrument?.code,
lastPrice: lastPrice(m) ?? m.data?.markPrice,
candles: (m.candles || []).filter((c) => c),
open: m.marketTimestamps.open
? new Date(m.marketTimestamps.open).getTime()
: null,
close: m.marketTimestamps.close
? new Date(m.marketTimestamps.close).getTime()
: null,
state: m.state,
};
}) || [],
markets
?.filter((m) => m.state !== MarketState.Rejected)
.map((m) => {
return {
id: m.id,
decimalPlaces: m.decimalPlaces,
marketName: m.tradableInstrument.instrument?.code,
lastPrice: lastPrice(m) ?? m.data?.markPrice,
candles: (m.candles || []).filter((c) => c),
open: m.marketTimestamps.open
? new Date(m.marketTimestamps.open).getTime()
: null,
close: m.marketTimestamps.close
? new Date(m.marketTimestamps.close).getTime()
: null,
state: m.state,
};
}) || [],
['state', 'open', 'id'],
['asc', 'asc', 'asc']
);

5
libs/network-info/src/network-info.tsx
View File

@ -1,3 +1,4 @@
import { Fragment } from 'react';
import { t } from '@vegaprotocol/react-helpers';
import { Link, Lozenge } from '@vegaprotocol/ui-toolkit';
import { useEnvironment } from '@vegaprotocol/environment';
@ -56,7 +57,7 @@ export const NetworkInfo = () => {
<p className="mb-16">
{t('Known issues and feedback on')}{' '}
{feedbackLinks.map(({ name, url }, index) => (
<>
<Fragment key={index}>
<Link key={index} href={url}>
{name}
</Link>
@ -66,7 +67,7 @@ export const NetworkInfo = () => {
{feedbackLinks.length > 1 &&
index === feedbackLinks.length - 1 &&
`, ${t('and')} `}
</>
</Fragment>
))}
</p>
)}

246
libs/orders/src/lib/order-hooks/use-order-validation.spec.tsx
View File

@ -10,6 +10,7 @@ import type {
} from '@vegaprotocol/wallet';
import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
import type { ValidationProps } from './use-order-validation';
import { marketTranslations } from './use-order-validation';
import { useOrderValidation } from './use-order-validation';
import { ERROR_SIZE_DECIMAL } from '../utils/validate-size';
import type { Market } from '../market';
@ -73,12 +74,12 @@ const ERROR = {
'Only limit orders are permitted when market is in auction',
MARKET_CONTINUOUS_TIF:
'Only GTT, GTC and GFA are permitted when market is in auction',
FIELD_SIZE_REQ: 'An amount needs to be provided',
FIELD_SIZE_REQ: 'You need to provide an amount',
FIELD_SIZE_MIN: `The amount cannot be lower than "${defaultOrder.step}"`,
FIELD_PRICE_REQ: 'A price needs to be provided',
FIELD_PRICE_REQ: 'You need to provide a price',
FIELD_PRICE_MIN: 'The price cannot be negative',
FIELD_PRICE_STEP_NULL: 'No decimal amounts allowed for this order',
FIELD_PRICE_STEP_DECIMAL: `The amount field only takes up to ${market.positionDecimalPlaces} decimals`,
FIELD_PRICE_STEP_NULL: 'Order sizes must be in whole numbers for this market',
FIELD_PRICE_STEP_DECIMAL: `The amount field accepts up to ${market.positionDecimalPlaces} decimal places`,
};
function setup(
@ -90,107 +91,148 @@ function setup(
return renderHook(() => useOrderValidation({ ...defaultOrder, ...props }));
}
it('Returns empty string when given valid data', () => {
const { result } = setup();
expect(result.current).toEqual('');
});
it('Returns an error message when no keypair found', async () => {
const { result } = setup(defaultOrder, { keypair: null });
expect(result.current).toEqual('');
});
it('Returns an error message when the keypair is tainted', async () => {
const { result } = setup(defaultOrder, {
keypair: { ...defaultWalletContext.keypair, tainted: true },
describe('useOrderValidation', () => {
it('Returns empty string when given valid data', () => {
const { result } = setup();
expect(result.current).toStrictEqual({ isDisabled: false, message: `` });
});
expect(result.current).toEqual('');
});
it.each`
state | errorMessage
${MarketState.Cancelled} | ${ERROR.MARKET_INACTIVE}
${MarketState.Closed} | ${ERROR.MARKET_INACTIVE}
${MarketState.Rejected} | ${ERROR.MARKET_INACTIVE}
${MarketState.Settled} | ${ERROR.MARKET_INACTIVE}
${MarketState.TradingTerminated} | ${ERROR.MARKET_INACTIVE}
${MarketState.Suspended} | ${ERROR.MARKET_SUSPENDED}
${MarketState.Pending} | ${ERROR.MARKET_WAITING}
${MarketState.Proposed} | ${ERROR.MARKET_WAITING}
`(
'Returns an error message for "$marketState" market',
async ({ state, errorMessage }) => {
const { result } = setup({ market: { ...defaultOrder.market, state } });
expect(result.current).toEqual(errorMessage);
}
);
it.each`
tradingMode | errorMessage
${MarketTradingMode.BatchAuction} | ${ERROR.MARKET_CONTINUOUS_LIMIT}
${MarketTradingMode.MonitoringAuction} | ${ERROR.MARKET_CONTINUOUS_LIMIT}
${MarketTradingMode.OpeningAuction} | ${ERROR.MARKET_CONTINUOUS_LIMIT}
`(
'Returns an error message when trying to submit a non-limit order for a "$tradingMode" market',
async ({ tradingMode, errorMessage }) => {
const { result } = setup({
market: { ...defaultOrder.market, tradingMode },
orderType: VegaWalletOrderType.Market,
});
expect(result.current).toEqual(errorMessage);
}
);
it.each`
tradingMode | orderTimeInForce | errorMessage
${MarketTradingMode.BatchAuction} | ${VegaWalletOrderTimeInForce.FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.MonitoringAuction} | ${VegaWalletOrderTimeInForce.FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.OpeningAuction} | ${VegaWalletOrderTimeInForce.FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.BatchAuction} | ${VegaWalletOrderTimeInForce.IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.MonitoringAuction} | ${VegaWalletOrderTimeInForce.IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.OpeningAuction} | ${VegaWalletOrderTimeInForce.IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.BatchAuction} | ${VegaWalletOrderTimeInForce.GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.MonitoringAuction} | ${VegaWalletOrderTimeInForce.GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.OpeningAuction} | ${VegaWalletOrderTimeInForce.GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
`(
'Returns an error message when submitting a limit order with a "$orderTimeInForce" value to a "$tradingMode" market',
async ({ tradingMode, orderTimeInForce, errorMessage }) => {
const { result } = setup({
market: { ...defaultOrder.market, tradingMode },
orderType: VegaWalletOrderType.Limit,
orderTimeInForce,
});
expect(result.current).toEqual(errorMessage);
}
);
it.each`
fieldName | errorType | errorMessage
${'size'} | ${'required'} | ${ERROR.FIELD_SIZE_REQ}
${'size'} | ${'min'} | ${ERROR.FIELD_SIZE_MIN}
${'price'} | ${'required'} | ${ERROR.FIELD_PRICE_REQ}
${'price'} | ${'min'} | ${ERROR.FIELD_PRICE_MIN}
`(
'Returns an error message when the order $fieldName "$errorType" validation fails',
async ({ fieldName, errorType, errorMessage }) => {
const { result } = setup({
fieldErrors: { [fieldName]: { type: errorType } },
});
expect(result.current).toEqual(errorMessage);
}
);
it('Returns an error message when the order size incorrectly has decimal values', async () => {
const { result } = setup({
market: { ...market, positionDecimalPlaces: 0 },
fieldErrors: { size: { type: 'validate', message: ERROR_SIZE_DECIMAL } },
it('Returns an error message when no keypair found', () => {
const { result } = setup(defaultOrder, { keypair: null });
expect(result.current).toStrictEqual({ isDisabled: false, message: `` });
});
expect(result.current).toEqual(ERROR.FIELD_PRICE_STEP_NULL);
});
it('Returns an error message when the order size has more decimals then allowed', async () => {
const { result } = setup({
fieldErrors: { size: { type: 'validate', message: ERROR_SIZE_DECIMAL } },
it('Returns an error message when the keypair is tainted', () => {
const { result } = setup(defaultOrder, {
keypair: { ...defaultWalletContext.keypair, tainted: true },
});
expect(result.current).toStrictEqual({ isDisabled: false, message: `` });
});
it.each`
state
${MarketState.Settled}
${MarketState.Rejected}
${MarketState.TradingTerminated}
`(
'Returns an error message for market state when not accepting orders',
({ state }) => {
const { result } = setup({ market: { ...defaultOrder.market, state } });
expect(result.current).toStrictEqual({
isDisabled: true,
message: `This market is ${marketTranslations(
state
)} and not accepting orders`,
});
}
);
it.each`
state
${MarketState.Suspended}
${MarketState.Pending}
${MarketState.Cancelled}
${MarketState.Proposed}
${MarketState.Closed}
`(
'Returns an error message for market state suspended or pending',
({ state }) => {
const { result } = setup({
market: {
...defaultOrder.market,
state,
tradingMode: MarketTradingMode.BatchAuction,
},
});
expect(result.current).toStrictEqual({
isDisabled: false,
message: `This market is ${state.toLowerCase()} and only accepting liquidity commitment orders`,
});
}
);
it.each`
tradingMode | errorMessage
${MarketTradingMode.BatchAuction} | ${ERROR.MARKET_CONTINUOUS_LIMIT}
${MarketTradingMode.MonitoringAuction} | ${ERROR.MARKET_CONTINUOUS_LIMIT}
${MarketTradingMode.OpeningAuction} | ${ERROR.MARKET_CONTINUOUS_LIMIT}
`(
`Returns an error message when trying to submit a non-limit order for a "$tradingMode" market`,
({ tradingMode, errorMessage }) => {
const { result } = setup({
market: { ...defaultOrder.market, tradingMode },
orderType: VegaWalletOrderType.Market,
});
expect(result.current).toStrictEqual({
isDisabled: true,
message: errorMessage,
});
}
);
it.each`
tradingMode | orderTimeInForce | errorMessage
${MarketTradingMode.BatchAuction} | ${VegaWalletOrderTimeInForce.FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.MonitoringAuction} | ${VegaWalletOrderTimeInForce.FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.OpeningAuction} | ${VegaWalletOrderTimeInForce.FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.BatchAuction} | ${VegaWalletOrderTimeInForce.IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.MonitoringAuction} | ${VegaWalletOrderTimeInForce.IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.OpeningAuction} | ${VegaWalletOrderTimeInForce.IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.BatchAuction} | ${VegaWalletOrderTimeInForce.GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.MonitoringAuction} | ${VegaWalletOrderTimeInForce.GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
${MarketTradingMode.OpeningAuction} | ${VegaWalletOrderTimeInForce.GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
`(
`Returns an error message when submitting a limit order with a "$orderTimeInForce" value to a "$tradingMode" market`,
({ tradingMode, orderTimeInForce, errorMessage }) => {
const { result } = setup({
market: { ...defaultOrder.market, tradingMode },
orderType: VegaWalletOrderType.Limit,
orderTimeInForce,
});
expect(result.current).toStrictEqual({
isDisabled: true,
message: errorMessage,
});
}
);
it.each`
fieldName | errorType | errorMessage
${`size`} | ${`required`} | ${ERROR.FIELD_SIZE_REQ}
${`size`} | ${`min`} | ${ERROR.FIELD_SIZE_MIN}
${`price`} | ${`required`} | ${ERROR.FIELD_PRICE_REQ}
${`price`} | ${`min`} | ${ERROR.FIELD_PRICE_MIN}
`(
`Returns an error message when the order $fieldName "$errorType" validation fails`,
({ fieldName, errorType, errorMessage }) => {
const { result } = setup({
fieldErrors: { [fieldName]: { type: errorType } },
});
expect(result.current).toStrictEqual({
isDisabled: true,
message: errorMessage,
});
}
);
it('Returns an error message when the order size incorrectly has decimal values', () => {
const { result } = setup({
market: { ...market, positionDecimalPlaces: 0 },
fieldErrors: { size: { type: `validate`, message: ERROR_SIZE_DECIMAL } },
});
expect(result.current).toStrictEqual({
isDisabled: true,
message: ERROR.FIELD_PRICE_STEP_NULL,
});
});
it('Returns an error message when the order size has more decimals than allowed', () => {
const { result } = setup({
fieldErrors: { size: { type: `validate`, message: ERROR_SIZE_DECIMAL } },
});
expect(result.current).toStrictEqual({
isDisabled: true,
message: ERROR.FIELD_PRICE_STEP_DECIMAL,
});
});
expect(result.current).toEqual(ERROR.FIELD_PRICE_STEP_DECIMAL);
});

157
libs/orders/src/lib/order-hooks/use-order-validation.tsx
View File

@ -19,6 +19,15 @@ export type ValidationProps = {
fieldErrors?: FieldErrors<Order>;
};
export const marketTranslations = (marketState: MarketState) => {
switch (marketState) {
case MarketState.TradingTerminated:
return t('terminated');
default:
return t(marketState).toLowerCase();
}
};
export const useOrderValidation = ({
step,
market,
@ -28,33 +37,120 @@ export const useOrderValidation = ({
}: ValidationProps) => {
const { keypair } = useVegaWallet();
const invalidText = useMemo(() => {
const { message, isDisabled } = useMemo(() => {
if (!keypair) {
return t('No public key selected');
return { message: t('No public key selected'), isDisabled: true };
}
if (keypair.tainted) {
return t('Selected public key has been tainted');
return {
isDisabled: true,
message: t('Selected public key has been tainted'),
};
}
if (
[
MarketState.Settled,
MarketState.Rejected,
MarketState.TradingTerminated,
].includes(market.state)
) {
return {
isDisabled: true,
message: t(
`This market is ${marketTranslations(
market.state
)} and not accepting orders`
),
};
}
if (
[
MarketState.Suspended,
MarketState.Pending,
MarketState.Proposed,
MarketState.Cancelled,
MarketState.Closed,
].includes(market.state)
) {
return {
isDisabled: false,
message: t(
`This market is ${marketTranslations(
market.state
)} and only accepting liquidity commitment orders`
),
};
}
if (market.state !== MarketState.Active) {
if (market.state === MarketState.Suspended) {
return t('Market is currently suspended');
if (market.tradingMode === MarketTradingMode.Continuous) {
if (orderType !== OrderType.Limit) {
return {
isDisabled: true,
message: t(
'Only limit orders are permitted when market is in auction'
),
};
}
if (
[
OrderTimeInForce.FOK,
OrderTimeInForce.IOC,
OrderTimeInForce.GFN,
].includes(orderTimeInForce)
) {
return {
isDisabled: true,
message: t(
'Only GTT, GTC and GFA are permitted when market is in auction'
),
};
}
}
return {
isDisabled: false,
message: t(
`This market is ${marketTranslations(
market.state
)} and only accepting liquidity commitment orders`
),
};
}
if (
market.state === MarketState.Proposed ||
market.state === MarketState.Pending
) {
return t('Market is not active yet');
return {
isDisabled: false,
message: t(
`This market is ${marketTranslations(
market.state
)} and only accepting liquidity commitment orders`
),
};
}
return t('Market is no longer active');
return {
isDisabled: true,
message: t('This market is no longer active.'),
};
}
if (market.tradingMode !== MarketTradingMode.Continuous) {
if (orderType !== OrderType.Limit) {
return t('Only limit orders are permitted when market is in auction');
return {
isDisabled: true,
message: t(
'Only limit orders are permitted when market is in auction'
),
};
}
if (
@ -64,26 +160,41 @@ export const useOrderValidation = ({
OrderTimeInForce.GFN,
].includes(orderTimeInForce)
) {
return t(
'Only GTT, GTC and GFA are permitted when market is in auction'
);
return {
isDisabled: true,
message: t(
'Only GTT, GTC and GFA are permitted when market is in auction'
),
};
}
}
if (fieldErrors?.size?.type === 'required') {
return t('An amount needs to be provided');
return {
isDisabled: true,
message: t('You need to provide an amount'),
};
}
if (fieldErrors?.size?.type === 'min') {
return t(`The amount cannot be lower than "${step}"`);
return {
isDisabled: true,
message: t(`The amount cannot be lower than "${step}"`),
};
}
if (fieldErrors?.price?.type === 'required') {
return t('A price needs to be provided');
return {
isDisabled: true,
message: t('You need to provide a price'),
};
}
if (fieldErrors?.price?.type === 'min') {
return t(`The price cannot be negative`);
return {
isDisabled: true,
message: t(`The price cannot be negative`),
};
}
if (
@ -91,14 +202,20 @@ export const useOrderValidation = ({
fieldErrors?.size?.message === ERROR_SIZE_DECIMAL
) {
if (market.positionDecimalPlaces === 0) {
return t('No decimal amounts allowed for this order');
return {
isDisabled: true,
message: t('Order sizes must be in whole numbers for this market'),
};
}
return t(
`The amount field only takes up to ${market.positionDecimalPlaces} decimals`
);
return {
isDisabled: true,
message: t(
`The amount field accepts up to ${market.positionDecimalPlaces} decimal places`
),
};
}
return '';
return { isDisabled: false, message: '' };
}, [
keypair,
step,
@ -110,5 +227,5 @@ export const useOrderValidation = ({
orderTimeInForce,
]);
return invalidText;
return { message, isDisabled };
};

6
libs/react-helpers/src/lib/format/utils.ts
View File

@ -1,4 +1,10 @@
import capitalize from 'lodash/capitalize';
import startCase from 'lodash/startCase';
export const getUserLocale = () => 'default';
export const splitAt = (index: number) => (x: string) =>
[x.slice(0, index), x.slice(index)];
export const formatLabel = (str: string) =>
capitalize(startCase(str).toLowerCase());

4
libs/react-helpers/src/lib/grid/price-cell.tsx
View File

@ -20,13 +20,13 @@ export const PriceCell = React.memo(
: [value];
return (
<span
className="font-mono relative text-ui-small"
className="font-mono relative text-ui-small text-black dark:text-white"
data-testid={testId || 'price'}
>
{valueSplit[0]}
{valueSplit[1] ? decimalSeparator : null}
{valueSplit[1] ? (
<span className="text-black-muted dark:text-white-muted">
<span className="text-black-60 dark:text-white-60">
{valueSplit[1]}
</span>
) : null}

Some files were not shown because too many files have changed in this diff Show More