Merge pull request #44 from argentlabs/develop

starknetkit and starknet-react update
argentlabs · Sep 30, 2024 · aa5f3b6 · aa5f3b6
2 parents 870e137 + 3c69afd
commit aa5f3b6
Show file tree

Hide file tree

Showing 13 changed files with 844 additions and 742 deletions.
diff --git a/package.json b/package.json
@@ -7,10 +7,11 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "prepare": "husky"
+    "prepare": "husky",
+    "format": "prettier --write ."
   },
   "dependencies": {
-    "@argent/x-sessions": "^6.7.4",
+    "@argent/x-sessions": "^6.7.8",
     "@argent/x-shared": "^1.32.1",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
@@ -20,18 +21,18 @@
     "@starknet-react/core": "^2.8.2",
     "colord": "^2.9.3",
     "framer-motion": "^11.2.10",
-    "get-starknet-core": "^3.2.0",
+    "get-starknet-core": "^4.0.0",
     "jotai": "^2.8.2",
     "lodash-es": "^4.17.21",
     "next": "14.2.4",
     "popmotion": "^11.0.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "starknet": "^6.11.0",
-    "starknet-react-chains-next": "npm:@starknet-react/[email protected].2",
-    "starknet-react-core-next": "npm:@starknet-react/[email protected].0-beta.2",
+    "starknet-react-chains-next": "npm:@starknet-react/[email protected].3",
+    "starknet-react-core-next": "npm:@starknet-react/[email protected].1-beta.0",
     "starknetkit-latest": "npm:starknetkit@^1.1.9",
-    "starknetkit-next": "npm:starknetkit@^2.2.25"
+    "starknetkit-next": "npm:starknetkit@^2.3.1"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/abi/ERC20TransferAbi.json b/src/abi/ERC20TransferAbi.json
@@ -0,0 +1,18 @@
+[
+  {
+    "type": "function",
+    "name": "transfer",
+    "state_mutability": "external",
+    "inputs": [
+      {
+        "name": "recipient",
+        "type": "core::starknet::contract_address::ContractAddress"
+      },
+      {
+        "name": "amount",
+        "type": "core::integer::u256"
+      }
+    ],
+    "outputs": []
+  }
+]
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -14,6 +14,10 @@ export function Providers({ children }: { children: ReactNode }) {
     setMounted(true)
   }, [])
 
+  if (!mounted) {
+    return <div style={{ visibility: "hidden" }}>{null}</div>
+  }
+
   const body = (
     <>
       <ColorModeScript initialColorMode={"light"} />
@@ -23,9 +27,5 @@ export function Providers({ children }: { children: ReactNode }) {
     </>
   )
 
-  if (!mounted) {
-    return <div style={{ visibility: "hidden" }}>{body}</div>
-  }
-
   return body
 }
diff --git a/src/app/starknetkitNext/page.tsx b/src/app/starknetkitNext/page.tsx
@@ -69,7 +69,7 @@ export default function StarknetkitLatest() {
     if (!wallet) {
       autoConnect()
     }
-  }, [wallet])
+  }, [navigate, setConnector, setConnectorData, setWallet, wallet])
 
   useEffect(() => {
     if (typeof window !== "undefined") {

diff --git a/...ponents/Actions/MintWithStarknetReact.tsx → ...est/_components/MintWithStarknetReact.tsx b/...ponents/Actions/MintWithStarknetReact.tsx → ...est/_components/MintWithStarknetReact.tsx
diff --git a/...nts/Actions/TransferWithStarknetReact.tsx → ..._components/TransferWithStarknetReact.tsx b/...nts/Actions/TransferWithStarknetReact.tsx → ..._components/TransferWithStarknetReact.tsx
diff --git a/src/app/withStarknetReactLatest/page.tsx b/src/app/withStarknetReactLatest/page.tsx
@@ -1,9 +1,8 @@
 "use client"
 
 import { AccountSection } from "@/components/AccountSection"
-import { MintWithStarknetReact } from "@/components/Actions/MintWithStarknetReact"
 import { SignMessageWithStarknetReact } from "@/components/Actions/SignMessageWithStarknetReact"
-import { TransferWithStarknetReact } from "@/components/Actions/TransferWithStarknetReact"
+import { TransferWithStarknetReact } from "@/app/withStarknetReactLatest/_components/TransferWithStarknetReact"
 import { DisconnectButton } from "@/components/DisconnectButton"
 import { Section } from "@/components/Section"
 import { ConnectStarknetReact } from "@/components/connect/ConnectStarknetReact"
@@ -20,6 +19,7 @@ import {
 import { useEffect, useState } from "react"
 import { constants } from "starknet"
 import { disconnect } from "starknetkit-next"
+import { MintWithStarknetReact } from "@/app/withStarknetReactLatest/_components/MintWithStarknetReact"
 
 const StarknetReactDappContent = () => {
   const { account, isConnected } = useAccount()
@@ -63,7 +63,7 @@ const StarknetReactDappContent = () => {
             <Section>
               <SignMessageWithStarknetReact chainId={chainId} />
             </Section>
-            {/* 
+            {/*
             TODO: wait for the next version of starknetkit and starknet-react with rpc methods
             <Section>
               <SessionKeysSign />

diff --git a/...nts/Actions/MintWithStarknetReactNext.tsx → ...ext/_components/MintWithStarknetReact.tsx b/...nts/Actions/MintWithStarknetReactNext.tsx → ...ext/_components/MintWithStarknetReact.tsx
@@ -1,30 +1,19 @@
-import { ETHTokenAddress, provider } from "@/constants"
+import { ETHTokenAddress } from "@/constants"
 import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState"
+import { bigDecimal } from "@argent/x-shared"
 import { Flex, Heading, Input } from "@chakra-ui/react"
+import {
+  useAccount,
+  useContract,
+  Abi,
+  useSendTransaction,
+} from "starknet-react-core-next"
 import { useAtom, useSetAtom } from "jotai"
 import { useState } from "react"
-import { Abi, useContract } from "starknet-react-core-next"
+import Erc20Abi from "@/abi/ERC20TransferAbi.json"
 
-const abi = [
-  {
-    type: "function",
-    name: "permissionedMint",
-    state_mutability: "external",
-    inputs: [
-      {
-        name: "recipient",
-        type: "core::starknet::contract_address::ContractAddress",
-      },
-      {
-        name: "amount",
-        type: "core::integer::u256",
-      },
-    ],
-    outputs: [],
-  },
-] as const satisfies Abi
-
-const MintWithStarknetReact = () => {
+export const MintWithStarknetReact = () => {
+  const { account } = useAccount()
   const [mintAmount, setMintAmount] = useState("10")
 
   const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom)
@@ -33,20 +22,32 @@ const MintWithStarknetReact = () => {
   const buttonsDisabled = ["approve", "pending"].includes(transactionStatus)
 
   const { contract } = useContract({
-    abi,
+    abi: Erc20Abi as Abi,
     address: ETHTokenAddress,
-    provider,
+  })
+
+  const { error, sendAsync: mintWithStarknetReact } = useSendTransaction({
+    calls:
+      contract && account?.address
+        ? [
+            contract.populate("transfer", [
+              account.address,
+              Number(bigDecimal.parseEther(mintAmount).value),
+            ]),
+          ]
+        : undefined,
   })
 
   const handleMintSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     try {
       setTransactionStatus("approve")
-      const { transaction_hash } = await contract
+      const { transaction_hash } = await mintWithStarknetReact()
       setLastTransactionHash(transaction_hash)
       setTransactionStatus("pending")
     } catch (e) {
       console.error(e)
+      console.error(error)
       setTransactionStatus("idle")
     }
   }
@@ -72,15 +73,10 @@ const MintWithStarknetReact = () => {
           value={mintAmount}
           onChange={(e) => setMintAmount(e.target.value)}
         />
+        {/* TODO: Verify it's ok that the submit has been enabled */}
 
-        <Input
-          type="submit"
-          disabled={true || buttonsDisabled}
-          value="Not possible with ETH!"
-        />
+        <Input type="submit" disabled={buttonsDisabled} value="Submit" />
       </Flex>
     </Flex>
   )
 }
-
-export { MintWithStarknetReact }
diff --git a/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx b/src/app/withStarknetReactNext/_components/TransferWithStarknetReact.tsx
@@ -0,0 +1,98 @@
+import { ETHTokenAddress } from "@/constants"
+import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState"
+import { bigDecimal } from "@argent/x-shared"
+import { Button, Flex, Heading, Input } from "@chakra-ui/react"
+import {
+  Abi,
+  useAccount,
+  useContract,
+  useSendTransaction,
+} from "starknet-react-core-next"
+import { useAtom, useSetAtom } from "jotai"
+import { useState } from "react"
+import Erc20Abi from "@/abi/ERC20TransferAbi.json"
+
+export const TransferWithStarknetReact = () => {
+  const { account } = useAccount()
+  const [transferTo, setTransferTo] = useState("")
+  const [transferAmount, setTransferAmount] = useState("1")
+
+  const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom)
+  const setLastTransactionHash = useSetAtom(lastTxHashAtom)
+
+  const { contract } = useContract({
+    abi: Erc20Abi as Abi,
+    address: ETHTokenAddress,
+  })
+
+  const { error, sendAsync: transferWithStarknetReact } = useSendTransaction({
+    calls:
+      contract && account?.address
+        ? [
+            contract.populate("transfer", [
+              account.address,
+              Number(bigDecimal.parseEther(transferAmount).value),
+            ]),
+          ]
+        : undefined,
+  })
+
+  const buttonsDisabled = ["approve", "pending"].includes(transactionStatus)
+
+  const handleTransferSubmit = async (e: React.FormEvent) => {
+    try {
+      e.preventDefault()
+      setTransactionStatus("approve")
+      const { transaction_hash } = await transferWithStarknetReact()
+      setLastTransactionHash(transaction_hash)
+      setTransactionStatus("pending")
+    } catch (e) {
+      console.error(e)
+      console.error(error)
+      setTransactionStatus("idle")
+    }
+  }
+
+  return (
+    <Flex flex={1} width="full" gap={10}>
+      <Flex
+        as="form"
+        onSubmit={handleTransferSubmit}
+        direction="column"
+        flex={1}
+        p="4"
+        gap="3"
+        borderRadius="lg"
+      >
+        <Heading as="h2">Transfer token</Heading>
+
+        <Input
+          type="text"
+          id="transfer-to"
+          name="fname"
+          placeholder="To"
+          value={transferTo}
+          onChange={(e) => setTransferTo(e.target.value)}
+        />
+
+        <Input
+          type="text"
+          id="transfer-amount"
+          name="fname"
+          placeholder="Amount"
+          value={transferAmount}
+          onChange={(e) => setTransferAmount(e.target.value)}
+        />
+        <br />
+        <Button
+          colorScheme="primary"
+          type="submit"
+          isDisabled={buttonsDisabled}
+          maxW="200px"
+        >
+          Transfer
+        </Button>
+      </Flex>
+    </Flex>
+  )
+}
diff --git a/src/app/withStarknetReactNext/page.tsx b/src/app/withStarknetReactNext/page.tsx
@@ -20,9 +20,11 @@ import {
   useAccount,
 } from "starknet-react-core-next"
 import { disconnect } from "starknetkit-next"
+import { MintWithStarknetReact } from "./_components/MintWithStarknetReact"
 
 const StarknetReactDappContent = () => {
-  const { account, isConnected } = useAccount()
+  const { address, account, isConnected } = useAccount()
+
   const [chainId, setChainId] = useState<constants.StarknetChainId | undefined>(
     undefined,
   )
@@ -53,17 +55,17 @@ const StarknetReactDappContent = () => {
         >
           <>
             <DisconnectButton disconnectFn={disconnect} />
-            <AccountSection address={account?.address} chainId={chainId} />
-            {/* <Section>
+            <AccountSection address={address} chainId={chainId} />
+            <Section>
               <MintWithStarknetReact />
-            </Section> */}
+            </Section>
             <Section>
               <TransferWithStarknetReactNext />
             </Section>
             <Section>
               <SignMessageWithStarknetReactNext chainId={chainId} />
             </Section>
-            {/* 
+            {/*
             TODO: wait for the next version of starknetkit and starknet-react with rpc methods
             <Section>
               <SessionKeysSign />

diff --git a/src/components/connect/ConnectStarknetReactNext.tsx b/src/components/connect/ConnectStarknetReactNext.tsx
@@ -98,7 +98,7 @@ const ConnectStarknetReactNext = () => {
             `starknetkit@latest (${process.env.starknetkitNextVersion})`,
           )
           setStarknetReactVersion(
-            `starknet-react (${process.env.starknetReactVersion})`,
+            `starknet-react (${process.env.starknetReactNextVersion})`,
           )
         }}
         alignItems="center"

diff --git a/src/state/connectedWalletStarknetkitNext.ts b/src/state/connectedWalletStarknetkitNext.ts
@@ -3,7 +3,7 @@ import {
   ChainId,
   NetworkChangeEventHandler,
 } from "@starknet-io/types-js"
-import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { useAtomValue, useSetAtom } from "jotai"
 import { atomWithReset } from "jotai/utils"
 import { useEffect } from "react"
 import { ConnectorData, StarknetWindowObject } from "starknetkit-next"
@@ -53,5 +53,5 @@ export const useWalletAccountChange = () => {
     wallet?.off("accountsChanged", accountChangeHandler)
     wallet?.off("networkChanged", networkChangeHandler)
     return
-  }, [])
+  }, [wallet, accountChangeHandler, networkChangeHandler])
 }