Feat/initia name service

.gitignore

@@ -50,3 +50,7 @@ next.config.original.js
 .sentryclirc
 next.config.original.js
 next.config.wizardcopy.js
+
+# Localization
+credentials.json
+token.json

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#950](https://github.com/alleslabs/celatone-frontend/pull/950) Add initia username
 - [#971](https://github.com/alleslabs/celatone-frontend/pull/971) Support search functionality with LCD endpoint
 - [#970](https://github.com/alleslabs/celatone-frontend/pull/970) Support account details lite version
 - [#964](https://github.com/alleslabs/celatone-frontend/pull/964) Support migrate page lite version with LCD

package.json

@@ -69,8 +69,9 @@
     "@emotion/styled": "^11.11.0",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-typed-document-node/core": "^3.2.0",
-    "@initia/initia.js": "0.1.12",
-    "@initia/initia.proto": "0.1.12",
+    "@initia/initia.js": "0.2.5",
+    "@initia/initia.proto": "0.2.0",
+    "@initia/utils": "0.62.0",
     "@interchain-ui/react": "1.23.9",
     "@monaco-editor/react": "^4.6.0",
     "@rjsf/chakra-ui": "v5.18.1",

src/lib/app-provider/env.ts

@@ -104,6 +104,9 @@ export enum CELATONE_QUERY_KEYS {
   // ICNS
   ICNS_NAMES_BY_ADDRESS_LCD = "CELATONE_QUERY_ICNS_NAMES_BY_ADDRESS_LCD",
   ADDRESS_BY_ICNS_NAME_LCD = "CELATONE_QUERY_ADDRESS_BY_ICNS_NAME_LCD",
+  // INITA USERNAME
+  INITIA_USERNAME_BY_ADDRESS = "CELATONE_QUERY_INITIA_USERNAME_BY_ADDRESS",
+  ADDRESS_BY_INITIA_USERNAME = "CELATONE_QUERY_ADDRESS_BY_INITIA_USERNAME",
   // POOL
   POOL_LIST = "CELATONE_QUERY_POOL_LIST",
   POOL_LIST_COUNT = "CELATONE_QUERY_POOL_LIST_COUNT",

src/lib/layout/Searchbar.tsx

@@ -8,6 +8,7 @@ import {
   Flex,
   FormControl,
   IconButton,
+  Image,
   List,
   ListItem,
   Spinner,
@@ -47,6 +48,7 @@ const StyledListItem = chakra(ListItem, {
     bg: "gray.900",
   },
 });
+
 interface ResultItemProps {
   index: number;
   type: SearchResultType;
@@ -102,6 +104,22 @@ const getRouteOptions = (
   }
 };
 
+const InitiaUsername = ({ username }: { username: string }) => (
+  <Flex gap={1} align="center" flexWrap="wrap">
+    <Flex gap={1} align="center">
+      <Image
+        src="https://assets.alleslabs.dev/webapp-assets/name-services/initia-username.svg"
+        borderRadius="full"
+        width={4}
+        height={4}
+      />
+      <Text variant="body3" color="text.dark">
+        {username}
+      </Text>
+    </Flex>
+  </Flex>
+);
+
 const ResultItem = ({
   index,
   type,
@@ -116,6 +134,7 @@ const ResultItem = ({
   const normalizedIcnsValue = value.endsWith(`.${metadata.icns.bech32Prefix}`)
     ? value
     : `${value}.${metadata.icns.bech32Prefix}`;
+
   return (
     <StyledListItem id={`item-${index}`}>
       <Text variant="body2" fontWeight={500} color="text.dark" p={2}>
@@ -136,7 +155,9 @@ const ResultItem = ({
             onClose?.();
           }}
         >
-          <Text variant="body2">{metadata.icns.address || value}</Text>
+          <Text variant="body2">
+            {metadata.icns.address || metadata.initiaUsername.address || value}
+          </Text>
           {metadata.icns.icnsNames?.primaryName && (
             <Flex gap={1} align="center" flexWrap="wrap">
               <Flex gap={1} align="center">
@@ -163,6 +184,9 @@ const ResultItem = ({
                 )}
             </Flex>
           )}
+          {metadata.initiaUsername?.username && (
+            <InitiaUsername username={metadata.initiaUsername.username} />
+          )}
         </Flex>
       )}
     </StyledListItem>
@@ -286,13 +310,19 @@ const Searchbar = () => {
 
   const handleSelectResult = useCallback(
     (type?: SearchResultType, isClick = false) => {
+      const getQueryValue = () => {
+        if (type === "Module Path") {
+          return splitModule(keyword) as [Addr, string];
+        }
+        return (
+          metadata.icns.address || metadata.initiaUsername.address || keyword
+        );
+      };
+
       trackUseMainSearch(isClick, type);
       const routeOptions = getRouteOptions(type);
       if (routeOptions) {
-        const queryValues =
-          type === "Module Path"
-            ? (splitModule(keyword) as [Addr, string])
-            : metadata.icns.address || keyword;
+        const queryValues = getQueryValue();
         navigate({
           pathname: routeOptions.pathname,
           query: generateQueryObject(routeOptions.query, queryValues),
@@ -301,7 +331,13 @@ const Searchbar = () => {
         onClose();
       }
     },
-    [keyword, metadata.icns.address, navigate, onClose]
+    [
+      keyword,
+      metadata.icns.address,
+      metadata.initiaUsername.address,
+      navigate,
+      onClose,
+    ]
   );
 
   const handleOnKeyEnter = useCallback(

src/lib/pages/account-details/components/AccountHeader.tsx

@@ -1,4 +1,4 @@
-import { Flex, Heading, IconButton, Image, Text } from "@chakra-ui/react";
+import { Flex, IconButton, Image, Text } from "@chakra-ui/react";
 import { observer } from "mobx-react-lite";
 
 import { useMobile, useMoveConfig } from "lib/app-provider";
@@ -13,8 +13,11 @@ import { PrimaryNameMark } from "lib/components/PrimaryNameMark";
 import { TotalValue } from "lib/components/TotalValue";
 import { useAccountStore } from "lib/providers/store";
 import type { AccountData } from "lib/services/types";
+import { useInitiaUsernameByAddress } from "lib/services/username";
 import type { BechAddr, HexAddr, Option } from "lib/types";
 
+import { AccountTitle } from "./AccountTitle";
+
 interface AccounHeaderProps {
   accountData: Option<AccountData>;
   accountAddress: BechAddr;
@@ -25,13 +28,10 @@ export const AccountHeader = observer(
   ({ accountData, accountAddress, hexAddress }: AccounHeaderProps) => {
     const move = useMoveConfig({ shouldRedirect: false });
     const { isAccountSaved, getAccountLocalInfo } = useAccountStore();
+    const { data } = useInitiaUsernameByAddress(hexAddress, move.enabled);
 
     const isSaved = isAccountSaved(accountAddress);
     const accountLocalInfo = getAccountLocalInfo(accountAddress);
-    const displayName =
-      accountLocalInfo?.name ??
-      accountData?.publicInfo?.name ??
-      (accountData?.icns?.primaryName || "Account Details");
 
     const isMobile = useMobile();
 
@@ -43,29 +43,11 @@ export const AccountHeader = observer(
       >
         <Flex direction="column" gap={2} w={{ base: "full", lg: "auto" }}>
           <Flex gap={4} align="center" minH="36px">
-            <Flex gap={1} align="center">
-              {accountData?.projectInfo?.logo ||
-              accountData?.icns?.primaryName ? (
-                <Image
-                  src={
-                    accountData?.projectInfo?.logo ??
-                    "https://celatone-api.alleslabs.dev/images/entities/icns"
-                  }
-                  borderRadius="full"
-                  alt={
-                    accountData?.projectInfo?.name ??
-                    accountData?.icns?.primaryName
-                  }
-                  width={7}
-                  height={7}
-                />
-              ) : (
-                <CustomIcon name="wallet" boxSize={5} color="secondary.main" />
-              )}
-              <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
-                {displayName}
-              </Heading>
-            </Flex>
+            <AccountTitle
+              accountData={accountData}
+              accountLocalInfo={accountLocalInfo}
+              hexAddress={hexAddress}
+            />
             {!isMobile && (
               <>
                 {isSaved && accountLocalInfo ? (
@@ -147,6 +129,21 @@ export const AccountHeader = observer(
                 />
               </Flex>
             )}
+            {accountLocalInfo?.name && (
+              <Flex mt={{ base: 1, md: 0 }} alignItems="center">
+                <Text fontWeight={500} color="text.dark" variant="body2" mr={2}>
+                  Initia Username:
+                </Text>
+                <Image
+                  src="https://assets.alleslabs.dev/webapp-assets/name-services/initia-username.svg"
+                  borderRadius="full"
+                  width={4}
+                  height={4}
+                  mr={1}
+                />
+                <Text variant="body2">{data?.username}</Text>
+              </Flex>
+            )}
           </Flex>
           {accountData?.icns && (
             <Flex gap={2} align="center">

src/lib/pages/account-details/components/AccountTitle.tsx

@@ -0,0 +1,84 @@
+import { Flex, Heading, Image, Skeleton } from "@chakra-ui/react";
+
+import { useMoveConfig } from "lib/app-provider";
+import { CustomIcon } from "lib/components/icon";
+import type { AccountData } from "lib/services/types";
+import { useInitiaUsernameByAddress } from "lib/services/username";
+import type { AccountLocalInfo } from "lib/stores/account";
+import type { HexAddr, Option } from "lib/types";
+
+export const AccountTitle = ({
+  accountData,
+  accountLocalInfo,
+  hexAddress,
+}: {
+  accountData: Option<AccountData>;
+  accountLocalInfo: Option<AccountLocalInfo>;
+  hexAddress: HexAddr;
+}) => {
+  const move = useMoveConfig({ shouldRedirect: false });
+  const { data, isLoading, isFetching } = useInitiaUsernameByAddress(
+    hexAddress,
+    move.enabled
+  );
+
+  const handleDisplayName = () => {
+    if (accountLocalInfo?.name) return accountLocalInfo.name;
+    if (accountData?.publicInfo?.name) return accountData?.publicInfo?.name;
+    if (accountData?.icns?.primaryName) return accountData?.icns?.primaryName;
+    if (move.enabled && data?.username) return data?.username;
+    return "Account Details";
+  };
+
+  const handleIcon = () => {
+    const altText =
+      accountData?.projectInfo?.name ?? accountData?.icns?.primaryName;
+
+    if (accountData?.projectInfo?.logo || accountData?.icns?.primaryName)
+      return (
+        <Image
+          src="https://assets.alleslabs.dev/webapp-assets/name-services/icns.png"
+          borderRadius="full"
+          alt={altText}
+          width={7}
+          height={7}
+        />
+      );
+
+    if (move.enabled && data?.username && !accountLocalInfo?.name)
+      return (
+        <Image
+          src="https://assets.alleslabs.dev/webapp-assets/name-services/initia-username.svg"
+          borderRadius="full"
+          alt={altText}
+          width={6}
+          height={6}
+          mr={1}
+        />
+      );
+
+    if (accountLocalInfo?.name)
+      return <CustomIcon name="bookmark" boxSize={5} color="secondary.main" />;
+    return <CustomIcon name="wallet" boxSize={5} color="secondary.main" />;
+  };
+
+  if (isLoading && isFetching)
+    return (
+      <Skeleton
+        h={6}
+        w={32}
+        borderRadius={4}
+        startColor="gray.500"
+        endColor="gray.700"
+      />
+    );
+
+  return (
+    <Flex gap={1} align="center">
+      {handleIcon()}
+      <Heading as="h5" variant={{ base: "h6", md: "h5" }}>
+        {handleDisplayName()}
+      </Heading>
+    </Flex>
+  );
+};