refactor: use starknet.js v5

components/UI/navbar.tsx

@@ -3,12 +3,13 @@ import React, { useState, useEffect, FunctionComponent } from "react";
 import { AiOutlineClose, AiOutlineMenu } from "react-icons/ai";
 import styles from "../../styles/components/navbar.module.css";
 import Button from "./button";
-import { useConnectors, useAccount, useStarknet } from "@starknet-react/core";
+import { useConnectors, useAccount, useProvider } from "@starknet-react/core";
 import Wallets from "./wallets";
 import LogoutIcon from "@mui/icons-material/Logout";
 import ModalMessage from "./modalMessage";
 import { useDisplayName } from "../../hooks/displayName.tsx";
 import { useDomainFromAddress } from "../../hooks/naming";
+import { constants } from "starknet";
 
 const Navbar: FunctionComponent = () => {
   const [nav, setNav] = useState<boolean>(false);
@@ -18,7 +19,7 @@ const Navbar: FunctionComponent = () => {
   const [isWrongNetwork, setIsWrongNetwork] = useState(false);
 
   const { available, connect, disconnect } = useConnectors();
-  const { library } = useStarknet();
+  const { provider } = useProvider();
   const domainOrAddressMinified = useDisplayName(address ?? "");
   const domain = useDomainFromAddress(address ?? "").domain;
   const addressOrDomain =
@@ -41,22 +42,15 @@ const Navbar: FunctionComponent = () => {
   useEffect(() => {
     if (!isConnected) return;
 
-    const STARKNET_NETWORK = {
-      mainnet: "0x534e5f4d41494e",
-      testnet: "0x534e5f474f45524c49",
-    };
-
-    if (library.chainId === STARKNET_NETWORK.testnet && network === "mainnet") {
-      setIsWrongNetwork(true);
-    } else if (
-      library.chainId === STARKNET_NETWORK.mainnet &&
-      network === "testnet"
-    ) {
-      setIsWrongNetwork(true);
-    } else {
-      setIsWrongNetwork(false);
-    }
-  }, [library, network, isConnected]);
+    provider.getChainId().then((chainId) => {
+      const isWrongNetwork =
+        (chainId === constants.StarknetChainId.SN_GOERLI &&
+          network === "mainnet") ||
+        (chainId === constants.StarknetChainId.SN_MAIN &&
+          network === "testnet");
+      setIsWrongNetwork(isWrongNetwork);
+    });
+  }, [provider, network, isConnected]);
 
   function handleNav(): void {
     setNav(!nav);

components/UI/pieChart.tsx

@@ -31,7 +31,7 @@ const PieChart: FunctionComponent = () => {
   useEffect(() => {
     // connector is of type Connector<any> in starknet-react
     // but _wallet which is supposed to be of type IStarknetWindowObject is set as private
-    if (connector && connector.id() === "braavos") {
+    if (connector && connector.id === "braavos") {
       setBraavosWallet((connector as any)._wallet);
     }
   }, [connector]);

components/UI/wallets.tsx

@@ -57,11 +57,11 @@ const Wallets: FunctionComponent<WalletsProps> = ({
         {connectors.map((connector) => {
           if (connector.available()) {
             return (
-              <div className="mt-5 flex justify-center" key={connector.id()}>
+              <div className="mt-5 flex justify-center" key={connector.id}>
                 <Button onClick={() => connectWallet(connector)}>
                   <div className="flex justify-center items-center">
-                    <WalletIcons id={connector.id()} />
-                    {`Connect ${connector.name()}`}
+                    <WalletIcons id={connector.id} />
+                    {`Connect ${connector.name}`}
                   </div>
                 </Button>
               </div>

components/quests/reward.tsx

@@ -2,14 +2,11 @@ import React, { FunctionComponent, useEffect, useState } from "react";
 import styles from "../../styles/quests.module.css";
 import Button from "../UI/button";
 import ModalMessage from "../UI/modalMessage";
-import {
-  Call,
-  useContractWrite,
-  useTransactionManager,
-} from "@starknet-react/core";
+import { useContractWrite, useTransactionManager } from "@starknet-react/core";
 import { useRouter } from "next/router";
 import Lottie from "lottie-react";
 import verifiedLottie from "../../public/visuals/verifiedLottie.json";
+import { Call } from "starknet";
 
 type RewardProps = {
   onClick: () => void;

context/StarknetIdJsProvider.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, createContext, useMemo } from "react";
-import { Provider } from "starknet";
+import { Provider, constants } from "starknet";
 import { StarknetIdNavigator } from "starknetid.js";
 
 interface StarknetIdJsConfig {
@@ -17,10 +17,13 @@ export const StarknetIdJsProvider = ({ children }: { children: ReactNode }) => {
         sequencer: {
           network:
             process.env.NEXT_PUBLIC_IS_TESTNET === "true"
-              ? "goerli-alpha"
-              : "mainnet-alpha",
+              ? constants.NetworkName.SN_GOERLI
+              : constants.NetworkName.SN_MAIN,
         },
-      })
+      }),
+      process.env.NEXT_PUBLIC_IS_TESTNET === "true"
+        ? constants.StarknetChainId.SN_GOERLI
+        : constants.StarknetChainId.SN_MAIN
     );
   }, []);
 

hooks/naming.ts

@@ -1,15 +1,8 @@
 import BN from "bn.js";
 import { useContext, useEffect, useState } from "react";
-import { utils } from "starknetid.js";
 import { StarknetIdJsContext } from "../context/StarknetIdJsProvider";
 import { basicAlphabet } from "../utils/constants";
 
-// TODO: remove and use utils.decodeDomain when dapp uses starknet.js v5
-export function useDecoded(encoded: BN[]): string {
-  const convertEncoded = encoded.map((element) => BigInt(element.toString()));
-  return utils.decodeDomain(convertEncoded);
-}
-
 type DomainData = {
   domain: string;
   error?: string;

package.json

@@ -16,11 +16,12 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.10.1",
     "@nimiq/style": "^0.8.5",
-    "@starknet-react/core": "^0.17.3",
+    "@starknet-react/core": "^1.0.3",
     "@vercel/analytics": "^0.1.5",
     "big.js": "^6.2.1",
     "bn.js": "^5.2.1",
     "chart.js": "^4.3.0",
+    "get-starknet-core": "^3.1.0",
     "lottie-react": "^2.4.0",
     "mongodb": "^4.12.1",
     "next": "12.2.5",
@@ -31,8 +32,8 @@
     "react-icons": "^4.4.0",
     "react-loader-spinner": "^5.2.0",
     "react-use": "^17.4.0",
-    "starknet": "^4.22.0",
-    "starknetid.js": "^1.5.0",
+    "starknet": "^5.14.1",
+    "starknetid.js": "^1.5.2",
     "twitter-api-sdk": "^1.2.1"
   },
   "devDependencies": {

pages/[addressOrDomain].tsx

@@ -33,7 +33,7 @@ const AddressOrDomain: NextPage = () => {
   const [userNft, setUserNft] = useState<AspectNftProps[]>([]);
   const [nextUrl, setNextUrl] = useState<string | null>(null);
   const [unusedAssets, setUnusedAssets] = useState<AspectNftProps[]>([]);
-  const isBraavosWallet = connector && connector.id() === "braavos";
+  const isBraavosWallet = connector && connector.id === "braavos";
 
   // Filtered NFTs
   const NFTContracts = [
@@ -54,7 +54,7 @@ const AddressOrDomain: NextPage = () => {
       }
 
       const lastConnectedConnector = connectors.find(
-        (connector) => connector.id() === lastConnectedConnectorId
+        (connector) => connector.id === lastConnectedConnectorId
       );
       if (lastConnectedConnector === undefined) {
         return;

pages/_app.tsx

@@ -4,7 +4,7 @@ import type { AppProps } from "next/app";
 import Navbar from "../components/UI/navbar";
 import Head from "next/head";
 import { ThemeProvider } from "@mui/material";
-import { InjectedConnector, StarknetProvider } from "@starknet-react/core";
+import { InjectedConnector, StarknetConfig } from "@starknet-react/core";
 import { Analytics } from "@vercel/analytics/react";
 import { StarknetIdJsProvider } from "../context/StarknetIdJsProvider";
 import { createTheme } from "@mui/material/styles";
@@ -33,7 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <>
-      <StarknetProvider connectors={connectors} autoConnect>
+      <StarknetConfig connectors={connectors} autoConnect>
         <StarknetIdJsProvider>
           <ThemeProvider theme={theme}>
             <Head>
@@ -48,7 +48,7 @@ function MyApp({ Component, pageProps }: AppProps) {
           </ThemeProvider>
           <Analytics />
         </StarknetIdJsProvider>
-      </StarknetProvider>
+      </StarknetConfig>
     </>
   );
 }