fix vega connect button alignment

apps/trading/pages/_app.page.tsx

@@ -57,8 +57,10 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
         <div className="h-full dark:bg-black dark:text-white-60 bg-white text-black-60">
           <div className="flex items-center border-b-[7px] border-vega-yellow">
             <Navbar />
+            <div className="flex items-center ml-auto mr-8">
               <VegaWalletButton setConnectDialog={setConnectDialog} />
-            <ThemeSwitcher onToggle={setTheme} className="ml-auto mr-8 -my-2" />
+              <ThemeSwitcher onToggle={setTheme} />
+            </div>
           </div>
           <main>
             <Component {...pageProps} />
@@ -92,7 +94,7 @@ const VegaWalletButton = ({ setConnectDialog }: VegaWalletButtonProps) => {
   };
 
   return (
-    <button onClick={handleClick} className="inline-block p-8">
+    <button onClick={handleClick} className="ml-auto inline-block p-8">
       {isConnected ? 'Disconnect' : 'Connect Vega wallet'}
     </button>
   );

apps/trading/pages/index.page.tsx

@@ -1,10 +1,8 @@
 import { Callout, Button } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/react-helpers';
-import { useEffect, useMemo, useState } from 'react';
-import { Connectors } from '../lib/connectors';
 
 export function Index() {
-  const { keypair, keypairs, selectPublicKey } = useVegaWallet();
+  const { keypair, keypairs, selectPublicKey, sendTx } = useVegaWallet();
 
   return (
     <div className="m-24">
@@ -40,10 +38,6 @@ export function Index() {
           ))}
         </select>
       ) : null}
-      <h2>Public keys</h2>
-      <pre className="p-12 text-sm bg-neutral-100">
-        {JSON.stringify(keypairs, null, 2)}
-      </pre>
     </div>
   );
 }

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

@@ -1,4 +1,8 @@
-import { VegaKey } from '@vegaprotocol/vegawallet-service-api-client';
+import {
+  VegaKey,
+  TransactionResponse,
+  OrderSubmissionBody,
+} from '@vegaprotocol/vegawallet-service-api-client';
 export { RestConnector } from './rest-connector';
 
 export interface VegaConnector {
@@ -10,4 +14,7 @@ export interface VegaConnector {
 
   /** Disconnect from wallet */
   disconnect(): Promise<void>;
+
+  /** Send a TX to the network. Only support order submission for now */
+  sendTx: (body: OrderSubmissionBody) => Promise<TransactionResponse | null>;
 }

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

@@ -21,4 +21,8 @@ export class InjectedConnector implements VegaConnector {
   async disconnect() {
     return;
   }
+
+  sendTx() {
+    return Promise.resolve(null);
+  }
 }

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

@@ -2,6 +2,7 @@ import {
   DefaultApi,
   createConfiguration,
   Configuration,
+  OrderSubmissionBody,
 } from '@vegaprotocol/vegawallet-service-api-client';
 import { LocalStorage } from '@vegaprotocol/storage';
 import { WALLET_CONFIG } from '../storage-keys';
@@ -84,6 +85,10 @@ export class RestConnector implements VegaConnector {
     }
   }
 
+  async sendTx(body: OrderSubmissionBody) {
+    return await this.service.commandSyncPost(body);
+  }
+
   private setConfig(cfg: RestConnectorConfig) {
     LocalStorage.setItem(this.configKey, JSON.stringify(cfg));
   }

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

@@ -1,4 +1,8 @@
-import { VegaKey } from '@vegaprotocol/vegawallet-service-api-client';
+import {
+  VegaKey,
+  OrderSubmissionBody,
+  TransactionResponse,
+} from '@vegaprotocol/vegawallet-service-api-client';
 import { createContext } from 'react';
 import { VegaConnector } from './connectors';
 
@@ -24,6 +28,9 @@ export interface VegaWalletContextShape {
 
   /** Reference to the connector */
   connector: VegaConnector | null;
+
+  /** Send a transaction to the network, only order submissions for now */
+  sendTx: (body: OrderSubmissionBody) => Promise<TransactionResponse | null>;
 }
 
 export const VegaWalletContext = createContext<

libs/react-helpers/src/lib/vega-wallet/provider.tsx

@@ -11,6 +11,7 @@ import { VegaKeyExtended, VegaWalletContextShape } from '.';
 import { VegaConnector } from './connectors';
 import { VegaWalletContext } from './context';
 import { WALLET_KEY } from './storage-keys';
+import { OrderSubmissionBody } from '@vegaprotocol/vegawallet-service-api-client';
 
 interface VegaWalletProviderProps {
   children: ReactNode;
@@ -65,6 +66,19 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
     }
   }, []);
 
+  const sendTx = useCallback(async (body: OrderSubmissionBody) => {
+    if (!connector.current) {
+      return null;
+    }
+
+    try {
+      return connector.current.sendTx(body);
+    } catch (err) {
+      console.error(err);
+      return null;
+    }
+  }, []);
+
   // Current selected keypair derived from publicKey state
   const keypair = useMemo(() => {
     const found = keypairs?.find((x) => x.pub === publicKey);
@@ -91,8 +105,9 @@ export const VegaWalletProvider = ({ children }: VegaWalletProviderProps) => {
       connect,
       disconnect,
       connector: connector.current,
+      sendTx,
     };
-  }, [keypair, keypairs, setPublicKey, connect, disconnect, connector]);
+  }, [keypair, keypairs, setPublicKey, connect, disconnect, connector, sendTx]);
 
   return (
     <VegaWalletContext.Provider value={contextValue}>

package.json

@@ -16,15 +16,15 @@
     "@apollo/client": "^3.5.8",
     "@blueprintjs/icons": "^3.32.0",
     "@nrwl/next": "13.8.1",
+    "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-tabs": "^0.1.5",
     "@sentry/react": "^6.18.1",
     "@sentry/tracing": "^6.18.1",
     "@types/uuid": "^8.3.4",
+    "@vegaprotocol/vegawallet-service-api-client": "^0.4.6",
     "apollo": "^2.33.9",
     "autoprefixer": "^10.4.2",
     "classnames": "^2.3.1",
-    "@radix-ui/react-dialog": "^0.1.5",
-    "@vegaprotocol/vegawallet-service-api-client": "^0.4.1",
     "core-js": "^3.6.5",
     "env-cmd": "^10.1.0",
     "graphql": "^15.7.2",
@@ -34,10 +34,10 @@
     "postcss": "^8.4.6",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-hook-form": "^7.27.0",
     "react-syntax-highlighter": "^15.4.5",
     "react-use-websocket": "^3.0.0",
     "react-virtualized-auto-sizer": "^1.0.6",
-    "react-hook-form": "^7.27.0",
     "regenerator-runtime": "0.13.7",
     "tailwindcss": "^3.0.23",
     "tslib": "^2.0.0",

yarn.lock

@@ -5189,10 +5189,10 @@
     "@typescript-eslint/types" "5.14.0"
     eslint-visitor-keys "^3.0.0"
 
-"@vegaprotocol/vegawallet-service-api-client@^0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@vegaprotocol/vegawallet-service-api-client/-/vegawallet-service-api-client-0.4.1.tgz#182a15ad49652d33a6db2eb55fa934bc71855cc4"
-  integrity sha512-c8TtLZTcGg2wQs30hyyTGNMH02cg8KcLymegWVxSQ9Id3M4SrdUVOlPoaGpKxjmUVUtQLoY/0+wtAJQVZBErmw==
+"@vegaprotocol/vegawallet-service-api-client@^0.4.6":
+  version "0.4.6"
+  resolved "https://registry.yarnpkg.com/@vegaprotocol/vegawallet-service-api-client/-/vegawallet-service-api-client-0.4.6.tgz#476d3dc5b91ed79f739b672e7260a4d88210f93a"
+  integrity sha512-8sIbyyoDgLiV2BNT9ErOPcTUIBEiI4XmT07M3bAqx8IxH4Vc9W45b4lCrKa5gQTG1/STt4/IpWV64LUdrI8C4w==
   dependencies:
     es6-promise "^4.2.4"
     url-parse "^1.4.3"