Skip to main content

​
Integrate Your dApp

Build a full-featured dApp with React, ethers.js, and Nexis Appchain integration.

​
Setup Project

npx create-react-app my-dapp
cd my-dapp
npm install ethers wagmi viem@2.x @tanstack/react-query

​
Wallet Connection

components/WalletConnect.jsx
import { useConnect, useAccount, useDisconnect } from 'wagmi';
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';

export function WalletConnect() {
  const { address, isConnected } = useAccount();
  const { connect } = useConnect({
    connector: new MetaMaskConnector({
      chains: [{
        id: 84532,
        name: 'Nexis Testnet',
        network: 'nexis-testnet',
        rpcUrls: {
          default: { http: ['https://testnet-rpc.nex-t1.ai'] },
          public: { http: ['https://testnet-rpc.nex-t1.ai'] }
        }
      }]
    })
  });
  const { disconnect } = useDisconnect();

  return (
    <div>
      {isConnected ? (
        <div>
          <p>Connected: {address?.slice(0, 6)}...{address?.slice(-4)}</p>
          <button onClick={() => disconnect()}>Disconnect</button>
        </div>
      ) : (
        <button onClick={() => connect()}>Connect Wallet</button>
      )}
    </div>
  );
}

​
Contract Interaction

hooks/useContract.js
import { useContractRead, useContractWrite } from 'wagmi';

const contractConfig = {
  address: '0xYourContract',
  abi: [...],
};

export function useTokenBalance(address) {
  const { data, isError, isLoading } = useContractRead({
    ...contractConfig,
    functionName: 'balanceOf',
    args: [address],
  });

  return { balance: data, isError, isLoading };
}

export function useTransferToken() {
  const { write, isLoading, isSuccess } = useContractWrite({
    ...contractConfig,
    functionName: 'transfer',
  });

  return { transfer: write, isLoading, isSuccess };
}

​
Full dApp Example

App.js
import { WagmiConfig, createConfig, configureChains } from 'wagmi';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnect } from './components/WalletConnect';
import { useTokenBalance, useTransferToken } from './hooks/useContract';

const { chains, publicClient } = configureChains(
  [{
    id: 84532,
    name: 'Nexis Testnet',
    network: 'nexis-testnet',
    rpcUrls: {
      default: { http: ['https://testnet-rpc.nex-t1.ai'] }
    }
  }],
  [publicProvider()]
);

const config = createConfig({
  autoConnect: true,
  publicClient,
});

function TokenApp() {
  const { address } = useAccount();
  const { balance } = useTokenBalance(address);
  const { transfer } = useTransferToken();

  const handleTransfer = async () => {
    await transfer({
      args: ['0xRecipient', ethers.parseEther('10')]
    });
  };

  return (
    <div>
      <h1>My dApp on Nexis</h1>
      <WalletConnect />
      {address && (
        <>
          <p>Balance: {ethers.formatEther(balance || 0)} tokens</p>
          <button onClick={handleTransfer}>Send 10 Tokens</button>
        </>
      )}
    </div>
  );
}

export default function App() {
  return (
    <WagmiConfig config={config}>
      <TokenApp />
    </WagmiConfig>
  );
}

​
Best Practices

Always handle transaction failures and network errors gracefully
Show loading indicators during transactions
Estimate gas before transactions to avoid failures
Prompt users to switch to Nexis if on wrong network

RPC Endpoints

Complete RPC documentation

Smart Contracts

Contract integration guides