chore: add network and token

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() {
                 </Flex>
               </Section>
             )}
+          <Section>
+            <Flex>
+              <AddTokenLatest />
+              <AddNetworkLatest />
+            </Flex>
+          </Section>
         </>
       )}
     </Flex>

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() {
                 </Flex>
               </Section>
             )}
+          <Flex>
+            <AddTokenNext />
+            <AddNetworkNext />
+          </Flex>
+          <Section>rpc</Section>
         </>
       )}
     </Flex>

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 <AddNetwork addNetworkFn={async () => await addNetworkNext(wallet)} />
+}
+
+const AddNetworkLatest = () => {
+  const wallet = useAtomValue(walletStarknetkitLatestAtom)
+  return (
+    <AddNetwork addNetworkFn={async () => await addNetworkLatest(wallet)} />
+  )
+}
+
+interface AddNetworkProps {
+  addNetworkFn: () => Promise<void>
+}
+
+const AddNetwork: FC<AddNetworkProps> = ({ addNetworkFn }) => {
+  const [addNetworkError, setAddNetworkError] = useState("")
+
+  const handleAddNetwork = async () => {
+    try {
+      await addNetworkFn()
+      setAddNetworkError("")
+    } catch (error) {
+      setAddNetworkError((error as any).message)
+    }
+  }
+
+  return (
+    <Flex direction="column" gap="3" flex="1">
+      <Heading as="h2">Network</Heading>
+      <Flex
+        as="button"
+        color="#0097fc"
+        fontWeight="bold"
+        onClick={handleAddNetwork}
+      >
+        Add network to wallet
+      </Flex>
+      <span className="error-message">{addNetworkError}</span>
+    </Flex>
+  )
+}
+
+export { AddNetworkLatest, AddNetworkNext }

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 (
+    <AddToken
+      addEthFn={async () => await addTokenLatest(wallet, ETHTokenAddress)}
+      addDaiFn={async () => await addTokenLatest(wallet, DAITokenAddress)}
+    />
+  )
+}
+
+const AddTokenNext = () => {
+  const wallet = useAtomValue(walletStarknetkitNextAtom)
+  return (
+    <AddToken
+      addEthFn={async () => await addTokenNext(wallet, ETHTokenAddress)}
+      addDaiFn={async () => await addTokenNext(wallet, DAITokenAddress)}
+    />
+  )
+}
+
+interface AddTokenProps {
+  addEthFn: () => Promise<void>
+  addDaiFn: () => Promise<void>
+}
+
+const AddToken: FC<AddTokenProps> = ({ 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 (
+    <Flex direction="column" gap="3" flex="1">
+      <Heading as="h2">ERC20</Heading>
+      ETH token address
+      <Code
+        backgroundColor="#0097fc4f"
+        borderRadius="8px"
+        p="0 0.5rem"
+        width="fit-content"
+      >
+        <a
+          target="_blank"
+          rel="noreferrer"
+          style={{
+            color: "#0097fc",
+            display: "inline-block",
+            textDecoration: "none",
+          }}
+        >
+          {formatTruncatedAddress(ETHTokenAddress)}
+        </a>
+      </Code>
+      <Flex
+        as="button"
+        color="#0097fc"
+        fontWeight="bold"
+        onClick={handleAddEth}
+      >
+        Add ETH token to wallet
+      </Flex>
+      <Flex
+        as="button"
+        color="#0097fc"
+        fontWeight="bold"
+        onClick={handleAddDai}
+      >
+        Add DAI token to wallet
+      </Flex>
+      <span className="error-message">{addTokenError}</span>
+    </Flex>
+  )
+}
+
+export { AddTokenNext, AddTokenLatest }

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"],
+    },
+  })
+}

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<void> => {
+  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<void> => {
+  if (!wallet) {
+    throw Error("starknet wallet not connected")
+  }
+
+  await wallet.request({
+    type: "wallet_watchAsset",
+    params: {
+      type: "ERC20",
+      options: {
+        address,
+      },
+    },
+  })
+}