diff --git a/src/app/starknetkitLatest/page.tsx b/src/app/starknetkitLatest/page.tsx index 7793ee9..fb50db7 100644 --- a/src/app/starknetkitLatest/page.tsx +++ b/src/app/starknetkitLatest/page.tsx @@ -18,6 +18,8 @@ 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" export default function StarknetkitLatest() { const [wallet, setWallet] = useAtom(walletStarknetkitLatestAtom) @@ -79,6 +81,12 @@ export default function StarknetkitLatest() { )} +
+ + + + +
)} diff --git a/src/app/starknetkitNext/page.tsx b/src/app/starknetkitNext/page.tsx index a51a76b..6004a72 100644 --- a/src/app/starknetkitNext/page.tsx +++ b/src/app/starknetkitNext/page.tsx @@ -1,6 +1,8 @@ "use client" 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" @@ -18,7 +20,7 @@ import { connectorDataAtom, walletStarknetkitNextAtom, } from "@/state/connectedWalletStarknetkitNext" -import { Box, Button, Flex } from "@chakra-ui/react" +import { Flex } from "@chakra-ui/react" import { useAtom, useSetAtom } from "jotai" import { RESET } from "jotai/utils" import { useRouter } from "next/navigation" @@ -106,6 +108,11 @@ export default function StarknetkitLatest() { )} + + + + +
rpc
)} diff --git a/src/components/Actions/AddNetwork.tsx b/src/components/Actions/AddNetwork.tsx new file mode 100644 index 0000000..9fc0dbb --- /dev/null +++ b/src/components/Actions/AddNetwork.tsx @@ -0,0 +1,52 @@ +import { addNetworkLatest, addNetworkNext } from "@/services/addNetwork.ts" +import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest" +import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" +import { Flex, Heading } from "@chakra-ui/react" +import { useAtomValue } from "jotai" +import { FC, useState } from "react" + +const AddNetworkNext = () => { + const wallet = useAtomValue(walletStarknetkitNextAtom) + return await addNetworkNext(wallet)} /> +} + +const AddNetworkLatest = () => { + const wallet = useAtomValue(walletStarknetkitLatestAtom) + return ( + await addNetworkLatest(wallet)} /> + ) +} + +interface AddNetworkProps { + addNetworkFn: () => Promise +} + +const AddNetwork: FC = ({ addNetworkFn }) => { + const [addNetworkError, setAddNetworkError] = useState("") + + const handleAddNetwork = async () => { + try { + await addNetworkFn() + setAddNetworkError("") + } catch (error) { + setAddNetworkError((error as any).message) + } + } + + return ( + + Network + + Add network to wallet + + {addNetworkError} + + ) +} + +export { AddNetworkLatest, AddNetworkNext } diff --git a/src/components/Actions/AddToken.tsx b/src/components/Actions/AddToken.tsx new file mode 100644 index 0000000..ee7a836 --- /dev/null +++ b/src/components/Actions/AddToken.tsx @@ -0,0 +1,99 @@ +import { FC, useState } from "react" +import { Code, Flex, Heading } from "@chakra-ui/react" +import { formatTruncatedAddress } from "@/utils/formatAddress" +import { DAITokenAddress, ETHTokenAddress } from "@/constants" +import { addTokenLatest, addTokenNext } from "@/services/addToken" +import { walletStarknetkitLatestAtom } from "@/state/connectedWalletStarknetkitLatest" +import { useAtomValue } from "jotai" +import { walletStarknetkitNextAtom } from "@/state/connectedWalletStarknetkitNext" + +const AddTokenLatest = () => { + const wallet = useAtomValue(walletStarknetkitLatestAtom) + return ( + await addTokenLatest(wallet, ETHTokenAddress)} + addDaiFn={async () => await addTokenLatest(wallet, DAITokenAddress)} + /> + ) +} + +const AddTokenNext = () => { + const wallet = useAtomValue(walletStarknetkitNextAtom) + return ( + await addTokenNext(wallet, ETHTokenAddress)} + addDaiFn={async () => await addTokenNext(wallet, DAITokenAddress)} + /> + ) +} + +interface AddTokenProps { + addEthFn: () => Promise + addDaiFn: () => Promise +} + +const AddToken: FC = ({ addDaiFn, addEthFn }) => { + const [addTokenError, setAddTokenError] = useState("") + + const handleAddEth = async () => { + try { + await addEthFn() + setAddTokenError("") + } catch (error) { + setAddTokenError((error as any).message) + } + } + + const handleAddDai = async () => { + try { + await addDaiFn() + setAddTokenError("") + } catch (error) { + setAddTokenError((error as any).message) + } + } + + return ( + + ERC20 + ETH token address + + + {formatTruncatedAddress(ETHTokenAddress)} + + + + Add ETH token to wallet + + + Add DAI token to wallet + + {addTokenError} + + ) +} + +export { AddTokenNext, AddTokenLatest } diff --git a/src/services/addNetwork.ts.ts b/src/services/addNetwork.ts.ts new file mode 100644 index 0000000..05f25e7 --- /dev/null +++ b/src/services/addNetwork.ts.ts @@ -0,0 +1,39 @@ +import { StarknetWindowObject as StarknetWindowObjectNext } from "starknetkit-next" +import { StarknetWindowObject as StarknetWindowObjectLatest } from "starknetkit-latest" + +export const addNetworkNext = async ( + wallet: StarknetWindowObjectNext | undefined | null, +) => { + if (!wallet) { + throw Error("starknet wallet not connected") + } + + await wallet.request({ + type: "wallet_addStarknetChain", + params: { + id: "dapp-test", + chain_id: "SN_DAPP_TEST", + chain_name: "Test chain name", + rpc_urls: ["http://localhost:5050/rpc"], + }, + }) +} + +export const addNetworkLatest = async ( + wallet: StarknetWindowObjectLatest | undefined | null, +) => { + if (!wallet) { + throw Error("starknet wallet not connected") + } + + await wallet.request({ + type: "wallet_addStarknetChain", + params: { + id: "dapp-test", + chainId: "SN_DAPP_TEST", + chainName: "Test chain name", + baseUrl: "http://localhost:5050", + rpcUrls: ["http://localhost:5050/rpc"], + }, + }) +} diff --git a/src/services/addToken.ts b/src/services/addToken.ts new file mode 100644 index 0000000..34e0142 --- /dev/null +++ b/src/services/addToken.ts @@ -0,0 +1,40 @@ +import { StarknetWindowObject as StarknetWindowObjectNext } from "starknetkit-next" +import { StarknetWindowObject as StarknetWindowObjectLatest } from "starknetkit-latest" + +export const addTokenLatest = async ( + wallet: StarknetWindowObjectLatest | undefined | null, + address: string, +): Promise => { + if (!wallet) { + throw Error("starknet wallet not connected") + } + + await wallet.request({ + type: "wallet_watchAsset", + params: { + type: "ERC20", + options: { + address, + }, + }, + }) +} + +export const addTokenNext = async ( + wallet: StarknetWindowObjectNext | undefined | null, + address: string, +): Promise => { + if (!wallet) { + throw Error("starknet wallet not connected") + } + + await wallet.request({ + type: "wallet_watchAsset", + params: { + type: "ERC20", + options: { + address, + }, + }, + }) +}