first commit

.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

README.md

@@ -0,0 +1,13 @@
+# OpenBook v2 UI 
+
+# Install
+
+```bash
+npm install
+```
+
+# Run
+
+```bash
+npm run dev
+```

components/ActiveLink.tsx

@@ -0,0 +1,22 @@
+import { useRouter } from "next/router";
+
+function ActiveLink({ children, href }) {
+  const router = useRouter();
+
+  let className = "";
+  if (router.asPath === href)
+    className = `${className} underline underline-offset-4`;
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    router.push(href);
+  };
+
+  return (
+    <a href={href} onClick={handleClick} className={className}>
+      {children}
+    </a>
+  );
+}
+
+export default ActiveLink;

components/Button.tsx

@@ -0,0 +1,31 @@
+import { useWallet } from "@solana/wallet-adapter-react";
+import React, { ReactNode } from "react";
+
+
+export type ButtonState = "initial" | "loading" | "success" | "error";
+
+type Props = {
+  state: ButtonState;
+  onClick: () => void;
+  children: ReactNode;
+  className?: string;
+};
+export function Button({ state, onClick, children, className }: Props) {
+  const { publicKey } = useWallet();
+
+  if (!publicKey) {
+    return null;
+  }
+
+  className = `${className} underline underline-offset-4`;
+
+  return (
+    <button
+      className={className}
+      onClick={onClick}
+      disabled={state === "loading"}
+    >
+      {children}
+    </button>
+  );
+}

components/ClientWalletProvider.tsx

@@ -0,0 +1,25 @@
+import type { WalletProviderProps } from "@solana/wallet-adapter-react";
+import { WalletProvider } from "@solana/wallet-adapter-react";
+
+import { useCallback } from "react";
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+
+import "@solana/wallet-adapter-react-ui/styles.css";
+import { WalletError } from "@solana/wallet-adapter-base";
+
+export function ClientWalletProvider({
+  wallets,
+  children,
+}: WalletProviderProps): JSX.Element {
+  const onError = useCallback((error: WalletError) => {
+    console.error(error);
+  }, []);
+
+  return (
+    <WalletProvider wallets={wallets} autoConnect={true} onError={onError}>
+      <WalletModalProvider>{children}</WalletModalProvider>
+    </WalletProvider>
+  );
+}
+
+export default ClientWalletProvider;

hooks/emptyWallet.tsx

@@ -0,0 +1,28 @@
+import { Wallet } from "@coral-xyz/anchor";
+import {
+  Keypair,
+  PublicKey,
+  Transaction,
+  VersionedTransaction,
+} from "@solana/web3.js";
+
+export default class EmptyWallet implements Wallet {
+  constructor(readonly payer: Keypair) {}
+
+  async signTransaction<T extends Transaction | VersionedTransaction>(
+    tx: T
+  ): Promise<T> {
+    return tx;
+  }
+  async signAllTransactions<T extends Transaction | VersionedTransaction>(
+    txs: T[]
+  ): Promise<T[]> {
+    return txs.map((t) => {
+      return t;
+    });
+  }
+
+  get publicKey(): PublicKey {
+    return this.payer.publicKey;
+  }
+}

hooks/useOpenbookClient.tsx

@@ -0,0 +1,39 @@
+import { OpenBookV2Client } from "@openbook-dex/openbook-v2";
+import { Connection, Keypair } from "@solana/web3.js";
+import { AnchorProvider } from "@coral-xyz/anchor";
+import { WalletAdapter } from "../utils/utils";
+import { RPC } from "../utils/openbook";
+import EmptyWallet from "./emptyWallet";
+import { useProvider } from "./useProvider";
+
+export function useOpenbookClient(): OpenBookV2Client {
+  const provider = useProvider();
+
+  let client = new OpenBookV2Client(provider);
+  return client;
+}
+
+
+export function useHookConnection(): Connection {
+  const connection = new Connection(RPC);
+  return connection;
+}
+
+export function useFakeProvider(): AnchorProvider {
+  return new AnchorProvider(
+    useHookConnection(),
+    new EmptyWallet(Keypair.generate()),
+    {
+      /** disable transaction verification step */
+      skipPreflight: true,
+      /** desired commitment level */
+      commitment: "confirmed",
+      /** preflight commitment level */
+      preflightCommitment: "confirmed",
+      /** Maximum number of times for the RPC node to retry sending the transaction to the leader. */
+      maxRetries: 3,
+      /** The minimum slot that the request can be evaluated at */
+      minContextSlot: 10,
+    }
+  );
+}

hooks/useProvider.ts

@@ -0,0 +1,16 @@
+import { AnchorProvider } from "@coral-xyz/anchor";
+import { useMemo } from "react";
+import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+import { useFakeProvider } from "./useOpenbookClient";
+
+export function useProvider() {
+  const { connection } = useConnection();
+  const wallet = useWallet();
+
+  const provider = useMemo(
+    () => new AnchorProvider(connection, wallet as any, {}),
+    [connection, wallet]
+  );
+
+  return provider;
+}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  /* config options here */
+  transpilePackages: ["openbook-v2"],
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+    }
+    return config;
+  },
+}
+
+module.exports = nextConfig;