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-connectIn general it works great with our UIkit package. If you use this package you don't need to worry about the details.
If you are only going to use stores, you should install a few required packages
npm i everscale-inpage-provider everscale-standalone-client mobxor using yarn:
yarn add everscale-inpage-provider everscale-standalone-client mobxIf you would like to use stores and included react components, you need to install a few more packages
npm i everscale-inpage-provider everscale-standalone-client mobx mobx-react-lite react-intlor using yarn:
yarn add everscale-inpage-provider everscale-standalone-client mobx-react-lite react-intlThe 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>>If you are using our UIkit package it will it automatically adapts to your interface colors.
Otherwise, you can import standalone CSS
import '~@broxus/tvm-connect/style.min.css'