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

feat(#2050): support new desktop wallet release (#2083)

Browse Source 
* feat: make a single button to connect to either wallet gui or cli

* chore: update token to use jsonrpc connector

* chore: update stray connector-cli entry

* chore: update mock queries to return matching chain id, change tests to connecting using jsonRpc

* chore: add type map for TIF short code

* chore: update data testid as cli and gui are combined into jsonRpc

* chore: remove unused env vars and update readme
This commit is contained in:
Matthew Russell 2022-11-28 14:16:53 -06:00 committed by GitHub
parent 88263df9c2
commit 02f56dd0ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 73 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -88,12 +88,12 @@ Run `nx test my-app` to execute the unit tests with [Jest](https://jestjs.io), o
### Using wallet ### Using wallet
To run tests locally using your own wallets you can add the following environment variables to `cypress.json` To run tests locally using your own wallets make sure you have generated at least two public keys and update the following environment variables in `cypress.config.js` to match your wallet. You should also use [vegawallet-dummy](https://github.com/vegaprotocol/vegawallet-dummy) to avoid being prompted in CLI during test execution.
1. Change `TRADING_TEST_VEGA_WALLET_NAME` to your Vega wallet name 1. Set `VEGA_PUBLIC_KEY` and `TRUNCATED_VEGA_PUBLIC_KEY` to your first public key.
2. Add `TRADING_TEST_VEGA_WALLET_PASSPHRASE` as your wallet passphrase 2. Set `VEGA_PUBLIC_KEY2` and `TRUNCATED_VEGA_PUBLIC_KEY2` to your second public key.
3. Add `ETH_WALLET_MNEMONIC` as your Ethereum wallet mnemonic 3. Set `TRADING_TEST_VEGA_WALLET_PASSPHRASE` as your wallet passphrase
4. Use [vegawallet-dummy](https://github.com/vegaprotocol/vegawallet-dummy) to avoid being prompted in CLI during test execution. 4. Add `ETH_WALLET_MNEMONIC` as your Ethereum wallet mnemonic
### Formatting ### Formatting

1
apps/console-lite-e2e/cypress.config.js
View File

@ -23,7 +23,6 @@ module.exports = defineConfig({
viewportHeight: 900, viewportHeight: 900,
}, },
env: { env: {
TRADING_TEST_VEGA_WALLET_NAME: 'UI_Trading_Test',
ETHEREUM_PROVIDER_URL: ETHEREUM_PROVIDER_URL:
'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8', 'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
VEGA_PUBLIC_KEY: VEGA_PUBLIC_KEY:

10
apps/token-e2e/src/integration/flow/governance-flow.cy.js
View File

@ -6,8 +6,6 @@ const vegaWalletStakedBalances =
const vegaWalletAssociatedBalance = '[data-testid="currency-value"]'; const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
const vegaWalletNameElement = '[data-testid="wallet-name"]'; const vegaWalletNameElement = '[data-testid="wallet-name"]';
const vegaWallet = '[data-testid="vega-wallet"]'; const vegaWallet = '[data-testid="vega-wallet"]';
const vegaWalletName = Cypress.env('vegaWalletName');
const vegaWalletPassphrase = Cypress.env('vegaWalletPassphrase');
const connectToVegaWalletButton = '[data-testid="connect-to-vega-wallet-btn"]'; const connectToVegaWalletButton = '[data-testid="connect-to-vega-wallet-btn"]';
const newProposalSubmitButton = '[data-testid="proposal-submit"]'; const newProposalSubmitButton = '[data-testid="proposal-submit"]';
const dialogCloseButton = '[data-testid="dialog-close"]'; const dialogCloseButton = '[data-testid="dialog-close"]';
@ -33,7 +31,6 @@ const voteTwoMinExtraNote = '[data-testid="voting-2-mins-extra"]';
const voteStatus = '[data-testid="vote-status"]'; const voteStatus = '[data-testid="vote-status"]';
const rejectProposalsLink = '[href="/governance/rejected"]'; const rejectProposalsLink = '[href="/governance/rejected"]';
const feedbackError = '[data-testid="Error"]'; const feedbackError = '[data-testid="Error"]';
const restConnectorForm = '[data-testid="rest-connector-form"]';
const noOpenProposals = '[data-testid="no-open-proposals"]'; const noOpenProposals = '[data-testid="no-open-proposals"]';
const noClosedProposals = '[data-testid="no-closed-proposals"]'; const noClosedProposals = '[data-testid="no-closed-proposals"]';
const txTimeout = Cypress.env('txTimeout'); const txTimeout = Cypress.env('txTimeout');
@ -794,12 +791,7 @@ context(
.should('be.visible') .should('be.visible')
.and('have.text', 'Connect Vega wallet') .and('have.text', 'Connect Vega wallet')
.click(); .click();
cy.getByTestId('connector-gui').click(); cy.getByTestId('connector-jsonRpc').click();
cy.get(restConnectorForm).within(() => {
cy.get('#wallet').click().type(vegaWalletName);
cy.get('#passphrase').click().type(vegaWalletPassphrase);
cy.get('button').contains('Connect').click();
});
cy.get(vegaWalletNameElement).should('be.visible'); cy.get(vegaWalletNameElement).should('be.visible');
cy.get(connectToVegaWalletButton).should('not.exist'); cy.get(connectToVegaWalletButton).should('not.exist');
// 3001-VOTE-100 // 3001-VOTE-100

13
apps/token-e2e/src/integration/view/wallet-vega.cy.js
View File

@ -89,14 +89,11 @@ context(
}); });
}); });
it('should have gui, cli and hosted connection options visible on list', function () { it('should have jsonRpc and hosted connection options visible on list', function () {
cy.get(connectorsList).within(() => { cy.get(connectorsList).within(() => {
cy.getByTestId('connector-gui') cy.getByTestId('connector-jsonRpc')
.should('be.visible') .should('be.visible')
.and('have.text', 'Desktop wallet app'); .and('have.text', 'Connect Vega wallet');
cy.getByTestId('connector-cli')
.should('be.visible')
.and('have.text', 'Command line wallet app');
cy.getByTestId('connector-hosted') cy.getByTestId('connector-hosted')
.should('be.visible') .should('be.visible')
.and('have.text', 'Hosted Fairground wallet'); .and('have.text', 'Hosted Fairground wallet');
@ -113,9 +110,9 @@ context(
describe('when rest connector form opened', function () { describe('when rest connector form opened', function () {
// Note using desktop wallet app link temporarily whilst its still on v1, // Note using desktop wallet app link temporarily whilst its still on v1,
// tests will need to be updated to handle v2 // tests will need to be updated to handle v2
before('click desktop wallet app link', function () { before('click hosted wallet app button', function () {
cy.get(connectorsList).within(() => { cy.get(connectorsList).within(() => {
cy.getByTestId('connector-gui').click(); cy.getByTestId('connector-hosted').click();
}); });
}); });

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

@ -10,9 +10,7 @@ Cypress.Commands.add('vega_wallet_connect', () => {
.and('be.visible') .and('be.visible')
.click({ force: true }); .click({ force: true });
}); });
// Connect with gui as its the v1 service and tests should still pass. This will need cy.getByTestId('connector-jsonRpc').click();
// to be update to use v2
cy.getByTestId('connector-cli').click();
cy.get(vegaWalletNameElement).should('be.visible'); cy.get(vegaWalletNameElement).should('be.visible');
}); });

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

@ -37,7 +37,6 @@ module.exports = defineConfig({
requestTimeout: 20000, requestTimeout: 20000,
}, },
env: { env: {
TRADING_TEST_VEGA_WALLET_NAME: 'UI_Trading_Test',
ETHEREUM_PROVIDER_URL: ETHEREUM_PROVIDER_URL:
'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8', 'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
VEGA_PUBLIC_KEY: VEGA_PUBLIC_KEY:

16
apps/trading-e2e/src/integration/global.cy.ts
View File

@ -6,8 +6,6 @@ const connectVegaBtn = 'connect-vega-wallet';
const manageVegaBtn = 'manage-vega-wallet'; const manageVegaBtn = 'manage-vega-wallet';
const form = 'rest-connector-form'; const form = 'rest-connector-form';
const dialogContent = 'dialog-content'; const dialogContent = 'dialog-content';
const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
describe('vega wallet v1', { tags: '@smoke' }, () => { describe('vega wallet v1', { tags: '@smoke' }, () => {
beforeEach(() => { beforeEach(() => {
@ -20,23 +18,19 @@ describe('vega wallet v1', { tags: '@smoke' }, () => {
it('can connect', () => { it('can connect', () => {
cy.getByTestId(connectVegaBtn).click(); cy.getByTestId(connectVegaBtn).click();
cy.contains('Desktop wallet app'); cy.contains('Connect Vega wallet');
cy.contains('Command line wallet app');
cy.contains('Hosted Fairground wallet'); cy.contains('Hosted Fairground wallet');
cy.getByTestId('connectors-list') cy.getByTestId('connectors-list')
.find('[data-testid="connector-gui"]') .find('[data-testid="connector-jsonRpc"]')
.click(); .click();
cy.getByTestId(form).find('#wallet').click().type(walletName);
cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
cy.getByTestId(manageVegaBtn).should('exist'); cy.getByTestId(manageVegaBtn).should('exist');
}); });
it('doesnt connect with invalid credentials', () => { it('doesnt connect with invalid credentials', () => {
cy.getByTestId(connectVegaBtn).click(); cy.getByTestId(connectVegaBtn).click();
cy.getByTestId('connectors-list') cy.getByTestId('connectors-list')
.find('[data-testid="connector-gui"]') .find('[data-testid="connector-hosted"]')
.click(); .click();
cy.getByTestId(form).find('#wallet').click().type('invalid name'); cy.getByTestId(form).find('#wallet').click().type('invalid name');
cy.getByTestId(form).find('#passphrase').click().type('invalid password'); cy.getByTestId(form).find('#passphrase').click().type('invalid password');
@ -47,7 +41,7 @@ describe('vega wallet v1', { tags: '@smoke' }, () => {
it('doesnt connect with invalid fields', () => { it('doesnt connect with invalid fields', () => {
cy.getByTestId(connectVegaBtn).click(); cy.getByTestId(connectVegaBtn).click();
cy.getByTestId('connectors-list') cy.getByTestId('connectors-list')
.find('[data-testid="connector-gui"]') .find('[data-testid="connector-hosted"]')
.click(); .click();
cy.getByTestId('rest-connector-form').find('button[type=submit]').click(); cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
@ -74,7 +68,7 @@ describe('vega wallet v2', { tags: '@smoke' }, () => {
it('can connect', () => { it('can connect', () => {
cy.getByTestId(connectVegaBtn).click(); cy.getByTestId(connectVegaBtn).click();
cy.getByTestId('connectors-list') cy.getByTestId('connectors-list')
.find('[data-testid="connector-cli"]') .find('[data-testid="connector-jsonRpc"]')
.click(); .click();
cy.getByTestId(dialogContent).should('not.exist'); cy.getByTestId(dialogContent).should('not.exist');
cy.getByTestId(manageVegaBtn).should('exist'); cy.getByTestId(manageVegaBtn).should('exist');

53
apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts
View File

@ -1,4 +1,8 @@
import { Schema } from '@vegaprotocol/types'; import {
OrderTimeInForceCode,
OrderTimeInForceMapping,
Schema,
} from '@vegaprotocol/types';
import { generateEstimateOrder } from '../support/mocks/generate-fees'; import { generateEstimateOrder } from '../support/mocks/generate-fees';
import { aliasQuery } from '@vegaprotocol/cypress'; import { aliasQuery } from '@vegaprotocol/cypress';
import { testOrder } from '../support/deal-ticket-transaction'; import { testOrder } from '../support/deal-ticket-transaction';
@ -14,38 +18,13 @@ const toggleLimit = 'order-type-TYPE_LIMIT';
const toggleMarket = 'order-type-TYPE_MARKET'; const toggleMarket = 'order-type-TYPE_MARKET';
const errorMessage = 'dealticket-error-message'; const errorMessage = 'dealticket-error-message';
const TIFlist = [ const TIFlist = Object.values(Schema.OrderTimeInForce).map((value) => {
{ return {
code: 'GTT', code: OrderTimeInForceCode[value],
value: 'TIME_IN_FORCE_GTT', value,
text: `Good 'til Time (GTT)`, text: OrderTimeInForceMapping[value],
}, };
{ });
code: 'GTC',
value: 'TIME_IN_FORCE_GTC',
text: `Good 'til Cancelled (GTC)`,
},
{
code: 'IOC',
value: 'TIME_IN_FORCE_IOC',
text: `Immediate or Cancel (IOC)`,
},
{
code: 'FOK',
value: 'TIME_IN_FORCE_FOK',
text: `Fill or Kill (FOK)`,
},
{
code: 'GFN',
value: 'TIME_IN_FORCE_GFN',
text: `Good for Normal (GFN)`,
},
{
code: 'GFA',
value: 'TIME_IN_FORCE_GFA',
text: `Good for Auction (GFA)`,
},
];
const displayTomorrow = () => { const displayTomorrow = () => {
const tomorrow = new Date(); const tomorrow = new Date();
@ -419,14 +398,8 @@ describe('deal ticket validation', { tags: '@smoke' }, () => {
cy.getByTestId('order-connect-wallet').click(); cy.getByTestId('order-connect-wallet').click();
cy.getByTestId('dialog-content').should('be.visible'); cy.getByTestId('dialog-content').should('be.visible');
cy.getByTestId('connectors-list') cy.getByTestId('connectors-list')
.find('[data-testid="connector-gui"]') .find('[data-testid="connector-jsonRpc"]')
.click(); .click();
const form = 'rest-connector-form';
const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
cy.getByTestId(form).find('#wallet').click().type(walletName);
cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
cy.getByTestId(form).find('button[type=submit]').click();
cy.getByTestId(placeOrderBtn).should('be.visible'); cy.getByTestId(placeOrderBtn).should('be.visible');
cy.getByTestId(toggleLimit).children('input').should('be.checked'); cy.getByTestId(toggleLimit).children('input').should('be.checked');
cy.getByTestId(orderPriceField).should('have.value', '101'); cy.getByTestId(orderPriceField).should('have.value', '101');

3
apps/trading-e2e/src/support/mocks/generate-chain-id.ts
View File

@ -8,7 +8,8 @@ export const generateChainId = (
const defaultResult = { const defaultResult = {
statistics: { statistics: {
__typename: 'Statistics', __typename: 'Statistics',
chainId: 'test-chain-id', // this needs to match the network set up for vegawallet-dummy in .github/actions/setup-vegawallet/action.yml
chainId: 'stagnet3',
}, },
}; };

3
apps/trading-e2e/src/support/mocks/generate-statistics.ts
View File

@ -8,7 +8,8 @@ export const generateStatistics = (
const defaultResult = { const defaultResult = {
statistics: { statistics: {
__typename: 'Statistics', __typename: 'Statistics',
chainId: 'test-chain-id', // this needs to match the network set up for vegawallet-dummy in .github/actions/setup-vegawallet/action.yml
chainId: 'stagnet3',
blockHeight: '11', blockHeight: '11',
}, },
}; };

2
libs/cypress/src/lib/commands/vega-wallet-connect.ts
View File

@ -14,7 +14,7 @@ export function addVegaWalletConnect() {
cy.highlight(`Connecting Vega Wallet`); cy.highlight(`Connecting Vega Wallet`);
cy.get('[data-testid=connect-vega-wallet]').click(); cy.get('[data-testid=connect-vega-wallet]').click();
cy.get('[data-testid=connectors-list]') cy.get('[data-testid=connectors-list]')
.find('[data-testid="connector-cli"]') .find('[data-testid="connector-jsonRpc"]')
.click(); .click();
cy.get('[data-testid=dialog-content]').should( cy.get('[data-testid=dialog-content]').should(
'contain.text', 'contain.text',

14
libs/types/src/global-types-mappings.ts
View File

@ -223,9 +223,10 @@ export const OrderStatusMapping: {
/** /**
* Valid order types, these determine what happens when an order is added to the book * Valid order types, these determine what happens when an order is added to the book
*/ */
export const OrderTimeInForceMapping: { type OrderTimeInForceMap = {
[T in OrderTimeInForce]: string; [T in OrderTimeInForce]: string;
} = { };
export const OrderTimeInForceMapping: OrderTimeInForceMap = {
TIME_IN_FORCE_FOK: 'Fill or Kill (FOK)', TIME_IN_FORCE_FOK: 'Fill or Kill (FOK)',
TIME_IN_FORCE_GFA: 'Good for Auction (GFA)', TIME_IN_FORCE_GFA: 'Good for Auction (GFA)',
TIME_IN_FORCE_GFN: 'Good for Normal (GFN)', TIME_IN_FORCE_GFN: 'Good for Normal (GFN)',
@ -234,6 +235,15 @@ export const OrderTimeInForceMapping: {
TIME_IN_FORCE_IOC: 'Immediate or Cancel (IOC)', TIME_IN_FORCE_IOC: 'Immediate or Cancel (IOC)',
}; };
export const OrderTimeInForceCode: OrderTimeInForceMap = {
TIME_IN_FORCE_FOK: 'FOK',
TIME_IN_FORCE_GFA: 'GFA',
TIME_IN_FORCE_GFN: 'GFN',
TIME_IN_FORCE_GTC: 'GTC',
TIME_IN_FORCE_GTT: 'GTT',
TIME_IN_FORCE_IOC: 'IOC',
};
export const OrderTypeMapping: { export const OrderTypeMapping: {
[T in OrderType]: string; [T in OrderType]: string;
} = { } = {

11
libs/wallet/src/connect-dialog/connect-dialog.spec.tsx
View File

@ -89,12 +89,9 @@ describe('VegaConnectDialog', () => {
rerender(generateJSX()); rerender(generateJSX());
const list = await screen.findByTestId('connectors-list'); const list = await screen.findByTestId('connectors-list');
expect(list).toBeInTheDocument(); expect(list).toBeInTheDocument();
expect(list.children).toHaveLength(3); expect(list.children).toHaveLength(2);
expect(screen.getByTestId('connector-gui')).toHaveTextContent( expect(screen.getByTestId('connector-jsonRpc')).toHaveTextContent(
'Desktop wallet app' 'Connect Vega wallet'
);
expect(screen.getByTestId('connector-cli')).toHaveTextContent(
'Command line wallet app'
); );
expect(screen.getByTestId('connector-hosted')).toHaveTextContent( expect(screen.getByTestId('connector-hosted')).toHaveTextContent(
'Hosted Fairground wallet' 'Hosted Fairground wallet'
@ -379,7 +376,7 @@ describe('VegaConnectDialog', () => {
async function selectJsonRpc() { async function selectJsonRpc() {
expect(await screen.findByRole('dialog')).toBeInTheDocument(); expect(await screen.findByRole('dialog')).toBeInTheDocument();
fireEvent.click(await screen.findByTestId('connector-cli')); fireEvent.click(await screen.findByTestId('connector-jsonRpc'));
} }
}); });
}); });

40
libs/wallet/src/connect-dialog/connect-dialog.tsx
View File

@ -25,7 +25,7 @@ import { useJsonRpcConnect } from '../use-json-rpc-connect';
export const CLOSE_DELAY = 1700; export const CLOSE_DELAY = 1700;
type Connectors = { [key: string]: VegaConnector }; type Connectors = { [key: string]: VegaConnector };
type WalletType = 'gui' | 'cli' | 'hosted'; type WalletType = 'jsonRpc' | 'hosted';
export interface VegaConnectDialogProps { export interface VegaConnectDialogProps {
connectors: Connectors; connectors: Connectors;
@ -146,16 +146,23 @@ const ConnectDialogContainer = ({
const { connect, ...jsonRpcState } = useJsonRpcConnect(delayedOnConnect); const { connect, ...jsonRpcState } = useJsonRpcConnect(delayedOnConnect);
const handleSelect = (type: WalletType) => { const handleSelect = (type: WalletType, isHosted = false) => {
// Only cli is currently uses JsonRpc, this will need to be updated let connector;
// when gui does too
const connector =
type === 'cli' ? connectors['jsonRpc'] : connectors['rest'];
if (isHosted) {
// If the user has selected hosted wallet ensure that we are connecting to https://vega-hosted-wallet.on.fleek.co/ // If the user has selected hosted wallet ensure that we are connecting to https://vega-hosted-wallet.on.fleek.co/
// otherwise use the default walletUrl or what has been put in the input // otherwise use the default walletUrl or what has been put in the input
connector.url = connector = connectors['rest'];
type === 'hosted' && HOSTED_WALLET_URL ? HOSTED_WALLET_URL : walletUrl; connector.url = HOSTED_WALLET_URL || walletUrl;
} else {
connector = connectors[type];
connector.url = walletUrl;
}
if (!connector) {
throw new Error(`Connector type: ${type} not configured`);
}
setSelectedConnector(connector); setSelectedConnector(connector);
setWalletType(type); setWalletType(type);
@ -191,7 +198,7 @@ const ConnectorList = ({
setWalletUrl, setWalletUrl,
isMainnet, isMainnet,
}: { }: {
onSelect: (type: WalletType) => void; onSelect: (type: WalletType, isHosted?: boolean) => void;
walletUrl: string; walletUrl: string;
setWalletUrl: (value: string) => void; setWalletUrl: (value: string) => void;
isMainnet: boolean; isMainnet: boolean;
@ -202,18 +209,11 @@ const ConnectorList = ({
<ConnectDialogTitle>{t('Connect')}</ConnectDialogTitle> <ConnectDialogTitle>{t('Connect')}</ConnectDialogTitle>
<CustomUrlInput walletUrl={walletUrl} setWalletUrl={setWalletUrl} /> <CustomUrlInput walletUrl={walletUrl} setWalletUrl={setWalletUrl} />
<ul data-testid="connectors-list" className="mb-6"> <ul data-testid="connectors-list" className="mb-6">
<li className="mb-4">
<ConnectionOption
type="gui"
text={t('Desktop wallet app')}
onClick={() => onSelect('gui')}
/>
</li>
<li className="mb-4 last:mb-0"> <li className="mb-4 last:mb-0">
<ConnectionOption <ConnectionOption
type="cli" type="jsonRpc"
text={t('Command line wallet app')} text={t('Connect Vega wallet')}
onClick={() => onSelect('cli')} onClick={() => onSelect('jsonRpc')}
/> />
</li> </li>
{!isMainnet && ( {!isMainnet && (
@ -221,7 +221,7 @@ const ConnectorList = ({
<ConnectionOption <ConnectionOption
type="hosted" type="hosted"
text={t('Hosted Fairground wallet')} text={t('Hosted Fairground wallet')}
onClick={() => onSelect('hosted')} onClick={() => onSelect('hosted', true)}
/> />
</li> </li>
)} )}

1
libs/wallet/src/connectors/rest-connector.ts
View File

@ -89,7 +89,6 @@ export class RestConnector implements VegaConnector {
method: 'post', method: 'post',
body: JSON.stringify(params), body: JSON.stringify(params),
}); });
console.log(res);
if (res.status === 403) { if (res.status === 403) {
return { success: false, error: t('Invalid credentials') }; return { success: false, error: t('Invalid credentials') };