show address name

src/components/AddressInfo.js

@@ -8,6 +8,7 @@ import Toggle from "react-toggle";
 import usePrevious, {floatToStr, numberWithCommas} from "../helper";
 import {
     getAddressBalance,
+    getAddressName,
     getAddressTxCount,
     getAddressUtxos,
     getBlock,
@@ -40,6 +41,8 @@ const AddressInfo = () => {
     const [view, setView] = useState("transactions")
     const [showQr, setShowQr] = useState(false);
 
+    const [addressName, setAddressName] = useState("");
+
     const [detailedView, setDetailedView] = useState(localStorage.getItem('detailedView') == "true")
 
     const [utxos, setUtxos] = useState([])
@@ -149,6 +152,14 @@ const AddressInfo = () => {
             }
         )
 
+        getAddressName(addr).then(
+            (res) => {
+                if (res.name) {
+                    setAddressName(res.name)
+                }
+            }
+        )
+
         getBlockdagInfo().then(
             (blockdag) => {
                 getBlock(blockdag.tipHashes[0]).then(
@@ -271,7 +282,8 @@ const AddressInfo = () => {
             <Row>
                 <Col md={12} className="mt-sm-4">
 
-                    <div className="addressinfo-header">Address</div>
+                    <div className="addressinfo-header">Address{addressName ?
+                        <span className="address-name">{addressName ? addressName : ""}</span> : ""}</div>
                     <div className="utxo-value-mono"><span
                         class="addressinfo-color">kaspa:</span>{addr.substring(6, addr.length - 8)}<span
                         class="addressinfo-color">{addr.substring(addr.length - 8)}</span>

src/components/blockinfo.scss

@@ -208,6 +208,18 @@
 
 }
 
+.address-name {
+  background-color: rgb(50, 115, 110);
+  font-size: small;
+  font-weight: lighter;
+  padding: .2rem .7rem;
+  margin-left: .8rem;
+  border-radius: .4rem;
+  word-wrap: none;
+  display: inline-block;
+
+}
+
 .utxo-amount-minus {
   background-color: rgb(195, 38, 38);
   padding: .2rem .7rem;

src/kaspa-api-client.js

@@ -73,6 +73,14 @@ export async function getAddressUtxos(addr) {
         })
     return res
 }
+export async function getAddressName(addr) {
+    const res = await fetch(`${API_BASE}addresses/${addr}/name`, {headers: {'Access-Control-Allow-Origin': '*'}})
+        .then((response) => response.json())
+        .then(data => {
+            return data
+        })
+    return res
+}
 
 
 export async function getHalving() {