npmpackage.info

Gathering detailed insights and metrics for wallet-connect-react-native-dapp-dibeling

wallet-connect-react-native-dapp-dibeling - 1.8.0 | npmpackage.info

wallet-connect-react-native-dapp-dibeling

WalletConnect Monorepo

1.8.0

1,554

Apache-2.0

TypeScript

73.64 kB

6.7

Installations

npm install wallet-connect-react-native-dapp-dibeling

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, UMD

Node Version

16.17.0

NPM Version

8.15.0 Pull Requests

Open

24

Total

1,352

Closed

324

Merged

1,004

Issues

Open

26

Total

1,398

Closed

1,372

Releases

320

@walletconnect/signer-connection@2.21.4

Updated on Jun 25, 2025

@walletconnect/core@2.21.4

Updated on Jun 25, 2025

@walletconnect/types@2.21.4

Updated on Jun 25, 2025

@walletconnect/react-native-compat@2.21.4

Updated on Jun 25, 2025

@walletconnect/universal-provider@2.21.4

Updated on Jun 25, 2025

@walletconnect/ethereum-provider@2.21.4

Updated on Jun 25, 2025

View All 320 releases

Languages

TypeScript

JavaScript

Kotlin

Shell

Ruby

Objective-C++

Dockerfile

Objective-C

TypeScript (98.94%)

JavaScript (0.3%)

Kotlin (0.3%)

Shell (0.15%)

Ruby (0.14%)

Objective-C++ (0.12%)

Dockerfile (0.02%)

Objective-C (0.02%)

Developer

walletconnect

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

Apache-2.0 License

1,554 Stars

6,580 Commits

749 Forks

72 Watchers

158 Branches

151 Contributors

Updated on Jul 14, 2025

Maintainers

View All 151 Contributors

Package Meta Information

Latest Version

1.8.0

Package Id

wallet-connect-react-native-dapp-dibeling@1.8.0

Unpacked Size

73.64 kB

Size

38.02 kB

File Count

NPM Version

8.15.0

Node Version

16.17.0

Published on

Apr 30, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

`@walletconnect/react-native-dapp`

A drop-in library which helps easily connect your React Native dapps to Ethereum Wallets on Android, iOS and the Web.

Notice: This library assumes you have already enabled prerequisite support for Web3 inside your application. This can be done by creating a new project using npx create-react-native-dapp, or by introducing support for Web3 in an existing project by using npx rn-nodeify --install --hack.

For more details, check out the documentation.

Installing

To get started, install @walletconnect/react-native-dapp:

1yarn add @walletconnect/react-native-dapp

If you haven't already, you may also need to install react-native-svg alongside a persistent storage provider such as @react-native-async-storage/async-storage:

1yarn add react-native-svg @react-native-async-storage/async-storage

Architecture

This library is implemented using the React Context API, which is used to help make an instance of a connector accessible globally throughout your application. This permits you to use a uniform instance within even deeply nested components, and ensures your rendered application is always synchronized against the connector state.

`WalletConnectProvider`

At the root of your application, you can declare a WalletConnectProvider which controls access and persistence to a connector instance:

1import * as React from 'react';
2import WalletConnectProvider from '@walletconnect/react-native-dapp';
3import AsyncStorage from '@react-native-async-storage/async-storage';
4
5export default function App(): JSX.Element {
6  return (
7    <WalletConnectProvider
8      redirectUrl={Platform.OS === 'web' ? window.location.origin : 'yourappscheme://'}
9      storageOptions= {{
10        asyncStorage AsyncStorage,
11      }}>
12      <>{/* awesome app here */}</>
13    </WalletConnectProvider>
14  );
15}

Above, we pass the WalletConnectProvider two required parameters; redirectUrl and storageOptions:

The redirectUrl is used to help control navigation between external wallets and your application. On the web, you only need to specify a valid application route; whereas on mobile platforms, you must specify a deep link URI scheme.
The storageOptions prop allows you to specify the storage engine which must be used to persist session data.
- Although in our examples we use @react-native-async-storage/async-storage, this can be which engine you please, provided it conforms to the IAsyncStorage generic storage interface declaration.

Notably, the WalletConnectProvider optionally accepts WalletConnect configuration arguments as defined by the IWalletConnectOptions interface:

1import * as React from 'react';
2import WalletConnectProvider from '@walletconnect/react-native-dapp';
3import AsyncStorage from '@react-native-async-storage/async-storage';
4
5export default function App(): JSX.Element {
6  return (
7    <WalletConnectProvider
8      bridge="https://bridge.walletconnect.org"
9      clientMeta={{
10        description: 'Connect with WalletConnect',
11        url: 'https://walletconnect.org',
12        icons: ['https://walletconnect.org/walletconnect-logo.png'],
13        name: 'WalletConnect',
14      }}
15      redirectUrl={Platform.OS === 'web' ? window.location.origin : 'yourappscheme://'}
16      storageOptions= {{
17        asyncStorage AsyncStorage,
18      }}>
19      <>{/* awesome app here */}</>
20    </WalletConnectProvider>
21  );
22}

In the snippet above, aside from the required props, we can see the default configuration of the WalletConnectProvider.

Tip: Your custom options are merged deeply against this default configuration. Therefore it's possible to override individual nested properties without being required to define all of them.

`withWalletConnect`

Alternatively to manually using the WalletConnectProvider, you can use the withWalletConnect higher order component which will wrap your root application in a WalletConnectProvider for you:

1import * as React from 'react';
2import { withWalletConnect, useWalletConnect } from '@walletconnect/react-native-dapp';
3import AsyncStorage from '@react-native-async-storage/async-storage';
4
5function App(): JSX.Element {
6  const connector = useWalletConnect(); // valid
7  return <>{/* awesome app here */}</>;
8}
9
10export default withWalletConnect(App, {
11  clientMeta: {
12    description: 'Connect with WalletConnect',
13  },
14  redirectUrl: Platform.OS === 'web' ? window.location.origin : 'yourappscheme://',
15  storageOptions: {
16    asyncStorage: AsyncStorage,
17  },
18});

This is almost identical in functionality to the manual implementation of a WalletConnectProvider, with the key difference that we're able to make a call to useWalletConnect directly from the App component. By contrast, in the previous example only child components of the WalletConnectProvider may be able to invoke this hook.

`useWalletConnect`

The useWalletConnect hook provides access to a WalletConnect connector instance which is accessible on Android, iOS and the Web. This conforms to the original specification:

1import AsyncStorage from '@react-native-async-storage/async-storage';
2import { useWalletConnect, withWalletConnect } from '@walletconnect/react-native-dapp';
3import * as React from 'react';
4
5function App(): JSX.Element {
6  const connector = useWalletConnect();
7  if (!connector.connected) {
8    /**
9     *  Connect! 🎉
10     */
11    return <Button title="Connect" onPress={() => connector.connect())} />;
12  }
13  return <Button title="Kill Session" onPress={() => connector.killSession()} />;
14}
15
16export default withWalletConnect(App, {
17  redirectUrl: Platform.OS === 'web' ? window.location.origin : 'yourappscheme://',
18  storageOptions: {
19    asyncStorage AsyncStorage,
20  },
21});

Customization

@walletconnect/react-native-dapp also permits you to customize the presentation of the QrcodeModal. This is achieved by passing the Render Callback prop, renderQrcodeModal, to our calls to withWalletConnect or instances of WalletConnectProvider.

For example, you could choose to render a wallet selection using a BottomSheet opposed to a Modal:

1import AsyncStorage from '@react-native-async-storage/async-storage';
2import BottomSheet from 'react-native-reanimated-bottom-sheet';
3import { Image, Text, TouchableOpacity } from 'react-native';
4import {
5  useWalletConnect,
6  withWalletConnect,
7  RenderQrcodeModalProps,
8  WalletService,
9} from '@walletconnect/react-native-dapp';
10import * as React from 'react';
11
12function CustomBottomSheet({
13  walletServices,
14  visible,
15  connectToWalletService,
16  uri,
17}: RenderQrcodeModalProps): JSX.Element {
18  const renderContent = React.useCallback(() => {
19    return walletServices.map((walletService: WalletService, i: number) => (
20      <TouchableOpacity key={`i${i}`} onPress={() => connectToWalletService(walletService, uri)}>
21        <Image source={{ uri: walletService.logo }} />
22        <Text>{walletService.name}</Text>
23      </TouchableOpacity>
24    ));
25  }, [walletServices, uri]);
26  return <BottomSheet renderContent={renderContent} {...etc} />;
27};
28
29function App(): JSX.Element {
30  const connector = useWalletConnect();
31  return <>{/* awesome custom app here */}</>;
32}
33
34export default withWalletConnect(App, {
35  redirectUrl: Platform.OS === 'web' ? window.location.origin : 'yourappscheme://',
36  storageOptions: {
37    asyncStorage AsyncStorage,
38  },
39  renderQrcodeModal: (props: RenderQrcodeModalProps): JSX.Element => (
40    <CustomBottomSheet {...props} />
41  ),
42});

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Code-Review

Determines if the project requires code review before pull requests (aka merge requests) are merged.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dependency-Update-Tool

Determines if the project uses a dependency update tool.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

8

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

5

Pinned-Dependencies

Determines if the project has declared and pinned its dependencies.

Reason

dependency not pinned by hash detected -- score normalized to 5

Details

Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci_sign_client.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/ci_sign_client.yml/v2.0?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci_sign_client.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/ci_sign_client.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci_sign_client.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/ci_sign_client.yml/v2.0?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci_sign_client.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/ci_sign_client.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci_sign_client.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/ci_sign_client.yml/v2.0?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci_sign_client.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/ci_sign_client.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/intake.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/intake.yml/v2.0?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/intake.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/intake.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:81: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr_checks.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/WalletConnect/walletconnect-monorepo/pr_checks.yml/v2.0?enable=pin
Warn: containerImage not pinned by hash: packages/sign-client/Dockerfile:1: pin your Docker image by updating node:16.16-alpine to node:16.16-alpine@sha256:1c8769a8c9ed57817ef07162744a3722421333a438185c560aa42a9a1fc6ea23
Warn: containerImage not pinned by hash: packages/sign-client/Dockerfile:8
Info: no insecure (not pinned by hash) dependency downloads found in Dockerfiles
Info: no insecure (not pinned by hash) dependency downloads found in shell scripts

0

CII-Best-Practices

Determines if the project has a CII Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Signed-Releases

Determines if the project cryptographically signs release artifacts.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

Score

6.7

/10

Last Scanned on 2022-08-15

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

wallet-connect-react-native-dapp-dibeling

Installations

Developer Guide

Yes

CommonJS, UMD

16.17.0

8.15.0

Pull Requests

24

1,352

324

1,004

Issues

26

1,398

1,372

Releases

Languages

Developer

walletconnect

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

@walletconnect/react-native-dapp

Installing

Architecture

WalletConnectProvider

withWalletConnect

useWalletConnect

Customization

10

10

10

10

10

10

10

10

8

5

0

0

0

0

0

6.7

/10

`@walletconnect/react-native-dapp`

`WalletConnectProvider`

`withWalletConnect`

`useWalletConnect`