Staging/sepolia release

.env.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_ARGENT_WEBWALLET_URL=https://web.argent.xyz
+NEXT_PUBLIC_ARGENT_SESSION_SERVICE_BASE_URL=https://cloud.argent-api.com/v1
+NEXT_PUBLIC_CHAIN_ID=SN_MAIN
+

src/components/StarknetDapp.tsx

@@ -2,7 +2,7 @@
 import { SignMessage } from "@/components/sections/SignMessage"
 import { Transactions } from "@/components/sections/Transactions/Transactions"
 import { useAccount } from "@starknet-react/core"
-import { useState } from "react"
+import { useState, Suspense } from "react"
 import { Connect } from "./connect/Connect"
 import { Header } from "./Header"
 import { GithubLogo } from "./icons/GithubLogo"
@@ -13,10 +13,19 @@ import { SectionButton } from "./sections/SectionButton"
 import { SectionLayout } from "./sections/SectionLayout"
 import { SessionKeysSign } from "./sections/SessionKeys/SessionKeysSign"
 import { Section } from "./sections/types"
+import { DeclareContract } from "./sections/Declare/DeclareContract"
 
-const StarknetDapp = () => {
+const StarknetDappContent = () => {
   const [section, setSection] = useState<Section | undefined>(undefined)
   const { isConnected } = useAccount()
+  // const searchParams = useSearchParams()
+
+  // useEffect(() => {
+  //   const section = searchParams.get("section")
+  //   if (section && isConnected) {
+  //     setSection(upperFirst(section) as Section)
+  //   }
+  // }, [searchParams, isConnected])
 
   return (
     <div className="flex w-full h-full column">
@@ -100,6 +109,14 @@ const StarknetDapp = () => {
                 disabled={!isConnected}
                 className={`${!section ? "flex" : section === "SessionKeys" ? "flex" : "md:flex hidden"}`}
               />
+              <SectionButton
+                section="Declare"
+                label="Declare Contract"
+                setSection={setSection}
+                selected={section === "Declare"}
+                disabled={!isConnected}
+                className={`${!section ? "flex" : section === "SessionKeys" ? "flex" : "md:flex hidden"}`}
+              />
             </div>
           </div>
 
@@ -117,6 +134,7 @@ const StarknetDapp = () => {
             {section === "Network" && <Network />}
             {section === "ERC20" && <AddToken />}
             {section === "SessionKeys" && <SessionKeysSign />}
+            {section === "Declare" && <DeclareContract />}
           </div>
         </div>
       </div>
@@ -135,4 +153,12 @@ const StarknetDapp = () => {
   )
 }
 
+const StarknetDapp = () => {
+  return (
+    <Suspense>
+      <StarknetDappContent />
+    </Suspense>
+  )
+}
+
 export { StarknetDapp }

src/components/sections/Declare/DeclareContract.tsx

@@ -0,0 +1,163 @@
+// import { useAccount, useDeclareContract } from "@starknet-react/core"
+import { useState } from "react"
+import { SectionLayout } from "../SectionLayout"
+import { Button } from "@/components/ui/Button"
+import { useAccount, useDeclareContract } from "@starknet-react/core"
+import { hash } from "starknet"
+import { isMainnet, toHexChainid } from "@/helpers/chainId"
+
+const DeclareContract = () => {
+  const { account, address, chainId } = useAccount()
+  const { declareAsync } = useDeclareContract({})
+  const [contractJson, setContractJson] = useState<string | null>(null)
+  const [compiledClassHashJson, setCompiledClassHashJson] = useState<
+    string | null
+  >(null)
+  const [declaredClassHash, setDeclaredClassHash] = useState<string | null>()
+  const [txHash, setTxHash] = useState<string | null>()
+  const [error, setError] = useState<string | null>()
+
+  if (!account || !address) {
+    return null
+  }
+
+  const handleContractChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0]
+      const reader = new FileReader()
+      reader.onload = () => {
+        setContractJson(reader.result as string)
+      }
+      reader.readAsText(file)
+    }
+  }
+
+  const handleCompiledClassHashChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const file = e.target.files[0]
+      const reader = new FileReader()
+      reader.onload = () => {
+        setCompiledClassHashJson(reader.result as string)
+      }
+      reader.readAsText(file)
+    }
+  }
+
+  const onDeclare = async () => {
+    try {
+      const { class_hash, transaction_hash } = await declareAsync({
+        contract_class: JSON.parse(contractJson || ""),
+        compiled_class_hash: hash.computeCompiledClassHash(
+          JSON.parse(compiledClassHashJson || ""),
+        ),
+      })
+
+      setDeclaredClassHash(class_hash)
+      setTxHash(transaction_hash)
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }
+  const openTxOnVoyager = () => {
+    const hexChainId = toHexChainid(chainId)
+
+    window.open(
+      isMainnet(hexChainId)
+        ? `https://voyager.online/tx/${txHash}`
+        : `https://sepolia.voyager.online/tx/${txHash}`,
+      "_blank",
+    )
+  }
+
+  const openClassHashOnVoyager = () => {
+    const hexChainId = toHexChainid(chainId)
+    window.open(
+      isMainnet(hexChainId)
+        ? `https://voyager.online/class/${declaredClassHash}`
+        : `https://sepolia.voyager.online/class/${declaredClassHash}`,
+      "_blank",
+    )
+  }
+
+  return (
+    <SectionLayout sectionTitle="Declare Contract">
+      <div className="flex flex-1 w-full bg-raisin-black rounded-lg p-3">
+        <div className="flex flex-col gap-4 w-full">
+          <span className="text-base font-medium leading-6">
+            Upload Contract Files
+          </span>
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2">
+              <label htmlFor="contract-file" className="text-sm">
+                Contract File (sierra)
+              </label>
+              <input
+                type="file"
+                id="contract-file"
+                accept=".json"
+                onChange={handleContractChange}
+                className="w-full outline-none focus:border-white focus:text-white"
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <label htmlFor="compiled-file" className="text-sm">
+                Compiled Contract File (casm)
+              </label>
+              <input
+                type="file"
+                id="compiled-file"
+                accept=".json"
+                onChange={handleCompiledClassHashChange}
+                className="w-full outline-none focus:border-white focus:text-white"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {error && (
+        <div className="flex flex-col gap-2 w-full p-4 border border-solid border-raisin-black  rounded-lg shadow-md">
+          <span className="text-md font-semibold text-red-600">Error</span>
+          <span className="text-sm ">{error}</span>
+        </div>
+      )}
+
+      {declaredClassHash && txHash && (
+        <div className="flex flex-col gap-6 w-full p-4 border border-solid border-raisin-black rounded-lg shadow-md">
+          <div className="flex flex-col items-center">
+            <span className="text-md font-semibold text-white">
+              Declared Contract Hash
+            </span>
+            <span
+              className="text-sm text-gray-400 break-all cursor-pointer"
+              onClick={openClassHashOnVoyager}
+            >
+              {declaredClassHash}
+            </span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-md font-semibold text-white">
+              Transaction Hash
+            </span>
+            <span
+              className="text-sm text-gray-400 break-all cursor-pointer"
+              onClick={openTxOnVoyager}
+            >
+              {txHash}
+            </span>
+          </div>
+        </div>
+      )}
+
+      <div className="flex  justify-center">
+        <Button className="w-full mt-3" onClick={onDeclare} hideChevron>
+          Declare contract
+        </Button>
+      </div>
+    </SectionLayout>
+  )
+}
+
+export { DeclareContract }

src/components/sections/types.ts

@@ -6,3 +6,4 @@ export type Section =
   | "Network"
   | "ERC20"
   | "SessionKeys"
+  | "Declare"

src/helpers/upperFirst.ts

@@ -0,0 +1,3 @@
+export const upperFirst = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
+}