@broxus/tvm-connect v2.2.3
TVM Connect
Create a connection to Nekoton-based wallets and dApps
Usage
Installation
To apply this component, install it with npm using following command:
npm install @broxus/tvm-connect
or using yarn:
yarn add @broxus/tvm-connect
TvmWalletService
The 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.
Using with React
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)
Custom service
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
}
Network configuration
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
}
Provider configuration
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>>
20 days ago
21 days ago
23 days ago
24 days ago
1 month ago
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago