chore: add rpc methods for starknet react next

package.json

@@ -31,7 +31,7 @@
     "starknet-react-chains-next": "npm:@starknet-react/[email protected]",
     "starknet-react-core-next": "npm:@starknet-react/[email protected]",
     "starknetkit-latest": "npm:starknetkit@^1.1.9",
-    "starknetkit-next": "npm:starknetkit@^2.2.23"
+    "starknetkit-next": "npm:starknetkit@^2.2.24"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",

src/app/withStarknetReactNext/page.tsx

@@ -3,6 +3,7 @@
 import { AccountSection } from "@/components/AccountSection"
 import { SignMessageWithStarknetReactNext } from "@/components/Actions/SignMessageWithStarknetReactNext"
 import { TransferWithStarknetReactNext } from "@/components/Actions/TransferWithStarknetReactNext"
+import { WalletRpcMsgContainerWithStarknetReactNext } from "@/components/Actions/WalletRpcMsgContainer"
 import { DisconnectButton } from "@/components/DisconnectButton"
 import { Section } from "@/components/Section"
 import { ConnectStarknetReactNext } from "@/components/connect/ConnectStarknetReactNext"
@@ -72,6 +73,9 @@ const StarknetReactDappContent = () => {
                 <SessionKeysTypedDataOutside />
               </Flex>
             </Section> */}
+            <Section>
+              <WalletRpcMsgContainerWithStarknetReactNext />
+            </Section>
           </>
         </Flex>
       )}

src/components/Actions/WalletRpcMessageReactNext.tsx

@@ -0,0 +1,86 @@
+import {
+  Button,
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Tooltip,
+  useDisclosure,
+} from "@chakra-ui/react"
+import { RpcMessage } from "@starknet-io/types-js"
+import { useState } from "react"
+import { useWalletRequest } from "starknet-react-core-next"
+
+type Props = {
+  type: RpcMessage["type"]
+  symbol?: string
+  params?: RpcMessage["params"]
+  tip?: string
+}
+
+export function WalletRpcMessageReactNext({
+  type,
+  symbol,
+  params,
+  tip,
+}: Props) {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const [response, setResponse] = useState<string>("N/A")
+
+  const walletRequest = useWalletRequest({
+    type,
+    params,
+  })
+
+  return (
+    <>
+      <Flex
+        color="black"
+        borderWidth="0px"
+        borderRadius="lg"
+        justifyContent="flex-start"
+        w="full"
+      >
+        <Tooltip hasArrow label={tip} bg="yellow.100" color="black">
+          <Button
+            bg="primary.500"
+            w="full"
+            onClick={async () => {
+              const r = (await walletRequest.requestAsync()) as typeof type
+              setResponse(r)
+              onOpen()
+            }}
+          >
+            {type} {symbol}
+          </Button>
+        </Tooltip>
+
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+
+          <ModalContent>
+            <ModalHeader fontSize="lg" fontWeight="bold">
+              Message sent to Wallet.
+            </ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              Message : {type} <br />
+              Param : {params ? JSON.stringify(params) : "N/A"} <br />
+              Response : {response}
+            </ModalBody>
+
+            <ModalFooter>
+              <Button colorScheme="red" onClick={onClose} ml={3}>
+                OK
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </Flex>
+    </>
+  )
+}

src/components/Actions/WalletRpcMsgContainer.tsx

@@ -3,6 +3,33 @@ import { WalletRpcMessage } from "./WalletRpcMessage"
 import { constants } from "starknet"
 import { RpcMessage } from "@/types/RpcMessage"
 import { StarknetWindowObject } from "starknetkit-next"
+import { useWalletRequest } from "starknet-react-core-next"
+import { WalletRpcMessageReactNext } from "./WalletRpcMessageReactNext"
+
+export const WalletRpcMsgContainerWithStarknetReactNext = () => {
+  return (
+    <>
+      <Heading as="h2">Wallet RPC</Heading>
+      <SimpleGrid
+        columns={{
+          base: 1,
+          md: 3,
+        }}
+        spacing="20px"
+        paddingBottom="20px"
+      >
+        <WalletRpcMessageReactNext
+          type="wallet_requestAccounts"
+          params={{
+            silent_mode: true,
+          }}
+        />
+
+        <WalletRpcMessageReactNext type="wallet_getPermissions" />
+      </SimpleGrid>
+    </>
+  )
+}
 
 export function WalletRpcMsgContainer({
   wallet,