# @web3-onboard/gnosis

> Safe module for connecting to Web3-Onboard. 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

Latest version **2.3.2** (published 2024-08-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @web3-onboard/gnosis
pnpm add @web3-onboard/gnosis
yarn add @web3-onboard/gnosis
bun add @web3-onboard/gnosis
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.3.2 |
| Published | 2024-08-14 |
| First published | 2022-02-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 922 |
| Maintainers | aaronbarnard1, cmeisl |
| Keywords | Ethereum, Web3, EVM, dapp, Multichain, Wallet, Transaction, Provider, Hardware Wallet, Notifications, React, Svelte, Vue, Next, Nuxt, MetaMask, Coinbase, WalletConnect, Ledger, Trezor, Connect Wallet, Ethereum Hooks, Blocknative, Mempool, pending, confirmed, Injected Wallet |

## Links

- npm: https://www.npmjs.com/package/@web3-onboard/gnosis
- Repository: https://github.com/blocknative/web3-onboard
- Homepage: https://onboard.blocknative.com
- Issues: https://github.com/blocknative/web3-onboard/issues
- npm.io page: https://npm.io/package/@web3-onboard/gnosis

## Dependencies (1)

- [@web3-onboard/common](https://npm.io/package/@web3-onboard/common.md) ^2.4.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.3.2 (latest) — 2024-08-14
- 2.3.2-alpha.1 (next) — 2024-07-15
- 2.3.1 — 2024-06-05
- 2.3.0 — 2024-05-31
- 2.3.0-alpha.2 — 2024-05-28
- 2.3.0-wagmi.2 — 2024-05-23
- 2.3.0-wagmi.1 — 2024-05-17
- 2.3.0-viem.1 — 2024-05-13
- 2.2.2 — 2024-04-15
- 2.2.2-alpha.1 — 2024-04-12
- 2.2.1 — 2024-01-11
- 2.2.1-alpha.1 — 2024-01-10
- 2.2.0 — 2023-08-15
- 2.2.0-alpha.1 — 2023-08-13
- 2.1.10 — 2023-05-19
- … 44 more at https://npm.io/package/@web3-onboard/gnosis/versions

## README

# @web3-onboard/gnosis

## Wallet module for connecting Safe to web3-onboard

### Install

`npm i @web3-onboard/gnosis @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`

### Options

```typescript
type GnosisOptions = {
  whitelistedDomains: RegExp[]
}
```

### Usage

```typescript
import Onboard from '@web3-onboard/core'
import safeModule from '@web3-onboard/gnosis'

const safe = safeModule()

const onboard = Onboard({
  // ... other Onboard options
  wallets: [
    safe
    //... other wallets
  ]
})

const connectedWallets = await onboard.connectWallet()
console.log(connectedWallets)
```

## Customizing Safe Transaction Gas

If you are looking to set the `gasLimit` of a transaction within Safe, the gas properties within the transaction WILL BE IGNORED.
Instead you will need to use the `safeTxGas` prop AND the web3-onboard Safe instance that is exposed through the provider to send along the transaction.
The Safe sdk instance exposed by the web3-onboard must be used to set the `safeTxGas` prop and send the transaction.
Check [Safe docs](https://github.com/safe-global/safe-contracts/blob/a6504a9afdeac186a8cdb29ad68b189523c80eda/docs/safe_tx_gas.md) for full detail as it can be a bit confusing.
An example of accessing the Safe SDK instance and sending a transaction can be found below.

```typescript
const tx = {
  to: toAddress,
  value: 1000000000000000,
  data: '0x',
}
const params = {
  safeTxGas: 5000000,
};

// wallet is the provider exposed by web3-onboard after the Safe wallet is connected
let trans = await wallet.instance.txs.send({txs:[tx], params})
```

Note: With the `safeTxGas` you will see additional value on the `gasLimit` displayed in the Safe. Check [Safe docs](https://github.com/safe-global/safe-contracts/blob/a6504a9afdeac186a8cdb29ad68b189523c80eda/docs/safe_tx_gas.md) for full details on that computation.


## Local testing within the Safe app

Ensure the application is building and working properly within the browser and then add or enable your cors blocker extension or script of choice. An example is the `Allow CORS` browser extension.

## Vue Build Configuration

If using Vue be sure to include the necessary peerDeps in the `vite.config.ts` specifically within the `optimizeDeps.include` list and install the necessary peer deps `npm i @safe-global/safe-apps-provider @safe-global/safe-apps-sdk`.

```typescript
export default defineConfig({
  plugins: [vue(), vueJsx(), VueDevTools()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  optimizeDeps: {
    include: ['@safe-global/safe-apps-sdk', '@safe-global/safe-apps-provider']
  }
})
```

---
_Source: https://npm.io/package/@web3-onboard/gnosis · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._