customusepolimec
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published
ink!

Element stack-exchange

useink is a React hooks library for Substrate and Wasm contracts on Substrate

Getting Started

  1. Wrap your application in the UseInkProvider. The field dappName will show up in browser wallet extensions when a user is prompted to authorize a connection.
import { UseInkProvider } from 'useink';

root.render(
  <UseInkProvider
    config={{
      dappName: 'My Dapp',
      providerUrl: 'wss://rococo-contracts-rpc.polkadot.io',
    }}
  >
    {children}
  </UseInkProvider>,
);
  1. Connecting a wallet - useink provides a hook called useExtension that uses [@polkadot/extension-dapp]. Once a wallet is connected the account is stored in local storage so that if the page refreshes the Dapp will auto connect. You can turn this feature off by passing in { extensions: { skipAutoConnect: true } } to the config in UseInkProvider.
import { useExtension } from 'useink';

export const Connector = () => {
  const { account, connect, disconnect } = useExtension();

  if (!account) {
    return <button onClick={connect}>Connect</button>;
  }

  return {
    <>
        <button onClick={disconnect}>Disconnect</button>;
        {// show my dapp view...}
    </>
  }
};

There are more features inside of useExtension and many more hooks in useink.

You can find examples and patterns here:

Code of Conduct

Everyone interacting in this repo is expected to follow the code of conduct.

Contributing

Contributions are welcome and appreciated! Check out the contributing guide before you dive in.

License

useInk! is Apache licensed.

Package Sidebar

Install

npm i customusepolimec

Weekly Downloads

7

Version

0.1.0

License

Apache-2.0

Unpacked Size

370 kB

Total Files

425

Last publish

Collaborators

  • lrazovic