Installation

import {
    AccessCredentials,
    initializePlutonicationWalletClientWithModal
} from '@plutonication/plutonication'
                

Use this command: npm i @plutonication/plutonication.

After the installation succeeds, do not forget to import it.

Example dApp

                    
import './App.css'
import type { SignerPayloadRaw } from "@polkadot/types/types"
import type { Injected } from "@polkadot/extension-inject/types";
import { ApiPromise, WsProvider } from '@polkadot/api';

function App() {
    let account: Injected;
    let publicKey: string;

    const initialize = async () => {

        // Specify your dApp info here
        const accessCredentials = new AccessCredentials(
            // Address of Plutonication server
            // Feel free to use this one
            // Learn more: https://plutonication.com/docs/javascript
            "wss://plutonication.com/",
        
            // dApp name
            "Plutonication test",
        
            // dApp icon
            "https://rostislavlitovkin.pythonanywhere.com/plutowalleticonwhite",
        );
    
        console.log("accessCredentials:", accessCredentials.ToUri());
    
        account = await initializePlutonicationDAppClientWithModal(
            accessCredentials,
            (receivedPubkey: string) => {
                publicKey = receivedPubkey;
                console.log("receivedPubkey", receivedPubkey);
            }
        );
    
        console.log("injected", account);
      };
    
      const signBalancesTransfer = async () => {
    
        // Check that the account is connected
        if (account == null) {
            console.warn("Account has not connected yet.")
            return;
        }
    
        // Check that the account can sign messages
        if (account.signer.signPayload == null){
            console.warn("Signer property is not present.")
            return;
        }
    
        // Connect to the chain
        const api = await ApiPromise.create({ provider: new WsProvider("wss://ws.test.azero.dev") });
    
        // The actuall balance transfer.
        // Part of the code taken from: https://polkadot.js.org/docs/extension/usage
        api.tx.balances
            .transfer('5C5555yEXUcmEJ5kkcCMvdZjUo7NGJiQJMS7vZXEeoMhj3VQ', 10**12)
            .signAndSend(publicKey, { signer: account.signer }, (status: any) => { });
      }

    return (
        <div>
            {/* You need to include the <plutonication-modal /> in order to display the QR code popup. */}
            <plutonication-modal />
            <button onClick={initialize}>Connect</button>
            <button onClick={signBalancesTransfer}>Sign balances_transfer</button>
        </div>
    );
};

export default App;
                 

To add Plutonication to your React app, open src/app.ts file and modify it with the following code.

Everything is described by the comments.

To learn more about the Plutonication typescript package, be sure to read through this guide.