Create a connection to Nekoton-based wallets and dApps
To apply this component, install it with npm using following command:
npm install @broxus/tvm-connector using yarn:
yarn add @broxus/tvm-connectThe Wallet Service is a key part of this module. It accepts a number of settings and
parameters when created and has a convenient interface for working with a connected wallet.
It works with wallets whose providers and standalone RPC connections are
based on everscale-inpage-provider and everscale-standalone-client.
import { EverWallet, TvmWalletService } from '@broxus/tvm-connect'
const walletService = new TvmWalletService({
defaultNetworkId: 42,
networks: [
{
chainId: '42',
currency: {
decimals: 9,
icon: '/assets/icons/EVER.svg',
name: 'Native currency',
symbol: 'EVER',
wrappedCurrencyAddress: new AddressLiteral( '0:a49cd4e158a9a15555e624759e2e4e766d22600b7800d891e46f9291f044a93d'), // WEVER
},
explorer: {
accountsSubPath: 'accounts',
baseUrl: 'https://everscan.io',
title: 'EVER Scan',
transactionsSubPath: 'transactions',
},
id: 'tvm-42',
name: 'Everscale',
rpcUrl: 'https://jrpc.everwallet.net',
shortName: 'Everscale',
type: 'tvm',
},
],
providerId: 'EverWallet', // TvmWalletProviderConfig['id']
providers: [
{
connector: new EverWallet(),
id: 'EverWallet',
info: {
description: 'Premier wallet for the Everscale',
icon: '/assets/icons/EverWallet.svg',
links: {
android: 'https://play.google.com/store/apps/details?id=com.broxus.crystal.app',
chromeExtension: 'https://chrome.google.com/webstore/detail/ever-wallet/cgeeodpfagjceefieflmdfphplkenlfk',
firefoxExtension: 'https://addons.mozilla.org/en-GB/firefox/addon/ever-wallet/',
homepage: 'https://everwallet.net/',
ios: 'https://apps.apple.com/us/app/ever-wallet-everscale/id1581310780',
},
name: 'Ever Wallet',
},
},
],
})
await walletService.connect()This is library/framework agnostic component. So, you can use it anywhere.
First at all, you should wrap entire your app with TvmWalletServiceProvider to share TvmWalletService
through all your app components.
import { TvmConnector, TvmWalletServiceProvider } from '@broxus/tvm-connect'
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { IntlProvider } from 'react-intl'
function App(): JSX.Element {
return (
<IntlProvider>
<TvmWalletServiceProvider>
...
<TvmConnector />
...
</TvmWalletServiceProvider>
</IntlProvider>
)
}
ReactDOM.render(<App />, document.body)You may use TvmWalletService to create your own service with provider and connection.
import { TvmWalletService } from '@broxus/js-core'
let service: TvmWalletService
export function useTvmWallet(): TvmWalletService {
if (service === undefined) {
service = new TvmWalletService({
defaultNetworkId: number, // (optional) default is 42 (Everscale Mainnet); 1000 for Venom Testnet
minWalletVersion: string, // (optional) version of the wallet that supports sendDelayedMessage
networks: NetworkConfig[], // (optional) supported networks configurations
providerId: string, // (optional) default is 'ever'
providers: TvmWalletProviderConfig[], // (optional) providers config
})
}
return service
}Below you can see a models of the network configuration, native currency and explorer config.
type NetworkConfig = {
badge?: string
chainId: string
currency: NativeCurrency<Address>
disabled?: boolean
explorer: NetworkExplorerConfig
icon?: string
id: string
name: string
rpcUrl: string
shortName: string
tokensListUri?: string
tokenType?: string
type: 'tvm'
}
type NativeCurrency = {
balance?: string
decimals: number
icon?: string
name?: string
symbol: string
wrappedCurrencyAddress?: Address
}
type NetworkExplorerConfig = {
accountsSubPath?: string
baseUrl: string
title: string
transactionsSubPath?: string
}To use more providers (wallets) and their connections, you can configure these providers with
the providers option that can be passed when instantiating the TvmWalletService.
type TvmWalletProviderConfig = {
connector: NekotonConnector
info: {
description?: string
icon?: string
links?: TvmProviderPlatformLinks & { homepage?: string }
name: string
}
id: string
isRecent?: boolean
minVersion?: string
}
export type AvailablePlatforms = 'ios' | 'android' | 'chromeExtension' | 'firefoxExtension'
export type TvmProviderPlatformLinks = Partial<Record<AvailablePlatforms, string>>