From 6ced9ba563b8ad79483c3b7ad1431afa4492dd16 Mon Sep 17 00:00:00 2001
From: strange <strange-tns@gmail.com>
Date: Tue, 8 Mar 2022 20:13:55 +0700
Subject: [PATCH 1/2] Support TNS reverse record

---
 app/src/@libs/use-tns-reverse-record/index.ts | 38 +++++++++++++++++++
 .../Header/desktop/ConnectedButton.tsx        |  7 +++-
 .../Header/wallet/WalletDetailContent.tsx     |  7 +++-
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 app/src/@libs/use-tns-reverse-record/index.ts

diff --git a/app/src/@libs/use-tns-reverse-record/index.ts b/app/src/@libs/use-tns-reverse-record/index.ts
new file mode 100644
index 000000000..a9f6ce813
--- /dev/null
+++ b/app/src/@libs/use-tns-reverse-record/index.ts
@@ -0,0 +1,38 @@
+import { LCDClient } from '@terra-money/terra.js';
+import { useWallet } from '@terra-money/use-wallet';
+import { useEffect, useMemo, useState } from 'react';
+
+const REVERSE_RECORD_ADDRESS = 'terra13efj2whf6rm7yedc2v7rnz0e6ltzytyhydy98a';
+
+export const useTnsReverseRecord = (address: string) => {
+  const { network } = useWallet();
+  const [reverseRecord, setReverseRecord] = useState<string | null>(null);
+
+  const lcd = useMemo(() => {
+    return new LCDClient({
+      chainID: network.chainID,
+      URL: network.lcd,
+    });
+  }, [network.chainID, network.lcd]);
+
+  useEffect(() => {
+    if (network.chainID !== 'columbus-5' || !address) {
+      setReverseRecord(null);
+      return;
+    }
+    lcd.wasm
+      .contractQuery<{ name: string }>(REVERSE_RECORD_ADDRESS, {
+        get_name: {
+          address,
+        },
+      })
+      .then((res) => {
+        setReverseRecord(res.name);
+      })
+      .catch((err) => {
+        setReverseRecord(null);
+      });
+  }, [lcd, address, network.chainID]);
+
+  return reverseRecord;
+};
diff --git a/app/src/components/Header/desktop/ConnectedButton.tsx b/app/src/components/Header/desktop/ConnectedButton.tsx
index a6cb3794f..24d5ca158 100644
--- a/app/src/components/Header/desktop/ConnectedButton.tsx
+++ b/app/src/components/Header/desktop/ConnectedButton.tsx
@@ -5,6 +5,7 @@ import { demicrofy, truncate } from '@libs/formatter';
 import { IconSpan } from '@libs/neumorphism-ui/components/IconSpan';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 import styled from 'styled-components';
+import { useTnsReverseRecord } from '@libs/use-tns-reverse-record';
 
 interface ConnectedButtonProps
   extends Omit<
@@ -23,13 +24,17 @@ function ConnectedButtonBase({
   bank,
   ...buttonProps
 }: ConnectedButtonProps) {
+  const reverseRecord = useTnsReverseRecord(walletAddress);
+
   return (
     <button {...buttonProps}>
       <IconSpan>
         <span className="wallet-icon">
           <Wallet />
         </span>
-        <span className="wallet-address">{truncate(walletAddress)}</span>
+        <span className="wallet-address">
+          {reverseRecord || truncate(walletAddress)}
+        </span>
         <div className="wallet-balance">
           {formatUSTWithPostfixUnits(demicrofy(bank.tokenBalances.uUST))} UST
         </div>
diff --git a/app/src/components/Header/wallet/WalletDetailContent.tsx b/app/src/components/Header/wallet/WalletDetailContent.tsx
index 6a4a69db9..5932b3a0e 100644
--- a/app/src/components/Header/wallet/WalletDetailContent.tsx
+++ b/app/src/components/Header/wallet/WalletDetailContent.tsx
@@ -1,5 +1,6 @@
 import { BAssetInfoAndBalancesTotal } from '@anchor-protocol/app-fns';
 import { AnchorBank } from '@anchor-protocol/app-provider/hooks/useAnchorBank';
+import { useTnsReverseRecord } from '@libs/use-tns-reverse-record';
 import {
   formatANC,
   formatAUSTWithPostfixUnits,
@@ -60,12 +61,16 @@ export function WalletDetailContentBase({
     );
   }, [network.chainID, walletAddress]);
 
+  const reverseRecord = useTnsReverseRecord(walletAddress);
+
   return (
     <div className={className}>
       <section>
         <ConnectionIcons className="wallet-icon" connection={connection} />
 
-        <h2 className="wallet-address">{truncate(walletAddress)}</h2>
+        <h2 className="wallet-address">
+          {reverseRecord || truncate(walletAddress)}
+        </h2>
 
         <button className="copy-wallet-address" onClick={setCopied}>
           <IconSpan>COPY ADDRESS {isCopied && <Check />}</IconSpan>

From aaf530a2ac20fc126a9ac4f1ad242f0b511b4abe Mon Sep 17 00:00:00 2001
From: strange <strange-tns@gmail.com>
Date: Fri, 18 Mar 2022 14:29:24 +0700
Subject: [PATCH 2/2] use react-query for tns reverse record

---
 .../use-tns-reverse-record-query/index.ts     | 55 +++++++++++++++++++
 app/src/@libs/use-tns-reverse-record/index.ts | 38 -------------
 .../Header/desktop/ConnectedButton.tsx        |  4 +-
 .../Header/wallet/WalletContent.tsx           |  6 +-
 4 files changed, 62 insertions(+), 41 deletions(-)
 create mode 100644 app/src/@libs/use-tns-reverse-record-query/index.ts
 delete mode 100644 app/src/@libs/use-tns-reverse-record/index.ts

diff --git a/app/src/@libs/use-tns-reverse-record-query/index.ts b/app/src/@libs/use-tns-reverse-record-query/index.ts
new file mode 100644
index 000000000..f34400065
--- /dev/null
+++ b/app/src/@libs/use-tns-reverse-record-query/index.ts
@@ -0,0 +1,55 @@
+import { LCDClient } from '@terra-money/terra.js';
+import { useWallet } from '@terra-money/use-wallet';
+import { useMemo } from 'react';
+import { useQuery, UseQueryResult } from 'react-query';
+
+const REVERSE_RECORD_ADDRESS = 'terra13efj2whf6rm7yedc2v7rnz0e6ltzytyhydy98a';
+enum TNS_QUERY_KEY {
+  REVERSE_RECORD = 'TNS_QUERY_REVERSE_RECORD',
+}
+
+export function useTnsReverseRecordQuery(
+  walletAddress: string,
+): UseQueryResult<string | null> {
+  const wallet = useWallet();
+  const network = wallet?.network;
+  const lcd = useMemo(() => {
+    if (!network) {
+      return null;
+    }
+    return new LCDClient({
+      chainID: network.chainID,
+      URL: network.lcd,
+    });
+  }, [network]);
+
+  const result = useQuery(
+    [
+      TNS_QUERY_KEY.REVERSE_RECORD,
+      walletAddress ?? undefined,
+      REVERSE_RECORD_ADDRESS,
+    ],
+    async () => {
+      if (!lcd || network?.chainID !== 'columbus-5') {
+        return null;
+      }
+      try {
+        const res = await lcd.wasm.contractQuery<{ name: string }>(
+          REVERSE_RECORD_ADDRESS,
+          {
+            get_name: {
+              address: walletAddress,
+            },
+          },
+        );
+        return res?.name;
+      } catch (error) {
+        return null;
+      }
+    },
+    {
+      enabled: !!walletAddress,
+    },
+  );
+  return result;
+}
diff --git a/app/src/@libs/use-tns-reverse-record/index.ts b/app/src/@libs/use-tns-reverse-record/index.ts
deleted file mode 100644
index a9f6ce813..000000000
--- a/app/src/@libs/use-tns-reverse-record/index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { LCDClient } from '@terra-money/terra.js';
-import { useWallet } from '@terra-money/use-wallet';
-import { useEffect, useMemo, useState } from 'react';
-
-const REVERSE_RECORD_ADDRESS = 'terra13efj2whf6rm7yedc2v7rnz0e6ltzytyhydy98a';
-
-export const useTnsReverseRecord = (address: string) => {
-  const { network } = useWallet();
-  const [reverseRecord, setReverseRecord] = useState<string | null>(null);
-
-  const lcd = useMemo(() => {
-    return new LCDClient({
-      chainID: network.chainID,
-      URL: network.lcd,
-    });
-  }, [network.chainID, network.lcd]);
-
-  useEffect(() => {
-    if (network.chainID !== 'columbus-5' || !address) {
-      setReverseRecord(null);
-      return;
-    }
-    lcd.wasm
-      .contractQuery<{ name: string }>(REVERSE_RECORD_ADDRESS, {
-        get_name: {
-          address,
-        },
-      })
-      .then((res) => {
-        setReverseRecord(res.name);
-      })
-      .catch((err) => {
-        setReverseRecord(null);
-      });
-  }, [lcd, address, network.chainID]);
-
-  return reverseRecord;
-};
diff --git a/app/src/components/Header/desktop/ConnectedButton.tsx b/app/src/components/Header/desktop/ConnectedButton.tsx
index b1dcbcfd9..6a282a878 100644
--- a/app/src/components/Header/desktop/ConnectedButton.tsx
+++ b/app/src/components/Header/desktop/ConnectedButton.tsx
@@ -3,7 +3,7 @@ import { truncate } from '@libs/formatter';
 import { IconSpan } from '@libs/neumorphism-ui/components/IconSpan';
 import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
 import styled from 'styled-components';
-import { useTnsReverseRecord } from '@libs/use-tns-reverse-record';
+import { useTnsReverseRecordQuery } from '@libs/use-tns-reverse-record-query';
 import { u, UST } from '@anchor-protocol/types';
 import { useFormatters } from '@anchor-protocol/formatter/useFormatters';
 
@@ -24,7 +24,7 @@ function ConnectedButtonBase({
   totalUST,
   ...buttonProps
 }: ConnectedButtonProps) {
-  const reverseRecord = useTnsReverseRecord(walletAddress);
+  const { data: reverseRecord } = useTnsReverseRecordQuery(walletAddress);
 
   const {
     ust: { formatOutput, demicrofy, symbol },
diff --git a/app/src/components/Header/wallet/WalletContent.tsx b/app/src/components/Header/wallet/WalletContent.tsx
index d7376a267..4cd7219a2 100644
--- a/app/src/components/Header/wallet/WalletContent.tsx
+++ b/app/src/components/Header/wallet/WalletContent.tsx
@@ -6,6 +6,7 @@ import useClipboard from 'react-use-clipboard';
 import styled from 'styled-components';
 import { UIElementProps } from '@libs/ui';
 import { ConnectionIcons } from './ConnectionIcons';
+import { useTnsReverseRecordQuery } from '@libs/use-tns-reverse-record-query';
 
 interface WalletContentProps extends UIElementProps {
   walletAddress: string;
@@ -26,6 +27,7 @@ export function WalletContentBase(props: WalletContentProps) {
     onDisconnectWallet,
   } = props;
 
+  const { data: reverseRecord } = useTnsReverseRecordQuery(walletAddress);
   const [isCopied, setCopied] = useClipboard(walletAddress, {
     successDuration: 1000 * 5,
   });
@@ -39,7 +41,9 @@ export function WalletContentBase(props: WalletContentProps) {
           icon={connectionIcon}
           readonly={readonly}
         />
-        <h2 className="wallet-address">{truncate(walletAddress)}</h2>
+        <h2 className="wallet-address">
+          {reverseRecord || truncate(walletAddress)}
+        </h2>
         <button className="copy-wallet-address" onClick={setCopied}>
           <IconSpan>COPY ADDRESS {isCopied && <Check />}</IconSpan>
         </button>