fix(#2283): use correct GQL document for withdrawal event subscription (#2291)

* fix: governance navbar link

* fix(#2245): fix gov link a tag no navlink

* fix(#2245): remove export getActiveNavLinkClassNames

apps/trading/components/navbar/navbar.tsx

@@ -67,13 +67,14 @@ export const Navbar = ({
             path={Routes.PORTFOLIO}
             navbarTheme={navbarTheme}
           />
-          <AppNavLink
-            name={t('Governance')}
-            path={`${VEGA_TOKEN_URL}/governance`}
-            alignRight={true}
+          <a
+            href={`${VEGA_TOKEN_URL}/governance`}
             target="_blank"
-            navbarTheme={navbarTheme}
-          />
+            rel="noreferrer"
+            className={getActiveNavLinkClassNames(false, navbarTheme, true)}
+          >
+            {t('Governance')}
+          </a>
         </nav>
         <div className="flex items-center gap-2 ml-auto">
           <VegaWalletConnectButton />
@@ -108,19 +109,8 @@ const AppNavLink = ({
   return (
     <NavLink
       data-testid={testId}
-      to={path}
-      className={({ isActive }) => {
-        return classNames('mx-2 py-3 self-end relative', {
-          'cursor-default': isActive,
-          'text-black dark:text-white': isActive && navbarTheme !== 'yellow',
-          'text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-neutral-300':
-            !isActive && navbarTheme !== 'yellow',
-          'ml-auto': alignRight,
-          'text-black': isActive && navbarTheme === 'yellow',
-          'text-black/60 hover:text-black':
-            !isActive && navbarTheme === 'yellow',
-        });
-      }}
+      to={{ pathname: path }}
+      className={getNavLinkClassNames(navbarTheme, alignRight)}
       target={target}
     >
       {({ isActive }) => {
@@ -134,3 +124,28 @@ const AppNavLink = ({
     </NavLink>
   );
 };
+
+function getNavLinkClassNames(
+  navbarTheme: string,
+  alignRight = false
+): (props: { isActive?: boolean }) => string | undefined {
+  return ({ isActive = false }) => {
+    return getActiveNavLinkClassNames(isActive, navbarTheme, alignRight);
+  };
+}
+
+const getActiveNavLinkClassNames = (
+  isActive: boolean,
+  navbarTheme: string,
+  alignRight = false
+): string | undefined => {
+  return classNames('mx-2 py-3 self-end relative', {
+    'cursor-default': isActive,
+    'text-black dark:text-white': isActive && navbarTheme !== 'yellow',
+    'text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-neutral-300':
+      !isActive && navbarTheme !== 'yellow',
+    'ml-auto': alignRight,
+    'text-black': isActive && navbarTheme === 'yellow',
+    'text-black/60 hover:text-black': !isActive && navbarTheme === 'yellow',
+  });
+};

libs/market-depth/src/lib/orderbook.tsx

@@ -14,11 +14,11 @@ import {
 import classNames from 'classnames';
 
 import {
-  formatNumber,
   addDecimalsFormatNumber,
   t,
   ThemeContext,
   useResizeObserver,
+  formatNumberFixed,
 } from '@vegaprotocol/react-helpers';
 import { Schema } from '@vegaprotocol/types';
 import { OrderbookRow } from './orderbook-row';
@@ -659,7 +659,7 @@ export const Orderbook = ({
           >
             {resolutions.map((r) => (
               <option key={r} value={r}>
-                {formatNumber(0, decimalPlaces - Math.log10(r))}
+                {formatNumberFixed(0, decimalPlaces - Math.log10(r))}
               </option>
             ))}
           </select>

libs/positions/src/lib/positions-table.tsx

@@ -10,7 +10,6 @@ import type {
 import { ProgressBarCell } from '@vegaprotocol/ui-toolkit';
 import {
   PriceFlashCell,
-  addDecimalsFormatNumber,
   volumePrefix,
   t,
   toBigNum,
@@ -19,6 +18,7 @@ import {
   signedNumberCssClass,
   signedNumberCssClassRules,
   DateRangeFilter,
+  addDecimalsFormatNumber,
 } from '@vegaprotocol/react-helpers';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { AgGridColumn } from 'ag-grid-react';

libs/react-helpers/src/lib/format/number.tsx

@@ -50,6 +50,17 @@ export const getNumberFormat = memoize((digits: number) => {
   });
 });
 
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat
+export const getFixedNumberFormat = memoize((digits: number) => {
+  if (isNil(digits) || digits < 0) {
+    return new Intl.NumberFormat(getUserLocale());
+  }
+  return new Intl.NumberFormat(getUserLocale(), {
+    minimumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS),
+    maximumFractionDigits: Math.min(Math.max(0, digits), MAX_FRACTION_DIGITS),
+  });
+});
+
 export const getDecimalSeparator = memoize(
   () =>
     getNumberFormat(1)
@@ -68,6 +79,17 @@ export const formatNumber = (
   return getNumberFormat(formatDecimals).format(Number(rawValue));
 };
 
+/** formatNumberFixed will format the number with fixed decimals
+ * @param rawValue - should be a number that is not outside the safe range fail as in https://mikemcl.github.io/bignumber.js/#toN
+ * @param formatDecimals - number of decimals to use
+ */
+export const formatNumberFixed = (
+  rawValue: string | number | BigNumber,
+  formatDecimals = 0
+) => {
+  return getFixedNumberFormat(formatDecimals).format(Number(rawValue));
+};
+
 export const addDecimalsFormatNumber = (
   rawValue: string | number,
   decimalPlaces: number,

libs/withdraws/src/lib/use-create-withdraw.spec.tsx

@@ -18,7 +18,7 @@ import type {
   WithdrawalEventSubscription,
   WithdrawalFieldsFragment,
 } from './__generated__/Withdrawal';
-import { WithdrawalsDocument } from './__generated__/Withdrawal';
+import { WithdrawalEventDocument } from './__generated__/Withdrawal';
 import { Schema } from '@vegaprotocol/types';
 
 function setup(
@@ -116,7 +116,7 @@ beforeEach(() => {
   };
   mockWithdrawalEvent = {
     request: {
-      query: WithdrawalsDocument,
+      query: WithdrawalEventDocument,
       variables: { partyId: pubKey },
     },
     result: {

libs/withdraws/src/lib/use-withdrawal-event.ts

@@ -2,7 +2,7 @@ import { useApolloClient } from '@apollo/client';
 import type { VegaTxState } from '@vegaprotocol/wallet';
 import { useCallback, useEffect, useRef } from 'react';
 import type { Subscription } from 'zen-observable-ts';
-import { WithdrawalsDocument } from './__generated__/Withdrawal';
+import { WithdrawalEventDocument } from './__generated__/Withdrawal';
 import type {
   WithdrawalEventSubscription,
   WithdrawalEventSubscriptionVariables,
@@ -20,13 +20,13 @@ export const useWithdrawalEvent = (transaction: VegaTxState) => {
 
   const waitForWithdrawalEvent = useCallback<WaitForWithdrawalEvent>(
     (id, partyId) => {
-      return new Promise((resolve) => {
+      return new Promise<WithdrawalFieldsFragment>((resolve) => {
         subRef.current = client
           .subscribe<
             WithdrawalEventSubscription,
             WithdrawalEventSubscriptionVariables
           >({
-            query: WithdrawalsDocument,
+            query: WithdrawalEventDocument,
             variables: { partyId },
           })
           .subscribe(({ data }) => {