Skip to content

Commit

Permalink
Remove dangling wallet kit references (MystenLabs#15257)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
Jordan-Mysten authored Dec 7, 2023
1 parent 0f0d7cb commit 12d0c99
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 22 deletions.
12 changes: 6 additions & 6 deletions dapps/kiosk/src/mutations/kiosk.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
33 changes: 17 additions & 16 deletions docs/content/guides/developer/app-examples/recaptcha.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
}
Expand Down Expand Up @@ -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<address, u64>(&registry.id, sender(ctx))) {
if (df::exists_with_type<address, u64>(&registry.id, sender(ctx))) {
// Borrow a mutable reference to the interaction history object
let timestamp_ms = df::borrow_mut<address, u64>(&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)
}
);
Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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
Expand All @@ -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";
Expand All @@ -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!;
Expand Down Expand Up @@ -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:
Expand All @@ -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.

0 comments on commit 12d0c99

Please sign in to comment.