react-app: remove all desmos related code

refs #274

Author: ivanng-oursky

react-app/config/config.template.js

@@ -18,7 +18,6 @@ window.appConfig = {
       coinDecimals: 9,
     },
   },
-  desmosRpc: "https://rpc.mainnet.desmos.network",
   graphql: {
     endpoint: "http://localhost:8080/graphql",
   },

react-app/package.json

@@ -15,7 +15,6 @@
     "@cosmjs/stream": "^0.28.4",
     "@cosmjs/tendermint-rpc": "^0.28.4",
     "@cosmjs/utils": "^0.28.4",
-    "@desmoslabs/desmjs": "2.0.0-beta.4",
     "@graphql-codegen/introspection": "^2.1.1",
     "@headlessui/react": "^1.6.1",
     "@oursky/react-messageformat": "^2.0.2",

react-app/src/clients/queryClient.ts

@@ -21,7 +21,6 @@ import {
   setupSlashingExtension,
 } from "@cosmjs/stargate/build/modules";
 import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
-import { DesmosClient } from "@desmoslabs/desmjs";
 import { ChainInfo } from "../config/Config";
 
 export type ExtendedQueryClient = QueryClient &
@@ -51,12 +50,6 @@ export const newQueryClient = async (
   );
 };
 
-export const newDesmosQueryClient = async (
-  desmosRpc: string
-): Promise<DesmosClient> => {
-  return DesmosClient.connect(desmosRpc);
-};
-
 export const newStargateClient = async (
   chainInfo: ChainInfo
 ): Promise<StargateClient> => {

react-app/src/components/DummyScreen/DummyScreen.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useState } from "react";
 import cn from "classnames";
 import * as Sentry from "@sentry/react";
 import { Link } from "react-router-dom";
-import { Profile } from "@desmoslabs/desmjs-types/desmos/profiles/v1beta1/models_profile";
 import { useQuery, useLazyQuery } from "@apollo/client";
 import AppRoutes from "../../navigation/AppRoutes";
 import LocalizedText from "../common/Localized/LocalizedText";
@@ -15,8 +14,6 @@ import {
   MeQueryQuery,
 } from "../../generated/graphql";
 import { useAuth } from "../../providers/AuthProvider";
-import { useQueryClient } from "../../providers/QueryClientProvider";
-import { ConnectionStatus, useWallet } from "../../providers/WalletProvider";
 import * as SectionedTable from "../SectionedTable/SectionedTable";
 import AppButton from "../common/Buttons/AppButton";
 
@@ -74,10 +71,7 @@ const dummyTableItems: SectionedTable.SectionItem<DummyTableItem>[] = [
 const DummyScreen: React.FC = () => {
   const { setLocale } = useLocale();
   const auth = useAuth();
-  const { desmosQuery } = useQueryClient();
-  const wallet = useWallet();
 
-  const [profile, setProfile] = useState<Profile | null>(null);
   const [dummyTableSort, setDummyTableSort] =
     useState<SectionedTable.ColumnOrder | null>(null);
 
@@ -125,18 +119,6 @@ const DummyScreen: React.FC = () => {
     Sentry.captureException(new Error("This is my fake error message"));
   }, []);
 
-  useEffect(() => {
-    // test desmos query client on Oursky portfolio
-    if (wallet.status === ConnectionStatus.Connected) {
-      desmosQuery
-        .getProfile("desmos1ze7n3xsfd7na2saj070v0cx0eu7twng9dxxrlt")
-        .then((res) => {
-          setProfile(res);
-        })
-        .catch((err) => console.error("Failed to query desmos profile =", err));
-    }
-  }, [setProfile, wallet, desmosQuery]);
-
   return (
     <div
       className={cn(
@@ -245,13 +227,7 @@ const DummyScreen: React.FC = () => {
           Go to Overview Screen
         </Link>
       </div>
-      <pre>
-        {JSON.stringify(
-          { dtag: profile?.dtag, pictures: profile?.pictures },
-          null,
-          4
-        )}
-      </pre>
+
       <div className={cn("flex", "flex-row", "gap-x-2")}>
         <button
           type="button"

react-app/src/components/PortfolioScreen/PortfolioPanel.tsx

@@ -20,46 +20,28 @@ interface PortfolioPanelProps {
 }
 
 const ProfilePicture: React.FC<{
-  profile: Portfolio["profile"];
   className?: string;
-}> = ({ profile, className }) => {
-  const profilePicture = profile?.pictures?.profile;
-
+}> = ({ className }) => {
   return (
     <div className={cn("flex", "justify-center", className)}>
-      {profilePicture ? (
-        <img
-          className={cn(
-            "rounded-full",
-            "w-[120px]",
-            "h-[120px]",
-            "sm:w-[180px]",
-            "sm:h-[180px]",
-            "object-cover"
-          )}
-          src={profilePicture}
-          alt="profile picture"
+      <div
+        className={cn(
+          "flex",
+          "justify-center",
+          "items-center",
+          "bg-likecoin-secondarygreen",
+          "rounded-full",
+          "w-[120px]",
+          "h-[120px]",
+          "sm:w-[180px]",
+          "sm:h-[180px]"
+        )}
+      >
+        <Icon
+          icon={IconType.Account}
+          className={cn("w-11", "h-11", "sm:w-16", "sm:h-16")}
         />
-      ) : (
-        <div
-          className={cn(
-            "flex",
-            "justify-center",
-            "items-center",
-            "bg-likecoin-secondarygreen",
-            "rounded-full",
-            "w-[120px]",
-            "h-[120px]",
-            "sm:w-[180px]",
-            "sm:h-[180px]"
-          )}
-        >
-          <Icon
-            icon={IconType.Account}
-            className={cn("w-11", "h-11", "sm:w-16", "sm:h-16")}
-          />
-        </div>
-      )}
+      </div>
     </div>
   );
 };
@@ -125,14 +107,11 @@ const PortfolioPanel: React.FC<PortfolioPanelProps> = ({
         </h2>
       </div>
       <div className={cn("mt-11", "mb-6", "sm:flex")}>
-        <ProfilePicture
-          profile={portfolio.profile}
-          className={cn("mb-9", "sm:mb-0", "sm:mr-9")}
-        />
+        <ProfilePicture className={cn("mb-9", "sm:mb-0", "sm:mr-9")} />
 
         <div className={cn("flex", "flex-col", "items-start")}>
           <p className={cn("text-xl", "leading-6", "font-medium", "mb-3")}>
-            {portfolio.profile?.dtag ?? truncateAddress(portfolio.address)}
+            {truncateAddress(portfolio.address)}
           </p>
 
           <CopyableText

react-app/src/components/PortfolioScreen/PortfolioScreenAPI.ts

@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react";
 import BigNumber from "bignumber.js";
 import { useQueryClient } from "../../providers/QueryClientProvider";
 import { ConnectionStatus, useWallet } from "../../providers/WalletProvider";
-import { translateAddress, truncateAddress } from "../../utils/address";
+import { truncateAddress } from "../../utils/address";
 import { useStakingAPI } from "../../api/stakingAPI";
 import {
   isRequestStateLoaded,
@@ -32,7 +32,7 @@ export const usePortfolioQuery = (): {
   const bankAPI = useBankAPI();
   const stakingAPI = useStakingAPI();
   const distribution = useDistributionAPI();
-  const { desmosQuery, query } = useQueryClient();
+  const { query } = useQueryClient();
 
   const [stakesOrder, setStakesOrder] = useState({
     id: "name",
@@ -61,14 +61,12 @@ export const usePortfolioQuery = (): {
         unstakingBalance,
         commission,
         reward,
-        profile,
       ] = await Promise.all([
         bankAPI.getAddressBalance(address),
         stakingAPI.getAddressStakedBalance(address),
         stakingAPI.getUnstakingAmount(address),
         distribution.getAddressTotalCommission(address),
         distribution.getAddressTotalDelegationRewards(address),
-        desmosQuery.getProfile(translateAddress(address, "desmos")),
       ]);
 
       const balance = {
@@ -81,7 +79,6 @@ export const usePortfolioQuery = (): {
       };
 
       return {
-        profile,
         balance,
         stakedBalance,
         unstakingBalance,
@@ -91,7 +88,7 @@ export const usePortfolioQuery = (): {
         address,
       };
     },
-    [bankAPI, stakingAPI, distribution, desmosQuery]
+    [bankAPI, stakingAPI, distribution]
   );
 
   const fetchStakes = useCallback(

react-app/src/components/PortfolioScreen/PortfolioScreenModel.ts

@@ -1,4 +1,3 @@
-import { Profile } from "@desmoslabs/desmjs-types/desmos/profiles/v1beta1/models_profile";
 import { Delegation } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 import { BigNumberCoin } from "../../models/coin";
 import { ProposalHistory } from "../ProposalHistory/ProposalHistoryModel";
@@ -17,7 +16,6 @@ export interface Stake {
 }
 
 export interface Portfolio {
-  profile: Profile | null;
   balance: BigNumberCoin;
   stakedBalance: BigNumberCoin;
   unstakingBalance: BigNumberCoin;

react-app/src/config/Config.ts

@@ -37,7 +37,6 @@ export interface IConfig {
     "dsn" | "environment" | "ignoreErrors"
   > | null;
   chainInfo: ChainInfo;
-  desmosRpc: string;
   graphql: {
     endpoint: string;
   };
@@ -66,7 +65,6 @@ const defaultConfig: IConfig = {
       coinDecimals: 9,
     },
   },
-  desmosRpc: "https://rpc.mainnet.desmos.network",
   graphql: {
     endpoint: "http://localhost:8080/graphql",
   },

react-app/src/providers/QueryClientProvider.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useMemo, useState } from "react";
-import { DesmosClient } from "@desmoslabs/desmjs";
 import { StargateClient } from "@cosmjs/stargate";
 import Config from "../config/Config";
 import {
   ExtendedQueryClient,
   newQueryClient,
-  newDesmosQueryClient,
   newStargateClient,
 } from "../clients/queryClient";
 
@@ -15,7 +13,6 @@ interface QueryClientProviderProps {
 
 interface QueryClientProviderContextValue {
   query: ExtendedQueryClient;
-  desmosQuery: DesmosClient;
   stargateQuery: StargateClient;
 }
 
@@ -26,24 +23,20 @@ const QueryClientContext = React.createContext<QueryClientProviderContextValue>(
 const QueryClientProvider: React.FC<QueryClientProviderProps> = (props) => {
   const { children } = props;
   const chainInfo = Config.chainInfo;
-  const desmosRpc = Config.desmosRpc;
 
   const [queryClient, setQueryClient] = useState<ExtendedQueryClient | null>(
     null
   );
-  const [desmosQueryClient, setDesmosQueryClient] =
-    useState<DesmosClient | null>(null);
   const [stargateClient, setStargateClient] = useState<StargateClient | null>(
     null
   );
 
   const value = useMemo(
     (): QueryClientProviderContextValue => ({
       query: queryClient!,
-      desmosQuery: desmosQueryClient!,
       stargateQuery: stargateClient!,
     }),
-    [queryClient, desmosQueryClient, stargateClient]
+    [queryClient, stargateClient]
   );
 
   useEffect(() => {
@@ -56,16 +49,6 @@ const QueryClientProvider: React.FC<QueryClientProviderProps> = (props) => {
       });
   }, [chainInfo]);
 
-  useEffect(() => {
-    newDesmosQueryClient(desmosRpc)
-      .then((client) => {
-        setDesmosQueryClient(client);
-      })
-      .catch((err) => {
-        console.log("Error creating desmos query client", err);
-      });
-  }, [desmosRpc]);
-
   useEffect(() => {
     newStargateClient(chainInfo)
       .then((client) => {
@@ -78,10 +61,7 @@ const QueryClientProvider: React.FC<QueryClientProviderProps> = (props) => {
 
   return (
     <QueryClientContext.Provider value={value}>
-      {queryClient != null &&
-        desmosQueryClient != null &&
-        stargateClient != null &&
-        children}
+      {queryClient != null && stargateClient != null && children}
     </QueryClientContext.Provider>
   );
 };