features/usdc-mainnet (#7)

* handle usdc denom for mainnet

* fix

* update mainnet usdc denom

deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx

@@ -5,7 +5,7 @@ import { useSnackbar } from "notistack";
 import compareAsc from "date-fns/compareAsc";
 import { coinToUAkt, uaktToAKT } from "@src/utils/priceUtils";
 import { Snackbar } from "../shared/Snackbar";
-import { uAktDenom, usdcIbcDenom } from "@src/utils/constants";
+import { uAktDenom } from "@src/utils/constants";
 import { Alert, Box, Checkbox, FormControl, FormControlLabel, InputAdornment, MenuItem, Select, TextField } from "@mui/material";
 import { useKeplr } from "@src/context/KeplrWalletProvider";
 import { LinkTo } from "../shared/LinkTo";
@@ -18,6 +18,7 @@ import { useGranteeGrants } from "@src/queries/useGrantsQuery";
 import { denomToUdenom, udenomToDenom } from "@src/utils/mathHelpers";
 import { Popup } from "../shared/Popup";
 import { useDenomData } from "@src/hooks/useWalletBalance";
+import { useUsdcDenom } from "@src/hooks/useDenom";
 
 type Props = {
   infoText?: string | ReactNode;
@@ -53,6 +54,7 @@ export const DeploymentDepositModal: React.FunctionComponent<Props> = ({ handleC
   });
   const { amount, useDepositor, depositorAddress } = watch();
   const depositData = useDenomData(denom);
+  const usdcIbcDenom = useUsdcDenom();
 
   useEffect(() => {
     clearErrors();

deploy-web/src/components/home/YourAccount.tsx

@@ -21,7 +21,8 @@ import { RpcProvider } from "@src/types/provider";
 import { useAtom } from "jotai";
 import sdlStore from "@src/store/sdlStore";
 import { usePricing } from "@src/context/PricingProvider";
-import { uAktDenom, usdcIbcDenom } from "@src/utils/constants";
+import { uAktDenom } from "@src/utils/constants";
+import { useUsdcDenom } from "@src/hooks/useDenom";
 
 const useStyles = makeStyles()(theme => ({
   legendRow: {
@@ -66,6 +67,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
   const theme = useTheme();
   const router = useRouter();
   const { address } = useKeplr();
+  const usdcIbcDenom = useUsdcDenom();
   const [selectedDataId, setSelectedDataId] = useState(null);
   const [costPerMonth, setCostPerMonth] = useState(null);
   const [userProviders, setUserProviders] = useState(null);

deploy-web/src/context/KeplrWalletProvider/KeplrWalletProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { useState, useEffect } from "react";
 import { SigningStargateClient } from "@cosmjs/stargate";
-import { mainnetId, selectedNetworkId, testnetId, uAktDenom, usdcIbcDenom } from "@src/utils/constants";
+import { mainnetId, selectedNetworkId, testnetId, uAktDenom } from "@src/utils/constants";
 import { TxRaw } from "cosmjs-types/cosmos/tx/v1beta1/tx";
 import { EncodeObject } from "@cosmjs/proto-signing";
 import { useSnackbar } from "notistack";
@@ -18,6 +18,7 @@ import { useSettings } from "../SettingsProvider";
 import axios from "axios";
 import { getSelectedNetwork } from "@src/utils/networks";
 import { LinkTo } from "@src/components/shared/LinkTo";
+import { useUsdcDenom } from "@src/hooks/useDenom";
 
 type Balances = {
   uakt: number;
@@ -65,6 +66,7 @@ export const KeplrWalletProvider = ({ children }) => {
   const sigingClient = useRef<SigningStargateClient>(null);
   const router = useRouter();
   const { settings, isSettingsInit } = useSettings();
+  const usdcIbcDenom = useUsdcDenom();
 
   useEffect(() => {
     console.log("useKeplr on mount");

deploy-web/src/context/PricingProvider/PricingProvider.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { roundDecimal } from "@src/utils/mathHelpers";
 import { useMarketData } from "@src/queries";
-import { uAktDenom, usdcIbcDenom } from "@src/utils/constants";
+import { uAktDenom } from "@src/utils/constants";
+import { useUsdcDenom } from "@src/hooks/useDenom";
 
 type ContextType = {
   isLoaded: boolean;
@@ -23,6 +24,7 @@ const PricingProviderContext = React.createContext<ContextType>({
 
 export const PricingProvider = ({ children }) => {
   const { data: marketData, isLoading } = useMarketData({ refetchInterval: 60_000 });
+  const usdcIbcDenom = useUsdcDenom();
 
   function uaktToUSD(amount: number) {
     if (!marketData) return null;

deploy-web/src/hooks/useDenom.ts

@@ -0,0 +1,12 @@
+import { usdcIbcDenoms } from "@src/utils/constants";
+import { getSelectedNetwork, useSelectedNetwork } from "@src/utils/networks";
+
+export const useUsdcDenom = () => {
+  const selectedNetwork = useSelectedNetwork();
+  return usdcIbcDenoms[selectedNetwork.id];
+};
+
+export const getUsdcDenom = () => {
+  const selectedNetwork = getSelectedNetwork();
+  return usdcIbcDenoms[selectedNetwork.id];
+};

deploy-web/src/hooks/useWalletBalance.ts

@@ -1,9 +1,10 @@
 import { useKeplr } from "@src/context/KeplrWalletProvider";
 import { usePricing } from "@src/context/PricingProvider";
-import { txFeeBuffer, uAktDenom, usdcIbcDenom } from "@src/utils/constants";
+import { txFeeBuffer, uAktDenom } from "@src/utils/constants";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { uaktToAKT } from "@src/utils/priceUtils";
 import { useEffect, useState } from "react";
+import { useUsdcDenom } from "./useDenom";
 
 export const useTotalWalletBalance = () => {
   const { isLoaded, price } = usePricing();
@@ -32,6 +33,7 @@ export const useDenomData = (denom: string) => {
   const { isLoaded, price } = usePricing();
   const { walletBalances } = useKeplr();
   const [depositData, setDepositData] = useState<DenomData>(null);
+  const usdcIbcDenom = useUsdcDenom();
 
   useEffect(() => {
     if (isLoaded && walletBalances) {

deploy-web/src/queries/useBalancesQuery.ts

@@ -4,18 +4,20 @@ import axios from "axios";
 import { useSettings } from "../context/SettingsProvider";
 import { ApiUrlService } from "@src/utils/apiUtils";
 import { Balances } from "@src/types";
-import { uAktDenom, usdcIbcDenom } from "@src/utils/constants";
+import { uAktDenom } from "@src/utils/constants";
 import {
   RestApiBalancesResponseType,
   RestApiDelegationsType,
   RestApiRedelegationsResponseType,
   RestApiRewardsResponseType,
   RestApiUnbondingsResponseType
 } from "@src/types/balances";
+import { getUsdcDenom } from "@src/hooks/useDenom";
 
 // Account balances
 async function getBalances(apiEndpoint: string, address: string): Promise<Balances> {
   if (!address) return {} as Balances;
+  const usdcIbcDenom = getUsdcDenom();
 
   const balancePromise = axios.get<RestApiBalancesResponseType>(ApiUrlService.balance(apiEndpoint, address));
   const rewardsPromise = axios.get<RestApiRewardsResponseType>(ApiUrlService.rewards(apiEndpoint, address));

deploy-web/src/utils/constants.ts

@@ -1,5 +1,9 @@
 import { ApiUrlService } from "./apiUtils";
 
+export const mainnetId = "mainnet";
+export const testnetId = "testnet";
+export const sandboxId = "sandbox";
+
 export enum SelectedRange {
   "7D" = 7,
   "1M" = 30,
@@ -34,9 +38,10 @@ export const PROVIDER_PROXY_URL_WS = getProviderProxyWsUrl();
 export const auth0TokenNamespace = "https://cloudmos.io";
 
 export const uAktDenom = "uakt";
-// TODO Handle denom for mainnet/testnet/sandbox
-export const usdcIbcDenom = "ibc/12C6A0C374171B595A0A9E18B83FA09D295FB1F2D8C6DAA3AC28683471752D84";
-export const mainnetUsdcIdbDenom = "ibc/F8D2BEE806C3F969B256416B37FF6E7E0B927F372993114B8E0B9E57DC8CD327";
+export const usdcIbcDenoms = {
+  [mainnetId]: "ibc/170C677610AC31DF0904FFE09CD3B5C657492170E7E52372E48756B71E56F2F1",
+  [sandboxId]: "ibc/12C6A0C374171B595A0A9E18B83FA09D295FB1F2D8C6DAA3AC28683471752D84"
+};
 
 // Cloudmos fee
 export const feePercent = 3;
@@ -98,10 +103,6 @@ export const sandboxNodes = ApiUrlService.sandboxNodes();
 
 // export const cloudmosApi = "https://api.cloudmos.io/api";
 
-export const mainnetId = "mainnet";
-export const testnetId = "testnet";
-export const sandboxId = "sandbox";
-
 export let selectedNetworkId = "";
 
 // 5AKT aka 5000000uakt