Fix unnecessary open orders rendering

package.json

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

src/swap/components/OpenOrdersDialog.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { PublicKey } from "@solana/web3.js";
 import { MintInfo } from "@solana/spl-token";
 import { BN } from "@project-serum/anchor";
@@ -83,6 +83,12 @@ export default function OpenOrdersDialog({
 function OpenOrdersAccounts() {
   const styles = useStyles();
   const openOrders = useOpenOrders();
+  const openOrdersEntries: Array<[PublicKey, OpenOrders[]]> = useMemo(() => {
+    return Array.from(openOrders.entries()).map(([market, oo]) => [
+      new PublicKey(market),
+      oo,
+    ]);
+  }, [openOrders]);
   return (
     <TableContainer component={Paper} elevation={0}>
       <Table className={styles.table} aria-label="simple table">
@@ -99,11 +105,11 @@ function OpenOrdersAccounts() {
           </TableRow>
         </TableHead>
         <TableBody>
-          {Array.from(openOrders.entries()).map(([market, oos]) => {
+          {openOrdersEntries.map(([market, oos]) => {
             return (
               <OpenOrdersRow
-                key={market}
-                market={new PublicKey(market)}
+                key={market.toString()}
+                market={market}
                 openOrders={oos}
               />
             );

src/swap/context/Token.tsx

@@ -3,6 +3,11 @@ import { PublicKey } from "@solana/web3.js";
 import { AccountInfo as TokenAccount } from "@solana/spl-token";
 import { getOwnedTokenAccounts } from "../utils/tokens";
 
+export type TokenContext = {
+  ownedTokenAccounts:
+    | { publicKey: PublicKey; account: TokenAccount }[]
+    | undefined;
+};
 const _TokenContext = React.createContext<TokenContext | null>(null);
 
 export function TokenContextProvider(props: any) {
@@ -31,12 +36,6 @@ export function TokenContextProvider(props: any) {
   );
 }
 
-export type TokenContext = {
-  ownedTokenAccounts:
-    | { publicKey: PublicKey; account: TokenAccount }[]
-    | undefined;
-};
-
 // Null => none exists.
 // Undefined => loading.
 export function useOwnedTokenAccount(