connect-wallet-npm

Connect-wallet-npm

Library for connecting wallets with Wagmi

Install

npm i connect-wallet-npm

Usage:

Default library import

import  { defaultWagmi } from 'wagmi';  //use default library wagmi
import  { defaultWagmiCore } from '@wagmi/core'; //use default action wagmi
import  { defaultWagmiChains } from '@wagmi/core'; //use default chains wagmi
import  { defaultViem } from 'viem';  // //use default viem

Add wallet config

//config.ts

import { setupWagmiConfig, defaultWagmiChains } from 'connect-wallet-npm';

const { mainnet, sepolia, goerli } = defaultWagmiChains;
const supportedChains = [mainnet, sepolia, goerli];



export const config = setupWagmiConfig({
  //To get the API key of Alchemy provider ---> https://www.alchemy.com/
  alchemyApiKey: 'key',
  //To get the projectId ---> https://cloud.walletconnect.com/
  walletConnectProjectId: 'key',
  supportedChains
});

//main.ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import { defaultWagmi } from 'connect-wallet-npm';
import App from './App.tsx';
import { config } from '.config.ts';

const {WagmiConfig} = defaultWagmi; 

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <WagmiConfig config={config}>
        <AppProvider>
          <App />
    </WagmiConfig>
  </React.StrictMode>
);

useWrite and useTransactionHash

useWrite - hook for write data to contract.

useTransactionHash - this hook is designed to save the transaction hash in localstore until the process is completed.

import { useTransactionHash, useWrite } from 'connect-wallet-npm';

    const { write, data } = useWrite({
    address: contract_address,
    functionName: 'withdraw',                               //name function in contract
    abi: contractAbi,                                      //use Abi contract
    args: ['arguments', 854, 9000002n]                   //array arguments, type of string or number or bigint, optional parameter 
   });

   const transaction = useTransactionHash(data?.hash);
    
 return (
    <>
      <button onClick={() => write?.()}>Write contract</button>
    </>
  );

useWarite Return Value

{
  data?: { hash: Hex }
  error?: Error
  isError: boolean
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  write: ((args?: WriteContractConfig) => void) | undefined
  writeAsync: ((args?: WriteContractConfig) => Promise<{ hash: Hex }>) | undefined
  reset: () => void
  status: 'idle' | 'error' | 'loading' | 'success'
}

useTransactionHash Return Value

return TransactionReceipt. Type for Transaction Receipts