From 840a7267756d7b20611f7f880f23e2a9f7be0585 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Walter?= <clement0walter@gmail.com>
Date: Sat, 9 Dec 2023 15:20:38 +0100
Subject: [PATCH] Resolve address name (#88)

---
 .../components/ConnectButton/ConnectButton.tsx  | 17 ++++++++++++++---
 .../src/components/Header/Header.tsx            |  4 +---
 .../src/contexts/AccountContext.tsx             | 11 ++++++++++-
 .../src/provider/EVMProvider.ts                 |  4 ++++
 .../src/provider/StarknetProvider.ts            | 11 +++++++++++
 .../src/types/provider/ChainProvider.ts         |  5 +++++
 6 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/starksheet-webapp/src/components/ConnectButton/ConnectButton.tsx b/packages/starksheet-webapp/src/components/ConnectButton/ConnectButton.tsx
index c872ef35..49b14bdb 100644
--- a/packages/starksheet-webapp/src/components/ConnectButton/ConnectButton.tsx
+++ b/packages/starksheet-webapp/src/components/ConnectButton/ConnectButton.tsx
@@ -1,5 +1,5 @@
 import { BoxProps } from "@mui/material";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { AccountContext } from "../../contexts/AccountContext";
 import Button from "../Button/Button";
 
@@ -8,17 +8,28 @@ export type ConnectButtonProps = {
 };
 
 function ConnectButton({ sx }: ConnectButtonProps) {
-  const { accountAddress, connect } = useContext(AccountContext);
+  const { accountDomain, connect } = useContext(AccountContext);
+
+  const displayedName = useMemo(() => {
+    if (!accountDomain) {
+      return "Connect";
+    }
+    if (accountDomain.length <= 8) {
+      return accountDomain;
+    }
+    return `${accountDomain.substring(0, 8)}...`;
+  }, [accountDomain]);
 
   return (
     <Button
       onClick={connect}
       sx={{
         color: "#0000FF",
+        width: "210px",
         ...sx,
       }}
     >
-      {accountAddress ? accountAddress.substring(0, 8) : "Connect"}
+      {displayedName}
     </Button>
   );
 }
diff --git a/packages/starksheet-webapp/src/components/Header/Header.tsx b/packages/starksheet-webapp/src/components/Header/Header.tsx
index a3d2f0cf..441f11be 100644
--- a/packages/starksheet-webapp/src/components/Header/Header.tsx
+++ b/packages/starksheet-webapp/src/components/Header/Header.tsx
@@ -150,9 +150,7 @@ function Header() {
       {!!sheet && copySheetButton}
       {!!sheet && fillSheetButton}
       {learnMoreButton}
-      <ConnectButton
-        sx={{ width: "174px", marginLeft: `-${CELL_BORDER_WIDTH}px` }}
-      />
+      <ConnectButton sx={{ marginLeft: `-${CELL_BORDER_WIDTH}px` }} />
     </Box>
   );
 }
diff --git a/packages/starksheet-webapp/src/contexts/AccountContext.tsx b/packages/starksheet-webapp/src/contexts/AccountContext.tsx
index 1b8fa249..c0dbdcc4 100644
--- a/packages/starksheet-webapp/src/contexts/AccountContext.tsx
+++ b/packages/starksheet-webapp/src/contexts/AccountContext.tsx
@@ -1,11 +1,12 @@
 import { useSnackbar } from "notistack";
-import React, { PropsWithChildren, useMemo, useState } from "react";
+import React, { PropsWithChildren, useEffect, useMemo, useState } from "react";
 import { BigNumberish } from "starknet";
 import { useChainProvider } from "../hooks";
 import { ContractCall, TransactionResponse } from "../types";
 
 export const AccountContext = React.createContext<{
   accountAddress: string;
+  accountDomain: string;
   setAccountAddress: (address: string) => void;
   connect: () => Promise<void>;
   execute: (
@@ -15,6 +16,7 @@ export const AccountContext = React.createContext<{
   proof: string[];
 }>({
   accountAddress: "",
+  accountDomain: "",
   setAccountAddress: () => {},
   connect: async () => {},
   execute: async () => ({ transaction_hash: "" }),
@@ -23,11 +25,17 @@ export const AccountContext = React.createContext<{
 
 export const AccountContextProvider = ({ children }: PropsWithChildren<{}>) => {
   const [accountAddress, setAccountAddress] = useState<string>("");
+  const [accountDomain, setAccountDomain] = useState<string>("");
   const { enqueueSnackbar } = useSnackbar();
 
   const proof = useMemo(() => [], []);
 
   const provider = useChainProvider();
+  useEffect(() => {
+    provider.resolveAddress(accountAddress).then((resolved) => {
+      setAccountDomain(resolved);
+    });
+  }, [provider, accountAddress]);
 
   const connect = () =>
     provider
@@ -47,6 +55,7 @@ export const AccountContextProvider = ({ children }: PropsWithChildren<{}>) => {
     <AccountContext.Provider
       value={{
         accountAddress,
+        accountDomain,
         setAccountAddress,
         connect,
         execute,
diff --git a/packages/starksheet-webapp/src/provider/EVMProvider.ts b/packages/starksheet-webapp/src/provider/EVMProvider.ts
index a3a1aca8..b3c68ae0 100644
--- a/packages/starksheet-webapp/src/provider/EVMProvider.ts
+++ b/packages/starksheet-webapp/src/provider/EVMProvider.ts
@@ -29,6 +29,10 @@ export class EVMProvider implements ChainProvider {
     private config: ChainConfig,
   ) {}
 
+  resolveAddress(address: string): Promise<string> {
+    throw new Error("Method not implemented.");
+  }
+
   async addressAlreadyDeployed(address: string) {
     return (await this.provider.getCode(address)).length > 2;
   }
diff --git a/packages/starksheet-webapp/src/provider/StarknetProvider.ts b/packages/starksheet-webapp/src/provider/StarknetProvider.ts
index 1625f833..e4b4e3f8 100644
--- a/packages/starksheet-webapp/src/provider/StarknetProvider.ts
+++ b/packages/starksheet-webapp/src/provider/StarknetProvider.ts
@@ -54,6 +54,17 @@ export class StarknetProvider implements ChainProvider {
     );
   }
 
+  async resolveAddress(address: string): Promise<string> {
+    try {
+      const response = await fetch(
+        `https://api.starknet.id/addr_to_domain?addr=${address}`,
+      );
+      return (await response.json()).domain;
+    } catch (error) {
+      return address;
+    }
+  }
+
   async addressAlreadyDeployed(address: string) {
     try {
       await this.provider.getClassAt(address, "latest");
diff --git a/packages/starksheet-webapp/src/types/provider/ChainProvider.ts b/packages/starksheet-webapp/src/types/provider/ChainProvider.ts
index 5947e921..d42949d7 100644
--- a/packages/starksheet-webapp/src/types/provider/ChainProvider.ts
+++ b/packages/starksheet-webapp/src/types/provider/ChainProvider.ts
@@ -92,4 +92,9 @@ export interface ChainProvider {
    * Create a send ETH transaction
    */
   sendEthTxBuilder(recipientAddress: bigint, amount: bigint): ContractCall;
+
+  /**
+   * Resolve an address to a name
+   */
+  resolveAddress(address: string): Promise<string>;
 }