lrazovic/useink

A React hooks library for Wasm contracts on Substrate

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>,
);

2. 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:

• useink Kitchen Sink
• Link - A URL shortener built with ink!.

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.