From 374ba0f989f2c6c70eb441d0751c5b0edc26c3d4 Mon Sep 17 00:00:00 2001
From: Gerald <gerald@argent.xyz>
Date: Thu, 4 May 2023 10:35:32 +0200
Subject: [PATCH] Release v5.3.21

---
 .github/workflows/pull-request.yml            |  3 -
 lerna.json                                    |  2 +-
 packages/dapp/package.json                    |  6 +-
 packages/extension/manifest/v2.json           |  2 +-
 packages/extension/manifest/v3.json           |  2 +-
 packages/extension/package.json               | 18 ++---
 .../transactions/sources/voyager.ts           | 36 ++++++---
 .../background/transactions/transformers.ts   |  2 +-
 .../extension/src/shared/network/utils.ts     | 20 +++++
 .../ui/features/accountNfts/SendNftScreen.tsx | 50 ++++++++++--
 .../ui/features/accountNfts/aspect.model.ts   |  2 +-
 .../accountTokens/AccountTokensHeader.tsx     | 13 +++-
 .../accountTokens/SendTokenScreen.tsx         | 44 ++++++++++-
 .../accountTokens/StarknetIdCopyButton.tsx    | 39 ++++++++++
 .../DeclareSmartContractForm.tsx              | 14 ++--
 .../DeploySmartContractForm.tsx               | 22 ++----
 .../DeploySmartContractParameters.tsx         | 18 +++--
 .../settings/NetworkSettingsFormScreen.tsx    |  5 +-
 .../extension/src/ui/services/addresses.ts    | 12 ++-
 .../src/ui/services/useStarknetId.ts          | 77 +++++++++++++++++++
 packages/get-starknet/package.json            |  2 +-
 packages/guardian/package.json                |  2 +-
 packages/multicall/package.json               |  2 +-
 packages/sessions/package.json                |  2 +-
 packages/stack-router/package.json            |  4 +-
 packages/storybook/package.json               |  6 +-
 packages/storybook/src/theme/groupedColors.ts |  2 +-
 packages/swap/package.json                    |  2 +-
 packages/ui/package.json                      |  2 +-
 .../{Error.tsx => ErrorMessage.tsx}           |  4 +-
 packages/ui/src/components/index.ts           |  2 +-
 packages/window/package.json                  |  2 +-
 32 files changed, 336 insertions(+), 83 deletions(-)
 create mode 100644 packages/extension/src/ui/features/accountTokens/StarknetIdCopyButton.tsx
 create mode 100644 packages/extension/src/ui/services/useStarknetId.ts
 rename packages/ui/src/components/{Error.tsx => ErrorMessage.tsx} (80%)

diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 098cf3161..0cc5d53b7 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -4,9 +4,6 @@ on:
     branches:
       - develop
   pull_request:
-    branches:
-      - main
-      - develop
 
 jobs:
   setup:
diff --git a/lerna.json b/lerna.json
index 2422a485d..6b49afb0a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*"],
-  "version": "5.3.20",
+  "version": "5.3.21",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/packages/dapp/package.json b/packages/dapp/package.json
index aa9067aaa..398d4b498 100644
--- a/packages/dapp/package.json
+++ b/packages/dapp/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent-x/dapp",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -10,8 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@argent/get-starknet": "^5.3.20",
-    "@argent/x-sessions": "^5.3.20",
+    "@argent/get-starknet": "^5.3.21",
+    "@argent/x-sessions": "^5.3.21",
     "ethers": "^5.5.1",
     "next": "^13.0.0",
     "react": "^18.0.0",
diff --git a/packages/extension/manifest/v2.json b/packages/extension/manifest/v2.json
index 5e88672cb..6ff353379 100644
--- a/packages/extension/manifest/v2.json
+++ b/packages/extension/manifest/v2.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/chrome-manifest.json",
   "name": "Argent X",
   "description": "The security of Ethereum with the scale of StarkNet",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "manifest_version": 2,
   "browser_action": {
     "default_icon": {
diff --git a/packages/extension/manifest/v3.json b/packages/extension/manifest/v3.json
index 39cf659c3..7324f4340 100644
--- a/packages/extension/manifest/v3.json
+++ b/packages/extension/manifest/v3.json
@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/chrome-manifest.json",
   "name": "Argent X",
   "description": "The security of Ethereum with the scale of StarkNet",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "manifest_version": 3,
   "action": {
     "default_icon": {
diff --git a/packages/extension/package.json b/packages/extension/package.json
index 65e37d068..13ebec3bb 100644
--- a/packages/extension/package.json
+++ b/packages/extension/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent-x/extension",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {
@@ -74,13 +74,13 @@
     "push-release-branch": "git push --set-upstream origin release/v$npm_package_version --follow-tags"
   },
   "dependencies": {
-    "@argent/guardian": "^5.3.20",
-    "@argent/stack-router": "^5.3.20",
-    "@argent/ui": "^5.3.20",
-    "@argent/x-multicall": "^5.3.20",
-    "@argent/x-sessions": "^5.3.20",
-    "@argent/x-swap": "^5.3.20",
-    "@argent/x-window": "^5.3.20",
+    "@argent/guardian": "^5.3.21",
+    "@argent/stack-router": "^5.3.21",
+    "@argent/ui": "^5.3.21",
+    "@argent/x-multicall": "^5.3.21",
+    "@argent/x-sessions": "^5.3.21",
+    "@argent/x-swap": "^5.3.21",
+    "@argent/x-window": "^5.3.21",
     "@chakra-ui/icons": "^2.0.15",
     "@chakra-ui/react": "2.5.1",
     "@extend-chrome/messages": "^1.2.2",
@@ -118,7 +118,7 @@
     "starknet": "^4.21.0",
     "starknet3": "npm:starknet@3.18.2",
     "starknet4": "npm:starknet@4.4.0",
-    "starknet5": "npm:starknet@5.0.0-beta.3",
+    "starknet5": "npm:starknet@5.7.0",
     "styled-components": "^5.3.5",
     "styled-normalize": "^8.0.7",
     "swr": "^1.3.0",
diff --git a/packages/extension/src/background/transactions/sources/voyager.ts b/packages/extension/src/background/transactions/sources/voyager.ts
index 11f8ae6d1..3eb373dea 100644
--- a/packages/extension/src/background/transactions/sources/voyager.ts
+++ b/packages/extension/src/background/transactions/sources/voyager.ts
@@ -1,34 +1,52 @@
-import join from "url-join"
+import { Status } from "starknet"
 
+import { ARGENT_EXPLORER_BASE_URL } from "../../../shared/api/constants"
+import { argentApiNetworkForNetwork } from "../../../shared/api/fetcher"
 import { Network } from "../../../shared/network"
 import { Transaction, compareTransactions } from "../../../shared/transactions"
+import { urlWithQuery } from "../../../shared/utils/url"
 import { WalletAccount } from "../../../shared/wallet.model"
+import { stripAddressZeroPadding } from "../../../ui/features/accounts/accounts.service"
 import { fetchWithTimeout } from "../../utils/fetchWithTimeout"
 import { mapVoyagerTransactionToTransaction } from "../transformers"
 
 export interface VoyagerTransaction {
   blockId: string
-  entry_point_type: string | null
-  globalIndex?: number
+  blockNumber: number
   hash: string
   index: number
-  signature: string[] | null
   timestamp: number
-  to: string
   type: string
+  status: Status
 }
 
 export const fetchVoyagerTransactions = async (
   address: string,
   network: Network,
 ): Promise<VoyagerTransaction[]> => {
-  const { explorerUrl } = network
-  if (!explorerUrl) {
+  const explorerUrl = ARGENT_EXPLORER_BASE_URL
+  const apiNetwork = argentApiNetworkForNetwork(network.id)
+  if (!explorerUrl || !apiNetwork) {
     return []
   }
-  const response = await fetchWithTimeout(
-    join(explorerUrl, `api/txns?to=${address}`),
+
+  const url = urlWithQuery(
+    [
+      explorerUrl,
+      "accounts",
+      apiNetwork,
+      stripAddressZeroPadding(address),
+      "voyager",
+    ],
+    {
+      page: 0,
+      size: 100,
+      direction: "DESC",
+      withTransfers: true,
+    },
   )
+
+  const response = await fetchWithTimeout(url)
   const { items } = await response.json()
   return items
 }
diff --git a/packages/extension/src/background/transactions/transformers.ts b/packages/extension/src/background/transactions/transformers.ts
index 9b302a903..71cacccdf 100644
--- a/packages/extension/src/background/transactions/transformers.ts
+++ b/packages/extension/src/background/transactions/transformers.ts
@@ -10,6 +10,6 @@ export const mapVoyagerTransactionToTransaction = (
   hash: transaction.hash,
   account,
   meta,
-  status: "ACCEPTED_ON_L2",
+  status: transaction.status,
   timestamp: transaction.timestamp,
 })
diff --git a/packages/extension/src/shared/network/utils.ts b/packages/extension/src/shared/network/utils.ts
index a57b498ab..3ff4120b6 100644
--- a/packages/extension/src/shared/network/utils.ts
+++ b/packages/extension/src/shared/network/utils.ts
@@ -1,3 +1,5 @@
+import { constants } from "starknet5"
+
 import { isEqualAddress } from "../../ui/services/addresses"
 import { ArgentAccountType } from "../wallet.model"
 import { Network } from "./type"
@@ -38,3 +40,21 @@ export function mapImplementationToArgentAccountType(
   }
   return "argent"
 }
+
+export function getChainIdFromNetworkId(
+  networkId: string,
+): constants.StarknetChainId {
+  switch (networkId) {
+    case "mainnet-alpha":
+      return constants.StarknetChainId.SN_MAIN
+
+    case "goerli-alpha":
+      return constants.StarknetChainId.SN_GOERLI
+
+    case "goerli-alpha-2":
+      return constants.StarknetChainId.SN_GOERLI2
+
+    default:
+      throw new Error(`Unknown networkId: ${networkId}`)
+  }
+}
diff --git a/packages/extension/src/ui/features/accountNfts/SendNftScreen.tsx b/packages/extension/src/ui/features/accountNfts/SendNftScreen.tsx
index a2990930a..2e5f9277c 100644
--- a/packages/extension/src/ui/features/accountNfts/SendNftScreen.tsx
+++ b/packages/extension/src/ui/features/accountNfts/SendNftScreen.tsx
@@ -15,6 +15,7 @@ import { CloseIconAlt } from "../../components/Icons/CloseIconAlt"
 import { AddIcon } from "../../components/Icons/MuiIcons"
 import { StyledControlledTextArea } from "../../components/InputText"
 import Row, { RowBetween, RowCentered } from "../../components/Row"
+import { Spinner } from "../../components/Spinner"
 import { routes } from "../../routes"
 import { makeClickable } from "../../services/a11y"
 import { useAddressBook } from "../../services/addressBook"
@@ -22,6 +23,7 @@ import {
   addressSchema,
   formatTruncatedAddress,
   isEqualAddress,
+  isStarknetId,
   isValidAddress,
   normalizeAddress,
 } from "../../services/addresses"
@@ -30,6 +32,7 @@ import {
   sendTransaction,
 } from "../../services/transactions"
 import { useOnClickOutside } from "../../services/useOnClickOutside"
+import { getAddressFromStarkName } from "../../services/useStarknetId"
 import { H3, H5 } from "../../theme/Typography"
 import { Account } from "../accounts/Account"
 import {
@@ -103,11 +106,13 @@ export const SendNftScreen: FC = () => {
   const resolver = useYupValidationResolver(SendNftSchema)
 
   const { id: currentNetworkId } = useCurrentNetwork()
-  const [addressBookRecipient, setAddressBookRecipient] =
-    useState<Account | AddressBookContact>()
+  const [addressBookRecipient, setAddressBookRecipient] = useState<
+    Account | AddressBookContact
+  >()
 
   const { accountNames } = useAccountMetadata()
   const [bottomSheetOpen, setBottomSheetOpen] = useState(false)
+  const [starknetIdLoading, setStarknetIdLoading] = useState(false)
 
   const accountName = useMemo(
     () =>
@@ -126,6 +131,8 @@ export const SendNftScreen: FC = () => {
     control,
     setValue,
     watch,
+    clearErrors,
+    trigger,
   } = useForm<SendNftInput>({
     defaultValues: {
       recipient: "",
@@ -141,6 +148,8 @@ export const SendNftScreen: FC = () => {
     [],
   )
 
+  const validateStarknetId = useCallback((id: string) => isStarknetId(id), [])
+
   const validRecipientAddress =
     inputRecipient && !getFieldState("recipient").error
 
@@ -166,7 +175,8 @@ export const SendNftScreen: FC = () => {
     return <Navigate to={routes.accounts()} />
   }
 
-  const disableSubmit = isSubmitting || (submitCount > 0 && !isDirty)
+  const disableSubmit =
+    isSubmitting || (submitCount > 0 && !isDirty) || starknetIdLoading
 
   const onSubmit = async ({ recipient }: SendNftInput) => {
     if (nft.contract.schema === "ERC721") {
@@ -209,6 +219,7 @@ export const SendNftScreen: FC = () => {
   const resetAddressBookRecipient = () => {
     setAddressBookRecipient(undefined)
     setValue("recipient", "")
+    clearErrors("recipient")
   }
 
   const handleSaveAddress = (savedContact: AddressBookContact) => {
@@ -217,6 +228,28 @@ export const SendNftScreen: FC = () => {
     setBottomSheetOpen(false)
   }
 
+  const handleStarknetIdNameInput = async (starkName: string) => {
+    setStarknetIdLoading(true)
+
+    const starkNameAddress = await getAddressFromStarkName(
+      starkName,
+      currentNetworkId,
+    )
+
+    setStarknetIdLoading(false)
+
+    if (starkNameAddress && isValidAddress(starkNameAddress)) {
+      handleAddressSelect({
+        id: `${starkName}-${starkNameAddress}`,
+        name: starkName,
+        address: starkNameAddress,
+        networkId: currentNetworkId,
+      })
+    }
+
+    await trigger("recipient")
+  }
+
   return (
     <>
       <AddContactBottomSheet
@@ -291,8 +324,11 @@ export const SendNftScreen: FC = () => {
                         paddingRight: "50px",
                         borderRadius: addressBookOpen ? "8px 8px 0 0" : "8px",
                       }}
-                      onlyAddressHex
-                      onChange={(e: any) => {
+                      onChange={async (e: any) => {
+                        if (validateStarknetId(e.target.value)) {
+                          return await handleStarknetIdNameInput(e.target.value)
+                        }
+
                         if (validateStarknetAddress(e.target.value)) {
                           const account = addressBook.contacts.find((c) =>
                             isEqualAddress(c.address, e.target.value),
@@ -303,7 +339,9 @@ export const SendNftScreen: FC = () => {
                     >
                       <>
                         <InputGroupAfter>
-                          {validRecipientAddress ? (
+                          {starknetIdLoading ? (
+                            <Spinner size={18} />
+                          ) : validRecipientAddress ? (
                             <CloseIconAlt
                               {...makeClickable(resetAddressBookRecipient)}
                               style={{ cursor: "pointer" }}
diff --git a/packages/extension/src/ui/features/accountNfts/aspect.model.ts b/packages/extension/src/ui/features/accountNfts/aspect.model.ts
index 9856e8437..f815589ab 100644
--- a/packages/extension/src/ui/features/accountNfts/aspect.model.ts
+++ b/packages/extension/src/ui/features/accountNfts/aspect.model.ts
@@ -49,7 +49,7 @@ export const AspectNftSchema = z.object({
     .transform((s) => s ?? undefined),
   animation_uri: z.string().nullable().optional(),
   external_uri: z.string().nullable().optional(),
-  owner: AspectNftOwnerSchema.optional(),
+  owner: AspectNftOwnerSchema.nullable().optional(),
   contract: AspectNftContractSchema,
 })
 
diff --git a/packages/extension/src/ui/features/accountTokens/AccountTokensHeader.tsx b/packages/extension/src/ui/features/accountTokens/AccountTokensHeader.tsx
index 12c04aa61..1ce8be8e4 100644
--- a/packages/extension/src/ui/features/accountTokens/AccountTokensHeader.tsx
+++ b/packages/extension/src/ui/features/accountTokens/AccountTokensHeader.tsx
@@ -5,7 +5,9 @@ import { FC } from "react"
 import { prettifyCurrencyValue } from "../../../shared/token/price"
 import { BaseWalletAccount } from "../../../shared/wallet.model"
 import { AddressCopyButton } from "../../components/AddressCopyButton"
+import { useStarknetId } from "../../services/useStarknetId"
 import { AccountStatus } from "../accounts/accounts.service"
+import { StarknetIdCopyButton } from "./StarknetIdCopyButton"
 import { useSumTokenBalancesToCurrencyValue } from "./tokenPriceHooks"
 import { useTokensWithBalance } from "./tokens.state"
 
@@ -28,6 +30,8 @@ export const AccountTokensHeader: FC<AccountSubheaderProps> = ({
   const sumCurrencyValue = useSumTokenBalancesToCurrencyValue(tokenDetails)
   const accountAddress = account.address
 
+  const { data: starknetId } = useStarknetId(account)
+
   return (
     <VStack spacing={0.5}>
       {sumCurrencyValue !== undefined ? (
@@ -35,7 +39,14 @@ export const AccountTokensHeader: FC<AccountSubheaderProps> = ({
       ) : (
         <H2>{accountName}</H2>
       )}
-      <AddressCopyButton address={accountAddress} />
+      {starknetId ? (
+        <StarknetIdCopyButton
+          starknetId={starknetId}
+          address={accountAddress}
+        />
+      ) : (
+        <AddressCopyButton address={accountAddress} />
+      )}
       {status.code === "ERROR" && (
         <VStack spacing={2} pt={2}>
           <FieldError>{status.text}</FieldError>
diff --git a/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx b/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx
index 3f58ae655..a485f3705 100644
--- a/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx
+++ b/packages/extension/src/ui/features/accountTokens/SendTokenScreen.tsx
@@ -32,6 +32,7 @@ import {
   addressSchema,
   formatTruncatedAddress,
   isEqualAddress,
+  isStarknetId,
   isValidAddress,
   normalizeAddress,
 } from "../../services/addresses"
@@ -40,6 +41,7 @@ import {
   sendTransaction,
 } from "../../services/transactions"
 import { useOnClickOutside } from "../../services/useOnClickOutside"
+import { getAddressFromStarkName } from "../../services/useStarknetId"
 import { H3, H5 } from "../../theme/Typography"
 import { Account } from "../accounts/Account"
 import {
@@ -218,6 +220,7 @@ export const SendTokenScreen: FC = () => {
   >()
   const [bottomSheetOpen, setBottomSheetOpen] = useState(false)
   const { accountNames } = useAccountMetadata()
+  const [starknetIdLoading, setStarknetIdLoading] = useState(false)
 
   const accountName = useMemo(
     () =>
@@ -238,6 +241,8 @@ export const SendTokenScreen: FC = () => {
     control,
     setValue,
     watch,
+    clearErrors,
+    trigger,
   } = useForm<SendInput>({
     defaultValues: {
       recipient: "",
@@ -308,6 +313,8 @@ export const SendTokenScreen: FC = () => {
     [],
   )
 
+  const validateStarknetId = useCallback((id: string) => isStarknetId(id), [])
+
   const validRecipientAddress =
     inputRecipient && !getFieldState("recipient").error
 
@@ -374,6 +381,7 @@ export const SendTokenScreen: FC = () => {
   const resetAddressBookRecipient = () => {
     setAddressBookRecipient(undefined)
     setValue("recipient", "")
+    clearErrors("recipient")
   }
 
   const handleSaveAddress = (savedContact: AddressBookContact) => {
@@ -382,11 +390,34 @@ export const SendTokenScreen: FC = () => {
     setBottomSheetOpen(false)
   }
 
+  const handleStarknetIdNameInput = async (starkName: string) => {
+    setStarknetIdLoading(true)
+
+    const starkNameAddress = await getAddressFromStarkName(
+      starkName,
+      currentNetworkId,
+    )
+
+    setStarknetIdLoading(false)
+
+    if (starkNameAddress && isValidAddress(starkNameAddress)) {
+      handleAddressSelect({
+        id: `${starkName}-${starkNameAddress}`,
+        name: starkName,
+        address: starkNameAddress,
+        networkId: currentNetworkId,
+      })
+    }
+
+    await trigger("recipient")
+  }
+
   const disableSubmit =
     !isDirty ||
     isSubmitting ||
     (submitCount > 0 && !isDirty) ||
-    isInputAmountGtBalance // Balance: 1234, maxInput: 1231, , maxFee: 3, updatedInput: 1233
+    isInputAmountGtBalance ||
+    starknetIdLoading
 
   return (
     <>
@@ -522,8 +553,11 @@ export const SendTokenScreen: FC = () => {
                         paddingRight: "50px",
                         borderRadius: addressBookOpen ? "8px 8px 0 0" : "8px",
                       }}
-                      onlyAddressHex
-                      onChange={(e) => {
+                      onChange={async (e) => {
+                        if (validateStarknetId(e.target.value)) {
+                          return await handleStarknetIdNameInput(e.target.value)
+                        }
+
                         if (validateStarknetAddress(e.target.value)) {
                           const account = addressBook.contacts.find((c) =>
                             isEqualAddress(c.address, e.target.value),
@@ -534,7 +568,9 @@ export const SendTokenScreen: FC = () => {
                     >
                       <>
                         <InputGroupAfter>
-                          {validRecipientAddress ? (
+                          {starknetIdLoading ? (
+                            <Spinner size={18} />
+                          ) : validRecipientAddress ? (
                             <CloseIconAlt
                               {...makeClickable(resetAddressBookRecipient)}
                               style={{ cursor: "pointer" }}
diff --git a/packages/extension/src/ui/features/accountTokens/StarknetIdCopyButton.tsx b/packages/extension/src/ui/features/accountTokens/StarknetIdCopyButton.tsx
new file mode 100644
index 000000000..b335dc7ab
--- /dev/null
+++ b/packages/extension/src/ui/features/accountTokens/StarknetIdCopyButton.tsx
@@ -0,0 +1,39 @@
+import { Button, CopyTooltip } from "@argent/ui"
+import { ButtonProps } from "@chakra-ui/react"
+import { FC } from "react"
+
+import {
+  formatTruncatedAddress,
+  normalizeAddress,
+} from "../../services/addresses"
+
+export interface StarknetIdCopyButtonProps extends ButtonProps {
+  starknetId: string
+  address: string
+}
+
+export const StarknetIdCopyButton: FC<StarknetIdCopyButtonProps> = ({
+  starknetId,
+  address,
+}) => {
+  const copyValue = normalizeAddress(address)
+  return (
+    <CopyTooltip
+      prompt={formatTruncatedAddress(copyValue)}
+      copyValue={copyValue}
+    >
+      <Button
+        size="3xs"
+        bg="neutrals.700"
+        _hover={{ bg: "neutrals.700", color: "text" }}
+        borderRadius="100px"
+        color="white50"
+        textAlign="center"
+        pb={1}
+        pt={0.5}
+      >
+        {starknetId}
+      </Button>
+    </CopyTooltip>
+  )
+}
diff --git a/packages/extension/src/ui/features/settings/DeveloperSettings/DeclareSmartContractForm.tsx b/packages/extension/src/ui/features/settings/DeveloperSettings/DeclareSmartContractForm.tsx
index b4fe13045..d60571237 100644
--- a/packages/extension/src/ui/features/settings/DeveloperSettings/DeclareSmartContractForm.tsx
+++ b/packages/extension/src/ui/features/settings/DeveloperSettings/DeclareSmartContractForm.tsx
@@ -1,4 +1,4 @@
-import { Error as ErrorEl, Input, Select } from "@argent/ui"
+import { ErrorMessage, Input, Select } from "@argent/ui"
 import { Box, Flex, Spinner } from "@chakra-ui/react"
 import { get, isEmpty } from "lodash-es"
 import { FC, ReactNode, useCallback, useRef, useState } from "react"
@@ -149,7 +149,7 @@ const DeclareSmartContractForm: FC<DeclareSmartContractFormProps> = ({
           )}
         />
         {!isEmpty(errors.contract) && (
-          <ErrorEl
+          <ErrorMessage
             message={
               errors.contract.type === "required"
                 ? "A contract is required"
@@ -192,7 +192,7 @@ const DeclareSmartContractForm: FC<DeclareSmartContractFormProps> = ({
           )}
         </Box>
         {!isEmpty(errors.classHash) && (
-          <ErrorEl message="Classhash is required" />
+          <ErrorMessage message="Classhash is required" />
         )}
 
         <Controller
@@ -212,7 +212,9 @@ const DeclareSmartContractForm: FC<DeclareSmartContractFormProps> = ({
             />
           )}
         />
-        {!isEmpty(errors.network) && <ErrorEl message="Network is required" />}
+        {!isEmpty(errors.network) && (
+          <ErrorMessage message="Network is required" />
+        )}
 
         <Controller
           name="account"
@@ -233,7 +235,9 @@ const DeclareSmartContractForm: FC<DeclareSmartContractFormProps> = ({
             />
           )}
         />
-        {!isEmpty(errors.account) && <ErrorEl message="Account is required" />}
+        {!isEmpty(errors.account) && (
+          <ErrorMessage message="Account is required" />
+        )}
 
         {children?.({
           isDirty,
diff --git a/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractForm.tsx b/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractForm.tsx
index 55982b7da..6bbf5448b 100644
--- a/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractForm.tsx
+++ b/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractForm.tsx
@@ -1,11 +1,4 @@
-import {
-  Alert,
-  CellStack,
-  Error as ErrorEl,
-  Input,
-  P4,
-  Select,
-} from "@argent/ui"
+import { Alert, CellStack, ErrorMessage, Input, P4, Select } from "@argent/ui"
 import { Box } from "@chakra-ui/react"
 import { isEmpty } from "lodash-es"
 import { FC, ReactNode, useCallback, useEffect, useState } from "react"
@@ -83,8 +76,9 @@ const DeploySmartContractForm: FC<DeploySmartContractFormProps> = ({
   const { errors, isDirty, isSubmitting } = formState
 
   const [fetchError, setFetchError] = useState("")
-  const [parameterFields, setParameterFields] =
-    useState<ParameterField[] | null>(null)
+  const [parameterFields, setParameterFields] = useState<
+    ParameterField[] | null
+  >(null)
 
   const currentNetwork = watch("network")
   const currentClassHash = watch("classHash")
@@ -237,10 +231,10 @@ const DeploySmartContractForm: FC<DeploySmartContractFormProps> = ({
             />
           </Box>
           {errors.classHash?.type === "required" ? (
-            <ErrorEl message="Classhash is required" />
+            <ErrorMessage message="Classhash is required" />
           ) : (
             errors.classHash?.type === "manual" && (
-              <ErrorEl message={errors.classHash.message ?? ""} />
+              <ErrorMessage message={errors.classHash.message ?? ""} />
             )
           )}
 
@@ -262,7 +256,7 @@ const DeploySmartContractForm: FC<DeploySmartContractFormProps> = ({
             )}
           />
           {!isEmpty(errors.network) && (
-            <ErrorEl message="Network is required" />
+            <ErrorMessage message="Network is required" />
           )}
 
           <Controller
@@ -285,7 +279,7 @@ const DeploySmartContractForm: FC<DeploySmartContractFormProps> = ({
             )}
           />
           {!isEmpty(errors.account) && (
-            <ErrorEl message="Account is required" />
+            <ErrorMessage message="Account is required" />
           )}
 
           {fetchError && (
diff --git a/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractParameters.tsx b/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractParameters.tsx
index 4e88ea10d..201ac1b4f 100644
--- a/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractParameters.tsx
+++ b/packages/extension/src/ui/features/settings/DeveloperSettings/DeploySmartContractParameters.tsx
@@ -1,4 +1,12 @@
-import { CellStack, Error, H6, Input, L2, Switch, icons } from "@argent/ui"
+import {
+  CellStack,
+  ErrorMessage,
+  H6,
+  Input,
+  L2,
+  Switch,
+  icons,
+} from "@argent/ui"
 import {
   Flex,
   FormControl,
@@ -104,11 +112,11 @@ const DeploySmartContractParameters: FC<{
                       />
                       {get(errors, `parameters[${index}][${i}]`)?.type ===
                       "required" ? (
-                        <Error message="Constructor argument is required" />
+                        <ErrorMessage message="Constructor argument is required" />
                       ) : (
                         get(errors, `parameters[${index}][${i}]`)?.type ===
                           "manual" && (
-                          <Error
+                          <ErrorMessage
                             message={
                               (get(errors, `parameters[${index}][${i}]`)
                                 ?.message as string) ?? ""
@@ -138,10 +146,10 @@ const DeploySmartContractParameters: FC<{
               isInvalid={!isEmpty(get(errors, `parameters[${index}]`))}
             />
             {get(errors, `parameters[${index}]`)?.type === "required" ? (
-              <Error message="Constructor argument is required" />
+              <ErrorMessage message="Constructor argument is required" />
             ) : (
               get(errors, `parameters[${index}]`)?.type === "manual" && (
-                <Error
+                <ErrorMessage
                   message={
                     (get(errors, `parameters[${index}]`)?.message as string) ??
                     ""
diff --git a/packages/extension/src/ui/features/settings/NetworkSettingsFormScreen.tsx b/packages/extension/src/ui/features/settings/NetworkSettingsFormScreen.tsx
index 1523c2b51..a8ae94580 100644
--- a/packages/extension/src/ui/features/settings/NetworkSettingsFormScreen.tsx
+++ b/packages/extension/src/ui/features/settings/NetworkSettingsFormScreen.tsx
@@ -162,14 +162,15 @@ export const NetworkSettingsFormScreen: FC<NetworkSettingsFormScreenProps> = (
           </ExtendableControl>
           <Collapse in={expanded} timeout="auto">
             <Wrapper>
-              <ControlledInputText
+              {/** TODO: Add back when we are not using backend explorer api anymore */}
+              {/* <ControlledInputText
                 autoComplete="off"
                 control={control}
                 placeholder="Explorer API URL"
                 name="explorerUrl"
                 type="url"
                 disabled={defaultNetwork.readonly}
-              />
+              /> */}
               <ControlledInputText
                 autoComplete="off"
                 control={control}
diff --git a/packages/extension/src/ui/services/addresses.ts b/packages/extension/src/ui/services/addresses.ts
index ebecb830e..712fd29b2 100644
--- a/packages/extension/src/ui/services/addresses.ts
+++ b/packages/extension/src/ui/services/addresses.ts
@@ -32,6 +32,11 @@ const isChecksumAddress = (address: string) => {
   return true
 }
 
+export const isStarknetId = (address: string) => {
+  const starkNetIdRegex = /^[a-zA-Z0-9]+\.stark$/
+  return starkNetIdRegex.test(address)
+}
+
 export const addressSchema = yup
   .string()
   .trim()
@@ -41,7 +46,12 @@ export const addressSchema = yup
       return ctx.createError({ message: "Address is required" })
     }
     try {
-      if (!/^0x[0-9a-fA-F]+$/.test(address)) {
+      if (isStarknetId(address)) {
+        // If the StarknetId is not resolved to any address, it's an error
+        return ctx.createError({ message: "Starknet ID does not exist" })
+      }
+
+      if (!/^0x[0-9a-fA-F]+$/.test(address) && !isStarknetId(address)) {
         return ctx.createError({ message: "Address should be hexadecimal" })
       }
 
diff --git a/packages/extension/src/ui/services/useStarknetId.ts b/packages/extension/src/ui/services/useStarknetId.ts
new file mode 100644
index 000000000..92dee0f47
--- /dev/null
+++ b/packages/extension/src/ui/services/useStarknetId.ts
@@ -0,0 +1,77 @@
+import { Call, stark } from "starknet"
+import { starknetId } from "starknet5"
+import useSWR from "swr"
+
+import { getMulticallForNetwork } from "../../shared/multicall"
+import { getNetwork } from "../../shared/network"
+import { getChainIdFromNetworkId } from "../../shared/network/utils"
+import { BaseWalletAccount } from "../../shared/wallet.model"
+import { getAccountIdentifier } from "../../shared/wallet.service"
+
+export function useStarknetId(account?: BaseWalletAccount) {
+  return useSWR(
+    [account && getAccountIdentifier(account), "starknetId"],
+    () => {
+      if (!account) {
+        return
+      }
+      return getStarknetId(account)
+    },
+  )
+}
+
+export async function getStarknetId(account: BaseWalletAccount) {
+  const network = await getNetwork(account.networkId)
+  const chainId = getChainIdFromNetworkId(network.id)
+
+  const multicall = getMulticallForNetwork(network)
+
+  const starknetIdContractAddress = starknetId.getStarknetIdContract(chainId)
+
+  const call: Call = {
+    contractAddress: starknetIdContractAddress,
+    entrypoint: "address_to_domain",
+    calldata: [account.address],
+  }
+
+  const response = await multicall.call(call)
+
+  const decimalDomain = response.map((element) => BigInt(element)).slice(1)
+
+  const stringDomain = starknetId.useDecoded(decimalDomain)
+
+  if (!stringDomain) {
+    throw Error("Starkname not found")
+  }
+
+  return stringDomain
+}
+
+export async function getAddressFromStarkName(
+  starkName: string,
+  networkId: string,
+) {
+  const network = await getNetwork(networkId)
+  const chainId = getChainIdFromNetworkId(network.id)
+
+  const multicall = getMulticallForNetwork(network)
+
+  const starknetIdContractAddress = starknetId.getStarknetIdContract(chainId)
+
+  const call: Call = {
+    contractAddress: starknetIdContractAddress,
+    entrypoint: "domain_to_address",
+    calldata: stark.compileCalldata({
+      domain: [
+        starknetId.useEncoded(starkName.replace(".stark", "")).toString(10),
+      ],
+    }),
+  }
+
+  try {
+    const response = await multicall.call(call)
+    return response[0]
+  } catch (error) {
+    throw Error("Could not get address from stark name")
+  }
+}
diff --git a/packages/get-starknet/package.json b/packages/get-starknet/package.json
index 38b533ee8..d3e6d5ce5 100644
--- a/packages/get-starknet/package.json
+++ b/packages/get-starknet/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/get-starknet",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "repository": "github:argentlabs/argent-x",
   "private": false,
   "main": "dist/",
diff --git a/packages/guardian/package.json b/packages/guardian/package.json
index 186705b5f..3d9c6f44e 100644
--- a/packages/guardian/package.json
+++ b/packages/guardian/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/guardian",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "license": "MIT",
   "private": false,
   "type": "module",
diff --git a/packages/multicall/package.json b/packages/multicall/package.json
index bde5880d5..3931bace8 100644
--- a/packages/multicall/package.json
+++ b/packages/multicall/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/x-multicall",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "description": "A library for batched calls to Starknet smart contracts",
   "keywords": [
     "starknet",
diff --git a/packages/sessions/package.json b/packages/sessions/package.json
index 63ab8c816..457ca2a06 100644
--- a/packages/sessions/package.json
+++ b/packages/sessions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/x-sessions",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "description": "Manage sessions for Argent X wallets",
   "keywords": [
     "starknet",
diff --git a/packages/stack-router/package.json b/packages/stack-router/package.json
index 9729ff250..3cee94b58 100644
--- a/packages/stack-router/package.json
+++ b/packages/stack-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/stack-router",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "license": "MIT",
   "private": true,
   "files": [
@@ -32,7 +32,7 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@argent/ui": "^5.3.20",
+    "@argent/ui": "^5.3.21",
     "@types/lodash-es": "^4.17.6",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index d69e07bbd..d55cc55e2 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -1,10 +1,10 @@
 {
   "name": "@argent-x/storybook",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "private": true,
   "devDependencies": {
-    "@argent-x/extension": "^5.3.20",
-    "@argent/ui": "^5.3.20",
+    "@argent-x/extension": "^5.3.21",
+    "@argent/ui": "^5.3.21",
     "@babel/core": "^7.18.5",
     "@chakra-ui/storybook-addon": "^4.0.12",
     "@storybook/addon-actions": "^6.5.9",
diff --git a/packages/storybook/src/theme/groupedColors.ts b/packages/storybook/src/theme/groupedColors.ts
index 8b26f62f3..5fe64ffbc 100644
--- a/packages/storybook/src/theme/groupedColors.ts
+++ b/packages/storybook/src/theme/groupedColors.ts
@@ -3,7 +3,7 @@ import { upperFirst } from "lodash-es"
 
 const groupedColors: Record<string, Record<string, string>> = {}
 
-Object.entries(theme.colors).map(([key, value]) => {
+Object.entries(theme.colors).forEach(([key, value]) => {
   if (typeof value === "string") {
     const match = key.match(/[a-z]+/)?.[0]
     const title = match ? upperFirst(match) : "Ungrouped"
diff --git a/packages/swap/package.json b/packages/swap/package.json
index ef6f8b543..27773ff7a 100644
--- a/packages/swap/package.json
+++ b/packages/swap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/x-swap",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "license": "MIT",
   "private": true,
   "files": [
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 4bbddf920..3ab5886e9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/ui",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "license": "MIT",
   "private": true,
   "files": [
diff --git a/packages/ui/src/components/Error.tsx b/packages/ui/src/components/ErrorMessage.tsx
similarity index 80%
rename from packages/ui/src/components/Error.tsx
rename to packages/ui/src/components/ErrorMessage.tsx
index adba82ab1..c72a406de 100644
--- a/packages/ui/src/components/Error.tsx
+++ b/packages/ui/src/components/ErrorMessage.tsx
@@ -4,7 +4,7 @@ import { FC } from "react"
 import InfoIcon from "./icons/InfoIcon"
 import { FieldError } from "./Typography"
 
-const Error: FC<{ message: string }> = ({ message }) => (
+const ErrorMessage: FC<{ message: string }> = ({ message }) => (
   <Flex position="relative" justifyContent="flex-start" gap="1" mt="1" mb="1">
     <Text fontSize="sm" color="error.500">
       <InfoIcon />
@@ -13,4 +13,4 @@ const Error: FC<{ message: string }> = ({ message }) => (
   </Flex>
 )
 
-export { Error }
+export { ErrorMessage }
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 50d9c6fa2..430d41a26 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -11,7 +11,7 @@ export * from "./CopyTooltip"
 export * from "./DapplandBanner"
 export * from "./DetailAccordion"
 export * from "./Empty"
-export * from "./Error"
+export * from "./ErrorMessage"
 export * from "./FlowHeader"
 export * from "./Input"
 export * from "./LoadingPulse"
diff --git a/packages/window/package.json b/packages/window/package.json
index ae7e67cd2..d1fc693b2 100644
--- a/packages/window/package.json
+++ b/packages/window/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@argent/x-window",
-  "version": "5.3.20",
+  "version": "5.3.21",
   "license": "MIT",
   "files": [
     "dist"