Feature/38 data grid component (#77)

* Add ag-grid

* Add lazy loaded ag-grid component

* Add theme context, move VegaWallet to separate lib

* Fix trading app cypress configuration

* Lazy load ag-grid theme css files

* Encapsulate theme switch hook

apps/trading-e2e/cypress.json

@@ -8,5 +8,6 @@
   "video": true,
   "videosFolder": "../../dist/cypress/apps/trading-e2e/videos",
   "screenshotsFolder": "../../dist/cypress/apps/trading-e2e/screenshots",
-  "chromeWebSecurity": false
+  "chromeWebSecurity": false,
+  "projectId": "et4snf"
 }

apps/trading-e2e/src/integration/app.spec.ts

@@ -8,6 +8,6 @@ describe('trading', () => {
     cy.login('my-email@something.com', 'myPassword');
 
     // Function helper example, see `../support/app.po.ts` file
-    getGreeting().contains('Welcome trading');
+    getGreeting().contains('Welcome to Vega Trading App');
   });
 });

apps/trading/components/navbar/index.tsx

@@ -1,48 +1 @@
-import { useRouter } from 'next/router';
-import { Vega } from '../icons/vega';
-import Link from 'next/link';
-import { AnchorButton } from '@vegaprotocol/ui-toolkit';
-
-export const Navbar = () => {
-  return (
-    <nav className="flex items-center">
-      <Link href="/" passHref={true}>
-        <a className="px-[26px]">
-          <Vega className="fill-black dark:fill-white" />
-        </a>
-      </Link>
-      {[
-        { name: 'Trading', path: '/', exact: true },
-        { name: 'Portfolio', path: '/portfolio' },
-        { name: 'Markets', path: '/markets' },
-      ].map((route) => (
-        <NavLink key={route.path} {...route} />
-      ))}
-    </nav>
-  );
-};
-
-interface NavLinkProps {
-  name: string;
-  path: string;
-  exact?: boolean;
-}
-
-const NavLink = ({ name, path, exact }: NavLinkProps) => {
-  const router = useRouter();
-  const isActive =
-    router.asPath === path || (!exact && router.asPath.startsWith(path));
-  return (
-    <AnchorButton
-      variant={isActive ? 'accent' : 'inline'}
-      className="px-16 py-6 h-[38px] text-h4 uppercase border-0 self-end"
-      href={path}
-      onClick={(e) => {
-        e.preventDefault();
-        router.push(path);
-      }}
-    >
-      {name}
-    </AnchorButton>
-  );
-};
+export * from './navbar';

apps/trading/components/navbar/navbar.tsx

@@ -0,0 +1,48 @@
+import { useRouter } from 'next/router';
+import { Vega } from '../icons/vega';
+import Link from 'next/link';
+import { AnchorButton } from '@vegaprotocol/ui-toolkit';
+
+export const Navbar = () => {
+  return (
+    <nav className="flex items-center">
+      <Link href="/" passHref={true}>
+        <a className="px-[26px]">
+          <Vega className="fill-black dark:fill-white" />
+        </a>
+      </Link>
+      {[
+        { name: 'Trading', path: '/', exact: true },
+        { name: 'Portfolio', path: '/portfolio' },
+        { name: 'Markets', path: '/markets' },
+      ].map((route) => (
+        <NavLink key={route.path} {...route} />
+      ))}
+    </nav>
+  );
+};
+
+interface NavLinkProps {
+  name: string;
+  path: string;
+  exact?: boolean;
+}
+
+const NavLink = ({ name, path, exact }: NavLinkProps) => {
+  const router = useRouter();
+  const isActive =
+    router.asPath === path || (!exact && router.asPath.startsWith(path));
+  return (
+    <AnchorButton
+      variant={isActive ? 'accent' : 'inline'}
+      className="px-16 py-6 h-[38px] text-h4 uppercase border-0 self-end"
+      href={path}
+      onClick={(e) => {
+        e.preventDefault();
+        router.push(path);
+      }}
+    >
+      {name}
+    </AnchorButton>
+  );
+};

apps/trading/components/vega-wallet-connect-button/index.tsx

@@ -1,4 +1,4 @@
-import { useVegaWallet } from '@vegaprotocol/react-helpers';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 
 interface VegaWalletButtonProps {
   setConnectDialog: (isOpen: boolean) => void;
@@ -19,7 +19,7 @@ export const VegaWalletButton = ({
   };
 
   return (
-    <button onClick={handleClick} className="ml-auto inline-block p-8">
+    <button onClick={handleClick} className="ml-auto inline-block">
       {isConnected ? 'Disconnect' : 'Connect Vega wallet'}
     </button>
   );

apps/trading/hooks/use-theme-switcher.ts

@@ -1,23 +1,41 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import { LocalStorage } from '@vegaprotocol/react-helpers';
 
-export function useThemeSwitcher() {
+const darkTheme = 'dark';
+const lightTheme = 'light';
+type themeVariant = typeof darkTheme | typeof lightTheme;
+
+const darkThemeCssClass = darkTheme;
+
+const getCurrentTheme = () => {
+  const theme = LocalStorage.getItem('theme');
+  if (
+    theme === darkTheme ||
+    (!theme &&
+      typeof window !== 'undefined' &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches)
+  ) {
+    return darkTheme;
+  }
+  return lightTheme;
+};
+
+const toggleTheme = () => {
+  const theme = document.documentElement.classList.contains(darkThemeCssClass)
+    ? lightTheme
+    : darkTheme;
+  LocalStorage.setItem('theme', theme);
+  return theme;
+};
+
+export function useThemeSwitcher(): [themeVariant, () => void] {
+  const [theme, setTheme] = useState<themeVariant>(getCurrentTheme());
   useEffect(() => {
-    if (
-      localStorage.theme === 'dark' ||
-      (!('theme' in localStorage) &&
-        window.matchMedia('(prefers-color-scheme: dark)').matches)
-    ) {
-      document.documentElement.classList.add('dark');
+    if (theme === darkTheme) {
+      document.documentElement.classList.add(darkThemeCssClass);
     } else {
-      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.remove(darkThemeCssClass);
     }
-  }, []);
-
-  const setTheme = () => {
-    localStorage.theme = document.documentElement.classList.toggle('dark')
-      ? 'dark'
-      : undefined;
-  };
-
-  return setTheme;
+  }, [theme]);
+  return [theme, () => setTheme(toggleTheme)];
 }

apps/trading/hooks/use-vega-wallet-eager-connect.ts

@@ -1,6 +1,6 @@
-import { useVegaWallet, WALLET_CONFIG } from '@vegaprotocol/react-helpers';
+import { useVegaWallet, WALLET_CONFIG } from '@vegaprotocol/wallet';
 import { useEffect } from 'react';
-import { LocalStorage } from '@vegaprotocol/storage';
+import { LocalStorage } from '@vegaprotocol/react-helpers';
 import { Connectors } from '../lib/connectors';
 
 export function useEagerConnect() {

apps/trading/lib/connectors.ts

@@ -1,4 +1,4 @@
-import { RestConnector } from '@vegaprotocol/react-helpers';
+import { RestConnector } from '@vegaprotocol/wallet';
 
 export const rest = new RestConnector();
 

apps/trading/pages/_app.page.tsx

@@ -1,21 +1,19 @@
 import { AppProps } from 'next/app';
 import Head from 'next/head';
 import { Navbar } from '../components/navbar';
-import {
-  VegaConnectDialog,
-  VegaWalletProvider,
-} from '@vegaprotocol/react-helpers';
+import { ThemeContext } from '@vegaprotocol/react-helpers';
+import { VegaConnectDialog, VegaWalletProvider } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/connectors';
 import { useCallback, useMemo, useState } from 'react';
 import { createClient } from '../lib/apollo-client';
 import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
-import './styles.css';
 import { ApolloProvider } from '@apollo/client';
-import './styles.css';
 import { AppLoader } from '../components/app-loader';
 import { VegaWalletButton } from '../components/vega-wallet-connect-button';
 import { useThemeSwitcher } from '../hooks/use-theme-switcher';
 
+import './styles.css';
+
 function VegaTradingApp({ Component, pageProps }: AppProps) {
   const client = useMemo(
     () =>
@@ -25,7 +23,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
     []
   );
   const [dialogOpen, setDialogOpen] = useState(false);
-  const setTheme = useThemeSwitcher();
+  const [theme, toggleTheme] = useThemeSwitcher();
 
   const setConnectDialog = useCallback((isOpen?: boolean) => {
     setDialogOpen((curr) => {
@@ -35,37 +33,39 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
   }, []);
 
   return (
-    <ApolloProvider client={client}>
-      <VegaWalletProvider>
-        <AppLoader>
-          <Head>
-            <title>Welcome to trading!</title>
-            <link
-              rel="icon"
-              href="https://vega.xyz/favicon-32x32.png"
-              type="image/png"
-            />
-          </Head>
-          <div className="h-full dark:bg-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
-            <div className="flex items-stretch border-b-[7px] border-vega-yellow">
-              <Navbar />
-              <div className="flex items-center ml-auto mr-8">
-                <VegaWalletButton setConnectDialog={setConnectDialog} />
-                <ThemeSwitcher onToggle={setTheme} />
+    <ThemeContext.Provider value={theme}>
+      <ApolloProvider client={client}>
+        <VegaWalletProvider>
+          <AppLoader>
+            <Head>
+              <title>Welcome to trading!</title>
+              <link
+                rel="icon"
+                href="https://vega.xyz/favicon-32x32.png"
+                type="image/png"
+              />
+            </Head>
+            <div className="h-full dark:bg-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
+              <div className="flex items-stretch border-b-[7px] border-vega-yellow">
+                <Navbar />
+                <div className="flex items-center ml-auto mr-8">
+                  <VegaWalletButton setConnectDialog={setConnectDialog} />
+                  <ThemeSwitcher onToggle={toggleTheme} className="-my-4" />
+                </div>
               </div>
+              <main>
+                <Component {...pageProps} />
+              </main>
+              <VegaConnectDialog
+                connectors={Connectors}
+                dialogOpen={dialogOpen}
+                setDialogOpen={setDialogOpen}
+              />
             </div>
-            <main>
-              <Component {...pageProps} />
-            </main>
-            <VegaConnectDialog
-              connectors={Connectors}
-              dialogOpen={dialogOpen}
-              setDialogOpen={setDialogOpen}
-            />
-          </div>
-        </AppLoader>
-      </VegaWalletProvider>
-    </ApolloProvider>
+          </AppLoader>
+        </VegaWalletProvider>
+      </ApolloProvider>
+    </ThemeContext.Provider>
   );
 }
 

apps/trading/pages/index.page.tsx

@@ -1,21 +1,38 @@
-import { Callout, Button } from '@vegaprotocol/ui-toolkit';
+import {
+  AgGridDynamic as AgGrid,
+  Button,
+  Callout,
+} from '@vegaprotocol/ui-toolkit';
+import { AgGridColumn } from 'ag-grid-react';
 
 export function Index() {
+  const rowData = [
+    { make: 'Toyota', model: 'Celica', price: 35000 },
+    { make: 'Ford', model: 'Mondeo', price: 32000 },
+    { make: 'Porsche', model: 'Boxter', price: 72000 },
+  ];
   return (
     <div className="m-24">
-      <Callout
-        intent="help"
-        title="This is what this thing does"
-        iconName="endorsed"
-        headingLevel={1}
-      >
-        <div className="flex flex-col">
-          <div>With a longer explaination</div>
-          <Button className="block mt-8" variant="secondary">
-            Action
-          </Button>
-        </div>
-      </Callout>
+      <div className="mb-24">
+        <Callout
+          intent="help"
+          title="Welcome to Vega Trading App"
+          iconName="endorsed"
+          headingLevel={1}
+        >
+          <div className="flex flex-col">
+            <div>With a longer explaination</div>
+            <Button className="block mt-8" variant="secondary">
+              Action
+            </Button>
+          </div>
+        </Callout>
+      </div>
+      <AgGrid rowData={rowData} style={{ height: 400, width: 600 }}>
+        <AgGridColumn field="make"></AgGridColumn>
+        <AgGridColumn field="model"></AgGridColumn>
+        <AgGridColumn field="price"></AgGridColumn>
+      </AgGrid>
     </div>
   );
 }

apps/trading/pages/portfolio/index.page.tsx

@@ -1,4 +1,4 @@
-import { useVegaWallet } from '@vegaprotocol/react-helpers';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 
 const Portfolio = () => {
   const { keypair } = useVegaWallet();

apps/trading/specs/index.spec.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import Index from '../pages/index.page';
-import { VegaWalletContext } from '@vegaprotocol/react-helpers';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
 
 describe('Index', () => {
   it('should render successfully', () => {
@@ -15,6 +15,7 @@ describe('Index', () => {
           disconnect: jest.fn(),
           selectPublicKey: jest.fn(),
           connector: null,
+          sendTx: jest.fn(),
         }}
       >
         <Index />

apps/trading/tailwind.config.js

@@ -9,8 +9,6 @@ module.exports = {
     ...createGlobPatternsForDependencies(__dirname),
   ],
   darkMode: 'class',
-  theme: {
-    extend: theme,
-  },
+  theme,
   plugins: [],
 };

libs/react-helpers/src/index.ts

@@ -1,3 +1,3 @@
-export * from './lib/react-helpers';
+export * from './lib/context';
+export * from './lib/storage';
 export * from './lib/trading';
-export * from './lib/vega-wallet';

libs/react-helpers/src/lib/context/context.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export const ThemeContext = React.createContext<'light' | 'dark'>('dark');

libs/react-helpers/src/lib/context/index.tsx

@@ -0,0 +1 @@
+export * from './context';

libs/react-helpers/src/lib/react-helpers.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import ReactHelpers from './react-helpers';
-
-describe('ReactHelpers', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<ReactHelpers />);
-    expect(baseElement).toBeTruthy();
-  });
-});

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

@@ -1,12 +0,0 @@
-/* eslint-disable-next-line */
-export interface ReactHelpersProps {}
-
-export function ReactHelpers(props: ReactHelpersProps) {
-  return (
-    <div>
-      <h1>Welcome to ReactHelpers!</h1>
-    </div>
-  );
-}
-
-export default ReactHelpers;

libs/react-helpers/src/lib/storage/index.ts

@@ -1,6 +1,6 @@
 // TODO: fine for now however will leak state between tests (we don't really have) in future. Ideally should use a provider
 export const LocalStorage = {
-  getItem: (key) => {
+  getItem: (key: string) => {
     if (typeof window === 'undefined') return;
     try {
       const item = window.localStorage.getItem(key);
@@ -10,7 +10,7 @@ export const LocalStorage = {
       return null;
     }
   },
-  setItem: (key, value) => {
+  setItem: (key: string, value: string) => {
     if (typeof window === 'undefined') return;
     try {
       window.localStorage.setItem(key, value);
@@ -18,7 +18,7 @@ export const LocalStorage = {
       console.error(error);
     }
   },
-  removeItem: (key) => {
+  removeItem: (key: string) => {
     if (typeof window === 'undefined') return;
     try {
       window.localStorage.removeItem(key);

libs/storage/README.md

@@ -1 +0,0 @@
-# Local storage helpers

libs/storage/package.json

@@ -1,4 +0,0 @@
-{
-  "name": "@vegaprotocol/storage",
-  "version": "0.0.1"
-}

libs/ui-toolkit/src/components/ag-grid/ag-grid-dark.tsx

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import 'ag-grid-community/dist/styles/ag-theme-balham-dark.css';
+
+export const AgGrid = (props: { children: ReactElement }) => props.children;

libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic-themed.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import dynamic from 'next/dynamic';
+import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+import { AgGridReact } from 'ag-grid-react';
+import { ThemeContext } from '@vegaprotocol/react-helpers';
+import 'ag-grid-community/dist/styles/ag-grid.css';
+
+const AgGridLightTheme = dynamic<{ children: React.ReactElement }>(
+  () => import('./ag-grid-light').then((mod) => mod.AgGrid),
+  { ssr: false }
+);
+
+const AgGridDarkTheme = dynamic<{ children: React.ReactElement }>(
+  () => import('./ag-grid-dark').then((mod) => mod.AgGrid),
+  { ssr: false }
+);
+
+export const AgGridThemed = ({
+  style,
+  className,
+  ...props
+}: (AgGridReactProps | AgReactUiProps) & {
+  style?: React.CSSProperties;
+  className?: string;
+}) => {
+  const theme = React.useContext(ThemeContext);
+  return (
+    <div
+      className={`${className ?? ''} ${
+        theme === 'dark' ? 'ag-theme-balham-dark' : 'ag-theme-balham'
+      }`}
+      style={style}
+    >
+      {theme === 'dark' ? (
+        <AgGridDarkTheme>
+          <AgGridReact {...props} />
+        </AgGridDarkTheme>
+      ) : (
+        <AgGridLightTheme>
+          <AgGridReact {...props} />
+        </AgGridLightTheme>
+      )}
+    </div>
+  );
+};

libs/ui-toolkit/src/components/ag-grid/ag-grid-dynamic.tsx

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic';
+
+import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+
+// https://stackoverflow.com/questions/69433673/nextjs-reactdomserver-does-not-yet-support-suspense
+export const AgGridDynamic = dynamic<
+  (AgGridReactProps | AgReactUiProps) & {
+    style?: React.CSSProperties;
+    className?: string;
+  }
+>(() => import('./ag-grid-dynamic-themed').then((mod) => mod.AgGridThemed), {
+  ssr: false,
+  // https://nextjs.org/docs/messages/invalid-dynamic-suspense
+  // suspense: true
+});

libs/ui-toolkit/src/components/ag-grid/ag-grid-lazy-themed.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+import { AgGridReact } from 'ag-grid-react';
+import { ThemeContext } from '@vegaprotocol/react-helpers';
+import 'ag-grid-community/dist/styles/ag-grid.css';
+
+const AgGridLightTheme = React.lazy(() =>
+  import('./ag-grid-light').then((module) => ({
+    default: module.AgGrid,
+  }))
+);
+
+const AgGridDarkTheme = React.lazy(() =>
+  import('./ag-grid-dark').then((module) => ({
+    default: module.AgGrid,
+  }))
+);
+
+export const AgGridThemed = ({
+  style,
+  className,
+  ...props
+}: (AgGridReactProps | AgReactUiProps) & {
+  style?: React.CSSProperties;
+  className?: string;
+}) => {
+  const theme = React.useContext(ThemeContext);
+  return (
+    <div
+      className={`${className ?? ''} ${
+        theme === 'dark' ? 'ag-theme-balham-dark' : 'ag-theme-balham'
+      }`}
+      style={style}
+    >
+      {theme === 'dark' ? (
+        <AgGridDarkTheme>
+          <AgGridReact {...props} />
+        </AgGridDarkTheme>
+      ) : (
+        <AgGridLightTheme>
+          <AgGridReact {...props} />
+        </AgGridLightTheme>
+      )}
+    </div>
+  );
+};

libs/ui-toolkit/src/components/ag-grid/ag-grid-lazy.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
+
+const LazyAgGridStyled = React.lazy(() =>
+  import('./ag-grid-lazy-themed').then((module) => ({
+    default: module.AgGridThemed,
+  }))
+);
+
+export const AgGridLazy = (
+  props: (AgGridReactProps | AgReactUiProps) & { style: React.CSSProperties }
+) => <LazyAgGridStyled {...props} />;

libs/ui-toolkit/src/components/ag-grid/ag-grid-light.tsx

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import 'ag-grid-community/dist/styles/ag-theme-balham.css';
+
+export const AgGrid = (props: { children: ReactElement }) => props.children;

libs/ui-toolkit/src/components/ag-grid/index.tsx

@@ -0,0 +1,2 @@
+export * from './ag-grid-lazy';
+export * from './ag-grid-dynamic';

libs/ui-toolkit/src/components/dialog/index.tsx

@@ -12,8 +12,8 @@ export function Dialog({ children, open, setOpen, title }: DialogProps) {
   return (
     <DialogPrimitives.Root open={open} onOpenChange={(x) => setOpen(x)}>
       <DialogPrimitives.Portal>
-        <DialogPrimitives.Overlay className="fixed inset-0 bg-black dark:bg-white opacity-40 dark:opacity-15" />
-        <DialogPrimitives.Content className="fixed w-[500px] top-40 p-28 left-[calc(50%-250px)] dark:bg-black dark:text-white-60 bg-white text-black-60">
+        <DialogPrimitives.Overlay className="fixed inset-0 bg-black/40 dark:bg-white/15" />
+        <DialogPrimitives.Content className="fixed w-[500px] p-28 dark:bg-black dark:text-white-60 bg-white text-black-60 top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]">
           {title && <h1 className="text-h5 mb-12">{title}</h1>}
           {children}
         </DialogPrimitives.Content>

libs/ui-toolkit/src/components/input/input.stories.tsx

@@ -20,6 +20,16 @@ Disabled.args = {
   disabled: true,
 };
 
+export const TypeDate = Template.bind({});
+TypeDate.args = {
+  type: 'date',
+};
+
+export const TypeDateTime = Template.bind({});
+TypeDateTime.args = {
+  type: 'datetime-local',
+};
+
 export const IconPrepend: Story = () => (
   <Input value="I type words" prependIconName="search" />
 );

libs/ui-toolkit/src/index.ts

@@ -1,5 +1,6 @@
 import * as EthereumUtils from './utils/web3';
 
+export { AgGridLazy, AgGridDynamic } from './components/ag-grid';
 export { Button, AnchorButton } from './components/button';
 export { Callout } from './components/callout';
 export { EthereumUtils };

libs/wallet/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/wallet/README.md

@@ -0,0 +1,7 @@
+# wallet
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test wallet` to execute the unit tests via [Jest](https://jestjs.io).

libs/wallet/jest.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  displayName: 'storage',
+  displayName: 'wallet',
   preset: '../../jest.preset.js',
   transform: {
     '^.+\\.[tj]sx?$': 'babel-jest',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/libs/storage',
+  coverageDirectory: '../../coverage/libs/wallet',
 };

libs/wallet/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "@vegaprotocol/wallet",
+  "version": "0.0.1"
+}

libs/wallet/project.json

@@ -1,6 +1,6 @@
 {
-  "root": "libs/storage",
-  "sourceRoot": "libs/storage/src",
+  "root": "libs/wallet",
+  "sourceRoot": "libs/wallet/src",
   "projectType": "library",
   "tags": [],
   "targets": {
@@ -8,15 +8,16 @@
       "executor": "@nrwl/web:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
-        "outputPath": "dist/libs/storage",
-        "tsConfig": "libs/storage/tsconfig.lib.json",
-        "project": "libs/storage/package.json",
-        "entryFile": "libs/storage/src/index.js",
+        "outputPath": "dist/libs/wallet",
+        "tsConfig": "libs/wallet/tsconfig.lib.json",
+        "project": "libs/wallet/package.json",
+        "entryFile": "libs/wallet/src/index.ts",
+        "external": ["react/jsx-runtime"],
         "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
         "compiler": "babel",
         "assets": [
           {
-            "glob": "libs/storage/README.md",
+            "glob": "libs/wallet/README.md",
             "input": ".",
             "output": "."
           }
@@ -27,14 +28,14 @@
       "executor": "@nrwl/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
-        "lintFilePatterns": ["libs/storage/**/*.{ts,js}"]
+        "lintFilePatterns": ["libs/wallet/**/*.{ts,tsx,js,jsx}"]
       }
     },
     "test": {
       "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/libs/storage"],
+      "outputs": ["coverage/libs/wallet"],
       "options": {
-        "jestConfig": "libs/storage/jest.config.js",
+        "jestConfig": "libs/wallet/jest.config.js",
         "passWithNoTests": true
       }
     }

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

@@ -4,7 +4,7 @@ import {
   Configuration,
   OrderSubmissionBody,
 } from '@vegaprotocol/vegawallet-service-api-client';
-import { LocalStorage } from '@vegaprotocol/storage';
+import { LocalStorage } from '@vegaprotocol/react-helpers';
 import { WALLET_CONFIG } from '../storage-keys';
 import { VegaConnector } from '.';
 

libs/wallet/src/provider.test.tsx

@@ -1,11 +1,5 @@
 import '@testing-library/jest-dom';
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { RestConnector } from './connectors';
 import { useVegaWallet } from './hooks';
 import { VegaWalletProvider } from './provider';

libs/wallet/src/provider.tsx

@@ -1,4 +1,4 @@
-import { LocalStorage } from '@vegaprotocol/storage';
+import { LocalStorage } from '@vegaprotocol/react-helpers';
 import {
   ReactNode,
   useCallback,

libs/wallet/tsconfig.lib.json

@@ -16,11 +16,7 @@
     "**/*.spec.js",
     "**/*.test.js",
     "**/*.spec.jsx",
-    "**/*.test.jsx",
-    "**/*.stories.ts",
-    "**/*.stories.js",
-    "**/*.stories.jsx",
-    "**/*.stories.tsx"
+    "**/*.test.jsx"
   ],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }

package.json

@@ -22,6 +22,8 @@
     "@sentry/tracing": "^6.18.1",
     "@types/uuid": "^8.3.4",
     "@vegaprotocol/vegawallet-service-api-client": "^0.4.6",
+    "ag-grid-community": "^27.0.1",
+    "ag-grid-react": "^27.0.1",
     "apollo": "^2.33.9",
     "autoprefixer": "^10.4.2",
     "classnames": "^2.3.1",

tsconfig.base.json

@@ -16,11 +16,11 @@
     "baseUrl": ".",
     "paths": {
       "@vegaprotocol/react-helpers": ["libs/react-helpers/src/index.ts"],
-      "@vegaprotocol/storage": ["libs/storage/src/index.js"],
       "@vegaprotocol/tailwindcss-config": [
         "libs/tailwindcss-config/src/index.js"
       ],
-      "@vegaprotocol/ui-toolkit": ["libs/ui-toolkit/src/index.ts"]
+      "@vegaprotocol/ui-toolkit": ["libs/ui-toolkit/src/index.ts"],
+      "@vegaprotocol/wallet": ["libs/wallet/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]

workspace.json

@@ -4,10 +4,10 @@
     "explorer": "apps/explorer",
     "explorer-e2e": "apps/explorer-e2e",
     "react-helpers": "libs/react-helpers",
-    "storage": "libs/storage",
     "tailwindcss-config": "libs/tailwindcss-config",
     "trading": "apps/trading",
     "trading-e2e": "apps/trading-e2e",
-    "ui-toolkit": "libs/ui-toolkit"
+    "ui-toolkit": "libs/ui-toolkit",
+    "wallet": "libs/wallet"
   }
 }

yarn.lock

@@ -5589,6 +5589,18 @@ address@^1.0.1:
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
   integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
 
+ag-grid-community@^27.0.1:
+  version "27.0.1"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-27.0.1.tgz#7ce5c000d321ba2c22447837e793b1d8366f4cdb"
+  integrity sha512-wV3CLLJWet0I7lmlVjVjACVWQ1WmGYflEyc2nKK3u5CDKa9ewQGYcwZW92i+E+9rmGH6R7oaL3DFKzNWD6C56w==
+
+ag-grid-react@^27.0.1:
+  version "27.0.1"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-27.0.1.tgz#138a2f256ee1f24377268adcf3d7c4751c9896db"
+  integrity sha512-zoqhWT+ZD/l44Ij8HeUEYiI3SsdSWvuKjlnlkB51y3ASqlte2OIMNOZrFe1I23H59Ouhl+kvvQCagEzPvz0Lcg==
+  dependencies:
+    prop-types "^15.8.1"
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"