@perlin-protocol/neo-wallet-adapter NPM

💾 Quick Setup (with React UI)

There is also ant-design package if you use this component framework.

Install

Install these dependencies:

yarn add @perlin-protocol/neo-wallet-adapter-wallets @perlin-protocol/neo-wallet-adapter-base @perlin-protocol/neo-wallet-adapter-react @perlin-protocol/neo-wallet-adapter-react-ui @cityofzion/neon-js@next react

npm install @perlin-protocol/neo-wallet-adapter-wallets @perlin-protocol/neo-wallet-adapter-base @perlin-protocol/neo-wallet-adapter-react @perlin-protocol/neo-wallet-adapter-react-ui @cityofzion/neon-js@next react

<!DOCTYPE html>
<html>
	...
	<script src="https://www.unpkg.com/@perlin-protocol/neo-wallet-adapter-bundle@0.3.0/lib/neo-wallet-adapter.web.js"></script>
	<script>
		// ...
		// Global variable
		NeoWalletAdapter.fun1('Five');
		// Property in the window object
		window.NeoWalletAdapter.fun1('Five');
		// ...
	</script>
</html>

Setup

import React, { useMemo } from 'react';
import { WalletProvider } from '@perlin-protocol/neo-wallet-adapter-react';
import { WalletAdapterNetwork } from '@perlin-protocol/neo-wallet-adapter-base';
import { getNeoLineWallet, getO3Wallet, getWalletConnect } from '@perlin-protocol/neo-wallet-adapter-wallets';
import { WalletModalProvider, WalletDisconnectButton, WalletMultiButton } from '@perlin-protocol/neo-wallet-adapter-react-ui';

// Default styles that can be overridden by your app
require('@perlin-protocol/neo-wallet-adapter-react-ui/styles.css');

export const Wallet = React.useMemo(() => {
	// @perlin-protocol/neo-wallet-adapter-wallets includes all the adapters but supports tree shaking --
	// Only the wallets you configure here will be compiled into your application
	const wallets = useMemo(
		() => [
			getNeoLineWallet(),
			getO3Wallet(),
			getWalletConnectWallet({
				options: {
					chains: ['neo3:testnet'], // ['neo3:mainnet', 'neo3:testnet', 'neo3:private']
					methods: ['invokeFunction'], // ['invokeFunction',any other method name present on the RpcServer eg. getversion]
					appMetadata: {
						name: 'Example',
						description: 'Example description',
						url: 'https://neonova.space',
						icons: ['https://raw.githubusercontent.com/rentfuse-labs/neonova/main/neonova-icon.png'],
					},
				},
				logger: 'debug',
				relayProvider: 'wss://relay.walletconnect.org',
			}),
		],
		[],
	);

	return (
		<WalletProvider wallets={wallets} autoConnect={true}>
			<WalletModalProvider>
				<WalletMultiButton />
				<WalletDisconnectButton />
			</WalletModalProvider>
		</WalletProvider>
	);
});

You can pass in these optional display props to WalletModalProvider:

prop	type	default	description
className	`string`	`""`	additional modal class name
logo	`ReactNode`	`undefined`	your logo url or image element
featuredWallets	`number`	`3`	initial number of wallets to display in the modal
container	`string`	`"body"`	CSS selector for the container element to append the modal to

For example, to show your logo:

<WalletModalProvider logo="YOUR_LOGO_URL">...</WalletModalProvider>

Usage

import { waitTx, WitnessScope, WalletNotConnectedError } from '@perlin-protocol/neo-wallet-adapter-base';
import { useWallet } from '@perlin-protocol/neo-wallet-adapter-react';
import { u, sc, wallet } from '@cityofzion/neon-js';
import React, { useCallback } from 'react';

export const NeoSendButton = React.memo(function NeoSendButton() {
	const { address, connected, invoke } = useWallet();

	const onClick = useCallback(async () => {
		if (!address || !connected) throw new WalletNotConnectedError();

		// Construct the request and invoke it
		const result = await invoke({
			scriptHash: 'ef4073a0f2b305a38ec4050e4d3d28bc40ea63f5',
			operation: 'transfer',
			args: [
				{
					type: 'Hash160',
					value: sc.ContractParam.hash160(address).toJson().value,
				},
				{
					type: 'Hash160',
					value: sc.ContractParam.hash160('NaUjKgf5vMuFt7Ffgfffcpc41uH3adx1jq').toJson().value,
				},
				{
					type: 'Integer',
					value: sc.ContractParam.integer(1).toJson().value,
				},
				{
					type: 'Any',
					value: null,
				},
			],
			signers: [
				{
					account: wallet.getScriptHashFromAddress(address),
					scope: WitnessScope.CalledByEntry,
				},
			],
		});

		// Optional: Wait for the transaction to be confirmed onchain
		if (result.data?.txId) {
			await waitTx('NETWORK_RPC_ADDRESS_HERE', result.data?.txId);
		}
	}, [address, connected, invoke]);

	return (
		<button onClick={onClick} disabled={!address || !connected}>
			{'Send 1 Neo!'}
		</button>
	);
});

🎁 Packages

This library is organized into small packages with few dependencies. To add it to your dApp, you only need the core packages and UI components for your chosen framework.

Core

These packages are what most projects can use to support wallets on Neo N3.

package	description	npm
wallets	All wallets with icons	`@perlin-protocol/neo-wallet-adapter-wallets`
base	Adapter interfaces, error types, and common utilities	`@perlin-protocol/neo-wallet-adapter-base`
react	Contexts and hooks for React dApps	`@perlin-protocol/neo-wallet-adapter-react`

UI Components

These packages provide components for common UI frameworks.

package	description	npm
ant-design	Components for Ant Design	`@perlin-protocol/neo-wallet-adapter-ant-design`
react-ui	Components for React (no UI framework, just CSS)	`@perlin-protocol/neo-wallet-adapter-react-ui`

Starter Projects

These packages provide projects that you can use to start building a dApp with built-in wallet support.

package	description	npm
nextjs-starter	Next.js project using React	`@perlin-protocol/neo-wallet-adapter-nextjs-starter`
ant-design-starter	Next.js project using React	`@perlin-protocol/neo-wallet-adapter-ant-design-starter`

Wallets

These packages provide adapters for each wallet. The core wallets package already includes them, so you don't need to add these as dependencies.

package	description	npm
neoline	Adapter for NeoLine	`@perlin-protocol/neo-wallet-adapter-neoline`
o3	Adapter for O3	`@perlin-protocol/neo-wallet-adapter-o3`
walletconnect	Adapter for WalletConnect	`@perlin-protocol/neo-wallet-adapter-walletconnect`
onegate	Adapter for OneGate	`@perlin-protocol/neo-wallet-adapter-onegate`

⚙️ Build from Source

Clone the project:

git clone https://github.com/rentfuse-labs/neo-wallet-adapter.git

Install dependencies:

cd wallet-adapter
yarn install

Build all packages:

yarn build

Run locally:

cd packages/starter/react-ui-starter
yarn start

Development notes

Dev dependencies are equal to peer dependencies to be used while developing.

Bundles folder

Bundle folder inside packages one is used to create a bundled version of the library.

It must have a package.json with private:true property to avoid having it published by lerna.

@everything-registry/sub-chunk-712

0.0.1

2 years ago

0.0.0

2 years ago