mirror of https://github.com/certusone/oyster.git
feat: use token names
This commit is contained in:
parent
856329b151
commit
682b21c9f9
|
@ -27,7 +27,10 @@ body {
|
||||||
.Banner-description {
|
.Banner-description {
|
||||||
color: black;
|
color: black;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
align-self: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.App-Bar {
|
.App-Bar {
|
||||||
|
@ -168,7 +171,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-pro-basicLayout {
|
.ant-pro-basicLayout {
|
||||||
min-height: calc(100% - 30px);
|
min-height: calc(100% - 30px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-table-cell {
|
.ant-table-cell {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useWallet } from "../../contexts/wallet";
|
import { useWallet } from "../../contexts/wallet";
|
||||||
import { shortenAddress } from "../../utils/utils";
|
import { formatNumber, shortenAddress } from "../../utils/utils";
|
||||||
import { Identicon } from "../Identicon";
|
import { Identicon } from "../Identicon";
|
||||||
import { useNativeAccount } from "../../contexts/accounts";
|
import { useNativeAccount } from "../../contexts/accounts";
|
||||||
import { LAMPORTS_PER_SOL } from "@solana/web3.js";
|
import { LAMPORTS_PER_SOL } from "@solana/web3.js";
|
||||||
|
@ -13,10 +13,12 @@ export const CurrentUserBadge = (props: {}) => {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// should use SOL ◎ ?
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="wallet-wrapper">
|
<div className="wallet-wrapper">
|
||||||
<span>
|
<span>
|
||||||
{((account?.lamports || 0) / LAMPORTS_PER_SOL).toFixed(6)} SOL
|
{formatNumber.format(((account?.lamports || 0) / LAMPORTS_PER_SOL))} SOL
|
||||||
</span>
|
</span>
|
||||||
<div className="wallet-key">
|
<div className="wallet-key">
|
||||||
{shortenAddress(`${wallet.publicKey}`)}
|
{shortenAddress(`${wallet.publicKey}`)}
|
||||||
|
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
|
@ -5,7 +5,6 @@ import { AccountInfo, Connection, PublicKey } from "@solana/web3.js";
|
||||||
import { programIds, WRAPPED_SOL_MINT } from "./../constants/ids";
|
import { programIds, WRAPPED_SOL_MINT } from "./../constants/ids";
|
||||||
import { AccountLayout, u64, MintInfo, MintLayout } from "@solana/spl-token";
|
import { AccountLayout, u64, MintInfo, MintLayout } from "@solana/spl-token";
|
||||||
import { TokenAccount } from "./../models";
|
import { TokenAccount } from "./../models";
|
||||||
import { notify } from "./../utils/notifications";
|
|
||||||
import { chunks } from "./../utils/utils";
|
import { chunks } from "./../utils/utils";
|
||||||
import { EventEmitter } from "./../utils/eventEmitter";
|
import { EventEmitter } from "./../utils/eventEmitter";
|
||||||
|
|
||||||
|
@ -107,6 +106,7 @@ export const cache = {
|
||||||
return query;
|
return query;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// TODO: refactor to use multiple accounts query with flush like behavior
|
||||||
query = connection.getAccountInfo(id).then((data) => {
|
query = connection.getAccountInfo(id).then((data) => {
|
||||||
if (!data) {
|
if (!data) {
|
||||||
throw new Error("Account not found");
|
throw new Error("Account not found");
|
||||||
|
@ -395,13 +395,10 @@ export function useMint(key?: string | PublicKey) {
|
||||||
.query(connection, id, MintParser)
|
.query(connection, id, MintParser)
|
||||||
.then(acc => setMint(acc.info as any))
|
.then(acc => setMint(acc.info as any))
|
||||||
.catch((err) =>
|
.catch((err) =>
|
||||||
notify({
|
console.log(err)
|
||||||
message: err.message,
|
|
||||||
type: "error",
|
|
||||||
})
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const dispose = accountEmitter.onAccount((e) => {
|
const dispose = cache.emitter.onCache((e) => {
|
||||||
const event = e;
|
const event = e;
|
||||||
if (event.id === id) {
|
if (event.id === id) {
|
||||||
cache.query(connection, id, MintParser).then(mint => setMint(mint.info as any));
|
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) =>
|
const acc = await cache.query(connection, key, TokenAccountParser).catch((err) =>
|
||||||
notify({
|
console.log(err)
|
||||||
message: err.message,
|
|
||||||
type: "error",
|
|
||||||
})
|
|
||||||
);
|
);
|
||||||
if (acc) {
|
if (acc) {
|
||||||
setAccount(acc);
|
setAccount(acc);
|
||||||
|
@ -443,7 +437,7 @@ export function useAccount(pubKey?: PublicKey) {
|
||||||
|
|
||||||
query();
|
query();
|
||||||
|
|
||||||
const dispose = accountEmitter.onAccount((e) => {
|
const dispose = cache.emitter.onCache((e) => {
|
||||||
const event = e;
|
const event = e;
|
||||||
if (event.id === key) {
|
if (event.id === key) {
|
||||||
query();
|
query();
|
||||||
|
|
|
@ -10,6 +10,7 @@ import React, { useContext, useEffect, useMemo, useState } from "react";
|
||||||
import { setProgramIds } from "./../constants/ids";
|
import { setProgramIds } from "./../constants/ids";
|
||||||
import { notify } from "./../utils/notifications";
|
import { notify } from "./../utils/notifications";
|
||||||
import { ExplorerLink } from "../components/ExplorerLink";
|
import { ExplorerLink } from "../components/ExplorerLink";
|
||||||
|
import LocalTokens from '../config/tokens.json';
|
||||||
|
|
||||||
export type ENV = "mainnet-beta" | "testnet" | "devnet" | "localnet";
|
export type ENV = "mainnet-beta" | "testnet" | "devnet" | "localnet";
|
||||||
|
|
||||||
|
@ -83,8 +84,9 @@ export function ConnectionProvider({ children = undefined as any }) {
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
return res.json();
|
return res.json();
|
||||||
})
|
})
|
||||||
|
.catch(err => [])
|
||||||
.then((list: KnownToken[]) => {
|
.then((list: KnownToken[]) => {
|
||||||
const knownMints = list.reduce((map, item) => {
|
const knownMints = [...LocalTokens, ...list].reduce((map, item) => {
|
||||||
map.set(item.mintAddress, item);
|
map.set(item.mintAddress, item);
|
||||||
return map;
|
return map;
|
||||||
}, new Map<string, KnownToken>());
|
}, new Map<string, KnownToken>());
|
||||||
|
|
|
@ -13,7 +13,7 @@ export const ReserveItem = (props: { reserve: LendingReserve, address: PublicKey
|
||||||
const collateralBalance = useUserBalance(props.reserve.collateralMint);
|
const collateralBalance = useUserBalance(props.reserve.collateralMint);
|
||||||
|
|
||||||
return <div style={{ display: 'flex', justifyContent: 'space-around' }}>
|
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(tokenBalance)} {name}</div>
|
||||||
<div>{formatNumber.format(collateralBalance)} {name}</div>
|
<div>{formatNumber.format(collateralBalance)} {name}</div>
|
||||||
<div>--</div>
|
<div>--</div>
|
||||||
|
|
|
@ -6,21 +6,27 @@ import { formatNumber } from "../../utils/utils";
|
||||||
import { Button, Card } from "antd";
|
import { Button, Card } from "antd";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { PublicKey } from "@solana/web3.js";
|
import { PublicKey } from "@solana/web3.js";
|
||||||
|
import { useAccount, useMint } from "../../contexts/accounts";
|
||||||
|
|
||||||
export const LendingReserveItem = (props: { reserve: LendingReserve, address: PublicKey }) => {
|
export const LendingReserveItem = (props: { reserve: LendingReserve, address: PublicKey }) => {
|
||||||
const name = useTokenName(props.reserve.liquidityMint);
|
const name = useTokenName(props.reserve.liquidityMint);
|
||||||
const tokenBalance = useUserBalance(props.reserve.liquidityMint);
|
const tokenBalance = useUserBalance(props.reserve.liquidityMint);
|
||||||
const collateralBalance = useUserBalance(props.reserve.collateralMint);
|
const collateralBalance = useUserBalance(props.reserve.collateralMint);
|
||||||
|
|
||||||
return <Card>
|
const collateralSupply = useAccount(props.reserve.collateralSupply);
|
||||||
<Link to={`/reserve/${props.address.toBase58()}`}>
|
const liquiditySupply = useAccount(props.reserve.liquiditySupply);
|
||||||
|
const liquidityMint = useMint(props.reserve.liquidityMint);
|
||||||
|
|
||||||
|
console.log(liquidityMint);
|
||||||
|
|
||||||
|
return <Link to={`/reserve/${props.address.toBase58()}`}><Card>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-around' }}>
|
<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(tokenBalance)} {name}</div>
|
||||||
<div>{formatNumber.format(collateralBalance)} {name}</div>
|
<div>{formatNumber.format(collateralBalance)} {name}</div>
|
||||||
<div>--</div>
|
<div>--</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</Link>
|
</Card>
|
||||||
</Card>;
|
</Link>;
|
||||||
}
|
}
|
Loading…
Reference in New Issue