Banana Wallet Web Adapter
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
})