Integrating Components

To integrate Components to your frontend, you will leverage two tools:

1. Wallet Selector: Enables the user to select their preferred NEAR wallet in your dApp.
2. NEAR VM: A package that can retrieve the component’s code from the blockchain and execute it in the browser.

Using those tools you will implement the following flow:

1. Setup the VM.
2. Render components using the Widget component in the VM.
3. Setup a wallet selector so users can interact with the Menu.

To use the VM and the wallet-selector, you must add them to your project first.

The wallet selector has multiple wallet packages to select from. Check their website for more information.

npm install 
  @near-wallet-selector/core 
  @near-wallet-selector/my-near-wallet 
  @near-wallet-selector/modal-ui

Then, manually add the VM to your package.json:

"dependencies": {
  ...
  "near-social-vm": "github:NearSocial/VM#2.5.5"
  ...
}

Setup the VM

To render components, you need to import the useInitNear hook from the near-social-vm package, as well as the Widget component.

export default function Component({ src }) {
  const { initNear } = useInitNear();

  useEffect(() => {
    initNear && initNear({ networkId: 'testnet', selector: null });
  }, [initNear]);

  return <Widget src={src} />;
}

return <Component src="influencer.testnet/widget/Greeter" props={{name: "Anna", amount: 2}} />

Setup the Wallet Selector

While the VM allows you to render components, you need to set up a wallet selector to allow users to interact with the components.

To instantiate a Wallet Selector, simply import all the wallets you want your users to have access to, and the setup method from the near-wallet-selector package.

const selector = setupWalletSelector({
  network: 'testnet,
  modules: [setupMyNearWallet()],
});

Then use it during the call to initNear:

  useEffect(() => {
    initNear && initNear({ networkId: 'testnet', selector: selector });
  }, [initNear]);