TypinkProvider
is the global provider for Typink DApps, it managed shared state internally so hooks and child components can access (accounts, signer, wallet connection, Dedot clients, contract deployments ...)
First thing to do is to wrap your application component with TypinkProvider
.
import { popTestnet, development } from 'typink'
import { deployments } from './deployments';
// a default caller address when interact with ink! contract if there is no wallet is connected
const DEFAULT_CALLER = '5xxx...'
const SUPPORTED_NETWORKS = [popTestnet]; // alephZeroTestnet, ...
if (process.env.NODE_ENV === 'development') {
SUPPORTED_NETWORKS.push(development);
}
<TypinkProvider
deployments={deployments}
defaultCaller={DEFAULT_CALLER}
supportedNetworks={SUPPORTED_NETWORKS}
defaultNetworkId={popTestnet.id}
cacheMetadata={true}>
<MyAppComponent ... />
</TypinkProvider>
If you're using an external wallet connector like SubConnect or Talisman Connect, you will need to pass into the TypinkProvider
2 more props: connectedAccount
(InjectedAccouunt) & signer
(Signer) so Typink knows which account & signer to interact with the ink! contracts.
const { connectedAccount, signer } = ... // from subconnect or talisman-connect ...
<TypinkProvider
deployments={deployments}
defaultCaller={DEFAULT_CALLER}
supportedNetworks={SUPPORTED_NETWORKS}
defaultNetworkId={popTestnet.id}
cacheMetadata={true}
connectedAccount={connectedAccount}
signer={signer}
>
<MyAppComponent ... />
</TypinkProvider>
deployments | ContractDeployment[] |
An array of contract deployments |
---|---|---|
defaultCaller | string |
The default Substrate address used as the default caller for making queries when no wallet is connected. |
defaultNetworkId | string |
The default network to be used. Choose from supported networks, such as popTestnet , astar , etc. |
cacheMetadata | boolean |
Toggle whether or not to cache network metadata. |
supportedNetworks | NetworkInfo[] |
An array of supported networks for your dApp. |
signer | Signer |
The signer for handling transactions. If using an external wallet connector (e.g., SubConnect, Talisman Connect), pass your signer here. |
connectedAccount | InjectedAccount | The currently connected account. If using an external wallet connector, pass the active account here. |
wallets | Wallet [ ] | Provided supported wallets |
appName | string |
The name of your dApp, used to identify your dApp when connecting to wallets |