Remove open orders accounts from context on close (#31)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@project-serum/swap-ui",
-  "version": "0.1.0-alpha.22",
+  "version": "0.1.0-alpha.24",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/project-serum/swap-ui",

src/components/OpenOrdersDialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useEffect } from "react";
 import { PublicKey } from "@solana/web3.js";
 import { MintInfo } from "@solana/spl-token";
 import { BN } from "@project-serum/anchor";
@@ -41,8 +41,6 @@ export default function OpenOrdersDialog({
   open: boolean;
   onClose: () => void;
 }) {
-  const styles = useStyles();
-
   return (
     <Dialog
       maxWidth="lg"
@@ -124,9 +122,11 @@ function OpenOrdersRow({
   openOrders: Array<OpenOrders>;
 }) {
   const styles = useStyles();
-
   const [ooAccount, setOoAccount] = useState(openOrders[0]);
-  const { swapClient } = useDexContext();
+  useEffect(() => {
+    setOoAccount(openOrders[0]);
+  }, [openOrders]);
+  const { swapClient, closeOpenOrders } = useDexContext();
   const marketClient = useMarket(market);
   const tokenMap = useTokenMap();
   const base = useMint(marketClient?.baseMintAddress);
@@ -170,7 +170,7 @@ function OpenOrdersRow({
     await swapClient.program.provider.send(transaction, signers);
   };
 
-  const closeOpenOrders = async () => {
+  const _closeOpenOrders = async () => {
     await swapClient.program.rpc.closeAccount({
       accounts: {
         openOrders: ooAccount.address,
@@ -180,6 +180,7 @@ function OpenOrdersRow({
         dexProgram: DEX_PID,
       },
     });
+    closeOpenOrders(ooAccount);
   };
 
   return (
@@ -241,7 +242,7 @@ function OpenOrdersRow({
       <TableCell align="center">
         <Button
           disabled={closeDisabled}
-          onClick={closeOpenOrders}
+          onClick={_closeOpenOrders}
           className={styles.closeAccount}
         >
           Close

src/context/Dex.tsx

@@ -29,6 +29,7 @@ export const BASE_TAKER_FEE_BPS = 0.0022;
 type DexContext = {
   // Maps market address to open orders accounts.
   openOrders: Map<string, Array<OpenOrders>>;
+  closeOpenOrders: (openOrder: OpenOrders) => void;
   swapClient: SwapClient;
 };
 const _DexContext = React.createContext<DexContext | null>(null);
@@ -39,6 +40,20 @@ export function DexContextProvider(props: any) {
   );
   const swapClient = props.swapClient;
 
+  // Removes the given open orders from the context.
+  const closeOpenOrders = async (openOrder: OpenOrders) => {
+    const newOoAccounts = new Map(ooAccounts);
+    const openOrders = newOoAccounts
+      .get(openOrder.market.toString())
+      ?.filter((oo: OpenOrders) => !oo.address.equals(openOrder.address));
+    if (openOrders && openOrders.length > 0) {
+      newOoAccounts.set(openOrder.market.toString(), openOrders);
+    } else {
+      newOoAccounts.delete(openOrder.market.toString());
+    }
+    setOoAccounts(newOoAccounts);
+  };
+
   // Three operations:
   //
   // 1. Fetch all open orders accounts for the connected wallet.
@@ -129,6 +144,7 @@ export function DexContextProvider(props: any) {
     <_DexContext.Provider
       value={{
         openOrders: ooAccounts,
+        closeOpenOrders,
         swapClient,
       }}
     >