GithubHelp home page GithubHelp logo

paritytech / polkadot-onboard Goto Github PK

View Code? Open in Web Editor NEW
27.0 7.0 12.0 3.36 MB

A wallet integration SDK to facilitate adding different type of wallets (extension, WC, Ledger) to Dapps.

Home Page: https://paritytech.github.io/polkadot-onboard

License: Apache License 2.0

TypeScript 100.00%

polkadot-onboard's Introduction

@polkadot-onboard

@polkadot-onboard provides a set of packages for developers to easily onboard and add different type of polkadot wallets to their dapps. It provides a universal interface for working with different type of wallets (e.g. Injected-wallets, Wallet-Connect, hardware-wallets).

install the packages:

// npm
npm install \
 @polkadot-onboard/core\
 @polkadot-onboard/injected-wallets\
 @polkadot-onboard/wallet-connect\
 @polkadot-onboard/react

// yarn
yarn add \
 @polkadot-onboard/core\
 @polkadot-onboard/injected-wallets\
 @polkadot-onboard/wallet-connect\
 @polkadot-onboard/react

example for using it in a react-app:

import { WalletAggregator } from '@polkadot-onboard/core';
import { InjectedWalletProvider } from '@polkadot-onboard/injected-wallets';
import { WalletConnectProvider } from '@polkadot-onboard/wallet-connect';
import { PolkadotWalletsContextProvider, useWallets } from '@polkadot-onboard/react';

const APP_NAME = 'Polkadot wallets example';

const ConnectContainer = () => {
    let walletConnectParams = {
        projectId: '4fae...',
        relayUrl: 'wss://relay.walletconnect.com',
        metadata: {
        name: 'Polkadot Demo',
        description: 'Polkadot Demo',
        url: '#',
        icons: ['https://walletconnect.com/walletconnect-logo.png'],
        },
    };
    let walletAggregator = new WalletAggregator([
            new InjectedWalletProvider({}, APP_NAME),
            new WalletConnectProvider(walletConnectParams, APP_NAME)
    ]);
    return (
        <PolkadotWalletsContextProvider walletAggregator={walletAggregator}>
        /*
        all wallets are available inside this context to all children.

        const { wallets } = useWallets();

        each wallet provides a universal interface including a signer that can be used to sign messages and transactions:

        interface BaseWallet {
            ...
            signer: Signer | undefined; // signer is available after connect() is called.
            connect: () => Promise<void>;
            disconnect: () => Promise<void>;
            isConnected: () => boolean;
            getAccounts: () => Promise<Account[]>;
            ...
        }
        */
        </PolkadotWalletsContextProvider>
    );

check the full examples:

For wallet-connect you need a mobile apps that supports wallet-connect.
wallet-connect demo video

polkadot-onboard's People

Contributors

0xkheops avatar arrudagates avatar dependabot[bot] avatar hamidra avatar piggydoughnut avatar vadimsaveljev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

polkadot-onboard's Issues

Modules not found error

It seems like installing dependencies are not working on both react-headless and react-next examples. I can't find node_modules folder after running yarn install or npm run install.

OS: MAC (M1)
Node: v18.16.0

image

image

Hardcoded Polkadot chain ID in `signRaw` of `WalletConnectSigner`

Hi

It's not possible to sign a message with signRaw using WalletConnectSigner on other chain than Polkadot, its chainId is hardcoded:

signRaw = async (raw: SignerPayloadRaw): Promise<SignerResult> => {
const request = {
topic: this.session.topic,
chainId: POLKADOT_CHAIN_ID,
request: {
id: 1,
jsonrpc: '2.0',
method: 'polkadot_signMessage',
params: { address: raw.address, message: raw.data },
},
};

Fix react-headless

After exporting the libs as module (type:module) the react-headless example fails since can't resolve the js as es modules.

ERROR in ../../packages/core/dist/index.js 1:0-39

Module not found: Error: Can't resolve './lib/walletAggregator' in '/Users/hra/Workspace/Parity/Git/wallet-sdk/packages/core/dist'
Did you mean 'walletAggregator.js'?
BREAKING CHANGE: The request './lib/walletAggregator' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

walletconnect package depends on React

The latest update introduces @walletconnect/modal as a dependency for @polkadot-onboard/wallet-connect, which is not framework agnostic and instead is a React implementation of the modal. My suggestion is that the wallet-connect package should remain framework agnostic and also modal agnostic by leaving the modal implementation up to the library user.

SyntaxError: Unexpected token 'export'

I'm getting this when I tried to yarn dev on thereact-next example

`Server Error
SyntaxError: Unexpected token 'export'

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack

/Users/ericsu/Documents/genesis/polkadot-wallet-onboard/examples/react-next/node_modules/ (polkadot-onboard/react/dist/index.js (1)
Object.compileFunction
node:vm (352:18)
wrapSafe
node:internal/modules/cjs/loader (1033:15)
Module._compile
node:internal/modules/cjs/loader (1069:27)
Module._extensions..js
node:internal/modules/cjs/loader (1159:10)
Module.load
node:internal/modules/cjs/loader (981:32)
Module._load
node:internal/modules/cjs/loader (827:12)
Module.require
node:internal/modules/cjs/loader (1005:19)
require
node:internal/modules/cjs/helpers (102:18)
@polkadot-onboard/react
file:///Users/ericsu/Documents/genesis/polkadot-wallet-onboard/examples/react-next/.next/server/pages/index.js (218:18)
webpack_require
file:///Users/ericsu/Documents/genesis/polkadot-wallet-onboard/examples/react-next/.next/server/webpack-runtime.js (33:42)`

How to disconnect Wallet

Hi,
I want to disconnect Polkadot.js wallet, so when I press connect wallet, it requires wallet connect first and get wallet address.

polkadot-onboard move to type: module

Moving to ESM type lib should let other projects with "moduleResolution": "nodenext" use it properly
also it should prevent a workaround in webpack

        resolve: {
          fullySpecified: false,
        },

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.