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 <maciek@vegaprotocol.io>

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('order-connect-wallet').should('exist');
-    cy.getByTestId(errorMessage).contains('No public key selected');
+    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 () {

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 = ({
             )}
           />
         )}
-      <Button
+      {pubKey ? (
-        variant="primary"
+        <>
-        fill={true}
+          <Button
-        type="submit"
+            variant="primary"
-        disabled={isDisabled}
+            fill={true}
-        data-testid="place-order"
+            type="submit"
-      >
+            disabled={isDisabled}
-        {transactionStatus === 'pending' ? t('Pending...') : t('Place order')}
+            data-testid="place-order"
-      </Button>
+          >
-      {message && (
+            {transactionStatus === 'pending'
-        <InputError
+              ? t('Pending...')
-          intent={isDisabled ? 'danger' : 'warning'}
+              : t('Place order')}
-          data-testid="dealticket-error-message"
+          </Button>
-        >
+          {message && (
-          {message}
+            <InputError
-        </InputError>
+              intent={isDisabled ? 'danger' : 'warning'}
+              data-testid="dealticket-error-message"
+            >
+              {message}
+            </InputError>
+          )}
+        </>
+      ) : (
+        <>
+          <Button
+            variant="default"
+            fill
+            type="button"
+            data-testid="order-connect-wallet"
+            onClick={openVegaWalletDialog}
+            className="!text-sm !px-1 !py-1"
+          >
+            {t('Connect your Vega wallet to trade')}
+          </Button>
+          <Link
+            data-testid="order-get-vega-wallet"
+            className="block w-full text-center mt-2 text-neutral-500 dark:text-neutral-400"
+            href={VEGA_WALLET_RELEASE_URL}
+          >
+            {t('Get a Vega Wallet')}
+          </Link>
+        </>
       )}
     </form>
   );

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
       ) : (
         <>
-          <Link href="https://github.com/vegaprotocol/vega/releases">
+          <Link href={constants.VEGA_WALLET_RELEASE_URL}>
             {t('Get a Vega Wallet')}
           </Link>
           {' | '}
-          <Link href="https://docs.vega.xyz/docs/mainnet/concepts/vega-wallet">
+          <Link href={constants.VEGA_WALLET_CONCEPTS_URL}>
             {t('Having trouble?')}
           </Link>
         </>

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 = ({
             <p className="text-center">
               {t('For demo purposes get a ')}
               <Link
-                href="https://vega-hosted-wallet.on.fleek.co/"
+                href={constants.VEGA_WALLET_HOSTED_URL}
                 target="_blank"
                 rel="noreferrer"
               >
                 {t('hosted wallet')}
               </Link>
               {t(', or for the real experience create a wallet in the ')}
-              <Link href="https://github.com/vegaprotocol/vega/releases">
+              <Link href={constants.VEGA_WALLET_RELEASE_URL}>
                 {t('Vega wallet app')}
               </Link>
             </p>

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)}
           {'. '}
-          <Link href="https://docs.vega.xyz/docs/mainnet/concepts/vega-wallet">
+          <Link href={VEGA_WALLET_CONCEPTS_URL}>
             {t('Read the docs to troubleshoot')}
           </Link>
         </>

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/';

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';