Description

Ancient8 Connect UMD library.

This is the adapter APIs version. The implementation below will be only valid when in browser environment.

Documentation

For detail of browser APIs please refer the docs.

For detail of server APIs please refer the docs.

For detail of adapter APIs please refer the docs.

Installation

$ yarn add @ancient8/connect

Examples

Please see the demo here

Usages

2 main usages for RPCWalletAdapter.

1. Making RPC with Solana wallets

import {
    clusterApiUrl,
    Connection,
    PublicKey,
    SystemProgram,
    Transaction,
    LAMPORTS_PER_SOL
} from "@solana/web3.js";

export * from '@ancient8/connect';
import RPCWalletAdapter, {Types as RPCWalletTypes} from '@ancient8/connect/adapter';

let a8Connect: A8Connect;
let session: Types.ConnectSessionDto.A8ConnectSession;

/**
 * @description Transfer token in SOL network
 * @param to Wallet address which will recive token
 * @param amount Amount token want to transfer
 */
export const transferSol = async (
    to: string,
    amount: number,
): Promise<void> => {
    /**
     * Extract current session from SDK
     */
    a8Connect = getA8ConnectInstance();
    session = a8Connect.currentSession;

    if (!session?.connectedWallet) {
        throw new Error("Not connected");
    }

    /**
     * Get wallet adapter
     */
    const provider = await RPCWalletAdapter.getSolanaWalletAdapter(
        session.connectedWallet.walletName
    );

    /**
     * Construct instructions
     */
    const tx = new Transaction().add(
        SystemProgram.transfer({
            fromPubkey: new PublicKey(session?.connectedWallet?.walletAddress),
            toPubkey: new PublicKey(to),
            lamports: amount * LAMPORTS_PER_SOL,
        })
    );

    /**
     * Fetch tx metadata
     */
    const connection = new Connection(clusterApiUrl("devnet"));
    tx.recentBlockhash = (await connection.getLatestBlockhash()).blockhash;
    tx.feePayer = new PublicKey(session?.connectedWallet?.walletAddress);

    /**
     * Sign and send transaction to RPC server.
     */
    const rawTx = await provider.signTransaction(tx);
    const txid = await connection.sendRawTransaction(rawTx.serialize());
}

2. Making RPC requests with EVM wallets

export * from '@ancient8/connect';
import RPCWalletAdapter, {Types as RPCWalletTypes} from '@ancient8/connect/adapter';

let a8Connect: A8Connect;
let session: Types.ConnectSessionDto.A8ConnectSession;

/**
 * @description Transfer token in ETH network
 * @param to Wallet address which will recive token
 * @param amount Amount token want to transfer
 */
export const transferEther = async (
    to: string,
    amount: number,
): Promise<void> => {
    /**
     * Extract session from SDK
     */
    a8Connect = getA8ConnectInstance();
    session = a8Connect.currentSession;

    /**
     * Get the wallet adapter
     */
    const rpcAdapter = await RPCWalletAdapter.getEVMWalletAdapter(
        session.connectedWallet.walletName,
        // have to inject 
        session.connectedWallet.provider.injectedProvider
    );

    /**
     * Make RPC requests
     */
    rpcAdapter.eth.sendTransaction({
        from: session.connectedWallet.walletAddress,
        value: '0x9184e72a',
        to: to,
    })
        .then((tx: any) => console.log({tx}))
        .catch((err: any) => console.log({err}));
}

Common issues

1. Handle .mjs dependencies transpile issues when using nuxtjs

File nuxt.config.js

// other configs ...
build: {
    extend(config, ctx)
    {
        if (ctx.isClient) {
            // transpile .mjs too
            config.module.rules.push({
                include: /node_modules/,
                test: /\.mjs$/,
                type: 'javascript/auto'
            })
        }
    }
}

2. Handle nodejs polyfill issues when using webpack 5

Since webpack 5 no longer bundled nodejs polyfills, we have to install nodejs polyfills manually.

Install webpack 5 plugin

yarn add node-polyfill-webpack-plugin

For webpack 5 projects, file webpack.config.js

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
    // Other rules...
    plugins: [
        new NodePolyfillPlugin()
    ]
};

For vue-cli 5 projects, file vue.config.js

const {defineConfig} = require('@vue/cli-service')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        plugins: [new NodePolyfillPlugin()],
        // Other configs...
    },
})

3. Handle exports is not defined error.

Note: since this is the unexpected behavior with webpack 5 and node-polyfill-webpack-plugin, we have to manually adjust the webpack resolves.

Install dev dependencies first

yarn add --dev json-loader crypto-browserify http-browserify https-browserify stream-browserify @erquhart/browserify-fs path-browserify buffer url 

For webpack 5 projects, file webpack.config.js

module.exports = {
    // Other rules...
    target: 'web',
    module: {
        rules: [
            {
                test: /\.json$/,
                loader: "json-loader",
            },
            {
                test: /\.m?js/,
                type: "javascript/auto",
            },
            {
                test: /\.m?js/,
                resolve: {
                    fullySpecified: false,
                },
            },
        ],
    },
    resolve: {
        fallback: {
            crypto: require.resolve("crypto-browserify"),
            http: require.resolve("http-browserify"),
            https: require.resolve("https-browserify"),
            stream: require.resolve("stream-browserify"),
            fs: require.resolve('@erquhart/browserify-fs'),
            path: require.resolve('path-browserify'),
            buffer: require.resolve("buffer"),
            url: require.resolve("url"),
        },
    },
};

For vue-cli 5 projects, file vue.config.js

const {defineConfig} = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        // Other configs...
        target: 'web',
        module: {
            rules: [
                {
                    test: /\.json$/,
                    loader: "json-loader",
                },
                {
                    test: /\.m?js/,
                    type: "javascript/auto",
                },
                {
                    test: /\.m?js/,
                    resolve: {
                        fullySpecified: false,
                    },
                },
            ],
        },
        resolve: {
            fallback: {
                crypto: require.resolve("crypto-browserify"),
                http: require.resolve("http-browserify"),
                https: require.resolve("https-browserify"),
                stream: require.resolve("stream-browserify"),
                fs: require.resolve('@erquhart/browserify-fs'),
                path: require.resolve('path-browserify'),
                buffer: require.resolve("buffer"),
                url: require.resolve("url"),
            },
        },
    },
})

Notes

This library is still in beta development. Significant changes may happen anytime.

Contact

If you have any inquiries please send emails to [email protected].

License

Copyright (c) 2022 Ancient8.

Licensed under the GPL-3.0