# Embedded Wallets | WaaS

<figure><img src="https://2034179314-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgQyCg5IN7Cv6AnUUpGl2%2Fuploads%2FL1kPZqmDzc2HJWORp9DA%2Fwallet-as-a-service.png?alt=media&#x26;token=9dfd1135-98c1-4a9e-a49c-8473250c0231" alt="embedded wallet-as-a-service in a phone screenshot"><figcaption></figcaption></figure>

> Related topics
>
> [waas](https://docs.paytweed.com/products/waas "mention")&#x20;

> Associated Development tools
>
> [management-dashboard](https://docs.paytweed.com/developer-tools/management-dashboard "mention")
>
> &#x20;[core-react](https://docs.paytweed.com/developer-tools/tweed-sdks/core-react "mention") | [core-js](https://docs.paytweed.com/developer-tools/tweed-sdks/core-js "mention") | [core-vue](https://docs.paytweed.com/developer-tools/tweed-sdks/core-vue "mention")

> Examples
>
> [example-projects](https://docs.paytweed.com/developer-tools/example-projects "mention")

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

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

Go to the [Tweed Management Console](https://dashboard.paytweed.com/) and [create a new application](https://docs.paytweed.com/developer-tools/management-dashboard/create-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](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](https://docs.paytweed.com/developer-tools/tweed-sdks/core-react#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`](https://docs.paytweed.com/developer-tools/tweed-sdks/core-react/useauth#connect-users) function from the [`useAuth`](https://docs.paytweed.com/developer-tools/tweed-sdks/core-react/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.

{% 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](https://docs.paytweed.com/getting-started/token-checkout-or-payments/legacy-token-checkout/checkout-+-waas-+-auth)
{% endhint %}

### 5. Create Ethereum Provider

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

#### import [`useWeb3`](https://docs.paytweed.com/developer-tools/tweed-sdks/core-react/useweb3) hook from tweed SDK

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

#### obtain the Ethereum provider

Create a state to hold the [provider](https://docs.paytweed.com/developer-tools/tweed-sdks/core-react/useweb3#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](https://docs.paytweed.com/developer-tools/management-dashboard/create-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 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="../developer-tools/management-dashboard">management-dashboard</a></td><td><a href="broken-reference">Broken link</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="../developer-tools/tweed-sdks">tweed-sdks</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="../developer-tools/management-dashboard/create-application/ui-customization">ui-customization</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](https://docs.paytweed.com/developer-tools/management-dashboard "mention")