@perlin-protocol/neo-wallet-adapter
v0.0.1
Published
<p align="center"> <img width="200" src="./neo-wallet-adapter_icon.png"> </p>
Downloads
4
Readme
💾 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 reactor
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 reactor
<!DOCTYPE html>
<html>
...
<script src="https://www.unpkg.com/@perlin-protocol/[email protected]/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 startDevelopment 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.