From 1a539efdd6b6b663243303f5d532f8698893b51f Mon Sep 17 00:00:00 2001 From: macqbat Date: Tue, 18 Oct 2022 18:59:17 +0200 Subject: [PATCH] feat: add connect vega wallet button to the deal ticket (#1768) * feat: add connect vega wallet button to the deal ticket * feat: add connect vega wallet button to the deal ticket - manage some int tests Co-authored-by: maciek --- .../src/integration/trading-deal-ticket.cy.ts | 29 +++++++- .../components/deal-ticket/deal-ticket.tsx | 69 ++++++++++++++----- .../connect-dialog-elements.tsx | 5 +- .../src/connect-dialog/connect-dialog.tsx | 5 +- .../json-rpc-connector-form.tsx | 3 +- libs/wallet/src/constants.ts | 5 ++ libs/wallet/src/index.ts | 1 + 7 files changed, 93 insertions(+), 24 deletions(-) create mode 100644 libs/wallet/src/constants.ts diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts index c5c63889f..bf09ef84c 100644 --- a/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts +++ b/apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts @@ -214,8 +214,14 @@ describe('deal ticket validation', { tags: '@smoke' }, () => { it('must not place an order if wallet is not connected', () => { cy.getByTestId('connect-vega-wallet'); // Not connected - cy.getByTestId(placeOrderBtn).should('be.disabled'); - cy.getByTestId(errorMessage).contains('No public key selected'); + cy.getByTestId('order-connect-wallet').should('exist'); + cy.getByTestId(placeOrderBtn).should('not.exist'); + cy.getByTestId(errorMessage).should('not.exist'); + cy.getByTestId('order-get-vega-wallet').should( + 'have.attr', + 'href', + 'https://github.com/vegaprotocol/vega/releases' + ); }); it('must be able to select order direction - long/short', function () { @@ -231,6 +237,25 @@ describe('deal ticket validation', { tags: '@smoke' }, () => { cy.getByTestId(toggleLimit).click().children('input').should('be.checked'); cy.getByTestId(toggleMarket).click().children('input').should('be.checked'); }); + + it('order connect vega wallet button should connect', () => { + cy.getByTestId(toggleLimit).click(); + cy.getByTestId(orderPriceField).type('101'); + cy.getByTestId('order-connect-wallet').click(); + cy.getByTestId('dialog-content').should('be.visible'); + cy.getByTestId('connectors-list') + .find('[data-testid="connector-gui"]') + .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(toggleLimit).children('input').should('be.checked'); + cy.getByTestId(orderPriceField).should('have.value', '101'); + }); }); describe('deal ticket size validation', { tags: '@smoke' }, function () { diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx index 7c9a94486..918d328dd 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx @@ -5,7 +5,7 @@ import { addDecimalsFormatNumber, removeDecimal, } from '@vegaprotocol/react-helpers'; -import { Button, InputError } from '@vegaprotocol/ui-toolkit'; +import { Button, InputError, Link } from '@vegaprotocol/ui-toolkit'; import { TypeSelector } from './type-selector'; import { SideSelector } from './side-selector'; import { DealTicketAmount } from './deal-ticket-amount'; @@ -13,6 +13,11 @@ import { TimeInForceSelector } from './time-in-force-selector'; import type { DealTicketMarketFragment } from './__generated___/DealTicket'; import { ExpirySelector } from './expiry-selector'; import type { OrderSubmissionBody } from '@vegaprotocol/wallet'; +import { + useVegaWallet, + useVegaWalletDialogStore, + VEGA_WALLET_RELEASE_URL, +} from '@vegaprotocol/wallet'; import { OrderTimeInForce, OrderType } from '@vegaprotocol/types'; import { getDefaultOrder } from '../deal-ticket-validation'; import { @@ -34,6 +39,10 @@ export const DealTicket = ({ submit, transactionStatus, }: DealTicketProps) => { + const { pubKey } = useVegaWallet(); + const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({ + openVegaWalletDialog: store.openVegaWalletDialog, + })); const { register, control, @@ -147,22 +156,48 @@ export const DealTicket = ({ )} /> )} - - {message && ( - - {message} - + {pubKey ? ( + <> + + {message && ( + + {message} + + )} + + ) : ( + <> + + + {t('Get a Vega Wallet')} + + )} ); diff --git a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx b/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx index 7f1270724..f4c5da71d 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx @@ -1,6 +1,7 @@ import { t } from '@vegaprotocol/react-helpers'; import { Link } from '@vegaprotocol/ui-toolkit'; import type { ReactNode } from 'react'; +import * as constants from '../constants'; export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => { return ( @@ -24,11 +25,11 @@ export const ConnectDialogFooter = ({ children }: { children?: ReactNode }) => { children ) : ( <> - + {t('Get a Vega Wallet')} {' | '} - + {t('Having trouble?')} diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx index 7d6b0aad4..8d60f4ecd 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.tsx +++ b/libs/wallet/src/connect-dialog/connect-dialog.tsx @@ -22,6 +22,7 @@ import { } from './connect-dialog-elements'; import type { Status } from '../use-json-rpc-connect'; import { useJsonRpcConnect } from '../use-json-rpc-connect'; +import * as constants from '../constants'; export const CLOSE_DELAY = 1700; type Connectors = { [key: string]: VegaConnector }; @@ -264,14 +265,14 @@ const SelectedForm = ({

{t('For demo purposes get a ')} {t('hosted wallet')} {t(', or for the real experience create a wallet in the ')} - + {t('Vega wallet app')}

diff --git a/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx b/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx index 59b903f4f..a39202dd5 100644 --- a/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx +++ b/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx @@ -14,6 +14,7 @@ import { ClientErrors } from '../connectors'; import type { WalletError } from '../connectors'; import { ConnectDialogTitle } from './connect-dialog-elements'; import { Status } from '../use-json-rpc-connect'; +import { VEGA_WALLET_CONCEPTS_URL } from '../constants'; export const ServiceErrors = { NO_HEALTHY_NODE: 1000, @@ -185,7 +186,7 @@ const Error = ({ <> {capitalize(error.data)} {'. '} - + {t('Read the docs to troubleshoot')} diff --git a/libs/wallet/src/constants.ts b/libs/wallet/src/constants.ts new file mode 100644 index 000000000..d968de2a3 --- /dev/null +++ b/libs/wallet/src/constants.ts @@ -0,0 +1,5 @@ +export const VEGA_WALLET_RELEASE_URL = + 'https://github.com/vegaprotocol/vega/releases'; +export const VEGA_WALLET_CONCEPTS_URL = + 'https://docs.vega.xyz/docs/mainnet/concepts/vega-wallet'; +export const VEGA_WALLET_HOSTED_URL = 'https://vega-hosted-wallet.on.fleek.co/'; diff --git a/libs/wallet/src/index.ts b/libs/wallet/src/index.ts index 2b361304f..7e5b99990 100644 --- a/libs/wallet/src/index.ts +++ b/libs/wallet/src/index.ts @@ -8,3 +8,4 @@ export * from './vega-transaction-dialog'; export * from './provider'; export * from './connect-dialog'; export * from './utils'; +export * from './constants';