Banana Wallet Web Adapter

https://bananawallet.io/

npm i @banana-wallet/adapter

yarn add @banana-wallet/adapter

Import

import { connect } from '@banana-wallet/adapter';

Connect

const bananaWallet = await connect();

Connect using React Hooks

import { useConnection } from '@banana-wallet/adapter/src/hooks';

const App = () => {
  const bananaWallet = useConnection();
  // ...
}

Check if your visitor has Banana Wallet

import { checkIsAvailable } from '@banana-wallet/adapter';

const checkIsBananaWalletAvailable = async () => {
  const isBananaWalletAvailable = await checkIsAvailable();
  console.log({ isBananaWalletAvailable });
}
checkIsBananaWalletAvailable();

Custom cluster / environment

const bananaWallet = await connect({
    cluster: 'devnet' // 'mainnet-beta' | 'testnet' | 'devnet'
});

Simple React example

import React, { useCallback } from 'react';
import { useConnection } from '@banana-wallet/adapter/src/hooks';

const App = () => {
  const bananaWallet = useConnection();
  const handleClick = useCallback(async () => {
    const props = {
      action: {
        type: 'click',
        value: '$0.1'
      },
      toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
    };
    await bananaWallet.charge(props);
  }, [bananaWallet]);

  return (
    <input
      type='button'
      onClick={handleClick}
      value='Click [$0.1]'
    />
  )
}

Simple vanilla example

import { connect } from '@banana-wallet/adapter';

const initBanana = async () => {
  const bananaWallet = await connect();
  const props = {
    action: {
      type: 'click',
      value: '$0.1'
    },
    toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
  };
  const isApproved = await bananaWallet.approve(props);
  if (!isApproved) {
    console.log('charge request has been denied, we cannot continue...')
    return;
  }
  // add some custom click action
  document.addEventListener('click', async () => {
    await bananaWallet.charge(props);
  });
}
initBanana();

Read Public Key

const { publicKey } = bananaWallet.publicData;

Charge user per click

const props = {
  action: {
    type: 'click',
    value: '$1'
  },
  toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
};

bananaWallet.charge(props);

Charge user per minute

const props = {
  action: {
    type: 'interval',
    value: '$0.1',
    interval: 60*1000 // [ms], so it's 1 minute
    // supported values: 1000 to 59000, 60*1000 (1 minute), 60*60*1000 (1 hour), 24*60*60*1000 (1 day)
  },
  toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
};

bananaWallet.charge(props);

Charge user per page scroll

const props = {
  action: {
    type: 'payPerScroll',
    value: '$1',
    checkpoints: 4 // = per 25% scroll
  },
  toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
};

bananaWallet.charge(props);

Pre-approved actions

You can ask the user for a permission before the action really happens, eg. in sign-up process

const props = {
  action: {
    type: 'click',
    value: '$1'
  },
  toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
};

bananaWallet.approve(props);
// ... now you can use banana.charge(props) anytime

Detect if charge was approved

const chargeUser = async () => {
  const props = {
    action: {
      type: 'click',
      value: '$1'
    },
    toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
  };

  const isApproved = await bananaWallet.approve(props);
  if (isApproved) {
    bananaWallet.charge(props);
  }
}

chargeUser();

Check if an action was already approved some time ago

const props = {
  action: {
    type: 'click',
    value: '$1'
  },
  toPubkey: 'A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK',
};

const isApproved = await bananaWallet.isApproved(props);

Show Banana Wallet - dialog window

bananaWallet.showDialog();

Hide dialog window

bananaWallet.hideDialog();

Clear approvals

Useful method for development environment

bananaWallet.request({
  method: 'wallet_clearApprovals',
  params: {}
});

Listen for transaction signatures

document.addEventListener('walletChargeRequestSigned', (data) => {
  const { props, signature } = data?.detail;
  console.log('received', { signature }, 'for a request with props', { props })
});

Send a transaction

bananaWallet.sendTransaction({
  transaction
});

sendTransaction example

const transaction = new Transaction().add(
      SystemProgram.transfer({
        fromPubkey: bananaWallet.publicData.publicKey,
        toPubkey: new PublicKey('A7vY2TUrQ6Jv4iTgn2fqWit8pcWWiEaRVnrrwRrA9uBK'),
        lamports: 1001,
      }),
);

const { signature } = await bananaWallet.sendTransaction({
  transaction
});
console.log({ signature })

Sign a message

Use this method to verify the ownership of the publicKey

// required
npm i tweetnacl

import nacl from 'tweetnacl';

const messageString = `Verify my public key`;
const message = new TextEncoder().encode(messageString);
const signature = await bananaWallet.signMessage({ message });
const publicKeyEncoded = bananaWallet.publicData.publicKey.toBytes();
const isSignatureValid = nacl.sign.detached.verify(message, signature, publicKeyEncoded)
console.log({
  isSignatureValid
})