Feat/463 vega transaction component links to block explorer (#666)

* chore: [#471] update @vegaprotocol/vegawallet-service-api-client to 0.4.12

* fix: [#471] set up storybook in order-list lib and add tailwind

* fix: [#471] organize order list components

* chore: [471] pull theme switcher changes

* feat: [#471] add cancel order button

* feat: [#471] initial impl of use order cancel hook

* fix: [#471] fix format of the price in order list

* fix: #471 fix static assets issue when merging

* fix:  #471 refactor order dialog to vega tx dialog

* fix: #471 move use cancel order hook in wallet lib

* fix: [#471] cancel order dialog and hook refactor

* fix: [#471] remove commented code from storybook preview and fix test

* fix: [#471] update order-list.tsx

* fix: [#471] fix update subscription - show order is cancelled

* fix: [#471] fix eslint error

* chore: [#471] refactoring and add tests for dialogs and cancel hook

* fix: #471 add ref to order list table

* fix: #471 add field for cancel fix test

* fix: #471 rename vega-order-transaction-dialog, error handiling, open dialog on finalized order

* fix: #471 sendTx body mandatory

* fix: #471 use BusEventType.Order to check the typename

* fix: #471 revert using BusEventType.Order to check the typename

* Update libs/wallet/src/order-hooks/use-order-cancel.tsx

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* fix: #471  fix order-list refactoring and fixes

* fix: #471 generate orders added as a mock in order-list

* fix: #471 reset transaction after order updated

* fix: #471 remove unused import useEffect

* fix: #471 generate mock orders

* fix: #471 revert generate mock orders

* feat: #463 modify vega dialog to direct you to the block explorer transaction

* feat: #463 modify compile-environment.ts

* fix: #471 order list price set to display all decimals

* fix: #471 generate orders updates

* Update apps/trading/.env

* fix: #463 add test and remove explorer URL from trading/env.ts

* Update apps/trading/lib/config/env.ts

* fix: #463 update trading deal ticket

* fix: #463 fix test to check href

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

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

@@ -144,8 +144,8 @@ describe('deal ticket orders', () => {
       'Awaiting network confirmation'
     );
     cy.getByTestId(orderTransactionHash)
-      .invoke('text')
+      .invoke('attr', 'href')
-      .should('contain', 'Tx hash: test-tx-hash');
+      .should('include', 'https://explorer.fairground.wtf/txs/0xtest-tx-hash');
     cy.getByTestId('dialog-close').click();
   };
 

apps/trading/.env

@@ -6,3 +6,4 @@ NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\"}
 NX_USE_ENV_OVERRIDES=1
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

apps/trading/.env.devnet

@@ -5,3 +5,4 @@ NX_VEGA_URL=https://n04.d.vega.xyz/query
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\"}
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
+NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz

apps/trading/.env.mainnet

@@ -5,3 +5,4 @@ NX_VEGA_URL=https://api.token.vega.xyz/query
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://etherscan.io
+NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz

apps/trading/.env.stagnet1

@@ -5,3 +5,4 @@ NX_VEGA_URL=https://n03.s.vega.xyz/query
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
+NX_VEGA_EXPLORER_URL=https://staging.explorer.vega.xyz

apps/trading/.env.stagnet2

@@ -5,3 +5,4 @@ NX_VEGA_URL=https://n03.stagnet2.vega.xyz/query
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
+NX_VEGA_EXPLORER_URL=https://staging2.explorer.vega.xyz

apps/trading/.env.testnet

@@ -5,3 +5,4 @@ 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
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

libs/environment/src/utils/compile-environment.ts

@@ -58,6 +58,8 @@ const getBundledEnvironmentValue = (key: EnvKey) => {
       return process.env['NX_ETHERSCAN_URL'];
     case 'VEGA_NETWORKS':
       return process.env['NX_VEGA_NETWORKS'];
+    case 'VEGA_EXPLORER_URL':
+      return process.env['NX_VEGA_EXPLORER_URL'];
   }
 };
 

libs/environment/src/utils/validate-environment.ts

@@ -14,6 +14,7 @@ export enum Networks {
 
 const schemaObject = {
   VEGA_URL: z.optional(z.string()),
+  VEGA_EXPLORER_URL: z.optional(z.string()),
   VEGA_CONFIG_URL: z.optional(z.string()),
   ETHEREUM_PROVIDER_URL: z.string().url({
     message:

libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.spec.tsx

@@ -5,6 +5,12 @@ import { VegaTxStatus } from '../use-vega-transaction';
 import type { Order } from './vega-order-transaction-dialog';
 import { VegaOrderTransactionDialog } from './vega-order-transaction-dialog';
 
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({
+    VEGA_EXPLORER_URL: 'https://test.explorer.vega.network',
+  }),
+}));
+
 describe('VegaOrderTransactionDialog', () => {
   it('should render when an order is successful', () => {
     const transaction: VegaTxState = {
@@ -127,4 +133,27 @@ describe('VegaOrderTransactionDialog', () => {
       'Order rejected by wallet'
     );
   });
+
+  it('should render awaiting network confirmation and add link to tx in block explorer', () => {
+    const transaction: VegaTxState = {
+      status: VegaTxStatus.Default,
+      error: null,
+      txHash: 'TxHash',
+      signature: null,
+    };
+    render(
+      <VegaOrderTransactionDialog
+        finalizedOrder={null}
+        transaction={transaction}
+      />
+    );
+    expect(screen.getByTestId('order-status-header')).toHaveTextContent(
+      'Awaiting network confirmation'
+    );
+    expect(screen.getByTestId('tx-hash')).toHaveTextContent('TxHash');
+    expect(screen.getByTestId('tx-hash')).toHaveAttribute(
+      'href',
+      'https://test.explorer.vega.network/txs/0xTxHash'
+    );
+  });
 });

libs/wallet/src/vega-order-transaction-dialog/vega-order-transaction-dialog.tsx

@@ -7,6 +7,7 @@ import {
 } from '@vegaprotocol/react-helpers';
 import type { VegaTxState } from '../use-vega-transaction';
 import { VegaTxStatus } from '../use-vega-transaction';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 export interface Market {
   name: string;
@@ -23,7 +24,7 @@ export interface Order {
   type: string | null;
 }
 
-interface OrderDialogProps {
+interface VegaOrderTransactionDialogProps {
   transaction: VegaTxState;
   finalizedOrder: Order | null;
   title?: string;
@@ -33,7 +34,8 @@ export const VegaOrderTransactionDialog = ({
   transaction,
   finalizedOrder,
   title = 'Order placed',
-}: OrderDialogProps) => {
+}: VegaOrderTransactionDialogProps) => {
+  const { VEGA_EXPLORER_URL } = useEnvironment();
   // Rejected by wallet
   if (transaction.status === VegaTxStatus.Requested) {
     return (
@@ -73,8 +75,17 @@ export const VegaOrderTransactionDialog = ({
         icon={<Loader size="small" />}
       >
         {transaction.txHash && (
-          <p data-testid="tx-hash" className="break-all">
+          <p className="break-all">
-            {t(`Tx hash: ${transaction.txHash}`)}
+            Tx hash: &nbsp;
+            <a
+              className="underline"
+              data-testid="tx-hash"
+              href={`${VEGA_EXPLORER_URL}/txs/0x${transaction.txHash}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {transaction.txHash}
+            </a>
           </p>
         )}
       </OrderDialogWrapper>