Embedded Wallets | WaaS
Develop your own platform wallets to offer users secure and recoverable options for signing transactions, spending cryptocurrency, and transferring assets.

Related topics
Associated Development tools
Examples
1. Create new Application
Go to the Tweed Management Console and create a new application. This will generate a unique application ID for your application, which you will need to provide to the Tweed SDK. From the console, you can manage the application and modify its settings.
2. Add tweed to your React app
install tweed SDK to your React app.
npm i @paytweed/core-react
3. Integrate Tweed Provider into Your App
Import the Tweed provider from the Tweed React SDK and wrap your application with it. Use the applicationId
from the management console.
Add networks
Specify the networks your application will use by passing them to the Tweed provider. Import the Network
enum from the React SDK.
import { Network, TweedProvider } from "@paytweed/core-react";
import DemoPage from "pages/demo";
function App() {
return (
<>
<TweedProvider
applicationId="YOUR_APP_ID"
options={{
chains: [Network.POLYGON, Network.ETHEREUM]
}}
>
<HomePage />
</TweedProvider>
</>
);
}
4. Connect the User
Once the Tweed SDK is set up in your application, the first step is to connect the user. Use the connect
function from the useAuth
hook to display the sign-up/in modal. This allows users to create an account, and a wallet is automatically created for them. You can offer multiple sign-up options; for more details, visit here.
import { useAuth, useTweed } from "@paytweed/core-react";
function HomePage() {
const { connect } = useAuth()
const { client, loading } = useTweed();
function handleConnect() {
if(!client) return
connect()
}
return (
<>
<h1>HomePage</h1>
{ loading ?
<h2> loading... </h2> :
<button onClick={handleConnect}>connect</button>
}
</>
);
}
export default HomePage;
Token Checkout If you are integrating WaaS for token checkout, you are done at this point and can return to continue the token checkout integration
5. Create Ethereum Provider
With the user logged in and authenticated, we are able to get the Ethereum provider to handle on-chain actions like sending transactions or checking balances.
import useWeb3
hook from tweed SDK
useWeb3
hook from tweed SDKimport { useWeb3, Network } from "@paytweed/core-react";
obtain the Ethereum provider
Create a state to hold the provider and a function to obtain it. In this example, we use the useEffect
hook to initialize the provider as soon as the user connects, making it available immediately.
const { getEthereumProvider } = useWeb3();
const [provider, setProvider] = useState<BrowserProvider | null>(null);
async function getProvider() {
const provider = await getEthereumProvider(Network.ETHEREUM_SEPOLIA);
const web3provider = new BrowserProvider(provider);
setProvider(web3provider);
}d
useEffect(() => {
getProvider();
}, [provider]);
Updating Our Page with the New Code
import { useAuth, useTweed, useWeb3, Network } from "@paytweed/core-react";
import { BrowserProvider } from "ethers";
import { useState, useEffect } from "react";
function HomePage() {
const { connect } = useAuth();
const { client, loading } = useTweed();
const { getEthereumProvider } = useWeb3();
const [provider, setProvider] = useState<BrowserProvider | null>(null);
async function getProvider() {
const provider = await getEthereumProvider(Network.ETHEREUM_SEPOLIA);
const web3provider = new BrowserProvider(provider);
setProvider(web3provider);
}
useEffect(() => {
getProvider();
}, [provider]);
function handleConnect() {
if (!client) return;
connect();
}
return (
<>
<h1>HomePage</h1>
{loading ? (
<h2>loading...</h2>
) : (
<button onClick={handleConnect}>connect</button>
)}
</>
);
}
export default HomePage;
6. Test the Integration
Let's create a transaction using the sendTransaction
function from ethers
.
async function sendTransaction() {
if (!provider) return;
const signer = await provider.getSigner();
const txHash = await signer.sendTransaction({
to: "0x03928fc2FD91491919F55C8658477fE1352338E7",
value: "0.1",
});
console.log('transaction sent', txHash);
}
Updating Our Page with the New Code
import { useAuth, useTweed, useWeb3, Network } from "@paytweed/core-react";
import { BrowserProvider } from "ethers";
import { useState, useEffect } from "react";
function HomePage() {
const { connect } = useAuth();
const { client, loading } = useTweed();
const { getEthereumProvider } = useWeb3();
const [provider, setProvider] = useState<BrowserProvider | null>(null);
async function getProvider() {
const provider = await getEthereumProvider(Network.ETHEREUM_SEPOLIA);
const web3provider = new BrowserProvider(provider);
setProvider(web3provider);
}
useEffect(() => {
getProvider();
}, [provider]);
function handleConnect() {
if (!client) return;
connect();
}
async function handleSendTransaction() {
if (!provider) return;
const signer = await provider.getSigner();
const txHash = await signer.sendTransaction({
to: "0x03928fc2FD91491919F55C8658477fE1352338E7",
value: "0.1",
});
console.log('transaction sent', txHash);
}
return (
<>
<h1>HomePage</h1>
{loading ? (
<h2>loading...</h2>
) : (
<div>
<button onClick={handleConnect}>connect</button>
<button onClick={handleSendTransaction}>send tx.</button>
</div>
)}
</>
);
}
export default HomePage;
Next steps
Manage User Authentication Options
The Tweed SDK provides various methods for logging users into your application. Learn how to manage these options.
Complete your integration
Explore the full suite of Tweed SDK functions and features to complete your integration journey.
Update Appearance
Modify the appearance by adjusting Tweed widgets and modals, like login or sign transaction, to align with your own application design.
Last updated