From 5a4cc54e66699f6800929c265d3625e2a513573e Mon Sep 17 00:00:00 2001 From: bluecco Date: Tue, 4 Jun 2024 09:42:52 +0200 Subject: [PATCH] refactor: components --- src/app/starknetkitLatest/page.tsx | 32 ++-- src/app/starknetkitNext/page.tsx | 16 +- src/app/withStarknetReactLatest/page.tsx | 154 +----------------- src/app/withStarknetReactNext/page.tsx | 154 +----------------- src/components/AccountSection.tsx | 3 +- src/components/Actions/Deploy.tsx | 34 +++- src/components/Actions/DeployRpcMethod.tsx | 67 -------- src/components/Actions/Mint.tsx | 35 +++- src/components/Actions/MintRpcMethod.tsx | 57 ------- src/components/Actions/SignMessage.tsx | 44 +++-- .../Actions/SignMessageRpcMethod.tsx | 93 ----------- src/components/Actions/Transfer.tsx | 37 +++-- src/components/Actions/TransferRpcMethod.tsx | 85 ---------- src/services/signMessage.ts | 6 +- src/services/transfer.ts | 6 +- 15 files changed, 154 insertions(+), 669 deletions(-) delete mode 100644 src/components/Actions/DeployRpcMethod.tsx delete mode 100644 src/components/Actions/MintRpcMethod.tsx delete mode 100644 src/components/Actions/SignMessageRpcMethod.tsx delete mode 100644 src/components/Actions/TransferRpcMethod.tsx diff --git a/src/app/starknetkitLatest/page.tsx b/src/app/starknetkitLatest/page.tsx index fb50db7..ae0d14a 100644 --- a/src/app/starknetkitLatest/page.tsx +++ b/src/app/starknetkitLatest/page.tsx @@ -1,25 +1,25 @@ "use client" import { AccountSection } from "@/components/AccountSection" -import { SignMessage } from "@/components/Actions/SignMessage" -import { Transfer } from "@/components/Actions/Transfer" +import { AddNetworkLatest } from "@/components/Actions/AddNetwork" +import { AddTokenLatest } from "@/components/Actions/AddToken" +import { Declare } from "@/components/Actions/Declare" +import { DeployLatest } from "@/components/Actions/Deploy" +import { MintLatest } from "@/components/Actions/Mint" +import { SignMessageLatest } from "@/components/Actions/SignMessage" +import { TransferLatest } from "@/components/Actions/Transfer" +import { DisconnectButton } from "@/components/DisconnectButton" import { Section } from "@/components/Section" +import { ARGENT_WEBWALLET_URL } from "@/constants" import { useWaitForTx } from "@/hooks/useWaitForTx" import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest" -import { Box, Button, Flex } from "@chakra-ui/react" +import { Flex } from "@chakra-ui/react" import { useAtom } from "jotai" +import { RESET } from "jotai/utils" import { useRouter } from "next/navigation" import { useEffect } from "react" -import { connect, disconnect } from "starknetkit-latest" -import { RESET } from "jotai/utils" -import { ARGENT_WEBWALLET_URL } from "@/constants" import { constants } from "starknet" -import { Declare } from "@/components/Actions/Declare" -import { Deploy } from "@/components/Actions/Deploy" -import { Mint } from "@/components/Actions/Mint" -import { DisconnectButton } from "@/components/DisconnectButton" -import { AddNetworkLatest } from "@/components/Actions/AddNetwork" -import { AddTokenLatest } from "@/components/Actions/AddToken" +import { connect, disconnect } from "starknetkit-latest" export default function StarknetkitLatest() { const [wallet, setWallet] = useAtom(walletStarknetkitLatestAtom) @@ -64,20 +64,20 @@ export default function StarknetkitLatest() { chainId={wallet.chainId} />
- +
- +
- +
{wallet.id !== "argentWebWallet" && wallet.id !== "argentMobileWallet" && (
- +
)} diff --git a/src/app/starknetkitNext/page.tsx b/src/app/starknetkitNext/page.tsx index 487f7fa..9521060 100644 --- a/src/app/starknetkitNext/page.tsx +++ b/src/app/starknetkitNext/page.tsx @@ -4,14 +4,14 @@ import { AccountSection } from "@/components/AccountSection" import { AddNetworkNext } from "@/components/Actions/AddNetwork" import { AddTokenNext } from "@/components/Actions/AddToken" import { Declare } from "@/components/Actions/Declare" -import { Deploy } from "@/components/Actions/Deploy" -import { MintRpcMethod } from "@/components/Actions/MintRpcMethod" +import { DeployNext } from "@/components/Actions/Deploy" +import { MintNext } from "@/components/Actions/Mint" import { SessionKeysExecute } from "@/components/Actions/SessionKeysExecute" import { SessionKeysExecuteOutside } from "@/components/Actions/SessionKeysExecuteOutside" import { SessionKeysSign } from "@/components/Actions/SessionKeysSign" import { SessionKeysTypedDataOutside } from "@/components/Actions/SessionKeysTypedDataOutside" -import { SignMessageRpcMethod } from "@/components/Actions/SignMessageRpcMethod" -import { TransferRpcMethod } from "@/components/Actions/TransferRpcMethod" +import { SignMessageNext } from "@/components/Actions/SignMessage" +import { TransferNext } from "@/components/Actions/Transfer" import { WalletRpcMsgContainer } from "@/components/Actions/WalletRpcMsgContainer" import { DisconnectButton } from "@/components/DisconnectButton" import { Section } from "@/components/Section" @@ -83,13 +83,13 @@ export default function StarknetkitLatest() { chainId={connectorData?.chainId} />
- +
- +
- +
@@ -105,7 +105,7 @@ export default function StarknetkitLatest() {
- +
)} diff --git a/src/app/withStarknetReactLatest/page.tsx b/src/app/withStarknetReactLatest/page.tsx index 2f39784..e888374 100644 --- a/src/app/withStarknetReactLatest/page.tsx +++ b/src/app/withStarknetReactLatest/page.tsx @@ -1,153 +1,3 @@ -"use client" - -import { ConnectButton } from "@/components/ConnectButton" -import { DeploymentData } from "@/components/DeploymentData" -import { SessionKeysExecute } from "@/components/SessionKeysExecute" -import { SessionKeysExecuteOutside } from "@/components/SessionKeysExecuteOutside" -import { SessionKeysSign } from "@/components/SessionKeysSign" -import { SessionKeysTypedDataOutside } from "@/components/SessionKeysTypedDataOutside" -import { provider } from "@/constants" -import { Status } from "@/types/status" -import { OffChainSession } from "@argent/x-sessions" -import { useEffect, useState } from "react" -import { GatewayError, Signature, constants } from "starknet" -import { StarknetChainId } from "starknet-types" -import { StarknetWindowObject, disconnect } from "starknetkit" - -export default function Session() { - const [connectedWallet, setConnectedWallet] = useState< - StarknetWindowObject | undefined | null - >(null) - const [connectorData, setConnectorData] = useState< - | { - account?: string - chainId?: StarknetChainId - } - | undefined - | null - >(null) - const [chainId, setChainId] = useState( - undefined, - ) - - const [lastTransactionHash, setLastTransactionHash] = useState("") - const [transactionStatus, setTransactionStatus] = useState("idle") - const [transactionError, setTransactionError] = useState("") - const [accountSessionSignature, setAccountSessionSignature] = useState< - string[] | Signature - >() - const [sessionRequest, setSessionRequest] = useState() - - useEffect(() => { - const waitTx = async () => { - if (lastTransactionHash && transactionStatus === "pending") { - setTransactionError("") - try { - await provider.waitForTransaction(lastTransactionHash) - setTransactionStatus("success") - } catch (error) { - setTransactionStatus("failure") - let message = error ? `${error}` : "No further details" - if (error instanceof GatewayError) { - message = JSON.stringify(error.message, null, 2) - } - setTransactionError(message) - } - } - } - waitTx() - }, [transactionStatus, lastTransactionHash]) - - return ( -
-
- {!connectedWallet && ( - - )} -
- - {connectedWallet && connectorData?.account && ( - <> - -
-
Account: {connectorData?.account}
-
-
- {connectedWallet && } -
-
- Chain:{" "} - {chainId === constants.StarknetChainId.SN_SEPOLIA - ? "SN_SEPOLIA" - : "SN_MAIN"} -
-
{ - if (!lastTransactionHash) return - window.open( - `https://sepolia.starkscan.co/tx/${lastTransactionHash}`, - "_blank", - ) - }} - > - Last tx hash: {lastTransactionHash || "---"} -
-
Tx status: {transactionStatus}
-
{transactionError.toString()}
- -
- -
- -
- -
- -
-
- -
-
- -
-
- - )} -
- ) +export default function StarknetReactLatest() { + return <>todo } diff --git a/src/app/withStarknetReactNext/page.tsx b/src/app/withStarknetReactNext/page.tsx index 2f39784..cda1bbc 100644 --- a/src/app/withStarknetReactNext/page.tsx +++ b/src/app/withStarknetReactNext/page.tsx @@ -1,153 +1,3 @@ -"use client" - -import { ConnectButton } from "@/components/ConnectButton" -import { DeploymentData } from "@/components/DeploymentData" -import { SessionKeysExecute } from "@/components/SessionKeysExecute" -import { SessionKeysExecuteOutside } from "@/components/SessionKeysExecuteOutside" -import { SessionKeysSign } from "@/components/SessionKeysSign" -import { SessionKeysTypedDataOutside } from "@/components/SessionKeysTypedDataOutside" -import { provider } from "@/constants" -import { Status } from "@/types/status" -import { OffChainSession } from "@argent/x-sessions" -import { useEffect, useState } from "react" -import { GatewayError, Signature, constants } from "starknet" -import { StarknetChainId } from "starknet-types" -import { StarknetWindowObject, disconnect } from "starknetkit" - -export default function Session() { - const [connectedWallet, setConnectedWallet] = useState< - StarknetWindowObject | undefined | null - >(null) - const [connectorData, setConnectorData] = useState< - | { - account?: string - chainId?: StarknetChainId - } - | undefined - | null - >(null) - const [chainId, setChainId] = useState( - undefined, - ) - - const [lastTransactionHash, setLastTransactionHash] = useState("") - const [transactionStatus, setTransactionStatus] = useState("idle") - const [transactionError, setTransactionError] = useState("") - const [accountSessionSignature, setAccountSessionSignature] = useState< - string[] | Signature - >() - const [sessionRequest, setSessionRequest] = useState() - - useEffect(() => { - const waitTx = async () => { - if (lastTransactionHash && transactionStatus === "pending") { - setTransactionError("") - try { - await provider.waitForTransaction(lastTransactionHash) - setTransactionStatus("success") - } catch (error) { - setTransactionStatus("failure") - let message = error ? `${error}` : "No further details" - if (error instanceof GatewayError) { - message = JSON.stringify(error.message, null, 2) - } - setTransactionError(message) - } - } - } - waitTx() - }, [transactionStatus, lastTransactionHash]) - - return ( -
-
- {!connectedWallet && ( - - )} -
- - {connectedWallet && connectorData?.account && ( - <> - -
-
Account: {connectorData?.account}
-
-
- {connectedWallet && } -
-
- Chain:{" "} - {chainId === constants.StarknetChainId.SN_SEPOLIA - ? "SN_SEPOLIA" - : "SN_MAIN"} -
-
{ - if (!lastTransactionHash) return - window.open( - `https://sepolia.starkscan.co/tx/${lastTransactionHash}`, - "_blank", - ) - }} - > - Last tx hash: {lastTransactionHash || "---"} -
-
Tx status: {transactionStatus}
-
{transactionError.toString()}
- -
- -
- -
- -
- -
-
- -
-
- -
-
- - )} -
- ) +export default function StarknetReactNext() { + return <>todo } diff --git a/src/components/AccountSection.tsx b/src/components/AccountSection.tsx index ea68af0..7d43d1f 100644 --- a/src/components/AccountSection.tsx +++ b/src/components/AccountSection.tsx @@ -23,7 +23,8 @@ const AccountSection: FC = ({ address, chainId }) => { Account: {address} Chain: {chainId} { if (!lastTxHash) return window.open(`https://sepolia.starkscan.co/tx/${lastTxHash}`, "_blank") diff --git a/src/components/Actions/Deploy.tsx b/src/components/Actions/Deploy.tsx index 25c370f..29013e2 100644 --- a/src/components/Actions/Deploy.tsx +++ b/src/components/Actions/Deploy.tsx @@ -1,13 +1,32 @@ -import { deploy } from "@/services/deploy" +import { deploy, deployRcpMethod } from "@/services/deploy" import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest" +import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" import { Button, Heading, Flex, Input } from "@chakra-ui/react" import { useAtomValue, useSetAtom } from "jotai" -import { useState } from "react" -import { UniversalDeployerContractPayload } from "starknet" +import { FC, useState } from "react" +import { + Account, + AccountInterface, + UniversalDeployerContractPayload, +} from "starknet" +import { StarknetWindowObject } from "starknetkit-next" -const Deploy = () => { +const DeployLatest = () => { const wallet = useAtomValue(walletStarknetkitLatestAtom) + return +} +const DeployNext = () => { + const wallet = useAtomValue(walletStarknetkitNextAtom) + return +} + +interface DeployProps { + account?: Account | AccountInterface + wallet?: StarknetWindowObject | undefined | null +} + +const Deploy: FC = ({ account, wallet }) => { const setTransactionStatus = useSetAtom(lastTxStatusAtom) const setLastTransactionHash = useSetAtom(lastTxHashAtom) const [deployClassHash, setDeployClassHash] = useState("") @@ -21,7 +40,10 @@ const Deploy = () => { const payload: UniversalDeployerContractPayload = { classHash: deployClassHash, } - const result = await deploy(wallet?.account, payload) + + const result = account + ? await deploy(account, payload) + : await deployRcpMethod(wallet, payload) setLastTransactionHash(result.transaction_hash) setTransactionStatus("pending") } catch (e) { @@ -60,4 +82,4 @@ const Deploy = () => { ) } -export { Deploy } +export { DeployLatest, DeployNext } diff --git a/src/components/Actions/DeployRpcMethod.tsx b/src/components/Actions/DeployRpcMethod.tsx deleted file mode 100644 index 0f5a44e..0000000 --- a/src/components/Actions/DeployRpcMethod.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { deploy, deployRcpMethod } from "@/services/deploy" -import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest" -import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" -import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" -import { Button, Heading, Flex, Input } from "@chakra-ui/react" -import { useAtomValue, useSetAtom } from "jotai" -import { useState } from "react" -import { UniversalDeployerContractPayload } from "starknet" - -const DeployRpcMethod = () => { - const wallet = useAtomValue(walletStarknetkitNextAtom) - const setTransactionStatus = useSetAtom(lastTxStatusAtom) - const setLastTransactionHash = useSetAtom(lastTxHashAtom) - const [deployClassHash, setDeployClassHash] = useState("") - - const handleDeploy = async (e: React.FormEvent) => { - try { - e.preventDefault() - if (!deployClassHash) { - throw new Error("No class hash") - } - const payload: UniversalDeployerContractPayload = { - classHash: deployClassHash, - } - const result = await deployRcpMethod(wallet, payload) - setLastTransactionHash(result.transaction_hash) - setTransactionStatus("pending") - } catch (e) { - console.error(e) - setTransactionStatus("idle") - } - } - - return ( - - Deploy - - - { - setDeployClassHash(e.target.value) - }} - value={deployClassHash} - /> - - - - ) -} - -export { DeployRpcMethod } diff --git a/src/components/Actions/Mint.tsx b/src/components/Actions/Mint.tsx index a74107a..1746abb 100644 --- a/src/components/Actions/Mint.tsx +++ b/src/components/Actions/Mint.tsx @@ -1,12 +1,29 @@ -import { mintToken } from "@/services/mint" +import { mintToken, mintTokenRcpMethod } from "@/services/mint" import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest" +import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" import { Flex, Heading, Input } from "@chakra-ui/react" import { useAtom, useAtomValue, useSetAtom } from "jotai" -import { useState } from "react" +import { FC, useState } from "react" +import { Account, AccountInterface } from "starknet" +import { StarknetWindowObject } from "starknetkit-next" -const Mint = () => { +const MintLatest = () => { const wallet = useAtomValue(walletStarknetkitLatestAtom) + return +} + +const MintNext = () => { + const wallet = useAtomValue(walletStarknetkitNextAtom) + return +} + +interface MintProps { + account?: Account | AccountInterface + wallet?: StarknetWindowObject | null +} + +const Mint: FC = ({ account, wallet }) => { const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom) const setLastTransactionHash = useSetAtom(lastTxHashAtom) @@ -17,7 +34,9 @@ const Mint = () => { e.preventDefault() try { setTransactionStatus("approve") - const { transaction_hash } = await mintToken(wallet?.account, mintAmount) + const { transaction_hash } = account + ? await mintToken(account, mintAmount) + : await mintTokenRcpMethod(wallet, mintAmount) setLastTransactionHash(transaction_hash) setTransactionStatus("pending") } catch (e) { @@ -48,10 +67,14 @@ const Mint = () => { onChange={(e) => setMintAmount(e.target.value)} /> - + ) } -export { Mint } +export { MintLatest, MintNext } diff --git a/src/components/Actions/MintRpcMethod.tsx b/src/components/Actions/MintRpcMethod.tsx deleted file mode 100644 index 746e8cb..0000000 --- a/src/components/Actions/MintRpcMethod.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { mintTokenRcpMethod } from "@/services/mint" -import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" -import { lastTxHashAtom, lastTxStatusAtom } from "@/state/transactionState" -import { Flex, Heading, Input } from "@chakra-ui/react" -import { useAtom, useAtomValue, useSetAtom } from "jotai" -import { useState } from "react" - -const MintRpcMethod = () => { - const wallet = useAtomValue(walletStarknetkitNextAtom) - const [transactionStatus, setTransactionStatus] = useAtom(lastTxStatusAtom) - const setLastTransactionHash = useSetAtom(lastTxHashAtom) - - const [mintAmount, setMintAmount] = useState("10") - const buttonsDisabled = ["approve", "pending"].includes(transactionStatus) - - const handleMintSubmit = async (e: React.FormEvent) => { - e.preventDefault() - try { - setTransactionStatus("approve") - const { transaction_hash } = await mintTokenRcpMethod(wallet, mintAmount) - setLastTransactionHash(transaction_hash) - setTransactionStatus("pending") - } catch (e) { - console.error(e) - setTransactionStatus("idle") - } - } - - return ( - - - Mint token - setMintAmount(e.target.value)} - /> - - - - - ) -} - -export { MintRpcMethod } diff --git a/src/components/Actions/SignMessage.tsx b/src/components/Actions/SignMessage.tsx index 003ffe3..db4383e 100644 --- a/src/components/Actions/SignMessage.tsx +++ b/src/components/Actions/SignMessage.tsx @@ -1,30 +1,48 @@ -import { signMessage } from "@/services/signMessage" +import { signMessage, signMessageRcpMethod } from "@/services/signMessage" import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest" +import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" import { lastTxStatusAtom } from "@/state/transactionState" import { Button, Flex, Heading, Input, Textarea } from "@chakra-ui/react" import { useAtomValue, useSetAtom } from "jotai" -import { useState } from "react" -import { Account, stark } from "starknet" +import { FC, useState } from "react" +import { Account, AccountInterface, stark } from "starknet" +import { StarknetWindowObject } from "starknetkit-next" -const SignMessage = () => { +const SignMessageLatest = () => { + const wallet = useAtomValue(walletStarknetkitLatestAtom) + return +} + +const SignMessageNext = () => { + const wallet = useAtomValue(walletStarknetkitNextAtom) + return +} + +interface SignMessageProps { + account?: Account | AccountInterface + wallet?: StarknetWindowObject | null +} + +const SignMessage: FC = ({ account, wallet }) => { const [shortText, setShortText] = useState("") const [lastSig, setLastSig] = useState([]) - const wallet = useAtomValue(walletStarknetkitLatestAtom) const setTransactionStatus = useSetAtom(lastTxStatusAtom) - const handleSignSubmit = async () => { + const handleSignSubmit = async (skipDeploy?: boolean) => { try { - if (!wallet?.account) { + if (!account && !wallet) { throw new Error("Account not connected") } setTransactionStatus("approve") - const result = await signMessage( - wallet.account as Account, - await wallet.account.getChainId(), - shortText, - ) + const result = account + ? await signMessage( + account as Account, + await account.getChainId(), + shortText, + ) + : await signMessageRcpMethod(wallet, shortText, skipDeploy) setLastSig(stark.formatSignature(result)) setTransactionStatus("success") } catch (e) { @@ -85,4 +103,4 @@ const SignMessage = () => { ) } -export { SignMessage } +export { SignMessageLatest, SignMessageNext } diff --git a/src/components/Actions/SignMessageRpcMethod.tsx b/src/components/Actions/SignMessageRpcMethod.tsx deleted file mode 100644 index 6387ab6..0000000 --- a/src/components/Actions/SignMessageRpcMethod.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { signMessageRcpMethod } from "@/services/signMessage" -import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" -import { lastTxStatusAtom } from "@/state/transactionState" -import { Button, Flex, Heading, Input, Textarea } from "@chakra-ui/react" -import { useAtomValue, useSetAtom } from "jotai" -import { useState } from "react" -import { stark } from "starknet" - -const SignMessageRpcMethod = () => { - const [shortText, setShortText] = useState("") - const [lastSig, setLastSig] = useState([]) - const wallet = useAtomValue(walletStarknetkitNextAtom) - const setTransactionStatus = useSetAtom(lastTxStatusAtom) - - const handleSignSubmit = async (skipDeploy: boolean) => { - try { - if (!wallet) { - throw new Error("Account not connected") - } - - setTransactionStatus("approve") - const result = await signMessageRcpMethod(wallet, shortText, skipDeploy) - setLastSig(stark.formatSignature(result)) - setTransactionStatus("success") - } catch (e) { - console.error(e) - setTransactionStatus("idle") - } - } - - return ( - - { - e.preventDefault() - handleSignSubmit(false) - }} - direction="column" - flex={1} - p="4" - gap="3" - borderTopLeftRadius="lg" - borderBottomLeftRadius="lg" - > - Sign Message - - setShortText(e.target.value)} - /> - -
- - -
- - - Sign results - - {/* Label and textarea for value r */} -