tidy styles and tailwind config

apps/trading/pages/index.page.tsx

@@ -26,6 +26,7 @@ export function Index() {
       {keypairs?.length && (
         <select
           name="change-key"
+          className="w-full px-8 py-2 border-black border"
           value={keypair ? keypair.pub : 'none'}
           onChange={(e) => selectPublicKey(e.target.value)}
         >
@@ -40,7 +41,9 @@ export function Index() {
         </select>
       ) : null}
       <h2>Public keys</h2>
-      <pre>{JSON.stringify(keypairs, null, 2)}</pre>
+      <pre className="p-12 text-sm bg-neutral-100">
+        {JSON.stringify(keypairs, null, 2)}
+      </pre>
     </div>
   );
 }

apps/trading/specs/index.spec.tsx

@@ -2,10 +2,24 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import Index from '../pages/index.page';
+import { VegaWalletContext } from '@vegaprotocol/react-helpers';
 
 describe('Index', () => {
   it('should render successfully', () => {
-    const { baseElement } = render(<Index />);
+    const { baseElement } = render(
+      <VegaWalletContext.Provider
+        value={{
+          keypair: null,
+          keypairs: null,
+          connect: jest.fn(),
+          disconnect: jest.fn(),
+          selectPublicKey: jest.fn(),
+          connector: null,
+        }}
+      >
+        <Index />
+      </VegaWalletContext.Provider>
+    );
     expect(baseElement).toBeTruthy();
   });
 });

apps/trading/tailwind.config.js

@@ -4,7 +4,8 @@ const theme = require('../../libs/tailwindcss-config/src/theme');
 
 module.exports = {
   content: [
-    join(__dirname, '{pages,components}/**/*.{js,ts,jsx,tsx}'),
+    join(__dirname, 'pages/**/*.{js,ts,jsx,tsx}'),
+    join(__dirname, 'components/**/*.{js,ts,jsx,tsx}'),
     ...createGlobPatternsForDependencies(__dirname),
   ],
   darkMode: 'class',

libs/react-helpers/src/lib/vega-wallet/connect-dialog.tsx

@@ -53,14 +53,7 @@ export function VegaConnectDialog({
           }}
         />
       ) : (
-        <div
+        <div className="flex flex-col justify-center gap-4 items-start">
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            gap: 10,
-          }}
-        >
           {Object.entries(connectors).map(([key, connector]) => (
             <button key={key} onClick={() => setSelectedConnector(connector)}>
               {key} provider

libs/react-helpers/src/lib/vega-wallet/connectors.ts

@@ -9,6 +9,7 @@ import { LocalStorage } from '@vegaprotocol/storage';
 export interface VegaConnector {
   /** Connect to wallet and return keys */
   connect(): Promise<VegaKey[] | null>;
+
   /** Disconnect from wallet */
   disconnect(): Promise<void>;
 }

libs/react-helpers/src/lib/vega-wallet/rest-connector-form.tsx

@@ -22,7 +22,7 @@ export function RestConnectorForm({
   } = useForm<FormFields>({
     // TODO: Remove default values
     defaultValues: {
-      wallet: 'test6',
+      wallet: 'test',
       passphrase: '123',
     },
   });
@@ -48,6 +48,7 @@ export function RestConnectorForm({
     <form onSubmit={handleSubmit(onSubmit)}>
       <div style={{ marginBottom: 10 }}>
         <input
+          className="w-full px-8 py-2 border-black border"
           {...register('wallet', { required: 'Required' })}
           type="text"
           placeholder="Wallet"
@@ -56,6 +57,7 @@ export function RestConnectorForm({
       </div>
       <div style={{ marginBottom: 10 }}>
         <input
+          className="w-full px-8 py-2 border-black border"
           {...register('passphrase', { required: 'Required' })}
           type="text"
           placeholder="Passphrase"

libs/storage/README.md

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

libs/storage/jest.config.js

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

libs/storage/project.json

@@ -12,7 +12,6 @@
         "tsConfig": "libs/storage/tsconfig.lib.json",
         "project": "libs/storage/package.json",
         "entryFile": "libs/storage/src/index.ts",
-        "external": ["react/jsx-runtime"],
         "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
         "compiler": "babel",
         "assets": [

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

@@ -12,7 +12,7 @@ export function Dialog({ children, open, setOpen }: DialogProps) {
     <DialogPrimitives.Root open={open} onOpenChange={(x) => setOpen(x)}>
       <DialogPrimitives.Portal>
         <DialogPrimitives.Overlay className="fixed inset-0 bg-black opacity-20" />
-        <DialogPrimitives.Content className="fixed w-[300px] w-px bg-white top-40 p-12 left-[calc(50%-150px)]">
+        <DialogPrimitives.Content className="fixed w-[300px] bg-white top-40 p-12 left-[calc(50%-150px)]">
           {children}
         </DialogPrimitives.Content>
       </DialogPrimitives.Portal>

libs/ui-toolkit/src/styles.scss

@@ -1,3 +1,3 @@
-@tailwind components;
 @tailwind base;
+@tailwind components;
 @tailwind utilities;

libs/ui-toolkit/tailwind.config.js

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