Update feature-epic.md

.github/ISSUE_TEMPLATE/feature-epic.md

@@ -0,0 +1,28 @@
+---
+name: Feature Epic
+about: A template to capture and scope user requirements, high level process, and basic mockups for an upcoming feature as part of the initial core spec review process.
+title: 'Epic: '
+labels: feature-epic
+---
+
+## Core Feature
+
+<Name>
+
+## Tasks
+
+- [ ] Define high level requirements
+- [ ] Create basic mockups
+- [ ] Update "API Requirements" in core spec
+- [ ] Update "User-Interface Spec" in relevant front end repo
+- [ ] Create detailed user stories using normal template
+
+## High Level Requirements
+
+## Basic Mockups
+
+## Link to API Requirements in Core spec
+
+## Link to User Interface Specs
+
+## Linked User Stories

apps/explorer/src/app/components/txs/tx-filter.tsx

@@ -10,7 +10,6 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSubContent,
   Icon,
-  Button,
 } from '@vegaprotocol/ui-toolkit';
 import type { Dispatch, SetStateAction } from 'react';
 import { FilterLabel } from './tx-filter-label';
@@ -100,15 +99,13 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
     <DropdownMenu
       modal={false}
       trigger={
-        <DropdownMenuTrigger className="ml-0">
-          <Button size="xs" data-testid="filter-trigger">
-            <FilterLabel filters={filters} />
-          </Button>
+        <DropdownMenuTrigger>
+          <FilterLabel filters={filters} />
         </DropdownMenuTrigger>
       }
     >
       <DropdownMenuContent>
-        {filters.size > 0 ? null : (
+        {filters.size > 1 ? null : (
           <>
             <DropdownMenuCheckboxItem
               onCheckedChange={() => setFilters(new Set(AllFilterOptions))}

apps/explorer/src/app/components/txs/tx-list-navigation.tsx

@@ -44,7 +44,7 @@ export const TxsListNavigation = ({
           </Button>
           <Button
             size="xs"
-            disabled={!hasMoreTxs || loading}
+            disabled={!hasMoreTxs}
             onClick={() => {
               nextPage();
             }}

apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx

@@ -86,14 +86,18 @@ describe('Txs infinite list item', () => {
     render(
       <MockedProvider>
         <MemoryRouter>
-          <TxsInfiniteListItem
-            type="testType"
-            submitter="testPubKey"
-            hash="testTxHash"
-            block="1"
-            code={0}
-            command={{}}
-          />
+          <table>
+            <tbody>
+              <TxsInfiniteListItem
+                type="testType"
+                submitter="testPubKey"
+                hash="testTxHash"
+                block="1"
+                code={0}
+                command={{}}
+              />
+            </tbody>
+          </table>
         </MemoryRouter>
       </MockedProvider>
     );

apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx

@@ -14,9 +14,9 @@ const DEFAULT_TRUNCATE_LENGTH = 7;
 
 export function getIdTruncateLength(screen: Screen): number {
   if (['xxxl', 'xxl'].includes(screen)) {
-    return 64;
-  } else if (['xl', 'lg', 'md'].includes(screen)) {
     return 32;
+  } else if (['xl', 'lg', 'md'].includes(screen)) {
+    return 16;
   }
   return DEFAULT_TRUNCATE_LENGTH;
 }

apps/explorer/src/app/components/txs/txs-infinite-list.spec.tsx

@@ -5,11 +5,17 @@ import type { BlockExplorerTransactionResult } from '../../routes/types/block-ex
 import { Side } from '@vegaprotocol/types';
 import { MockedProvider } from '@apollo/client/testing';
 
+const generateHash = (): string =>
+  Array.from(
+    { length: 64 },
+    () => '0123456789ABCDEF'[Math.floor(Math.random() * 16)]
+  ).join('');
+
 const generateTxs = (number: number): BlockExplorerTransactionResult[] => {
   return Array.from(Array(number)).map((_) => ({
     block: '87901',
     index: 2,
-    hash: '0F8B98DA0923A50786B852D9CA11E051CACC4C733E1DB93D535C7D81DBD10F6F',
+    hash: generateHash(),
     submitter:
       '4b782482f587d291e8614219eb9a5ee9280fa2c58982dee71d976782a9be1964',
     type: 'Submit Order',

apps/explorer/src/app/components/txs/txs-per-block.tsx

@@ -2,7 +2,7 @@ import { Table, TableRow } from '../table';
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import type { BlockExplorerTransactions } from '../../routes/types/block-explorer-response';
-import { getTxsDataUrl } from '../../hooks/use-txs-data';
+import { getTxsDataUrl } from '../../hooks/get-txs-data-url';
 import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
 import EmptyList from '../empty-list/empty-list';
 import { TxsInfiniteListItem } from './txs-infinite-list-item';
@@ -14,7 +14,7 @@ interface TxsPerBlockProps {
 
 export const TxsPerBlock = ({ blockHeight, txCount }: TxsPerBlockProps) => {
   const filters = `filters[block.height]=${blockHeight}`;
-  const url = getTxsDataUrl({ limit: txCount.toString(), filters });
+  const url = getTxsDataUrl({ filters, count: txCount });
   const {
     state: { data, loading, error },
   } = useFetch<BlockExplorerTransactions>(url);

apps/explorer/src/app/hooks/get-txs-data-url.ts

@@ -0,0 +1,59 @@
+import { DATA_SOURCES } from '../config';
+
+type IGetTxsDataFirstPage = {
+  baseUrl?: string;
+  count?: number;
+  party?: string;
+  filters?: string;
+};
+
+interface IGetTxsDataPrevious extends IGetTxsDataFirstPage {
+  before: string;
+}
+
+interface IGetTxsDataNext extends IGetTxsDataFirstPage {
+  after: string;
+}
+
+type IGetTxsDataUrl =
+  | IGetTxsDataPrevious
+  | IGetTxsDataNext
+  | IGetTxsDataFirstPage;
+
+export const BE_TXS_PER_REQUEST = 25;
+
+/**
+ * Properly encodes the filters and parameters for a request to the block explorer
+ * API for transactions. As the API uses a slightly less common format for encoding
+ * filters, some of it is more manual than you might expect.
+ *
+ * @param params An object containing the pagination and filters
+ * @returns string URL to call
+ */
+export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
+  const baseUrl =
+    params.baseUrl || `${DATA_SOURCES.blockExplorerUrl}/transactions`;
+  const url = new URL(baseUrl);
+  const count = `${params.count || BE_TXS_PER_REQUEST}`;
+
+  if ('before' in params && params.before?.length > 0) {
+    url.searchParams.append('last', count);
+    url.searchParams.append('before', params.before);
+  } else if ('after' in params && params.after?.length > 0) {
+    url.searchParams.append('first', count);
+    url.searchParams.append('after', params.after);
+  } else {
+    url.searchParams.append('first', count);
+  }
+
+  // Hacky fix for param as array
+  let urlAsString = url.toString();
+  if (params.filters && params.filters?.length > 0) {
+    urlAsString += '&' + params.filters.replaceAll(' ', '%20');
+  }
+  if (params.party && params.party?.length > 0) {
+    urlAsString += `&filters[tx.submitter]=${params.party}`;
+  }
+
+  return urlAsString;
+};

apps/explorer/src/app/hooks/get-txs-data-urls.spec.ts

@@ -0,0 +1,48 @@
+import { getTxsDataUrl } from './get-txs-data-url'; // import the function to be tested
+
+describe('getTxsDataUrl', () => {
+  it('should return the correct URL without filters and party', () => {
+    const params = {
+      count: 10,
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl = 'https://example.com/transactions?first=10';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+
+  it('should return the correct URL with "before" in params', () => {
+    const params = {
+      count: 5,
+      before: '100.1',
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl = 'https://example.com/transactions?last=5&before=100.1';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+
+  it('should return the correct URL with "after" in params', () => {
+    const params = {
+      count: 5,
+      after: '222.1',
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl = 'https://example.com/transactions?first=5&after=222.1';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+
+  it('should return the correct URL with filters and party', () => {
+    const params = {
+      count: 10,
+      filters: 'filters[cmd.type]=Made Up Transaction',
+      party: '1234',
+      baseUrl: 'https://example.com/transactions',
+    };
+    const expectedUrl =
+      'https://example.com/transactions?first=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
+
+    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
+  });
+});

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -1,130 +1,141 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { URLSearchParamsInit } from 'react-router-dom';
+import { useCallback } from 'react';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import type {
   BlockExplorerTransactionResult,
   BlockExplorerTransactions,
 } from '../routes/types/block-explorer-response';
-import { DATA_SOURCES } from '../config';
 import isNumber from 'lodash/isNumber';
+import { AllFilterOptions } from '../components/txs/tx-filter';
+import type { FilterOption } from '../components/txs/tx-filter';
+import { BE_TXS_PER_REQUEST, getTxsDataUrl } from './get-txs-data-url';
 
-export interface TxsStateProps {
-  txsData: BlockExplorerTransactionResult[];
-  hasMoreTxs: boolean;
-  cursor: string;
-  previousCursors: string[];
-  hasPreviousPage: boolean;
+export function getTypeFilters(filters?: Set<FilterOption>) {
+  if (!filters) {
+    return '';
+  } else if (filters.size > 1) {
+    return '';
+  }
+
+  const forcedSingleFilter = Array.from(filters)[0];
+  return `filters[cmd.type]=${forcedSingleFilter}`;
 }
 
 export interface IUseTxsData {
-  limit: number;
-  filters?: string;
+  count?: number;
+  before?: string;
+  after?: string;
+  party?: string;
+  filters?: Set<FilterOption>;
 }
 
-interface IGetTxsDataUrl {
-  limit: string;
-  filters?: string;
-}
+export const useTxsData = ({
+  count = 25,
+  before,
+  after,
+  filters,
+  party,
+}: IUseTxsData) => {
+  const [, setSearchParams] = useSearchParams();
+  let hasMoreTxs = true;
+  let txsData: BlockExplorerTransactionResult[] = [];
 
-export const getTxsDataUrl = ({ limit, filters }: IGetTxsDataUrl) => {
-  const url = new URL(`${DATA_SOURCES.blockExplorerUrl}/transactions`);
-
-  if (limit) {
-    url.searchParams.append('limit', limit);
-  }
-
-  // Hacky fix for param as array
-  let urlAsString = url.toString();
-  if (filters) {
-    urlAsString += '&' + filters.replace(' ', '%20');
-  }
-
-  return urlAsString;
-};
-
-export const useTxsData = ({ limit, filters }: IUseTxsData) => {
-  const [
-    { txsData, hasMoreTxs, cursor, previousCursors, hasPreviousPage },
-    setTxsState,
-  ] = useState<TxsStateProps>({
-    txsData: [],
-    hasMoreTxs: false,
-    previousCursors: [],
-    cursor: '',
-    hasPreviousPage: false,
+  const url = getTxsDataUrl({
+    filters: getTypeFilters(filters),
+    count,
+    before,
+    after,
+    party,
   });
 
-  const url = getTxsDataUrl({ limit: limit.toString(), filters });
-
   const {
     state: { data, error, loading },
     refetch,
   } = useFetch<BlockExplorerTransactions>(url, {}, true);
 
-  useEffect(() => {
-    if (!loading && data && isNumber(data.transactions.length)) {
-      setTxsState((prev) => {
-        return {
-          ...prev,
-          txsData: data.transactions,
-          hasMoreTxs: data.transactions.length >= limit,
-          cursor: data?.transactions.at(-1)?.cursor || '',
-        };
-      });
-    }
-  }, [loading, setTxsState, data, limit]);
+  if (!loading && data && isNumber(data.transactions.length)) {
+    hasMoreTxs = data.transactions.length >= count;
+    txsData = data.transactions;
+  }
 
   const nextPage = useCallback(() => {
-    const c = data?.transactions.at(0)?.cursor;
-    const newPreviousCursors = c ? [...previousCursors, c] : previousCursors;
-
-    setTxsState((prev) => ({
-      ...prev,
-      hasPreviousPage: true,
-      previousCursors: newPreviousCursors,
-    }));
-
-    return refetch({
-      limit,
-      before: cursor,
-    });
-  }, [data, previousCursors, cursor, limit, refetch]);
+    const after = data?.transactions.at(-1)?.cursor || '';
+    const params: URLSearchParamsInit = { after };
+    if (filters) {
+      params.filters = Array.from(filters).join(',');
+    }
+    setSearchParams(params);
+  }, [filters, data, setSearchParams]);
 
   const previousPage = useCallback(() => {
-    const previousCursor = [...previousCursors].pop();
-    const newPreviousCursors = previousCursors.slice(0, -1);
-    setTxsState((prev) => ({
-      ...prev,
-      hasPreviousPage: newPreviousCursors.length > 0,
-      previousCursors: newPreviousCursors,
-    }));
-    return refetch({
-      limit,
-      before: previousCursor,
-    });
-  }, [previousCursors, limit, refetch]);
+    const before = data?.transactions[0]?.cursor || '';
+    const params: URLSearchParamsInit = { before };
+    if (filters && filters.size > 0 && filters.size === 1) {
+      params.filters = Array.from(filters)[0];
+    }
+    setSearchParams(params);
+  }, [filters, data, setSearchParams]);
 
   const refreshTxs = useCallback(async () => {
-    setTxsState(() => ({
-      txsData: [],
-      cursor: '',
-      previousCursors: [],
-      hasMoreTxs: false,
-      hasPreviousPage: false,
-    }));
+    const params: URLSearchParamsInit = {};
+    if (filters && filters.size > 0 && filters.size === 1) {
+      params.filters = Array.from(filters)[0];
+    }
+    setSearchParams(params);
 
-    refetch({ limit });
-  }, [setTxsState, limit, refetch, filters]); // eslint-disable-line react-hooks/exhaustive-deps
+    refetch({ count: BE_TXS_PER_REQUEST });
+  }, [setSearchParams, refetch, filters]);
+
+  const updateFilters = useCallback(
+    (newFilters: Set<FilterOption>) => {
+      const params: URLSearchParamsInit = {};
+      if (newFilters && newFilters.size === 1) {
+        params.filters = Array.from(newFilters)[0];
+      }
+
+      setSearchParams(params);
+    },
+    [setSearchParams]
+  );
 
   return {
+    updateFilters,
     txsData,
     loading,
     error,
     hasMoreTxs,
-    hasPreviousPage,
-    previousCursors,
-    cursor,
     refreshTxs,
     nextPage,
     previousPage,
   };
 };
+
+/**
+ * Returns a Set of filters based on the URLSearchParams, or
+ * defaults to all.
+ * @param params
+ * @returns Set
+ */
+export function getInitialFilters(params: URLSearchParams): Set<FilterOption> {
+  const defaultFilters = new Set(AllFilterOptions);
+
+  const p = params.get('filters');
+
+  if (!p) {
+    return defaultFilters;
+  }
+
+  const filters = new Set<FilterOption>();
+  p.split(',').forEach((f) => {
+    if (AllFilterOptions.includes(f as FilterOption)) {
+      filters.add(f as FilterOption);
+    }
+  });
+
+  if (filters.size === 0) {
+    return defaultFilters;
+  }
+
+  return filters;
+}

apps/explorer/src/app/routes/blocks/id/block.spec.tsx

@@ -204,6 +204,7 @@ describe('Block', () => {
     (useFetch as jest.Mock).mockReturnValue({
       state: { data: createBlockResponse(1), loading: false, error: null },
     });
+
     render(renderComponent(1));
     await waitFor(() => screen.getByTestId('block-header'));
     expect(screen.getByTestId('previous-block-button')).toHaveAttribute(

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -15,9 +15,13 @@ import { PartyBlockAccounts } from './components/party-block-accounts';
 import { isValidPartyId } from './components/party-id-error';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { TxsListNavigation } from '../../../components/txs/tx-list-navigation';
+import type { FilterOption } from '../../../components/txs/tx-filter';
 import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
+import { useSearchParams } from 'react-router-dom';
 
 const Party = () => {
+  const [params] = useSearchParams();
+
   const [filters, setFilters] = useState(new Set(AllFilterOptions));
   const { party } = useParams<{ party: string }>();
 
@@ -27,24 +31,21 @@ const Party = () => {
   const partyId = toNonHex(party ? party : '');
   const { isMobile } = useScreenDimensions();
   const visibleChars = useMemo(() => (isMobile ? 10 : 14), [isMobile]);
-  const baseFilters = `filters[tx.submitter]=${partyId}`;
-  const f =
-    filters && filters.size === 1
-      ? `${baseFilters}&filters[cmd.type]=${Array.from(filters)[0]}`
-      : baseFilters;
 
   const {
-    hasMoreTxs,
     nextPage,
+    refreshTxs,
     previousPage,
     error,
-    refreshTxs,
     loading,
     txsData,
-    hasPreviousPage,
+    hasMoreTxs,
+    updateFilters,
   } = useTxsData({
-    limit: 25,
-    filters: f,
+    filters: filters.size === 1 ? filters : undefined,
+    before: params.get('before') || undefined,
+    after: !params.get('before') ? params.get('after') || undefined : undefined,
+    party: partyId,
   });
 
   const variables = useMemo(() => ({ partyId }), [partyId]);
@@ -102,15 +103,21 @@ const Party = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={hasPreviousPage}
+        hasPreviousPage={true}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
       >
-        <TxsFilter filters={filters} setFilters={setFilters} />
+        <TxsFilter
+          filters={filters}
+          setFilters={(f) => {
+            setFilters(f);
+            updateFilters(f as Set<FilterOption>);
+          }}
+        />
       </TxsListNavigation>
       {!error && txsData ? (
         <TxsInfiniteList
-          hasMoreTxs={hasMoreTxs}
+          hasMoreTxs={true}
           areTxsLoading={loading}
           txs={txsData}
           loadMoreTxs={nextPage}

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -1,14 +1,14 @@
 import { t } from '@vegaprotocol/i18n';
 import { RouteTitle } from '../../../components/route-title';
 import { TxsInfiniteList } from '../../../components/txs';
-import { useTxsData } from '../../../hooks/use-txs-data';
+import { useTxsData, getInitialFilters } from '../../../hooks/use-txs-data';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 
 import { useState } from 'react';
-import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
+import { TxsFilter } from '../../../components/txs/tx-filter';
+import type { FilterOption } from '../../../components/txs/tx-filter';
 import { TxsListNavigation } from '../../../components/txs/tx-list-navigation';
-
-const BE_TXS_PER_REQUEST = 25;
+import { useSearchParams } from 'react-router-dom';
 
 export const TxsList = () => {
   useDocumentTitle(['Transactions']);
@@ -27,25 +27,22 @@ export const TxsList = () => {
  * @returns {JSX.Element} Transaction List and controls
  */
 export const TxsListFiltered = () => {
-  const [filters, setFilters] = useState(new Set(AllFilterOptions));
-
-  const f =
-    filters && filters.size === 1
-      ? `filters[cmd.type]=${Array.from(filters)[0]}`
-      : '';
+  const [params] = useSearchParams();
+  const [filters, setFilters] = useState(getInitialFilters(params));
 
   const {
-    hasMoreTxs,
     nextPage,
     previousPage,
     error,
     refreshTxs,
     loading,
     txsData,
-    hasPreviousPage,
+    hasMoreTxs,
+    updateFilters,
   } = useTxsData({
-    limit: BE_TXS_PER_REQUEST,
-    filters: f,
+    filters: filters.size === 1 ? filters : undefined,
+    before: params.get('before') || undefined,
+    after: !params.get('before') ? params.get('after') || undefined : undefined,
   });
 
   return (
@@ -54,11 +51,17 @@ export const TxsListFiltered = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={hasPreviousPage}
+        hasPreviousPage={true}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
       >
-        <TxsFilter filters={filters} setFilters={setFilters} />
+        <TxsFilter
+          filters={filters}
+          setFilters={(f) => {
+            setFilters(f);
+            updateFilters(f as Set<FilterOption>);
+          }}
+        />
       </TxsListNavigation>
       <TxsInfiniteList
         hasFilters={filters.size > 0}

apps/trading/lib/vega-connectors.ts

@@ -3,16 +3,13 @@ import {
   JsonRpcConnector,
   ViewConnector,
   InjectedConnector,
-  SnapConnector,
 } from '@vegaprotocol/wallet';
 
 export const rest = new RestConnector();
 export const jsonRpc = new JsonRpcConnector();
 export const injected = new InjectedConnector();
-export const snap = new SnapConnector();
 
 let view: ViewConnector;
-
 if (typeof window !== 'undefined') {
   const urlParams = new URLSearchParams(window.location.hash.split('?')[1]);
   view = new ViewConnector(urlParams.get('address'));
@@ -25,5 +22,4 @@ export const Connectors = {
   rest,
   jsonRpc,
   view,
-  snap,
 };

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -7,17 +7,11 @@ import {
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 import type { WalletClientError } from '@vegaprotocol/wallet-client';
 import { t } from '@vegaprotocol/i18n';
 import type { VegaConnector } from '../connectors';
-import {
-  InjectedConnector,
-  SnapConnector,
-  connectSnap,
-  defaultSnapOrigin,
-  getSnap,
-} from '../connectors';
+import { InjectedConnector } from '../connectors';
 import { ViewConnector } from '../connectors';
 import { JsonRpcConnector, RestConnector } from '../connectors';
 import { RestConnectorForm } from './rest-connector-form';
@@ -39,7 +33,7 @@ import { InjectedConnectorForm } from './injected-connector-form';
 
 export const CLOSE_DELAY = 1700;
 type Connectors = { [key: string]: VegaConnector };
-export type WalletType = 'injected' | 'jsonRpc' | 'rest' | 'view' | 'snap';
+export type WalletType = 'injected' | 'jsonRpc' | 'rest' | 'view';
 
 export interface VegaConnectDialogProps {
   connectors: Connectors;
@@ -158,10 +152,7 @@ const ConnectDialogContainer = ({
     // for rest because we need to show an authentication form
     if (connector instanceof JsonRpcConnector) {
       jsonRpcConnect(connector, appChainId);
-    } else if (
-      connector instanceof InjectedConnector ||
-      connector instanceof SnapConnector
-    ) {
+    } else if (connector instanceof InjectedConnector) {
       injectedConnect(connector, appChainId);
     }
   };
@@ -204,20 +195,6 @@ const ConnectorList = ({
   setWalletUrl: (value: string) => void;
   isMainnet: boolean;
 }) => {
-  const [snapInstalled, setSnapInstalled] = useState(false);
-
-  useEffect(() => {
-    const getSnapStatus = async () => {
-      const result = await getSnap(defaultSnapOrigin);
-      if (result.enabled) {
-        setSnapInstalled(true);
-      } else {
-        alert('Vega snap not installed');
-      }
-    };
-
-    getSnapStatus();
-  }, []);
   return (
     <>
       <ConnectDialogTitle>{t('Connect')}</ConnectDialogTitle>
@@ -239,32 +216,6 @@ const ConnectorList = ({
             />
           </li>
         )}
-
-        <li className="mb-4 last:mb-0">
-          {snapInstalled ? (
-            <ConnectionOption
-              type="snap"
-              text={t('MetaMask Snap')}
-              onClick={() => onSelect('snap')}
-            />
-          ) : (
-            <Button
-              fill={true}
-              onClick={async () => {
-                try {
-                  await connectSnap(defaultSnapOrigin);
-                  const installedSnap = await getSnap(defaultSnapOrigin);
-                  console.log(installedSnap);
-                  setSnapInstalled(true);
-                } catch (err) {
-                  console.error(err);
-                }
-              }}
-            >
-              {t('Install Vega MetaMask Snap')}
-            </Button>
-          )}
-        </li>
         {!isMainnet && (
           <li className="mb-4 last:mb-0">
             <ConnectionOption
@@ -310,10 +261,7 @@ const SelectedForm = ({
   onConnect: () => void;
   riskMessage?: React.ReactNode;
 }) => {
-  if (
-    connector instanceof InjectedConnector ||
-    connector instanceof SnapConnector
-  ) {
+  if (connector instanceof InjectedConnector) {
     return (
       <InjectedConnectorForm
         status={injectedState.status}

libs/wallet/src/connect-dialog/injected-connector-form.tsx

@@ -20,6 +20,7 @@ export const InjectedConnectorForm = ({
   reset,
   error,
 }: {
+  // connector: JsonRpcConnector;
   appChainId: string;
   status: Status;
   error: Error | null;

libs/wallet/src/connectors/index.ts

@@ -3,4 +3,3 @@ export * from './rest-connector';
 export * from './injected-connector';
 export * from './json-rpc-connector';
 export * from './view-connector';
-export * from './snap-connector';

libs/wallet/src/connectors/snap-connector.ts

@@ -1,152 +0,0 @@
-import type { Transaction, VegaConnector } from './vega-connector';
-
-declare global {
-  interface Window {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ethereum: any;
-  }
-}
-
-export const defaultSnapOrigin = 'local:http://localhost:8080';
-
-// Requests permission for a website to communicate with the specified snaps
-// and attempts to install them if they're not already installed.
-// If the installation of any snap fails, returns the error that caused the failure.
-// More informations here: https://docs.metamask.io/snaps/reference/rpc-api/#wallet_requestsnaps
-//
-// The snapId when release will be using the following
-// pattern: `npm:@vegaprotocol/snapname` (prod snap ID)
-// to use the localy running extension use: `local:http://localhost:8080` (local snap ID)
-// params can contain an optional version
-export const connectSnap = async (
-  snapId: string,
-  params: Record<'version' | string, unknown> = {}
-) => {
-  await window.ethereum.request({
-    method: 'wallet_requestSnaps',
-    params: {
-      [snapId]: params,
-    },
-  });
-};
-
-export type GetSnapsResponse = Record<string, Snap>;
-
-export type Snap = {
-  permissionName: string;
-  id: string;
-  version: string;
-  initialPermissions: Record<string, unknown>;
-};
-
-// the returns the list of installed snaps
-// for more infos: https://docs.metamask.io/snaps/reference/rpc-api/#wallet_getsnaps
-export const getSnaps = async (): Promise<GetSnapsResponse> => {
-  return (await window.ethereum.request({
-    method: 'wallet_getSnaps',
-  })) as unknown as GetSnapsResponse;
-};
-
-// returns the snap informations if connected with this
-// webapp.
-export const getSnap = async (
-  snapId: string,
-  version?: string
-): Promise<Snap | undefined> => {
-  try {
-    const snaps = await getSnaps();
-    return Object.values(snaps).find(
-      (snap) => snap.id === snapId && (!version || snap.version === version)
-    );
-  } catch (e) {
-    return undefined;
-  }
-};
-
-export class SnapConnector implements VegaConnector {
-  description = "Connects using Vega Protocol's MetaMask snap";
-  snapId: string = defaultSnapOrigin;
-  nodeAddress: string | undefined = undefined;
-
-  /**
-   * @param nodeAddress url for the node (without pathname, eg /graphql)
-   */
-  constructor(nodeAddress?: string) {
-    this.nodeAddress = nodeAddress;
-  }
-
-  async connectWallet() {
-    return null;
-  }
-
-  async connect() {
-    const res = await window.ethereum.request({
-      method: 'wallet_invokeSnap',
-      params: {
-        snapId: defaultSnapOrigin,
-        request: { method: 'client.list_keys' },
-      },
-    });
-
-    // TODO: setConfig
-
-    console.log(res);
-
-    return res.keys;
-  }
-
-  async sendTx(pubKey: string, transaction: Transaction) {
-    if (!this.nodeAddress) throw new Error('nodeAddress not set');
-    const payload = JSON.parse(
-      JSON.stringify({
-        method: 'wallet_invokeSnap',
-        params: {
-          snapId: defaultSnapOrigin,
-          request: {
-            method: 'client.send_transaction',
-            params: {
-              publicKey: pubKey,
-              transaction,
-              sendingMode: 'TYPE_SYNC',
-              networkEndpoints: [this.nodeAddress],
-            },
-          },
-        },
-      })
-    );
-    console.log(payload);
-    const result = await window.ethereum.request(payload);
-
-    console.log(result);
-
-    return {
-      transactionHash: result.transactionHash,
-      receivedAt: result.receivedAt,
-      sentAt: result.sentAt,
-      signature: result.transaction.signature.value,
-    };
-  }
-
-  async getChainId(): Promise<{ chainID: string }> {
-    if (!this.nodeAddress) throw new Error('nodeAddress not set');
-    return await window.ethereum.request({
-      method: 'wallet_invokeSnap',
-      params: {
-        snapId: defaultSnapOrigin,
-        request: {
-          method: 'client.get_chain_id',
-          networkEndpoint: [this.nodeAddress],
-        },
-      },
-    });
-  }
-
-  // NO-OP
-  async disconnect() {
-    return undefined;
-  }
-
-  // async signTransaction(params) {
-  //   throw new Error('signTransaction not supported');
-  // }
-}

libs/wallet/src/use-injected-connector.ts

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
-import { InjectedConnector, SnapConnector } from './connectors';
+import type { InjectedConnector } from './connectors';
 import { useVegaWallet } from './use-vega-wallet';
-import { useEnvironment } from '@vegaprotocol/environment';
 
 export enum Status {
   Idle = 'Idle',
@@ -13,39 +12,24 @@ export enum Status {
 }
 
 export const useInjectedConnector = (onConnect: () => void) => {
-  const { VEGA_URL } = useEnvironment();
   const { connect, acknowledgeNeeded } = useVegaWallet();
   const [status, setStatus] = useState(Status.Idle);
   const [error, setError] = useState<Error | null>(null);
 
   const attemptConnect = useCallback(
-    async (
-      connector: InjectedConnector | SnapConnector,
-      appChainId: string
-    ) => {
+    async (connector: InjectedConnector, appChainId: string) => {
       try {
-        if (connector instanceof InjectedConnector && !('vega' in window)) {
+        if (!('vega' in window)) {
           throw new Error('window.vega not found');
         }
 
-        if (connector instanceof SnapConnector) {
-          if (!('ethereum' in window)) {
-            throw new Error('window.ethereum not found');
-          }
-          if (!VEGA_URL) {
-            throw new Error('no connected node');
-          }
-
-          connector.nodeAddress = new URL(VEGA_URL).origin;
-        }
-
         setStatus(Status.GettingChainId);
 
-        // const { chainID } = await connector.getChainId();
+        const { chainID } = await connector.getChainId();
 
-        // if (chainID !== appChainId) {
-        //   throw new Error('Invalid chain');
-        // }
+        if (chainID !== appChainId) {
+          throw new Error('Invalid chain');
+        }
 
         setStatus(Status.Connecting);
         await connector.connectWallet(); // authorize wallet
@@ -58,7 +42,6 @@ export const useInjectedConnector = (onConnect: () => void) => {
           onConnect();
         }
       } catch (err) {
-        console.log(err);
         if (err instanceof Error) {
           setError(err);
         } else {
@@ -67,7 +50,7 @@ export const useInjectedConnector = (onConnect: () => void) => {
         setStatus(Status.Error);
       }
     },
-    [acknowledgeNeeded, connect, onConnect, VEGA_URL]
+    [acknowledgeNeeded, connect, onConnect]
   );
 
   return {