Skip to main content

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.

Adding the VM & Wallet Selector​

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"
...
}
tip

Check the latest released version for the VM here


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.

import { useInitNear, Widget } from 'near-social-vm';
import { useEffect } from 'react';

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}} />
tip

Notice that the VM is inherently linked to React, so you will need to use a reactive framework to take full advantage of the VM.


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.

import '@near-wallet-selector/modal-ui/styles.css';
import { setupModal } from '@near-wallet-selector/modal-ui';
import { setupWalletSelector } from '@near-wallet-selector/core';
import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';

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

Then use it during the call to initNear:

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

To learn more about the wallet selector and how it can be used, please see the integrating NEAR to your WebApp tutorial

Was this page helpful?