Skip to content

Commit

Permalink
My balances improvements (#3029)
Browse files Browse the repository at this point in the history 
* ohm balance card should display across sohm and ohm holdings

* cleanup debug

* use protocol metrics price

* update failing test

* update mocks
  • Loading branch information
@brightiron
brightiron committed Nov 22, 2023
1 parent aee1d60 commit 052aa27
Show file tree
Hide file tree
Showing 8 changed files with 50 additions and 69 deletions.
3 changes: 0 additions & 3 deletions src/views/Lending/Cooler/hooks/useGetCoolerBalance.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,7 @@ export const useGetCoolerBalance = ({ coolerAddress }: { coolerAddress?: string
try {
if (!coolerAddress) return new DecimalBigNumber("0", 18);
const contract = IERC20__factory.connect(GOHM_ADDRESSES[networks.MAINNET], provider);
console.log("beforeBalanceOf");
const balance = await contract.balanceOf(coolerAddress);
console.log("balance", balance.toString());

return new DecimalBigNumber(balance, 18);
} catch {
return new DecimalBigNumber("0", 18);
Expand Down
2 changes: 1 addition & 1 deletion src/views/MyBalances/MyCoolerLoans.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const MyCoolerLoans = ({ balance, balanceUSD }: { balance: string; balanc
const daysLeft = Math.floor((expiryDate.getTime() - currentDate.getTime()) / (1000 * 3600 * 24));
const percentComplete = ((requestDays - daysLeft) / requestDays) * 100;
return (
<Box display="flex" justifyContent="space-between" mt="18px">
<Box display="flex" justifyContent="space-between" mt="18px" key={loan.loanId}>
<Box width="50%">
<Box display="flex" gap="3px">
<Token name="gOHM" style={{ fontSize: "21px" }} />
Expand Down
76 changes: 26 additions & 50 deletions src/views/MyBalances/MyOhmBalances.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,21 @@ import { useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import { ReactComponent as WalletIcon } from "src/assets/icons/wallet.svg";
import { MigrationNotification } from "src/components/MigrationNotification";
import { isTestnet } from "src/helpers";
import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
import { nonNullable } from "src/helpers/types/nonNullable";
import {
useOhmBalance,
useSohmBalance,
useV1OhmBalance,
useV1SohmBalance,
useWsohmBalance,
} from "src/hooks/useBalance";
import { useOhmBalance, useSohmBalance, useV1OhmBalance, useV1SohmBalance } from "src/hooks/useBalance";
import { useTestableNetworks } from "src/hooks/useTestableNetworks";
import { NetworkId } from "src/networkDetails";
import { useNetwork } from "wagmi";

export const MyOhmBalances = ({ walletBalance }: { walletBalance?: DecimalBigNumber }) => {
const { chain = { id: 1 } } = useNetwork();
export const MyOhmBalances = () => {
const networks = useTestableNetworks();
const ohmBalances = useOhmBalance();
const wsohmBalances = useWsohmBalance();

const { data: v1OhmBalance = new DecimalBigNumber("0", 9) } = useV1OhmBalance()[networks.MAINNET];
const { data: v1SohmBalance = new DecimalBigNumber("0", 9) } = useV1SohmBalance()[networks.MAINNET];
const { data: sOhmBalance = new DecimalBigNumber("0", 9) } = useSohmBalance()[networks.MAINNET];
const ohmTokens = isTestnet(chain.id)
? [ohmBalances[NetworkId.TESTNET_GOERLI].data, ohmBalances[NetworkId.ARBITRUM_GOERLI].data]
: [ohmBalances[NetworkId.MAINNET].data, ohmBalances[NetworkId.ARBITRUM].data];

const wsohmTokens = [
wsohmBalances[NetworkId.MAINNET].data,
wsohmBalances[NetworkId.ARBITRUM].data,
wsohmBalances[NetworkId.AVALANCHE].data,
];

const totalOhmBalance = ohmTokens
.filter(nonNullable)
.reduce((res, bal) => res.add(bal), new DecimalBigNumber("0", 18));

const totalWsohmBalance = wsohmTokens
.filter(nonNullable)
.reduce((res, bal) => res.add(bal), new DecimalBigNumber("0", 18));

const [modalOpen, setModalOpen] = useState(false);
const dust = new DecimalBigNumber("0.000001", 9);

return (
<Box mt="18px">
<Box display="flex" gap={"3px"} alignItems="center" justifyContent="space-between">
Expand All @@ -58,24 +32,26 @@ export const MyOhmBalances = ({ walletBalance }: { walletBalance?: DecimalBigNum
<Box mt="3px">
<Divider />
</Box>
<Box display="flex" gap="3px" justifyContent="space-between" mt={"9px"}>
<Box display="flex" alignItems="center" gap="9px">
<Box>
<Token
name={"ETH"}
style={{ zIndex: 3, position: "absolute", marginLeft: "-3px", marginTop: "-3px", fontSize: "16px" }}
/>
<Token name="OHM" style={{ fontSize: "33px" }} />
{ohmBalances[networks.MAINNET].data?.gt(dust) && (
<Box display="flex" gap="3px" justifyContent="space-between" mt={"9px"}>
<Box display="flex" alignItems="center" gap="9px">
<Box>
<Token
name={"ETH"}
style={{ zIndex: 3, position: "absolute", marginLeft: "-3px", marginTop: "-3px", fontSize: "16px" }}
/>
<Token name="OHM" style={{ fontSize: "33px" }} />
</Box>
<Typography fontSize="15px" fontWeight="500" lineHeight="24px">
{Number(ohmBalances[networks.MAINNET].data?.toString()).toFixed(4) || "0.00"} OHM
</Typography>
</Box>
<Typography fontSize="15px" fontWeight="500" lineHeight="24px">
{Number(ohmBalances[networks.MAINNET].data?.toString()).toFixed(4) || "0.00"} OHM
</Typography>
<Link component={RouterLink} to="/stake">
<PrimaryButton>Wrap</PrimaryButton>
</Link>
</Box>
<Link component={RouterLink} to="/stake">
<PrimaryButton>Wrap</PrimaryButton>
</Link>
</Box>
{ohmBalances[networks.ARBITRUM].data?.gt(new DecimalBigNumber("0")) && (
)}
{ohmBalances[networks.ARBITRUM].data?.gt(dust) && (
<Box display="flex" gap="3px" justifyContent="space-between" mt={"9px"}>
<Box display="flex" alignItems="center" gap="9px">
<Box>
Expand All @@ -94,7 +70,7 @@ export const MyOhmBalances = ({ walletBalance }: { walletBalance?: DecimalBigNum
</Link>
</Box>
)}
{sOhmBalance.gt(new DecimalBigNumber("0")) && (
{sOhmBalance.gt(dust) && (
<Box display="flex" gap="3px" justifyContent="space-between" mt={"9px"}>
<Box display="flex" alignItems="center" gap="9px">
<Box>
Expand All @@ -113,7 +89,7 @@ export const MyOhmBalances = ({ walletBalance }: { walletBalance?: DecimalBigNum
</Link>
</Box>
)}
{v1OhmBalance.gt(new DecimalBigNumber("0")) && (
{v1OhmBalance.gt(dust) && (
<Box display="flex" gap="3px" justifyContent="space-between" mt={"9px"}>
<Box display="flex" alignItems="center" gap="9px">
<Box>
Expand All @@ -136,7 +112,7 @@ export const MyOhmBalances = ({ walletBalance }: { walletBalance?: DecimalBigNum
</SecondaryButton>
</Box>
)}
{v1SohmBalance.gt(new DecimalBigNumber("0")) && (
{v1SohmBalance.gt(dust) && (
<Box display="flex" gap="3px" justifyContent="space-between" mt={"9px"}>
<Box display="flex" alignItems="center" gap="9px">
<Box>
Expand Down
22 changes: 15 additions & 7 deletions src/views/MyBalances/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
useWsohmBalance,
} from "src/hooks/useBalance";
import { useCurrentIndex } from "src/hooks/useCurrentIndex";
import { useOhmPrice } from "src/hooks/usePrices";
import { useOhmPrice } from "src/hooks/useProtocolMetrics";
import { useTestableNetworks } from "src/hooks/useTestableNetworks";
import { NetworkId } from "src/networkDetails";
import { useGetClearingHouse } from "src/views/Lending/Cooler/hooks/useGetClearingHouse";
Expand All @@ -42,7 +42,7 @@ export const MyBalances: FC<OHMAssetsProps> = () => {
const { address } = useAccount();
const networks = useTestableNetworks();
const { chain = { id: 1 } } = useNetwork();
const { data: ohmPrice = 0 } = useOhmPrice();
const ohmPrice = useOhmPrice({}) || 0;
const { data: currentIndex = new DecimalBigNumber("0", 9) } = useCurrentIndex();
const { data: v1OhmBalance = new DecimalBigNumber("0", 9) } = useV1OhmBalance()[networks.MAINNET];
const { data: v1SohmBalance = new DecimalBigNumber("0", 9) } = useV1SohmBalance()[networks.MAINNET];
Expand Down Expand Up @@ -112,12 +112,11 @@ export const MyBalances: FC<OHMAssetsProps> = () => {
.filter(nonNullable)
.reduce((res, bal) => res.add(bal), new DecimalBigNumber("0", 18));

const formattedohmBalance = totalOhmBalance.toString({ decimals: 4, trim: false, format: true });
const formattedgOhmBalance = totalGohmBalance.toString({ decimals: 4, trim: false, format: true });
const gOhmPrice = ohmPrice * currentIndex.toApproxNumber();
const coolerBalance = totalCoolerBalance.toString({ decimals: 4, trim: false, format: true });

const tokenArray = [
const myOhmBalances = [
{
assetValue: totalOhmBalance.toApproxNumber() * ohmPrice,
},
Expand All @@ -130,6 +129,10 @@ export const MyBalances: FC<OHMAssetsProps> = () => {
{
assetValue: v1SohmBalance.toApproxNumber() * ohmPrice,
},
];

const tokenArray = [
...myOhmBalances,
{
assetValue: gOhmPrice * totalWsohmBalance.toApproxNumber(),
},
Expand All @@ -139,6 +142,11 @@ export const MyBalances: FC<OHMAssetsProps> = () => {
];

const walletTotalValueUSD = Object.values(tokenArray).reduce((totalValue, token) => totalValue + token.assetValue, 0);
const myOhmBalancesTotalValueUSD = Object.values(myOhmBalances).reduce(
(totalValue, token) => totalValue + token.assetValue,
0,
);

const isMobileScreen = useMediaQuery("(max-width: 513px)");
const theme = useTheme();
const { isConnected } = useAccount();
Expand Down Expand Up @@ -193,14 +201,14 @@ export const MyBalances: FC<OHMAssetsProps> = () => {
</Box>
<Box display="flex" flexDirection="column" alignItems="end" gap="3px">
<Typography fontSize="24px" fontWeight="500" lineHeight="33px">
{formattedohmBalance} OHM
{(myOhmBalancesTotalValueUSD / (ohmPrice !== 0 ? ohmPrice : 1)).toFixed(4)} OHM
</Typography>
<Typography fontSize="12px" fontWeight="450" lineHeight="12px" color={theme.colors.gray[40]}>
{formatCurrency(ohmPrice * Number(totalOhmBalance.toString()), 2)}
{formatCurrency(myOhmBalancesTotalValueUSD, 2)}
</Typography>
</Box>
</Box>
{Number(totalOhmBalance.toString()) > 0 ? <MyOhmBalances /> : <LearnAboutOhm />}
{Number(myOhmBalancesTotalValueUSD.toString()) > 0 ? <MyOhmBalances /> : <LearnAboutOhm />}
</Box>
</Box>
<Box position="relative" width={`${isMobileScreen ? "100%" : "48%"}`}>
Expand Down
4 changes: 2 additions & 2 deletions src/views/Range/__tests__/Range.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { formatCurrency } from "src/helpers";
import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
import * as Balance from "src/hooks/useBalance";
import { useContractAllowance } from "src/hooks/useContractAllowance";
import * as Prices from "src/hooks/usePrices";
import * as Prices from "src/hooks/useProtocolMetrics";
import { connectWallet, invalidAddress } from "src/testHelpers";
import { fireEvent, render, screen } from "src/testUtils";
import * as IERC20Factory from "src/typechain/factories/IERC20__factory";
Expand Down Expand Up @@ -45,7 +45,7 @@ const defaultStatesWithApproval = () => {
symbol: vi.fn().mockReturnValue("DAI"),
});
//@ts-expect-error
vi.spyOn(Prices, "useOhmPrice").mockReturnValue({ data: "18.209363085" });
vi.spyOn(Prices, "useOhmPrice").mockReturnValue("18.209363085");

//@ts-ignore
rangeOperator.mockReturnValue({
Expand Down
4 changes: 2 additions & 2 deletions src/views/Range/__tests__/RangeBondsLower.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import * as Contract from "src/constants/contracts";
import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
import * as Balance from "src/hooks/useBalance";
import { useContractAllowance } from "src/hooks/useContractAllowance";
import * as Prices from "src/hooks/usePrices";
import * as Prices from "src/hooks/useProtocolMetrics";
import { connectWallet } from "src/testHelpers";
import { fireEvent, render, screen } from "src/testUtils";
import * as BondTellerContract from "src/typechain/factories/BondTeller__factory";
Expand All @@ -26,7 +26,7 @@ const setupTest = () => {
symbol: vi.fn().mockReturnValue("DAI"),
});
//@ts-expect-error
vi.spyOn(Prices, "useOhmPrice").mockReturnValue({ data: "13.209363085" });
vi.spyOn(Prices, "useOhmPrice").mockReturnValue("13.209363085");

BondTellerContract.BondTeller__factory.connect = vi.fn().mockReturnValue({
purchase: vi.fn().mockReturnValue({
Expand Down
4 changes: 2 additions & 2 deletions src/views/Range/__tests__/RangeBondsUpper.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { formatCurrency } from "src/helpers";
import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
import * as Balance from "src/hooks/useBalance";
import { useContractAllowance } from "src/hooks/useContractAllowance";
import * as Prices from "src/hooks/usePrices";
import * as Prices from "src/hooks/useProtocolMetrics";
import { connectWallet } from "src/testHelpers";
import { fireEvent, render, screen } from "src/testUtils";
import * as BondTellerContract from "src/typechain/factories/BondTeller__factory";
Expand Down Expand Up @@ -46,7 +46,7 @@ describe("Upper Wall Active Bond Market", () => {
symbol: vi.fn().mockReturnValue("DAI"),
});
//@ts-expect-error
vi.spyOn(Prices, "useOhmPrice").mockReturnValue({ data: "13.209363085" });
vi.spyOn(Prices, "useOhmPrice").mockReturnValue("13.209363085");
//@ts-ignore
BondTellerContract.BondTeller__factory.connect = vi.fn().mockReturnValue({
purchase: vi.fn().mockReturnValue({
Expand Down
4 changes: 2 additions & 2 deletions src/views/Range/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { formatNumber, parseBigNumber } from "src/helpers";
import { DecimalBigNumber } from "src/helpers/DecimalBigNumber/DecimalBigNumber";
import { useBalance } from "src/hooks/useBalance";
import { usePathForNetwork } from "src/hooks/usePathForNetwork";
import { useOhmPrice } from "src/hooks/usePrices";
import { useOhmPrice } from "src/hooks/useProtocolMetrics";
import { useTestableNetworks } from "src/hooks/useTestableNetworks";
import { DetermineRangePrice, OperatorReserveSymbol, RangeBondMaxPayout, RangeData } from "src/views/Range/hooks";
import RangeChart from "src/views/Range/RangeChart";
Expand Down Expand Up @@ -44,7 +44,7 @@ export const Range = () => {
const { data: reserveBalance = new DecimalBigNumber("0", 18) } = useBalance(DAI_ADDRESSES)[networks.MAINNET];
const { data: ohmBalance = new DecimalBigNumber("0", 9) } = useBalance(OHM_ADDRESSES)[networks.MAINNET];

const { data: currentPrice = 0 } = useOhmPrice();
const currentPrice = useOhmPrice({}) || 0;

const maxString = sellActive ? `Max You Can Sell` : `Max You Can Buy`;

Expand Down

0 comments on commit 052aa27

Please sign in to comment.