idquia/docs/src/routes/+page.md

Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, mul

<script>
  import HomeLayout from '$lib/components/HomeLayout.svelte'
  import HeroSection from '$lib/components/HeroSection.svelte'
  import FeaturesSection from '$lib/components/FeaturesSection.svelte'
  import ThemingSection from '$lib/components/ThemingSection.svelte'
  import TestimonialSection from '$lib/components/TestimonialSection.svelte'
  import GettingStarted from '$lib/components/GettingStarted.svelte'
</script>

<HomeLayout>
<HeroSection slot="hero">
  <Tabs values={['npm', 'yarn']} slot="code">
  <TabPanel value="npm">

```sh copy
npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
```

  </TabPanel>
  <TabPanel value="yarn">

```sh copy
yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
```

  </TabPanel>
  </Tabs>
</HeroSection>

<FeaturesSection slot="features">
  <Tabs values={['npm', 'yarn']} slot="install">
  <TabPanel value="npm">

```sh copy
npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
```

  </TabPanel>
  <TabPanel value="yarn">

```sh copy
yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
```

  </TabPanel>
  </Tabs>
  <Tabs values={['npm', 'yarn']} slot="installTp">
  <TabPanel value="npm">

```sh copy
npm i @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
```

  </TabPanel>
  <TabPanel value="yarn">

```sh copy
yarn add @web3-onboard/core @web3-onboard/injected @web3-onboard/transaction-preview
```

  </TabPanel>
  </Tabs>
</FeaturesSection>

<ThemingSection slot="theming">

  <div slot="themingCode">

```css copy
:root {
  --w3o-background-color: #1a1d26;
  --w3o-foreground-color: #242835;
  --w3o-text-color: #eff1fc;
  --w3o-border-color: #33394b;
  --w3o-action-color: #929bed;
  --w3o-border-radius: 16px;
}
```

  </div>

</ThemingSection>

<TestimonialSection slot="testimonial"/>

<GettingStarted slot="gettingStarted">
<div slot="gettingStarted">

# Getting Started

## Installation

Install the core Onboard library and the injected wallets module to support browser extension and mobile wallets:

```bash copy
npm i @web3-onboard/core @web3-onboard/injected-wallets
```

## Quick Start

Then initialize in your app:

```js copy lineNumbers
import Onboard from '@web3-onboard/core'
import injectedModule from '@web3-onboard/injected-wallets'
import { ethers } from 'ethers'

const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'

const injected = injectedModule()

const onboard = Onboard({
  wallets: [injected],
  chains: [
    {
      id: '0x1',
      token: 'ETH',
      label: 'Ethereum Mainnet',
      rpcUrl: MAINNET_RPC_URL
    },
    {
      id: '0x2105',
      token: 'ETH',
      label: 'Base',
      rpcUrl: 'https://mainnet.base.org'
    }
  ]
})

const wallets = await onboard.connectWallet()

console.log(wallets)

if (wallets[0]) {
  // create an ethers provider with the last connected wallet provider
  const ethersProvider = new ethers.providers.Web3Provider(wallets[0].provider, 'any')
  // if using ethers v6 this is:
  // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')

  const signer = ethersProvider.getSigner()

  // send a transaction with the ethers provider
  const txn = await signer.sendTransaction({
    to: '0x',
    value: 100000000000000
  })

  const receipt = await txn.wait()
  console.log(receipt)
}
```

</div>
</GettingStarted>

</HomeLayout>