Tweed Docs
  • Welcome to Tweed
    • What Can Tweed Do?
  • Getting Started
    • Embedded Wallets | WaaS
    • Token Checkout | Payments
      • Flow of Funds: Purchase to Settlement
      • Token Checkout
      • Legacy Token Checkout
        • Basic Checkout Integration
        • Checkout + WaaS + Auth
        • Features
          • Payment links
          • Whitelist
          • Flow of Funds
          • Apple & Google Pay
          • AML & KYC Policy Overview
  • Developer Tools
    • Tweed SDKs
      • core-react
        • useAuth
        • useWallet
        • useTweed
        • usePayments
        • useWeb3
      • core-js
      • core-vue
      • Payments SDKs (v1)
        • Frontend SDKs (Payments)
        • Backend SDK (Payments)
        • How to set up your smart contract for Tweed
        • Tezos chain considerations
    • Management Dashboard
      • Create platform
      • Create application
        • UI Customization
    • Webhooks
      • Checkout Webhooks
    • API
      • API (V1)
      • API (V2)
        • Authorization
        • API reference
          • Contracts
            • Add
            • Add contract function
            • Contract
          • Payouts
            • Add
            • Payout
          • Items
            • Add
            • All
              • Contract
                • Count
              • Payout
                • Count
          • Assets
            • Blockchain
            • All
              • Blockchains
          • Blockchains
            • Multiple
            • Native asset
          • Audit event mappings
          • Platform webhooks
            • Set active
          • Tickets
        • Specification
    • External Integrations
      • Wagmi connector
      • Onramp to Crypto
    • Example Projects
    • Supported Blockchains
    • Pricing
  • Products
    • WaaS
    • Payments
Powered by GitBook
On this page
  1. Getting Started

Embedded Wallets | WaaS

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

Last updated 4 months ago

Related topics

WaaS

Associated Development tools

Management Dashboard

core-react | core-js | core-vue

Examples

Example Projects

1. Create new Application

2. Add tweed 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

App.tsx
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

Utilize the loading state from the useTweed hook to manage the loading state, and implement a check to verify that the Tweed client is initialized.

HomePage.tsx
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;

5. Create Ethereum Provider

import { useWeb3, Network } from "@paytweed/core-react";

obtain the Ethereum provider

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

HomePage.tsx
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;

1. Create new Application

2. Add tweed to your app

npm i @paytweed/core-js

3. Initialize Tweed client into Your App

Import the TweedClient from the @paytweed/core-js SDK, and initialize it using the create() function. Use the from the management console and specify the networks your application will use by passing them to the Tweed provider. Import the Network enum from the SDK.

index.ts
import { Network, TweedClient } from "@paytweed/core-js";

const chains = [Network.ETHEREUM, Network.POLYGON];
const appId = 'YOUR_APP_ID';
let tweed = null;

async function initializeTweedClient(appId, chains) {
  if (!client) {
     tweed = TweedClient.create(appId, { chains });
 }

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 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 visit the tweed dashboard.

index.ts
async function connectUser() {
  if (tweed) {
    const accessToken = await tweed.connect();
    }
}

Updating Our Page with the New Code

Add the connect function to index.ts, and create a new function to listen for events from the button we will create in the next step and trigger the connectUser function.

index.ts
import { Network, TweedClient } from "@paytweed/core-js";

const chains = [Network.ETHEREUM, Network.POLYGON];
const appId = 'YOUR_APP_ID';
let tweed = null;

async function initializeTweedClient(appId, chains) {
  if (!client) {
 tweed = TweedClient.create(appId, { chains });
 }
 
 async function connectUser() {
  if (tweed) {
    const accessToken = await tweed.connect();
}

//this will use by the buton will added in the next step
document.getElementById("connectButton").addEventListener("click", async () => {
  try {
    await initializeTweedClient(appId, chains);
    await connectUser();
  } catch (error) {
    console.error("Error connecting to Tweed:", error);
  }
});

Create index.html page

Add the index.ts file we just created into a <script> with the type module, and create a button.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tweed Core-JS Example</title>
  <script type="module" defer src="index.js"></script>
</head>
<body>
  <h1>Tweed Core-JS Example</h1>
  <button id="connectButton">logIn/signup to wallet</button>
</body>
</html>

5. Create Ethereum Provider

With the user logged in and authenticated, we can get the Ethereum provider to handle on-chain actions like sending transactions or checking balances.

import { BrowserProvider } from "ethers";

async function getEthProvider() {
  const tweedProvider = await tweed.getEthereumProvider(Network.ETHEREUM_SEPOLIA);
  const provider = new BrowserProvider(tweedProvider);
}

Updating index.ts with the New Code

Update index.ts to include the getEthProvider function.

index.ts
import { Network, TweedClient } from "@paytweed/core-js";
import { BrowserProvider } from "ethers";

const chains = [Network.ETHEREUM, Network.POLYGON];
const appId = 'YOUR_APP_ID';
let tweed = null;
let provider = null

async function initializeTweedClient(appId, chains) {
  if (!client) {
 tweed = TweedClient.create(appId, { chains });
 }
 
 async function connectUser() {
  if (tweed) {
    const accessToken = await tweed.connect();
}

async function getEthProvider() {
  if (!provider) {
    const tweedProvider = await tweed.getEthereumProvider(Network.ETHEREUM_SEPOLIA);
    provider = new BrowserProvider(tweedProvider);
  }

document.getElementById("connectButton").addEventListener("click", async () => {
  try {
    await initializeTweedClient(appId, chains);
    await connectUser();
  } catch (error) {
    console.error("Error connecting to Tweed:", error);
  }
});

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 index.ts with the New Code

Add the sendTransaction function and create a new function to listen for events from the button we will create in the next step and trigger the sendTransaction function.

index.ts
import { Network, TweedClient } from "@paytweed/core-js";
import { BrowserProvider } from "ethers";

const chains = [Network.ETHEREUM, Network.POLYGON];
const appId = 'YOUR_APP_ID';
let tweed = null;
let provider = null;

async function initializeTweedClient(appId, chains) {
  if (!tweed) {
    tweed = TweedClient.create(appId, { chains });
  }
}

async function connectUser() {
  if (tweed) {
    const accessToken = await tweed.connect();
  }
}

async function getEthProvider() {
  if (!provider) {
    const tweedProvider = await tweed.getEthereumProvider(Network.ETHEREUM_SEPOLIA);
    provider = new BrowserProvider(tweedProvider);
  }
}

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);
}

document.getElementById("connectButton").addEventListener("click", async () => {
  try {
    await initializeTweedClient(appId, chains);
    await connectUser();
  } catch (error) {
    console.error("Error connecting to Tweed:", error);
  }
});

document.getElementById("sendTx").addEventListener("click", async () => {
  try {
    await getEthProvider();
    await sendTransaction();
  } catch (error) {
    console.error("Error sending transaction:", error);
  }
});

Add sendTx button to the page

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tweed Core-JS Example</title>
  <script type="module" defer src="index.js"></script>
</head>
<body>
  <h1>Tweed Core-JS Example</h1>
  <button id="connectButton">Log In/Sign Up to Wallet</button>
  <button id="sendTx">Send Transaction</button>
</body>
</html>

Next steps

Go to the and . 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.

install to your React app.

Specify the networks your application will use by passing them to the . Import the Network enum from the React SDK.

Once the Tweed SDK is set up in your application, the first step is to connect the user. Use the function from the 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.

Token Checkout If you are integrating WaaS for token checkout, you are done at this point and can return to continue the

With the user logged in and authenticated, we are able to get the to handle on-chain actions like sending transactions or checking balances.

import hook from tweed SDK

Create a state to hold the 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.

Go to the and . 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.

install to your app.

Tweed Management Console
create a new application
tweed SDK
token checkout integration
useWeb3
Tweed Management Console
create a new application
tweed SDK

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.

Manage User Authentication Options

The Tweed SDK provides various methods for logging users into your application. Learn how to manage these options.

Tweed SDKs
UI Customization
Management Dashboard
useAuth
Ethereum provider
provider
connect
embedded wallet-as-a-service in a phone screenshot
Tweed provider