show prices in token box

components/MangoAccount.tsx

@@ -19,6 +19,7 @@ const MangoAccount = () => {
           <thead>
             <tr>
               <th className="pr-12 text-left text-sm">Asset</th>
+              <th className="pr-12 text-left text-sm">Price</th>
               <th className="pr-12 text-left text-sm">Deposits/Lend</th>
               <th className="pr-12 text-left text-sm">Borrows</th>
               <th className="pr-12 text-left text-sm">Balance</th>
@@ -43,6 +44,9 @@ const MangoAccount = () => {
                       </div>
                     </div>
                   </td>
+                  <td className="pr-12 pt-4 text-right">
+                    <div className="">${bank.value.price?.toFixed(2)}</div>
+                  </td>
                   <td className="pr-12 pt-4">
                     <div className="flex flex-col">
                       <div>{bank.value.uiDeposits().toFixed(6)}</div>

components/shared/Button.tsx

@@ -19,7 +19,7 @@ const Button: FunctionComponent<ButtonProps> = ({
     <button
       onClick={onClick}
       disabled={disabled}
-      className={`whitespace-nowrap rounded-full bg-mango-500 px-6 py-2 font-bold text-mango-200 hover:brightness-[1.1] focus:outline-none 
+      className={`whitespace-nowrap rounded-full bg-mango-500 px-8 py-2 font-bold text-mango-200 hover:brightness-[1.1] focus:outline-none 
       disabled:cursor-not-allowed disabled:hover:brightness-100 ${className}`}
       {...props}
     >

store/state.ts

@@ -29,6 +29,7 @@ const provider = new AnchorProvider(
 )
 
 export type MangoStore = {
+  connection: Connection
   group: Group | undefined
   client: MangoClient
   mangoAccount: MangoAccount | undefined
@@ -47,6 +48,7 @@ export type MangoStore = {
 const mangoStore = create<MangoStore>(
   subscribeWithSelector((set, get) => {
     return {
+      connection,
       group: undefined,
       client: MangoClient.connect(
         provider,
@@ -64,15 +66,15 @@ const mangoStore = create<MangoStore>(
             const set = get().set
             const client = get().client
             const group = await client.getGroup(DEVNET_GROUP)
-            // const markets = await client.serum3GetMarket(
-            //   group,
-            //   group.banksMap.get('BTC')?.tokenIndex,
-            //   group.banksMap.get('USDC')?.tokenIndex
-            // )
+            const markets = await client.serum3GetMarkets(
+              group,
+              group.banksMap.get('BTC')?.tokenIndex,
+              group.banksMap.get('USDC')?.tokenIndex
+            )
 
             set((state) => {
               state.group = group
-              // state.markets = markets
+              state.markets = markets
             })
           } catch (e) {
             console.error('Error fetching group', e)