From 12d0c995081689f5365145cbd12107efe24a6492 Mon Sep 17 00:00:00 2001 From: Jordan Gensler Date: Thu, 7 Dec 2023 14:07:46 -0800 Subject: [PATCH] Remove dangling wallet kit references (#15257) ## Description Missed these in the last PR. ## Test Plan How did you test the new or updated feature? --- If your changes are not user-facing and not a breaking change, you can skip the following section. Otherwise, please indicate what changed, and then add to the Release Notes section as highlighted during the release process. ### Type of Change (Check all that apply) - [ ] protocol change - [ ] user-visible impact - [ ] breaking change for a client SDKs - [ ] breaking change for FNs (FN binary must upgrade) - [ ] breaking change for validators or node operators (must upgrade binaries) - [ ] breaking change for on-chain data layout - [ ] necessitate either a data wipe or data migration ### Release notes --- dapps/kiosk/src/mutations/kiosk.ts | 12 +++---- .../developer/app-examples/recaptcha.mdx | 33 ++++++++++--------- 2 files changed, 23 insertions(+), 22 deletions(-) diff --git a/dapps/kiosk/src/mutations/kiosk.ts b/dapps/kiosk/src/mutations/kiosk.ts index 9657ec4b8cf95..d66da390035c6 100644 --- a/dapps/kiosk/src/mutations/kiosk.ts +++ b/dapps/kiosk/src/mutations/kiosk.ts @@ -49,7 +49,7 @@ export function useCreateKioskMutation({ onSuccess, onError }: MutationParams) { * Place & List or List for sale in kiosk. */ export function usePlaceAndListMutation({ onSuccess, onError }: MutationParams) { - const { currentAccount } = useWalletKit(); + const currentAccount = useCurrentAccount(); const { data: ownedKiosk } = useOwnedKiosk(currentAccount?.address); const { signAndExecute } = useTransactionExecution(); const kioskClient = useKioskClient(); @@ -102,7 +102,7 @@ export function usePlaceAndListMutation({ onSuccess, onError }: MutationParams) * Mutation to place an item in the kiosk. */ export function usePlaceMutation({ onSuccess, onError }: MutationParams) { - const { currentAccount } = useWalletKit(); + const currentAccount = useCurrentAccount(); const { data: ownedKiosk } = useOwnedKiosk(currentAccount?.address); const { signAndExecute } = useTransactionExecution(); const kioskClient = useKioskClient(); @@ -131,7 +131,7 @@ export function usePlaceMutation({ onSuccess, onError }: MutationParams) { * Withdraw profits from kiosk */ export function useWithdrawMutation({ onError, onSuccess }: MutationParams) { - const { currentAccount } = useWalletKit(); + const currentAccount = useCurrentAccount(); const { data: ownedKiosk } = useOwnedKiosk(currentAccount?.address); const { signAndExecute } = useTransactionExecution(); @@ -160,7 +160,7 @@ export function useWithdrawMutation({ onError, onSuccess }: MutationParams) { * Mutation to take an item from the kiosk. */ export function useTakeMutation({ onSuccess, onError }: MutationParams) { - const { currentAccount } = useWalletKit(); + const currentAccount = useCurrentAccount(); const { data: ownedKiosk } = useOwnedKiosk(currentAccount?.address); const { signAndExecute } = useTransactionExecution(); const kioskClient = useKioskClient(); @@ -194,7 +194,7 @@ export function useTakeMutation({ onSuccess, onError }: MutationParams) { * Mutation to delist an item. */ export function useDelistMutation({ onSuccess, onError }: MutationParams) { - const { currentAccount } = useWalletKit(); + const currentAccount = useCurrentAccount(); const { data: ownedKiosk } = useOwnedKiosk(currentAccount?.address); const { signAndExecute } = useTransactionExecution(); const kioskClient = useKioskClient(); @@ -228,7 +228,7 @@ export function useDelistMutation({ onSuccess, onError }: MutationParams) { * Mutation to delist an item. */ export function usePurchaseItemMutation({ onSuccess, onError }: MutationParams) { - const { currentAccount } = useWalletKit(); + const currentAccount = useCurrentAccount(); const { data: ownedKiosk } = useOwnedKiosk(currentAccount?.address); const { signAndExecute } = useTransactionExecution(); const kioskClient = useKioskClient(); diff --git a/docs/content/guides/developer/app-examples/recaptcha.mdx b/docs/content/guides/developer/app-examples/recaptcha.mdx index 378c8ff9b622b..36452647c0774 100644 --- a/docs/content/guides/developer/app-examples/recaptcha.mdx +++ b/docs/content/guides/developer/app-examples/recaptcha.mdx @@ -63,7 +63,7 @@ There are few details to take note of in this code: 1. The fourth line declares the module name as `recaptcha` within the package `recaptcha`. 1. The next eight lines use the use keyword to import types and functions from other modules, such as `sui::clock::Clock`, `sui::dynamic_field as df`, `sui::ed25519::ed25519_verify`, `sui::event::emit,sui::math`, `sui::object::{Self, UID}`, `sui::transfer`, and `sui::tx_context::{sender, TxContext}`. These modules are needed for the implementation of the reCAPTCHA verification and the interaction logic. -1. The following three lines declare the error codes, namely: `EVerificationExpired`, `EInvalidSignature`, and `ENotYetVerified`, that are used to check the validity of the reCAPTCHA test result and the eligibility of the user. The error codes are also used in the unit tests to verify the correctness of the program. +1. The following three lines declare the error codes, namely: `EVerificationExpired`, `EInvalidSignature`, and `ENotYetVerified`, that are used to check the validity of the reCAPTCHA test result and the eligibility of the user. The error codes are also used in the unit tests to verify the correctness of the program. 1. The last line declares the constant `TIME_WINDOW`, which specifies the duration of the time window in milliseconds. The time window is the period of time that the user is eligible to interact with the smart contract after passing the reCAPTCHA test. Next, add some more code to this module: @@ -75,7 +75,7 @@ struct Interaction has copy, drop { } // Define a struct for the registry object that has a key field -struct Registry has key { +struct Registry has key { id: UID, // The unique identifier of the registry object window: u64, // The length of the time window in milliseconds } @@ -168,16 +168,16 @@ public fun interact( ctx: &mut TxContext // A mutable reference to the transaction context ) { // Check if there is an existing interaction history for the sender address with the registry object - if (df::exists_with_type(®istry.id, sender(ctx))) { + if (df::exists_with_type(®istry.id, sender(ctx))) { // Borrow a mutable reference to the interaction history object let timestamp_ms = df::borrow_mut(&mut registry.id, sender(ctx)); // Get the current timestamp in milliseconds from the clock object let current_timestamp = sui::clock::timestamp_ms(clock); - + if (current_timestamp - *timestamp_ms <= registry.window) { emit( Interaction{ - sender: sender(ctx), + sender: sender(ctx), timestamp_ms: sui::clock::timestamp_ms(clock) } ); @@ -205,11 +205,11 @@ The function performs the following steps: - If the current timestamp is outside the time window of the eligibility, it aborts the execution with the error code `EVerificationExpired`. This means that the user has to pass the reCAPTCHA test again to interact with the smart contract. - If there is no existing interaction history, it aborts the execution with the error code `ENotYetVerified`. This means that the user has not passed the reCAPTCHA test yet and cannot interact with the smart contract. -And with that, your `recaptcha.move` code is complete. +And with that, your `recaptcha.move` code is complete. ## Deployment -:::info +:::info See [Publish a Package](guides/developer/first-app/publish) for a more detailed guide on publishing packages or [Sui Client CLI](/references/cli/client.mdx) for a complete reference of `client` commands in the Sui CLI. @@ -390,12 +390,12 @@ That's it! You have implemented the backend for the reCAPTCHA. To run the app, y ## Frontend -To implement the frontend for the reCAPTCHA, you need to create a react app that can render a user interface and interact with the backend and the smart contract. You also need to install some dependencies, such as `@mysten/wallet-kit`, `@mysten/sui.js`, `axios`, and `react-google-recaptcha`. These packages help you with wallet integration, transaction execution, HTTP requests, and reCAPTCHA rendering. +To implement the frontend for the reCAPTCHA, you need to create a react app that can render a user interface and interact with the backend and the smart contract. You also need to install some dependencies, such as `@mysten/dapp-kit`, `@mysten/sui.js`, `axios`, and `react-google-recaptcha`. These packages help you with wallet integration, transaction execution, HTTP requests, and reCAPTCHA rendering. Here are the steps to create the frontend: 1. Initialize a new project with `pnpm create vite recaptcha-app --template react-ts`. -2. Install the dependencies with `pnpm install --save @mysten/wallet-kit @mysten/sui.js axios react-google-recaptcha`. +2. Install the dependencies with `pnpm install --save @mysten/dapp-kit @mysten/sui.js axios react-google-recaptcha`. 3. Create a file named `.env` and add the following environment variables: - `VITE_reCAPTCHA_SITE_KEY`: the site key that you get from Google when you register your site for reCAPTCHA - `VITE_reCAPTCHA_SECRET_KEY`: the secret key that you get from Google when you register your site for reCAPTCHA @@ -406,7 +406,7 @@ Here are the steps to create the frontend: ```typescript title='App.tsx' import "./App.css"; import Axios from "axios"; -import { ConnectButton, useWalletKit } from "@mysten/wallet-kit"; +import { ConnectButton, useCurrentWallet, useSignAndExecuteTransactionBlock, useCurrentAccount } from "@mysten/dapp-kit"; import { TransactionBlock } from "@mysten/sui.js/transactions"; import { useEffect, useState } from "react"; import ReCAPTCHA from "react-google-recaptcha"; @@ -423,8 +423,9 @@ interface RecaptchaApiResponse { } function App() { - const { currentWallet, currentAccount, signAndExecuteTransactionBlock } = - useWalletKit(); + const { currentWallet } = useCurrentWallet(); + const { mutateAsync: signAndExecuteTransactionBlock } = useSignAndExecuteTransactionBlock(); + const currentAccount = useCurrentAccount(); const SITE_KEY = import.meta.env.VITE_reCAPTCHA_SITE_KEY!; const SECRET_KEY = import.meta.env.VITE_reCAPTCHA_SECRET_KEY!; @@ -552,7 +553,7 @@ export default App; 5. Examine the code to see what it does. - First, import the modules that you need for your app. -- Next, use the `useWalletKit` hook from `@mysten/wallet-kit` to get access to the current wallet, the current account, and the `signAndExecuteTransactionBlock` function. These help you connect to the wallet and execute transactions on the blockchain. +- Next, use hooks from `@mysten/dapp-kit` to get access to the current wallet, the current account, and the `signAndExecuteTransactionBlock` function. These help you connect to the wallet and execute transactions on the blockchain. - Then, define some constants for the site key, the secret key, the package ID, the registry ID, and the module ID. These are the values that you use to interact with the reCAPTCHA API and the smart contract. - After that, define some state variables to store the status of the reCAPTCHA validation, the verification result, and the message, the public key, and the signature that you get from the backend. Use the `useState` hook from React to manage these state variables. - Next, define a function named `onChange` that takes a token as an input and handles the change of the reCAPTCHA component. This function is triggered when the user completes the reCAPTCHA challenge. Here are the steps that you follow in this function: @@ -568,9 +569,9 @@ export default App; - Return an empty object as the default reCAPTCHA API response. - Next, use the `useEffect` hook from React to run some code when the `currentWallet` state changes. In this case, you don't do anything, but you could add some logic here if you want to. - Finally, return a JSX element that renders the app. The app consists of the following components: - - A `ConnectButton` component from `@mysten/wallet-kit` that allows the user to connect to their wallet. - - A button that allows the user to interact with the smart contract. This button is disabled unless the user passes the verification at least once. When the user clicks this button, create a new `TransactionBlock` object from `@mysten/sui.js` and add a `moveCall` action that calls the `interact` function of the smart contract with the registry ID and the clock object ID as arguments. Then, use the `signAndExecuteTransactionBlock` function from `@mysten/wallet-kit` to sign and execute the transaction block on the blockchain. You also log the result to the console. - - A button that allows the user to verify their identity to the smart contract. This button is disabled unless the user passes the reCAPTCHA challenge. When the user clicks this button, create a new `TransactionBlock` object from `@mysten/sui.js` and add a `moveCall` action that calls the verify function of the smart contract with the registry ID, the signature, the public key, and the message as arguments. Then, use the `signAndExecuteTransactionBlock` function from `@mysten/wallet-kit` to sign and execute the transaction block on the blockchain. You also log the result to the console. + - A `ConnectButton` component from `@mysten/dapp-kit` that allows the user to connect to their wallet. + - A button that allows the user to interact with the smart contract. This button is disabled unless the user passes the verification at least once. When the user clicks this button, create a new `TransactionBlock` object from `@mysten/sui.js` and add a `moveCall` action that calls the `interact` function of the smart contract with the registry ID and the clock object ID as arguments. Then, use the `signAndExecuteTransactionBlock` function from `@mysten/dapp-kit` to sign and execute the transaction block on the blockchain. You also log the result to the console. + - A button that allows the user to verify their identity to the smart contract. This button is disabled unless the user passes the reCAPTCHA challenge. When the user clicks this button, create a new `TransactionBlock` object from `@mysten/sui.js` and add a `moveCall` action that calls the verify function of the smart contract with the registry ID, the signature, the public key, and the message as arguments. Then, use the `signAndExecuteTransactionBlock` function from `@mysten/dapp-kit` to sign and execute the transaction block on the blockchain. You also log the result to the console. - A `ReCAPTCHA` component from `react-google-recaptcha` that renders the reCAPTCHA widget. You pass the site key and the `onChange` function as props to this component. That's it! You have implemented the frontend for the reCAPTCHA. To run the app, you can use `pnpm run dev`. To test the app, you can open the browser and go to the `localhost:5173` URL. You should see the app and can interact with the reCAPTCHA and the smart contract.