Glip Wallet JS Docs

Guide for installation and usage of Glip's Web3 Wallet.
Glip Wallet through its SDK provides a signer using which a user's transaction can be signed.
It also contains a iframe based UI element which can be embedded into any webpage.
The UI contains features to check balance, change currency, transfer and swap tokens.\

Demo app link:

Demo App

Demo app code link:

Demo App Code

Installation

NPM

npm i glip-wallet-sdk

Yarn

yarn add glip-wallet-sdk

Add to HTML

You can only directly add to HTML page.

This will add the variable glipWalletSDK to window. You can access it using window.glipWalletSDK

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.js'></script>

Usage

Initialization

First we need to ensure a div with id glip-wallet in the html body.

<div id="glip-wallet"></div>

It is best to keep the initilization code in a seprate file.

```js
import { getGlipWallet } from 'glip-wallet-sdk/wallet';
let initializedGlipWallet = false;

const getInitializedGlipWallet = async () => {
    return await getGlipWallet({
        chainId: 80001,
        authNetwork: 'cyan',
        clientIdentifier: '63020e1ef81e3742a278846a'
    });
    return glipWalletSDK;
};

export default getInitializedGlipWallet;

Now you can import glip wallet anywhere you need in your app and no need to re re-initialize it.

  let glipWallet = await getInitializedGlipWallet()

Login/Logout

To login or logout a user, you can use croak's prebuilt UI or build your own and call SDK methods. To use prebuilt UI

showConnectModal

glipWallet.showConnectModal(['google'])

This will show a modal with a login with google button. If you are building your own UI you can directly call the login methods

login

  glipWallet.login('google')

isConnected

let isConnected = await glipWallet.isConnected();
console.log(isConnected); // will be a boolean.

logout

await glipWallet.logout()

User Details

Methods to fetch user details

getUserInfo

Get details about the logged in user.

let userInfo = await glipWallet.getUserInfo();
console.log(userInfo.email);
console.log(userInfo.name);
console.log(userInfo.profileImage);
console.log(userInfo.publicAddress);

getUserBalance

Get details about the logged in user.

let balance = await glipWallet.getBalance();
console.log(balance);

Wallet/Signer Operations

signTransaction

Sign a transaction using the user's private key. This will redirect the user to glipgg in mobile.

let signer = await glipWallet.getSigner();
let displayMessage = "This transaction transfers 0 value";
let signedTx = signer.signTransaction({
    to: '0x0000000000000000000000000000000000000000',
    value: '0x00',
    data: '0x00',
    chainId: 137,
    nonce: 0,
    gasPrice: 0,
    gasLimit: 0,
    from: '0x0000000000000000000000000000000000000000'
}, displayMessage);
console.log(signedTx);

signMessage

Sign a message using the user's private key. This will redirect the user to glipgg in mobile.

let signer = await glipWallet.getSigner();
let displayMessage = "This transaction transfers 0 value";
let signedMessage = await signer.signMessage("wow bro \n wow");
console.log(signedMessage);

sendTransaction

Signs and sends a transaction using the user's private key. This will redirect the user to glipgg in mobile.

let signer = await glipWallet.getSigner();
let displayMessage = "This transaction transfers 0 value";
let signedTx = signer.sendTransaction({
    to: '0x0000000000000000000000000000000000000000',
    value: '0x00',
    data: '0x00',
    chainId: 137,
    nonce: 0,
    gasPrice: 0,
    gasLimit: 0,
    from: '0x0000000000000000000000000000000000000000'
}, displayMessage);
console.log(signedTx);

Wallet UI

Show the wallet UI

glipWallet.showWallet();

Hide the wallet UI

glipWallet.hideWallet();

Example Usage using ethers library to transfer erc20 token

Transfer ERC20 token with ethers and glipWallet.

    
    import { ethers } from "ethers";
    import { abiERC20 } from '@metamask/metamask-eth-abis';
     
    const transferNFT = async () => {
        let toAddress = "0x6203A4a2c3c58bEA165b72012303Dbd8FF938B1b";
        let glipWallet = await getGlipWallet();
        let myAddress = (await glipWallet.getUserInfo()).publicAddress;
        console.log('myAddress', myAddress);
        const quantity = 1;
        const contractAddress = "0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d";
        const erc20_rw = new ethers.Contract(address, abiERC20);
        const tx = await erc20_rw.populateTransaction['transfer'](
            myAddress,
            toAddress,
            quantity
        );
        let signer = await glipWallet.getSigner();
        let signedTransaction;
        try{
            signedTransaction = await signer.signTransaction(tx);
        }
        catch(e){
            console.log('error', e);
        }
        return signedTransaction;
    }