feat: osmosis graphql

CHANGELOG.md

@@ -56,6 +56,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#281](https://github.com/alleslabs/celatone-frontend/pull/281) Change Osmosis mainnet GraphQL
 - [#251](https://github.com/alleslabs/celatone-frontend/pull/251) Refactor Code and Contract tables into general components
 - [#252](https://github.com/alleslabs/celatone-frontend/pull/252) Refactor Empty State image source logic
 - [#249](https://github.com/alleslabs/celatone-frontend/pull/249) Change code table format in select code draw and add CW2 info

src/lib/app-provider/query-client/index.ts

@@ -4,7 +4,7 @@ export const GRAPH_URL: Record<string, string> = {
   /**
    * Revisit graphql for terra2 mainnet and osmosis mainnet
    */
-  osmosis: "https://osmosis-mainnet-graphql.alleslabs.dev/v1/graphql",
+  osmosis: "https://osmosis-mainnet-graphql2.alleslabs.dev/v1/graphql",
   osmosistestnet: "https://osmosis-testnet-graphql2.alleslabs.dev/v1/graphql",
   terra2testnet: "https://terra-testnet-graphql.alleslabs.dev/v1/graphql",
 };

src/lib/pages/account-details/components/delegations/DelegationsBody.tsx

@@ -3,9 +3,8 @@ import { useState } from "react";
 
 import { DelegationsTable, UnbondingsTable } from "../tables";
 import type { Delegation, Unbonding } from "lib/pages/account-details/data";
-import type { TokenWithValue } from "lib/pages/account-details/type";
 import { AmpTrackUseRadio } from "lib/services/amplitude";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 
 import { RadioCard } from "./RadioCard";
 

src/lib/pages/account-details/components/delegations/RadioCard.tsx

@@ -1,7 +1,6 @@
 import { Flex, Radio, Text, Heading, Spinner } from "@chakra-ui/react";
 
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 import {
   formatPrice,
   formatUTokenWithPrecision,
@@ -37,7 +36,7 @@ export const RadioCard = ({
                 {formatUTokenWithPrecision(token.amount, token.precision || 0)}
               </Heading>
               <Text variant="body2" textColor="text.main">
-                {getTokenLabel(token.denom)}
+                {token.symbol ?? getTokenLabel(token.denom)}
               </Text>
             </Flex>
           )}

src/lib/pages/account-details/components/delegations/TotalCard.tsx

@@ -2,8 +2,7 @@ import { InfoIcon } from "@chakra-ui/icons";
 import { Flex, Heading, Image, Spinner, Text, Tooltip } from "@chakra-ui/react";
 
 import { NAToken } from "lib/icon";
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 import {
   formatPrice,
   formatUTokenWithPrecision,
@@ -51,12 +50,12 @@ export const TotalCard = ({
               {formatUTokenWithPrecision(token.amount, token.precision || 0)}
             </Heading>
             <Text variant="body1" textColor="text.main">
-              {getTokenLabel(token.denom)}
+              {token.symbol ?? getTokenLabel(token.denom)}
             </Text>
             <Image
               boxSize={6}
               src={token.logo}
-              alt={getTokenLabel(token.denom)}
+              alt={token.symbol ?? getTokenLabel(token.denom)}
               fallback={<NAToken />}
               fallbackStrategy="onError"
             />

src/lib/pages/account-details/components/delegations/index.tsx

@@ -6,9 +6,15 @@ import { CustomIcon } from "lib/components/icon";
 import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { useUserDelegationInfos } from "lib/pages/account-details/data";
-import type { TokenWithValue } from "lib/pages/account-details/type";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
-import type { HumanAddr, Option, Token, U, USD } from "lib/types";
+import type {
+  HumanAddr,
+  Option,
+  Token,
+  TokenWithValue,
+  U,
+  USD,
+} from "lib/types";
 import { getTokenLabel } from "lib/utils";
 
 import { DelegationsBody } from "./DelegationsBody";
@@ -62,6 +68,7 @@ export const DelegationsSection = ({
   const defaultToken: TokenWithValue = {
     denom: stakingParams.bondDenom,
     amount: big(0) as U<Token<Big>>,
+    symbol: stakingParams.symbol,
     logo: stakingParams.logo,
     precision: stakingParams.precision,
     value: stakingParams.logo ? (big(0) as USD<Big>) : undefined,

src/lib/pages/account-details/components/tables/TokenCell.tsx

@@ -1,7 +1,7 @@
 import { Flex, Image, Text } from "@chakra-ui/react";
 
 import { NAToken } from "lib/icon";
-import type { TokenWithValue } from "lib/pages/account-details/type";
+import type { TokenWithValue } from "lib/types";
 import {
   formatPrice,
   formatUTokenWithPrecision,
@@ -17,7 +17,7 @@ export const TokenCell = ({ token }: TokenCellProps) => (
     <Image
       boxSize={6}
       src={token.logo}
-      alt={getTokenLabel(token.denom)}
+      alt={token.symbol ?? getTokenLabel(token.denom)}
       fallback={<NAToken />}
       fallbackStrategy="onError"
     />
@@ -26,7 +26,9 @@ export const TokenCell = ({ token }: TokenCellProps) => (
         <Text variant="body2" fontWeight="700">
           {formatUTokenWithPrecision(token.amount, token.precision || 0)}
         </Text>
-        <Text variant="body2">{getTokenLabel(token.denom)}</Text>
+        <Text variant="body2">
+          {token.symbol ?? getTokenLabel(token.denom)}
+        </Text>
       </Flex>
       <Text variant="body3" textColor="text.dark">
         ({token.value ? formatPrice(token.value) : "-"})

src/lib/pages/account-details/components/tables/bonded/BondedTableRow.tsx

@@ -3,8 +3,7 @@ import { Flex, Grid, Text } from "@chakra-ui/react";
 import { TokenCell } from "../TokenCell";
 import { TableRow } from "lib/components/table";
 import { ValidatorBadge } from "lib/components/ValidatorBadge";
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { ValidatorInfo } from "lib/types";
+import type { TokenWithValue, ValidatorInfo } from "lib/types";
 import { dateFromNow, formatUTC } from "lib/utils";
 
 interface BondedInfo {

src/lib/pages/account-details/components/tables/bonded/DelegationsTable.tsx

@@ -4,8 +4,7 @@ import { Loading } from "lib/components/Loading";
 import { EmptyState } from "lib/components/state";
 import { TableTitle } from "lib/components/table";
 import type { Delegation } from "lib/pages/account-details/data";
-import type { TokenWithValue } from "lib/pages/account-details/type";
-import type { Option } from "lib/types";
+import type { Option, TokenWithValue } from "lib/types";
 
 import { BondedTableHeader } from "./BondedTableHeader";
 import { BondedTableRow } from "./BondedTableRow";

src/lib/pages/account-details/data.ts

@@ -20,26 +20,24 @@ import {
 } from "lib/services/delegationService";
 import { useValidators } from "lib/services/validatorService";
 import type {
-  AssetInfo,
   BalanceWithAssetInfo,
   CodeInfo,
   ContractInfo,
   HumanAddr,
   Option,
-  Token,
-  U,
+  TokenWithValue,
   USD,
   ValidatorInfo,
 } from "lib/types";
 import {
   calAssetValueWithPrecision,
-  calculateAssetValue,
   calTotalValue,
-  toToken,
   addrToValoper,
+  addTokenWithValue,
+  coinToTokenWithValue,
 } from "lib/utils";
 
-import type { TokenWithValue, UserDelegationsData } from "./type";
+import type { UserDelegationsData } from "./type";
 
 interface AccountContracts {
   contracts: Option<ContractInfo[]>;
@@ -60,6 +58,7 @@ interface AccountAssetInfos {
 }
 
 export interface StakingParams extends RawStakingParams {
+  symbol: Option<string>;
   logo: Option<string>;
   precision: Option<number>;
 }
@@ -202,38 +201,6 @@ export const useUserAssetInfos = (
   };
 };
 
-const coinToTokenWithValue = (
-  denom: string,
-  amount: string,
-  assetInfo: Option<AssetInfo>
-): TokenWithValue => {
-  const tokenAmount = big(amount) as U<Token<Big>>;
-  return {
-    denom,
-    amount: tokenAmount,
-    logo: assetInfo?.logo,
-    precision: assetInfo?.precision,
-    value: assetInfo
-      ? calculateAssetValue(
-          toToken(tokenAmount, assetInfo.precision),
-          assetInfo.price as USD<number>
-        )
-      : undefined,
-  };
-};
-
-const addTotal = (
-  oldTotal: Option<TokenWithValue>,
-  token: TokenWithValue
-): TokenWithValue =>
-  !oldTotal
-    ? token
-    : {
-        ...oldTotal,
-        amount: oldTotal.amount.add(token.amount) as U<Token<Big>>,
-        value: oldTotal.value?.add(token.value ?? 0) as USD<Big>,
-      };
-
 const calBonded = (
   totalDelegations: Option<Record<string, TokenWithValue>>,
   totalUnbondings: Option<Record<string, TokenWithValue>>
@@ -243,7 +210,10 @@ const calBonded = (
   return Object.keys(totalDelegations).reduce<Record<string, TokenWithValue>>(
     (total, denom) => ({
       ...total,
-      [denom]: addTotal(totalUnbondings[denom], totalDelegations[denom]),
+      [denom]: addTokenWithValue(
+        totalUnbondings[denom],
+        totalDelegations[denom]
+      ),
     }),
     {}
   );
@@ -292,6 +262,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
   if (rawStakingParams && assetInfos && validators) {
     const stakingParams = {
       ...rawStakingParams,
+      symbol: assetInfos[rawStakingParams.bondDenom].symbol,
       logo: assetInfos[rawStakingParams.bondDenom].logo,
       precision: assetInfos[rawStakingParams.bondDenom].precision,
     };
@@ -313,7 +284,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
     >(
       (total, delegation) => ({
         ...total,
-        [delegation.token.denom]: addTotal(
+        [delegation.token.denom]: addTokenWithValue(
           total[delegation.token.denom],
           delegation.token
         ),
@@ -338,7 +309,7 @@ export const useUserDelegationInfos = (walletAddress: HumanAddr) => {
     >(
       (total, unbonding) => ({
         ...total,
-        [unbonding.token.denom]: addTotal(
+        [unbonding.token.denom]: addTokenWithValue(
           total[unbonding.token.denom],
           unbonding.token
         ),

src/lib/pages/account-details/type.ts

@@ -1,6 +1,4 @@
-import type Big from "big.js";
-
-import type { Option, Token, U, USD, ValidatorInfo } from "lib/types";
+import type { Option, TokenWithValue, ValidatorInfo } from "lib/types";
 
 import type {
   Delegation,
@@ -9,14 +7,6 @@ import type {
   Unbonding,
 } from "./data";
 
-export interface TokenWithValue {
-  denom: string;
-  amount: U<Token<Big>>;
-  logo: Option<string>;
-  precision: Option<number>;
-  value: Option<USD<Big>>;
-}
-
 export interface NonRedelegatable {
   dstValidator: ValidatorInfo;
   completionTime: Date;

src/lib/types/asset.ts

@@ -0,0 +1,12 @@
+import type Big from "big.js";
+
+import type { Option, Token, U, USD } from "lib/types";
+
+export interface TokenWithValue {
+  denom: string;
+  amount: U<Token<Big>>;
+  symbol: Option<string>;
+  logo: Option<string>;
+  precision: Option<number>;
+  value: Option<USD<Big>>;
+}

src/lib/types/index.ts

@@ -10,3 +10,4 @@ export * from "./projects";
 export * from "./addrs";
 export * from "./proposal";
 export * from "./validator";
+export * from "./asset";

src/lib/utils/assetValue.ts

@@ -1,7 +1,16 @@
 import type { BigSource, Big } from "big.js";
 import big from "big.js";
 
-import type { Balance, BalanceWithAssetInfo, Token, U, USD } from "lib/types";
+import type {
+  AssetInfo,
+  Balance,
+  BalanceWithAssetInfo,
+  Option,
+  Token,
+  TokenWithValue,
+  U,
+  USD,
+} from "lib/types";
 
 import { toToken } from "./formatter";
 
@@ -26,3 +35,36 @@ export const calTotalValue = (assets: BalanceWithAssetInfo[]): USD<Big> =>
       acc.add(calAssetValueWithPrecision(curr.balance)) as USD<Big>,
     big(0) as USD<Big>
   );
+
+export const coinToTokenWithValue = (
+  denom: string,
+  amount: string,
+  assetInfo: Option<AssetInfo>
+): TokenWithValue => {
+  const tokenAmount = big(amount) as U<Token<Big>>;
+  return {
+    denom,
+    amount: tokenAmount,
+    symbol: assetInfo?.symbol,
+    logo: assetInfo?.logo,
+    precision: assetInfo?.precision,
+    value: assetInfo
+      ? calculateAssetValue(
+          toToken(tokenAmount, assetInfo.precision),
+          assetInfo.price as USD<number>
+        )
+      : undefined,
+  };
+};
+
+export const addTokenWithValue = (
+  oldTotal: Option<TokenWithValue>,
+  token: TokenWithValue
+): TokenWithValue =>
+  !oldTotal
+    ? token
+    : {
+        ...oldTotal,
+        amount: oldTotal.amount.add(token.amount) as U<Token<Big>>,
+        value: oldTotal.value?.add(token.value ?? 0) as USD<Big>,
+      };