feat: use token names

src/App.less

@@ -27,7 +27,10 @@ body {
 .Banner-description {
   color: black;
   text-align: center;
-  width: 100%;
+  display: flex;
+  align-self: center;
+  align-items: center;
+  height: 100%;
 }
 
 .App-Bar {
@@ -168,7 +171,7 @@ body {
 }
 
 .ant-pro-basicLayout {
-  min-height: calc(100% - 30px);
+  min-height: calc(100% - 30px) !important;
 }
 
 .ant-table-cell {

src/components/CurrentUserBadge/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { useWallet } from "../../contexts/wallet";
-import { shortenAddress } from "../../utils/utils";
+import { formatNumber, shortenAddress } from "../../utils/utils";
 import { Identicon } from "../Identicon";
 import { useNativeAccount } from "../../contexts/accounts";
 import { LAMPORTS_PER_SOL } from "@solana/web3.js";
@@ -13,10 +13,12 @@ export const CurrentUserBadge = (props: {}) => {
     return null;
   }
 
+  // should use SOL ◎ ?
+
   return (
     <div className="wallet-wrapper">
       <span>
-        {((account?.lamports || 0) / LAMPORTS_PER_SOL).toFixed(6)} SOL
+        {formatNumber.format(((account?.lamports || 0) / LAMPORTS_PER_SOL))} SOL
       </span>
       <div className="wallet-key">
         {shortenAddress(`${wallet.publicKey}`)}

src/config/tokens.json

@@ -0,0 +1,14 @@
+[
+  {
+    "tokenSymbol": "SOL",
+    "mintAddress": "So11111111111111111111111111111111111111112",
+    "tokenName": "Solana",
+    "icon": "https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/solana/info/logo.png"
+  },
+  {
+    "tokenSymbol": "USDC",
+    "mintAddress": "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+    "tokenName": "USDC",
+    "icon": "https://raw.githubusercontent.com/trustwallet/assets/f3ffd0b9ae2165336279ce2f8db1981a55ce30f8/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
+  }
+]

src/contexts/accounts.tsx

@@ -5,7 +5,6 @@ import { AccountInfo, Connection, PublicKey } from "@solana/web3.js";
 import { programIds, WRAPPED_SOL_MINT } from "./../constants/ids";
 import { AccountLayout, u64, MintInfo, MintLayout } from "@solana/spl-token";
 import { TokenAccount } from "./../models";
-import { notify } from "./../utils/notifications";
 import { chunks } from "./../utils/utils";
 import { EventEmitter } from "./../utils/eventEmitter";
 
@@ -107,6 +106,7 @@ export const cache = {
       return query;
     }
 
+    // TODO: refactor to use multiple accounts query with flush like behavior
     query = connection.getAccountInfo(id).then((data) => {
       if (!data) {
         throw new Error("Account not found");
@@ -395,13 +395,10 @@ export function useMint(key?: string | PublicKey) {
       .query(connection, id, MintParser)
       .then(acc => setMint(acc.info as any))
       .catch((err) =>
-        notify({
-          message: err.message,
-          type: "error",
-        })
+        console.log(err)
       );
 
-    const dispose = accountEmitter.onAccount((e) => {
+    const dispose = cache.emitter.onCache((e) => {
       const event = e;
       if (event.id === id) {
         cache.query(connection, id, MintParser).then(mint => setMint(mint.info as any));
@@ -428,10 +425,7 @@ export function useAccount(pubKey?: PublicKey) {
         }
 
         const acc = await cache.query(connection, key, TokenAccountParser).catch((err) =>
-          notify({
-            message: err.message,
-            type: "error",
-          })
+          console.log(err)
         );
         if (acc) {
           setAccount(acc);
@@ -443,7 +437,7 @@ export function useAccount(pubKey?: PublicKey) {
 
     query();
 
-    const dispose = accountEmitter.onAccount((e) => {
+    const dispose = cache.emitter.onCache((e) => {
       const event = e;
       if (event.id === key) {
         query();

src/contexts/connection.tsx

@@ -10,6 +10,7 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
 import { setProgramIds } from "./../constants/ids";
 import { notify } from "./../utils/notifications";
 import { ExplorerLink } from "../components/ExplorerLink";
+import LocalTokens from '../config/tokens.json';
 
 export type ENV = "mainnet-beta" | "testnet" | "devnet" | "localnet";
 
@@ -83,8 +84,9 @@ export function ConnectionProvider({ children = undefined as any }) {
       .then((res) => {
         return res.json();
       })
+      .catch(err => [])
       .then((list: KnownToken[]) => {
-        const knownMints = list.reduce((map, item) => {
+        const knownMints = [...LocalTokens, ...list].reduce((map, item) => {
           map.set(item.mintAddress, item);
           return map;
         }, new Map<string, KnownToken>());

src/views/deposit/view/item.tsx

@@ -13,7 +13,7 @@ export const ReserveItem = (props: { reserve: LendingReserve, address: PublicKey
   const collateralBalance = useUserBalance(props.reserve.collateralMint);
 
   return <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-    <span><TokenIcon mintAddress={props.reserve.liquidityMint} />{name}</span>
+    <span style={{ display: 'flex' }}><TokenIcon mintAddress={props.reserve.liquidityMint} />{name}</span>
     <div>{formatNumber.format(tokenBalance)} {name}</div>
     <div>{formatNumber.format(collateralBalance)} {name}</div>
     <div>--</div>

src/views/home/item.tsx

@@ -6,21 +6,27 @@ import { formatNumber } from "../../utils/utils";
 import { Button, Card } from "antd";
 import { Link } from "react-router-dom";
 import { PublicKey } from "@solana/web3.js";
+import { useAccount, useMint } from "../../contexts/accounts";
 
 export const LendingReserveItem = (props: { reserve: LendingReserve, address: PublicKey }) => {
   const name = useTokenName(props.reserve.liquidityMint);
   const tokenBalance = useUserBalance(props.reserve.liquidityMint);
   const collateralBalance = useUserBalance(props.reserve.collateralMint);
 
-  return <Card>
-    <Link to={`/reserve/${props.address.toBase58()}`}>
-      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-        <span><TokenIcon mintAddress={props.reserve.liquidityMint} />{name}</span>
-        <div>{formatNumber.format(tokenBalance)} {name}</div>
-        <div>{formatNumber.format(collateralBalance)} {name}</div>
-        <div>--</div>
-      </div>
+  const collateralSupply = useAccount(props.reserve.collateralSupply);
+  const liquiditySupply = useAccount(props.reserve.liquiditySupply);
+  const liquidityMint = useMint(props.reserve.liquidityMint);
 
-    </Link>
-  </Card>;
+  console.log(liquidityMint);
+
+  return <Link to={`/reserve/${props.address.toBase58()}`}><Card>
+    <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+      <span style={{ display: 'flex' }}><TokenIcon mintAddress={props.reserve.liquidityMint} />{name}</span>
+      <div>{formatNumber.format(tokenBalance)} {name}</div>
+      <div>{formatNumber.format(collateralBalance)} {name}</div>
+      <div>--</div>
+    </div>
+
+  </Card>
+  </Link>;
 }