This guide will help you set up a project using the YouBet SDK with Vite, React, and TypeScript.
Make sure you have the following installed:
- Node.js
- pnpm
First, create a new Vite project with React and TypeScript.
pnpm create vite youbet-app --template react-ts
cd youbet-app
Install the Youbet SDK using pnpm.
pnpm add youbet-sdk
Create a new file src/sdk.ts
and initialize the SDK.
// src/sdk.ts
import { SDK, NetworkType } from 'youbet-sdk';
const sdk = new SDK({
privateKey: 'your-private-key', // optional
networkType: NetworkType.Mainnet // or NetworkType.Testnet
});
export default sdk;
Now you can use the SDK methods in your React components. Here is an example of how to use some of the Client module methods.
// src/App.tsx
import React, { useEffect, useState } from 'react';
import sdk from './sdk';
const App: React.FC = () => {
const [owner, setOwner] = useState<string>('');
const [goals, setGoals] = useState<any[]>([]);
useEffect(() => {
const fetchOwner = async () => {
const contractOwner = await sdk.client.getContractOwner();
setOwner(contractOwner);
};
const fetchGoals = async () => {
const allGoals = await sdk.client.getAllGoals();
setGoals(allGoals);
};
fetchOwner();
fetchGoals();
}, []);
return (
<div>
<h1>Contract Owner: {owner}</h1>
<h2>All Goals:</h2>
<ul>
{goals.map((goal, index) => (
<li key={index}>{goal.name}</li>
))}
</ul>
</div>
);
};
export default App;
You can also use the Contract module methods to interact with the contract. Here's an example of how to create a new goal.
// src/CreateGoal.tsx
import React, { useState } from 'react';
import sdk from './sdk';
const CreateGoal: React.FC = () => {
const [name, setName] = useState<string>('');
const [description, setDescription] = useState<string>('');
const [stake, setStake] = useState<number>(0);
const [taskCount, setTaskCount] = useState<number>(0);
const [goalInfo, setGoalInfo] = useState<any>(null);
const createGoal = async () => {
const newGoal = await sdk.contract.createGoal(name, description, stake, taskCount);
setGoalInfo(newGoal);
};
return (
<div>
<h2>Create a New Goal</h2>
<input
type="text"
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
type="text"
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<input
type="number"
placeholder="Required Stake"
value={stake}
onChange={(e) => setStake(Number(e.target.value))}
/>
<input
type="number"
placeholder="Task Count"
value={taskCount}
onChange={(e) => setTaskCount(Number(e.target.value))}
/>
<button onClick={createGoal}>Create Goal</button>
{goalInfo && (
<div>
<h3>Goal Created:</h3>
<p>Name: {goalInfo.name}</p>
<p>Description: {goalInfo.description}</p>
<p>Stake: {goalInfo.requiredStake}</p>
<p>Task Count: {goalInfo.taskCount}</p>
</div>
)}
</div>
);
};
export default CreateGoal;
Start your Vite development server.
pnpm run dev
Open your browser and navigate to the URL provided by Vite (typically http://localhost:3000
). You should now see your React app using the YouBet SDK.
For more detailed information, refer to the YouBet SDK documentation.
Now you have a basic setup to start using the YouBet SDK with Vite, React, and TypeScript. Happy coding!