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() {
)}
+
+
+
+
+
>
)}
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,
+ },
+ },
+ })
+}