Vitreus-wallet-fe NPM | npm.io

1.1.1-beta • Published 16 days ago

Install

Weekly downloads

-

License

Apache-2.0

Repository

Last release

16 days ago

Vitreus Wallet Connect : React library for wallet connection

Vitreus-wallet-fe v1.0

JS + React library that gives the possibility to connect crypto wallets to Vitreus Testnet with text/styles customization through QR code generated by remote secured servers. Version 1.0 provides the ability to connect your web application with other web/mobile resources via WebSocket connection. For this connection, the socket-io library is used, which is the most popular JavaScript WebSocket library.

Important

You need to use React v16+ to implement this package

Installation and Usage

ES6

npm install vitreus-wallet-fe

or

yarn add vitreus-wallet-fe

import { Chains, ConnectWalletBtn, VitreusWalletConnectProvider } from 'vitreus-wallet-fe';

<VitreusWalletConnectProvider address={""}>
    <ConnectWalletBtn
        symbolsAfterDot={2} // Balance rounding (Exapmle: 22.367 = 22.36)
        web3Settings={{
        chainInfo: [Chains.vitreus.chain], //  Initial Chain
        webSessionInfo: {
            activeChain: Chains.vitreus.chainName, //  Initial Chain name
            supportedChains: [Chains.vitreus.chain], //  List off chains that can be used
            autoSwitch: false,
            autoConnect: true,
            },
        dAppMeta: {
            name: "Your web app name",
            logoUrl: "Your web app icon",
            url: "Your web app url",
            description: "optional",
            },
        }}
        fullConnectText={"connect wallet long text test"} // screen width more then 650px
        shortConnectText={"short"} // screen width less then 650px
        qrCodeSettings={{ size: 200 }} //in px
        connectTexts={{     // QR code modal connection text
        title: "Connect Wallet",
        description: "Scan QR code to connect wallet",
        close: "close",
        }}
        iconUrl="./userHeader.svg" // icon near button
    />
/VitreusWalletConnectProvider>

Consumer part

To establish a WebSocket (ws) connection, you need to scan a QR code and retrieve session information from the Vitreus service (link to the service will be added soon). Afterward, you need to approve the connection to establish the WebSocket. The socket will be terminated within 1 hour (dev version).

react typescript

@polkadot/api @types/react-dom ethers import qrcode.react socket.io-client styled-components zustand

@everything-registry/sub-chunk-3063

16 days ago

16 days ago

16 days ago

16 days ago

29 days ago

30 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago