Support TNS reverse record

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;
+};

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>

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>