# Walless Introduction

Welcome to Walless

## What is WALLESS?

Walless is a comprehensive and innovative web3 wallet solution that caters to both end-users and developers. Our `non-custodial` wallet `simplifies onboarding` with social account logins and offers a `user-centric unified layout` for a seamless experience for new web3 users. Additionally, our `embedded dApp sandbox` allows for endless possibilities for building on our platform and enables web2 apps to onboard to the world of web3. With this approach, Walless has the potential to revolutionize the way we think about crypto wallets.

Join us today and experience the future of web3!

## How does Walless do?

### Simplify Onboarding

Walless, designed to simplify the onboarding process for new users. With **passwordless** login and **social authentication**, there's no need to remember a seed phrase or worry about losing access to your wallet. It is **self-custodial**, giving you full control over your digital assets at all times. Plus, our **automated wallet creation** process makes it easy to get started with just a few clicks. And with advanced security features, you can be confident that your digital assets will **remain secure**.

### Unified UI across network

Walless puts users in control. Walless unifies the user interface across different networks, **eliminating** the confusion that comes with **network switching**. By designing our wallet with a **focus on dApps, rather than individual networks**, we make it focusing on product. And with our customizable layout store, you can decide exactly how your wallet looks and what information you see. At Walless, we believe that users should have the power to **design their own wallet** and manage their assets their way.

### Open Sandbox for anyone

Welcome to our open sandbox - the perfect place for anyone looking to integrate their dApps into Walless. Our **runtime for embedded dApps** allows you to run games, marketplaces, chats, swaps, payment solutions, and more natively within the wallet itself. And with our **permissionless, community-driven dApps and layout store**, you can explore a wide range of users. Plus, we're committed to being **open source and open data**, with **accessible API** to make integration and development as easy as possible.

Do you want to explore Walless? Read Testing instruction [here](https://www.notion.so/Testing-instructions-293ee70cd6fb4308a8fbd356d6aeacea?pvs=21)!

We would ❤️ to hear your feedback! Please send us a direct message on [Twitter](https://twitter.com/walless_wallet).


Introduction

# How we eliminate seed phrase

Upcoming


How we eliminate seed phrase

Web3Auth for social sign-in

Simplify Onboarding

Turn on dev mode

Deal with network

Unified UI across network

# Sanbox wallet - Having you own layout in Walless

Upcoming


Sandbox wallet

General

# Integration guide for Solana

## What is Wallet Standard?

The `Wallet Standard` is a set of interfaces and conventions designed to improve the user experience and developer experience of wallets and applications for any blockchain.

## What is Wallet Adapter?

There is a collection of libraries that can help bootstrap wallet connections within Solana called `Wallet Adapter`. Currently the package supports use within Svelte, Angular, Vue, and React. As `Wallet Adapter` already integrated Wallet Standard, any wallets with `Wallet Standard` built in will be detected automatically. `Wallet Adapter` can quick start your dApp integration with Walless.

## How to setup Wallet Adapter?

This is a quick setup guide with examples of how to add `Wallet Adapter` and connect wallet to a React-based Solana app:

1. Install `wallet-adapter` and `web3.js` libraries:

   ```yarn
       yarn add @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/web3.js
   ```

2. Setup Provider:

   ```tsx
   import React, { FC, useMemo } from 'react';
   import {
   	ConnectionProvider,
   	WalletProvider,
   } from '@solana/wallet-adapter-react';
   import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';
   import { clusterApiUrl } from '@solana/web3.js';

   export const App: FC = () => {
   	// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
   	const network = WalletAdapterNetwork.Devnet;

   	// You can also provide a custom RPC endpoint.

   	const wallets = useMemo(
   		() => [
   			/**
   			 * Wallets that implement either of these standards will be available automatically.
   			 *
   			 *   - Solana Mobile Stack Mobile Wallet Adapter Protocol
   			 *     (https://github.com/solana-mobile/mobile-wallet-adapter)
   			 *   - Solana Wallet Standard
   			 *     (https://github.com/solana-labs/wallet-standard)
   			 *
   			 * If you wish to support a wallet that supports neither of those standards,
   			 * instantiate its legacy wallet adapter here. Common legacy adapters can be found
   			 * in the npm package `@solana/wallet-adapter-wallets`.
   			 */
   		],
   		// eslint-disable-next-line react-hooks/exhaustive-deps
   		[network],
   	);

   	return (
   		<ConnectionProvider endpoint={endpoint}>
   			<WalletProvider wallets={wallets} autoConnect>
   				{/* Your app's components go here, nested within the context providers. */}
   			</WalletProvider>
   		</ConnectionProvider>
   	);
   };
   ```

3. Firstly, it’s necessary to have a place for user to select what wallet they want to connect. This is code snip to get a list of installed and support wallets to select:

   ```tsx
   import type { FC } from 'react';
   import type { WalletName } from '@solana/wallet-adapter-base';
   import { useWallet } from '@solana/wallet-adapter-react';

   export const WalletsList: FC = () => {
       const { wallets, select } = useWallet();
       const handleSelectWallet = (walletName: WalletName) => select(walletName);

       return (
           <div style={{ display: 'flex', flexDirection: 'column' }}>
               {wallets.map((wallet) =>
                   <button key={wallet.adapter.name} onClick={() =>
                       handleSelectWallet(wallet.adapter.name)}
                   >
                       {wallet.adapter.name}
                   </button>
               )
           </div>
       );
   };
   ```

4. Add a `Connect` button:

   ```tsx
   import { useWallet } from '@solana/wallet-adapter-react';
   import type { FC, MouseEventHandler } from 'react';
   import { useMemo } from 'react';

   export const RequestAirdrop: FC = () => {
   	const { connect, connecting, connected, wallet } = useWallet();

   	const content = useMemo(() => {
   		if (connecting) return 'Connecting ...';
   		if (connected) return 'Connected';
   		if (wallet) return 'Connect';
   		return 'Connect Wallet';
   	}, [connecting, connected, wallet]);

   	const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {
   		event.preventDefault();
   		connect();
   	};

   	return (
   		<button
   			onClick={handleClick}
   			disabled={!wallet || connecting || connected}
   		>
   			{content}
   		</button>
   	);
   };
   ```


For Solana

For Sui

For Tezos

Integration guide

# Multichain

Mirror World Smart Platform was built to simplify the process of building Multi-Chain Web3 Web and Mobile applications for high-conversion or even for hobbyists that want to build simple applications. We offers easy-to-use APIs and cross-platform SDKs around 6 main solutions:

####1. Smart Authentication.

a. User-friendly authentication method implemented in 30 mins.
b. Simplified onboarding process with mainstream social account such as Google, Facebook, Twitter, Discord and Email.
c. Easy-to-use APIs that accelerated your development process. Check On/Off-Ramp Service

```tsx
import { type FC } from 'react';
import { StyleSheet } from 'react-native';
import { View } from '@walless/gui';
import Markdown from '@walless/markdown';
import { loadContent } from 'utils/content';
import { type DocsTree } from 'utils/types';

import SideNavigation from './SideNavigation';

interface Props {
	docsTree: DocsTree;
	docs: string;
	params: string[];
}

export const Content: FC<Props> = ({ docsTree, docs, params }) => {
	const node = docsTree.children?.find((node) => node.path === `/${docs}`);
	let path = `/${docs}`;
	for (const param of params) {
		path += `/${param}`;
	}

	return (
		<View horizontal style={styles.container}>
			<SideNavigation nodes={node?.children as DocsTree[]} params={params} />
			<Markdown
				style={{ maxWidth: 1000 }}
				content={loadContent(docsTree, path) || '##Coming soon'}
			/>
		</View>
	);
};

export default Content;

const styles = StyleSheet.create({
	container: {
		paddingTop: 40,
		gap: 30,
		justifyContent: 'center',
	},
});
```


Multichain

What is Wallet Standard

# Wallet Standard vs Wallet Adapter

Upcoming


Wallet Standard vs Wallet Adapter

# Wallet Standard on Solana, Sui

Upcoming


Wallet Standard on Solana, Sui

Beacon - TZip on Tezos

Simple integration with Walless

For Developers

# Walless features

Check list:

- Simplify Onboarding
- Unified UI across network
- Sandbox wallet
- Simplify integration with Walless
