Feat/multi network

config/mainnet.js

@@ -10,7 +10,6 @@ const mainnet = {
   sentryDsn: 'https://[email protected]/4505199579758592',
   userDataPolicy: 'https://vega.xyz/vega-wallet-user-data-policy/',
   logging: false,
-  showDisclaimer: true,
   manifestReplacements: {
     buildName: 'Mainnet',
     geckoId: '[email protected]',

config/test.js

@@ -9,7 +9,7 @@ const test = {
   test: {
     mockPort
   },
-  networks: [networks.testingNetwork, networks.fairground],
+  networks: [networks.testingNetwork, networks.testingNetwork2],
   feedbackLink: 'https://github.com/vegaprotocol/feedback/discussions',
   userDataPolicy: 'https://vega.xyz/vega-wallet-user-data-policy/',
   encryptionSettings: {
@@ -18,8 +18,7 @@ const test = {
   },
   closeWindowOnPopupOpen: false,
   sentryDsn: undefined,
-  logging: true,
-  showDisclaimer: false,
+  logging: false,
 
   manifestReplacements: {
     buildName: 'Test',

config/testnet.js

@@ -11,7 +11,6 @@ const testnet = {
   userDataPolicy: 'https://vega.xyz/vega-wallet-user-data-policy/',
   sentryDsn: 'https://[email protected]/4505199579758592',
   logging: false,
-  showDisclaimer: false,
   features: {
     popoutHeader: true
   },

config/well-known-networks.js

@@ -1,6 +1,8 @@
 const mockPort = 9090
 
 export const mainnet = {
+  color: '#000000',
+  secondaryColor: '#FFFFFF',
   id: 'mainnet',
   name: 'Mainnet',
   chainId: 'vega-mainnet-0011',
@@ -22,14 +24,13 @@ export const mainnet = {
   ethereumExplorerLink: 'https://etherscan.io',
   explorer: 'https://explorer.vega.xyz',
   governance: 'https://governance.vega.xyz',
-  deposit: 'https://console.vega.xyz/#/portfolio/assets/deposit',
-  transfer: 'https://console.vega.xyz/#/portfolio/assets/transfer',
-  withdraw: 'https://console.vega.xyz/#/portfolio/assets/withdraw',
-  docs: 'https://docs.vega.xyz/mainnet',
+  docs: 'https://docs.vega.xyz/mainnet/concepts/new-to-vega',
   vegaDapps: 'https://vega.xyz/apps'
 }
 
 export const fairground = {
+  color: '#D7FB50',
+  secondaryColor: '#000000',
   id: 'fairground',
   name: 'Fairground',
   chainId: 'vega-fairground-202305051805',
@@ -45,10 +46,7 @@ export const fairground = {
   ethereumExplorerLink: 'https://sepolia.etherscan.io',
   explorer: 'https://explorer.fairground.wtf',
   governance: 'https://governance.fairground.wtf',
-  deposit: 'https://console.fairground.wtf/#/portfolio/assets/deposit',
-  transfer: 'https://console.fairground.wtf/#/portfolio/assets/transfer',
-  withdraw: 'https://console.fairground.wtf/#/portfolio/assets/withdraw',
-  docs: 'https://docs.vega.xyz/testnet',
+  docs: 'https://docs.vega.xyz/testnet/concepts/new-to-vega',
   vegaDapps: 'https://vega.xyz/apps'
 }
 
@@ -59,3 +57,11 @@ export const testingNetwork = {
   chainId: 'test-chain-id',
   rest: [`http://localhost:${mockPort}`]
 }
+
+export const testingNetwork2 = {
+  ...testingNetwork,
+  explorer: 'https://different-explorer.vega.xyz',
+  id: 'test2',
+  name: 'Test 2',
+  chainId: 'test-chain-id-2'
+}

frontend/app.spec.tsx

@@ -27,9 +27,11 @@ jest.mock('@/stores/popover-store', () => ({
   }
 }))
 
-jest.mock('@/components/global-error-boundary', () => ({ children }: { children: ReactNode }) => (
-  <div data-testid="global-error-boundary">{children}</div>
-))
+jest.mock('@/components/global-error-boundary', () => ({
+  GlobalErrorBoundary: ({ children }: { children: ReactNode }) => (
+    <div data-testid="global-error-boundary">{children}</div>
+  )
+}))
 
 jest.mock('@/contexts/json-rpc/json-rpc-provider', () => ({
   JsonRPCProvider: ({ children }: { children: ReactNode }) => <div data-testid="json-rpc-provider">{children}</div>

frontend/app.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { MemoryRouter as Router } from 'react-router-dom'
 
-import GlobalErrorBoundary from '@/components/global-error-boundary'
+import { GlobalErrorBoundary } from '@/components/global-error-boundary'
 import { JsonRPCProvider } from '@/contexts/json-rpc/json-rpc-provider'
 import { NetworkProvider } from '@/contexts/network/network-provider'
 import { useListenForPopups } from '@/hooks/listen-for-popups'

frontend/components/checkbox/checkbox.tsx

@@ -0,0 +1,37 @@
+import { Checkbox as UICheckbox } from '@vegaprotocol/ui-toolkit'
+import classnames from 'classnames'
+import type { ReactNode } from 'react'
+import type { Control, FieldValues, Path } from 'react-hook-form'
+import { Controller } from 'react-hook-form'
+
+import locators from '../locators'
+
+export type CheckboxProperties<T extends FieldValues> = {
+  name: Path<T>
+  control: Control<T>
+  label: ReactNode
+  disabled?: boolean
+  className?: string
+}
+
+export function Checkbox<T extends FieldValues>({ name, control, label, disabled, className }: CheckboxProperties<T>) {
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => {
+        return (
+          <div data-testid={locators.checkboxWrapper} className={classnames('mt-4 flex items-center gap-4', className)}>
+            <UICheckbox
+              label={label}
+              checked={!!field.value}
+              disabled={disabled}
+              onCheckedChange={field.onChange}
+              name={name}
+            />
+          </div>
+        )
+      }}
+    />
+  )
+}

frontend/components/checkbox/index.tsx

@@ -1,43 +1 @@
-import { Checkbox as UICheckbox } from '@vegaprotocol/ui-toolkit'
-import classnames from 'classnames'
-import type { ReactNode } from 'react'
-import type { Control, FieldValues, Path } from 'react-hook-form'
-import { Controller } from 'react-hook-form'
-
-import locators from '../locators'
-
-export type CheckboxProperties<T extends FieldValues> = {
-  name: Path<T>
-  control: Control<T>
-  label: ReactNode
-  disabled?: boolean
-  className?: string
-}
-
-export function Checkbox<T extends FieldValues>({
-  name,
-  control,
-  label,
-  disabled,
-  className
-}: Readonly<CheckboxProperties<T>>) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field }) => {
-        return (
-          <div data-testid={locators.checkboxWrapper} className={classnames('mt-4 flex items-center gap-4', className)}>
-            <UICheckbox
-              label={label}
-              checked={!!field.value}
-              disabled={disabled}
-              onCheckedChange={field.onChange}
-              name={name}
-            />
-          </div>
-        )
-      }}
-    />
-  )
-}
+export * from './checkbox'

frontend/components/collapsible-panel/collapsible-panel.spec.tsx

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 
 import locators from '../locators'
+import { locators as subHeaderLocators } from '../sub-header'
 import { CollapsiblePanel } from './collapsible-panel'
 
 const renderComponent = ({ initiallyOpen }: { initiallyOpen?: boolean }) => {
@@ -13,7 +14,7 @@ describe('Collapsible panel', () => {
   it('renders title, arrow and does not render content', () => {
     renderComponent({})
     expect(screen.getByTestId(locators.collapsiblePanelButton)).toBeInTheDocument()
-    expect(screen.getByTestId(locators.collapsiblePanelTitle)).toHaveTextContent('Title')
+    expect(screen.getByTestId(subHeaderLocators.subHeader)).toHaveTextContent('Title')
     expect(screen.getByTestId(locators.collapsiblePanelContent)).toHaveClass('hidden')
     expect(screen.getByTestId(locators.dropdownArrow)).toBeInTheDocument()
   })

frontend/components/collapsible-panel/collapsible-panel.tsx

@@ -4,6 +4,7 @@ import { useState } from 'react'
 
 import { DropdownArrow } from '../icons/dropdown-arrow'
 import locators from '../locators'
+import { SubHeader } from '../sub-header'
 
 export const CollapsiblePanel = ({
   initiallyOpen = false,
@@ -22,9 +23,7 @@ export const CollapsiblePanel = ({
         onClick={() => setIsOpen(!isOpen)}
         data-testid={locators.collapsiblePanelButton}
       >
-        <span className="text-sm uppercase" data-testid={locators.collapsiblePanelTitle}>
-          {title}
-        </span>
+        <SubHeader content={title} />
         <DropdownArrow
           className={classnames('w-3 ml-3 mb-1', {
             'rotate-180': isOpen

frontend/components/dapps-header/dapps-header.spec.tsx

@@ -34,11 +34,11 @@ describe('WalletsHeader', () => {
     expect(governButton).toHaveTextContent('Vote')
     expect(governButton).toHaveAttribute('href', fairground.governance)
     expect(transferButton).toHaveTextContent('Transfer')
-    expect(transferButton).toHaveAttribute('href', fairground.transfer)
+    expect(transferButton).toHaveAttribute('href', `${fairground.console}/#/portfolio/assets/transfer`)
     expect(depositButton).toHaveTextContent('Deposit')
-    expect(depositButton).toHaveAttribute('href', fairground.deposit)
+    expect(depositButton).toHaveAttribute('href', `${fairground.console}/#/portfolio/assets/deposit`)
     expect(withdrawButton).toHaveTextContent('Withdraw')
-    expect(withdrawButton).toHaveAttribute('href', fairground.withdraw)
+    expect(withdrawButton).toHaveAttribute('href', `${fairground.console}/#/portfolio/assets/withdraw`)
   })
 
   it('renders the correct tooltip content', async () => {

frontend/components/dapps-header/dapps-header.tsx

@@ -43,16 +43,19 @@ const DappsHeaderButton = ({
 
 export const DappsHeader = () => {
   const { network } = useNetwork()
+  const transferLink = `${network.console}/#/portfolio/assets/transfer`
+  const depositLink = `${network.console}/#/portfolio/assets/deposit`
+  const withdrawLink = `${network.console}/#/portfolio/assets/withdraw`
   return (
     <div
       className="flex justify-evenly bg-vega-dark-150/25 w-full py-3 border-b border-1 border-vega-dark-150"
       data-testid={locators.walletsHeader}
     >
       <DappsHeaderButton href={network.console} tooltipContent="Console" icon={<TradeIcon />} text="Trade" />
       <DappsHeaderButton href={network.governance} tooltipContent="Governance" icon={<Tick size={24} />} text="Vote" />
-      <DappsHeaderButton href={network.transfer} tooltipContent="Transfer" icon={<OpenExternal />} text="Transfer" />
-      <DappsHeaderButton href={network.deposit} tooltipContent="Deposit" icon={<Deposit />} text="Deposit" />
-      <DappsHeaderButton href={network.withdraw} tooltipContent="Withdraw" icon={<Withdraw />} text="Withdraw" />
+      <DappsHeaderButton href={transferLink} tooltipContent="Transfer" icon={<OpenExternal />} text="Transfer" />
+      <DappsHeaderButton href={depositLink} tooltipContent="Deposit" icon={<Deposit />} text="Deposit" />
+      <DappsHeaderButton href={withdrawLink} tooltipContent="Withdraw" icon={<Withdraw />} text="Withdraw" />
     </div>
   )
 }

frontend/components/dapps-header/index.tsx

@@ -0,0 +1 @@
+export * from './dapps-header'

frontend/components/data-table/index.tsx

@@ -0,0 +1 @@
+export * from './data-table'

frontend/components/dropdown/dropdown.spec.tsx

@@ -0,0 +1,65 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+import { Dropdown, DropdownProperties, locators } from './dropdown'
+
+const defaultProps: DropdownProperties = {
+  trigger: <div data-testid="trigger" />,
+  content: () => <div data-testid="content" />,
+  enabled: true
+}
+
+const renderComponent = (properties: DropdownProperties = defaultProps) => {
+  return render(<Dropdown {...properties} />)
+}
+
+describe('DropDown', () => {
+  it('renders the trigger and opens content on click', async () => {
+    renderComponent()
+    fireEvent.click(screen.getByTestId(locators.dropdownTrigger))
+    await screen.findByTestId('content')
+  })
+
+  it('renders the trigger and does not open if enabled is true', async () => {
+    renderComponent({
+      ...defaultProps,
+      enabled: false
+    })
+    fireEvent.click(screen.getByTestId('trigger'))
+    expect(screen.queryByTestId('content')).not.toBeInTheDocument()
+  })
+
+  it('closes modal when clicking trigger', async () => {
+    renderComponent()
+    fireEvent.click(screen.getByTestId(locators.dropdownTrigger))
+    await screen.findByTestId('content')
+    fireEvent.click(screen.getByTestId(locators.dropdownTrigger))
+    await waitFor(() => expect(screen.queryByTestId('key-list')).not.toBeInTheDocument())
+  })
+
+  it('closes dropdown when clicking outside', async () => {
+    const { container } = renderComponent()
+    fireEvent.click(screen.getByTestId(locators.dropdownTrigger))
+    await screen.findByTestId('content')
+    fireEvent.pointerDown(
+      container,
+      new PointerEvent('pointerdown', {
+        ctrlKey: false,
+        button: 0
+      })
+    )
+    await waitFor(() => expect(screen.queryByTestId('key-list')).not.toBeInTheDocument())
+  })
+
+  it('closes dropdown when escape key is pressed', async () => {
+    const { container } = renderComponent()
+    fireEvent.click(screen.getByTestId(locators.dropdownTrigger))
+    await screen.findByTestId('content')
+    fireEvent.keyDown(container, {
+      key: 'Escape',
+      code: 'Escape',
+      keyCode: 27,
+      charCode: 27
+    })
+    await waitFor(() => expect(screen.queryByTestId('key-list')).not.toBeInTheDocument())
+  })
+})