# Welcome to Tweed
Tweed bridges the gap between the complexity of the blockchain and mainstream users, through robust headless technology and a low-code SDK. Tweed products prioritize user experience without sacrificing security or user ownership.
Your brand is placed at the center of Tweed's technology. Now you can focus on building unique and exciting experiences - and let Tweed take care of the rest.
***
## π Benefits of Tweed π
Tweed wallets optimize security and recoverability
***
## π Tweed wallets optimize security and recoverability
#### What is a crypto wallet?
> A crypto wallet is an application that stores a user's blockchain-based assets, such as cryptocurrencies, tokens, and NFTs. Just as importantly, a crypto wallet enables users to carry out transactions on the blockchains, like paying for goods and services with cryptocurrencies or purchasing or minting NFTs.\
> \
> Another crucial purpose of a crypto wallet is storing two pieces of information that are essential to blockchain transactions: a user's **public key** and **private key.** A user's public key is visible to everyone and is used to generate the wallet address to which others can send the user cryptocurrencies and other on-chain assets. \
> \
> In contrast, a private key enables a user to sign, i.e., authorize, blockchain transactions and should only be known to the user. Signing a transaction proves that the user is the owner of the wallet; with this proof, a user can spend crypto and transfer assets out of their wallet. As a result, anyone who holds the wallet's private keys can control the funds or assets within it without any restrictions or limits. In short, whoever possesses the user's private key controls their crypto wallet and the assets it contains, so it's vital for the user to retain ownership of their private keys to ensure the security of their on-chain assets.
This is why **a good crypto wallet must have two mechanisms that are equally important**:
Security
To prevent unauthorized users from controlling the user's assets
{% hint style="info" %}
Tweed wallets optimize for security and recoverability. To understand how, read more below.
{% endhint %}
***
## Tweed offers a completely self-custodial wallet
Tweed's [Wallet as a Service](https://tweed.gitbook.io/tweed-v1-wallets-integration/) product offers 100% self-custodial wallets: only the owner of the wallet can sign transactions, spend crypto, and transfer assets. The user's private key is stored in a way that can only be recovered by the user and can never be accessed by Tweed or the integrated platform.
Crypto wallets are either **self-custodial** or **custodial**. The differences are defined below:
**What are self-custodial wallets?**
> The user is responsible for managing their self-custodial wallet and should be the only one with access to their private key and assets. A fully self-custodial solution provider has no way of recreating or recovering the user's keys. This is where the technology comes into play and where the difference between each proclaimed self-custodial wallet provider lies: if the wallet provider has any way to access the user's private keys, the wallet is not truly self-custodial. MetaMask is a great example of a true self-custodial wallet provider.
**What are custodial wallets?**
> Alternatively, a user can keep their assets with a custodian, such as a crypto exchange like Coinbase or Binance. The user does not have to manage their wallet or protect their private keys; the custodian manages a user's keys for them. A custodial wallet's UI is often simpler than a self-custodial wallet, and a user just needs a username/password or SSO. The downside, however, is that the user's assets are managed by an external party, and a breach suffered by the external party jeopardizes the security of the assets within the wallet.
***
## π Only users control their keys - no exceptions
{% hint style="success" %}
Keys are generated, sharded, encrypted, and decrypted on your end user's device, with user secrets - **no exceptions**.
{% endhint %}
Tweed's proprietary key management solution uses a social login, e.g., Google, to secure users' wallets. Seed phrases are optional but never mandatory.
***
## Users can recover their wallets with a social login
{% hint style="info" %}
*Users no longer have to store a 12-word seed phrase to recover their assets and risk losing them forever.*
{% endhint %}
The risk with private keys is that losing them will render the user's funds useless and will not be recoverable by anyone else.\
\
With many self-custodial crypto providers, users are required to store a 12-word seed, or mnemonic, phrase that is only shown once upon wallet creation. Traditionally, users need this phrase to regain access to their wallet, whether on the same device or a new device.
***
## π³ Offer a completely Web2 experience for tokens purchases
With Tweed's Token Checkout solution, buyers can purchase tokens in the same way they purchase anything else online: with their debit or credit card or Apple or Google Pay. As a result, knowledge of and familiarity with Web3 technology are abstracted from the user: they don't need to own any crypto - and Tweed handles the gas fees!
Coupled with our [Wallet as a Service](broken://pages/1074GhFxQag8yq2Vft62) solution, buyers don't need to own crypto or even have a wallet before purchasing your tokens, removing friction from the customer experience.
# What Can Tweed Do?
Tweed's solution is built around four key pillars: Wallets, Connectivity, Payments, and Authentication
## Incorporate self-custodial wallets into your dApp
All it takes to create a wallet is calling `sdk.wallet.create()`. You have full control over the UI/UX of your platform and how much detail of the wallet you want to show to your users - whether they are web2 users with little-to-no crypto knowledge or web3 natives.
## Add a "Pay with Credit Card" option to your platform
Offer additional payment methods and open new revenue streams by adding a "Pay with Card" button and flow to your platform.
## Login to Backend Resources
Tweed provides the most secure login mechanism that allows your users to log-in to your platform using their wallet, no need for an external log-in provider any more.
## Multi-Chain support
Every Tweed wallet automatically supports all of the blockchains we support - meaning users can hold assets from all of these chains in one single wallet.
No need to add new lines of code for every new chain addition - live wallets are automatically updated with new chain additions!
# 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
>
> [WaaS](/products/waas)
> Associated Development tools
>
> [Management Dashboard](/developer-tools/management-dashboard)
>
> [core-react](/developer-tools/tweed-sdks/core-react) | [core-js](/developer-tools/tweed-sdks/core-js) | [core-vue](/developer-tools/tweed-sdks/core-vue)
> Examples
>
> [Example Projects](/developer-tools/example-projects)
{% tabs %}
{% tab title="React" %}
### 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). 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.
#### Add networks
Specify the networks your application will use by passing them to the [Tweed provider](/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 (
<>
);
}
```
{% 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#connect-users) function from the [`useAuth`](/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 (
<>
HomePage
{ loading ?
loading...
:
}
);
}
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)
{% 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#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) 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#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(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(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 (
<>
HomePage
{loading ? (
loading...
) : (
)}
);
}
export default HomePage;
```
{% endcode %}
### 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**
```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(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 (
<>
HomePage
{loading ? (
loading...
) : (
)}
);
}
export default HomePage;
```
{% endtab %}
{% tab title="HTML" %}
### 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). 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 `
