# Embedded Wallets | WaaS

<figure><img src="/files/SEb5YjCZYgc4ViRsFgOt" alt="embedded wallet-as-a-service in a phone screenshot"><figcaption></figcaption></figure>

> Related topics
>
> [WaaS](/products/waas.md)&#x20;

> Associated Development tools
>
> [Management Dashboard](/developer-tools/management-dashboard.md)
>
> &#x20;[core-react](/developer-tools/tweed-sdks/core-react.md) | [core-js](/developer-tools/tweed-sdks/core-js.md) | [core-vue](/developer-tools/tweed-sdks/core-vue.md)

> Examples
>
> [Example Projects](/developer-tools/example-projects.md)

{% tabs %}
{% tab title="React" %}

### &#x20;1. Create new Application

Go to the [Tweed Management Console](https://dashboard.paytweed.com/) and [create a new application](/developer-tools/management-dashboard/create-application.md). 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](https://www.npmjs.com/package/@paytweed/core-react) to your React app.

{% code fullWidth="false" %}

```bash
npm i @paytweed/core-react
```

{% endcode %}

### 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.

#### &#x20;Add networks

Specify the networks your application will use by passing them to the [Tweed provider](/developer-tools/tweed-sdks/core-react.md#tweed-provider). Import the `Network` enum from the React SDK.

{% code title="App.tsx" %}

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

{% endcode %}

### 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`](/developer-tools/tweed-sdks/core-react/useauth.md#connect-users) function from the [`useAuth`](/developer-tools/tweed-sdks/core-react/useauth.md) 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.

{% hint style="info" %}
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.
{% endhint %}

{% code title="HomePage.tsx" %}

```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;
```

{% endcode %}

{% hint style="success" %}
**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](/getting-started/token-checkout-or-payments/legacy-token-checkout/checkout-+-waas-+-auth.md)
{% endhint %}

### 5. Create Ethereum Provider

With the user logged in and authenticated, we are able to get the [Ethereum provider](/developer-tools/tweed-sdks/core-react/useweb3.md#ethereum-provider-or-eip-1193) to handle on-chain actions like sending transactions or checking balances.

#### import [`useWeb3`](/developer-tools/tweed-sdks/core-react/useweb3.md) hook from tweed SDK

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

#### obtain the Ethereum provider

Create a state to hold the [provider](/developer-tools/tweed-sdks/core-react/useweb3.md#ethereum-provider-or-eip-1193) 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.

```tsx
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**

{% code title="HomePage.tsx" %}

```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;
```

{% endcode %}

### 6. Test the Integration

Let's create a transaction using the `sendTransaction` function from `ethers`.

<pre class="language-tsx"><code class="lang-tsx">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);
<strong>  }
</strong></code></pre>

**Updating Our Page with the New Code**

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

{% endtab %}

{% tab title="HTML" %}

### &#x20;1. Create new Application

Go to the [Tweed Management Console](https://www.console-v2.paytweed.com/) and [create a new application](/developer-tools/management-dashboard/create-application.md). 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 app

install [tweed SDK](https://www.npmjs.com/package/@paytweed/core-react) to your app.

{% code fullWidth="false" %}

```bash
npm i @paytweed/core-js
```

{% endcode %}

### 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 [`applicationId`](#user-content-fn-1)[^1] 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.

{% code title="index.ts" %}

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

{% endcode %}

### 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.

{% code title="index.ts" %}

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

{% endcode %}

**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.

{% code title="index.ts" %}

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

{% endcode %}

#### Create index.html page

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

{% code title="index.html" %}

```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>
```

{% endcode %}

### 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.

```typescript
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.

{% code title="index.ts" %}

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

{% endcode %}

### 6. Test the Integration

Let's create a transaction using the `sendTransaction` function from `ethers`.

```typescript
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.

{% code title="index.ts" %}

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

{% endcode %}

**Add sendTx button to the page**

{% code title="index.html" %}

```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>
```

{% endcode %}
{% endtab %}
{% endtabs %}

### Next steps

<table data-view="cards"><thead><tr><th></th><th></th><th data-type="content-ref"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Manage User Authentication Options</strong></td><td>The Tweed SDK provides various methods for logging users into your application. Learn how to manage these options.</td><td><a href="/pages/QsyLrwxZnwS9OZOaNHUt">/pages/QsyLrwxZnwS9OZOaNHUt</a></td><td><a href="/pages/Wbs314rnW0FBNz29gbZG">/pages/Wbs314rnW0FBNz29gbZG</a></td></tr><tr><td><strong>Complete your integration</strong></td><td>Explore the full suite of Tweed SDK functions and features to complete your integration journey.</td><td><a href="/pages/fOd3KdA28xBt1H00Z2DY">/pages/fOd3KdA28xBt1H00Z2DY</a></td><td></td></tr><tr><td><strong>Update Appearance</strong></td><td>Modify the appearance by adjusting Tweed widgets and modals, like login or sign transaction, to align with your own application design.</td><td><a href="/pages/T7lVDuiDNTWTadxeyFAx">/pages/T7lVDuiDNTWTadxeyFAx</a></td><td></td></tr></tbody></table>

[^1]: Your application-id is required when calling this function, as it identifies your application to tweed.\
    \
    [Management Dashboard](/developer-tools/management-dashboard.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.paytweed.com/getting-started/embedded-wallets-or-waas.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.