@airdao/ui-library
v2.0.5
Published
- [ ] Install peer dependencies - [ ] Wrap app with WagmiProvider and TanstackProvider - [ ] Swap all occurences of useWeb3React with wagmi's useAccount for read data - [ ] Use useEthersProvider for write actions - [ ] (optional) use new Header props
Downloads
1,399
Readme
Installation checklist
- [ ] Install peer dependencies
- [ ] Wrap app with WagmiProvider and TanstackProvider
- [ ] Swap all occurences of useWeb3React with wagmi's useAccount for read data
- [ ] Use useEthersProvider for write actions
- [ ] (optional) use new Header props
Install peer dependencies
yarn add [email protected] [email protected] @tanstack/[email protected]
npm install [email protected] [email protected] @tanstack/[email protected]
Wrap app with WagmiProvider and TanstackProvider
import { WagmiProvider } from "wagmi";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { createAirdaoConfigWithChainId, createAirdaoConfig } from "@airdao/ui-library";
const queryClient = new QueryClient();
// store this in env variables
const { REACT_APP_WC_PROJECT_ID: projectId, REACT_APP_CHAIN_ID: chainId } =
process.env;
const WC_PARAMS = {
projectId: projectId,
metadata: {
name: "Project name",
description: "Project description",
url: "project url",
icons: ["https://airdao.io/favicon.svg"]
},
};
// for specific chain
const config = createAirdaoConfigWithChainId(+chainId, WC_PARAMS); //chainId must be a number
// for all AirDAO chains (mainnet, testnet, devnet)
const allNetworksConfig = createAirdaoConfig(WC_PARAMS);
export default function ConfiguredWagmiProvider({ children }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</WagmiProvider>
);
}
Use Wagmi hooks instead of useWeb3React
Before
import { useWeb3React } from "@web3-react/core";
function MyComponent() {
const {
connector,
chainId,
accounts,
isActivating,
account,
isActive,
} = useWeb3React();
return (...)
}
After
import { useAccount } from "wagmi";
import { useEthersSigner } from "@airdao/ui-library";
const {
address, // account
addresses, // accounts
chainId,
connector,
isConnecting, // isActivating
isConnected, // isActive
...
} = useAccount()
const signer = useEthersSigner({ chainId }) //chainId optional
https://wagmi.sh/react/api/hooks/useAccount
Update Header
Before
import { Header } from "@airdao/ui-library";
import {
useAutoLogin,
useAuthorization,
} from "airdao-components-and-tools/hooks";
import {
switchToAmb,
metamaskConnector,
walletconnectConnector,
bitgetWalletConnector,
} from "airdao-components-and-tools/utils";
function Layout() {
const { account, connector, provider, isActive, chainId } = useWeb3React();
const { loginMetamask, loginWalletConnect, loginSafepal, loginBitget, logout } = useAuthorization(
metamaskConnector,
walletconnectConnector,
bitgetWalletConnector,
);
return (
<main>
<Header
loginSafepal={loginSafepal}
loginMetamask={loginMetamask}
loginBitget={loginBitget}
loginWalletConnect={loginWalletConnect}
disconnect={logout}
account={account}
connector={connector}
... // other props
/>
...
</main>
)
}
After
import { Header } from "@airdao/ui-library";
const { REACT_APP_CHAIN_ID: chainId } = process.env;
function Layout() {
return (
<main>
<Header
chainId={+chainId} //number
/>
...
</main>
)
Note: Despite that new version of Header implements all the necessary logic under the hood, you can override it passing additional props to it. Here is the list of props that you can pass to Header:
export interface HeaderProps {
disabled?: boolean;
logotype?: LogoProps;
chainId: number;
balance?: string;
isSupportedChain?: boolean;
connectors?: Connector[]; // list of connectors to use in ConnectWalletModal
currentConnector?: Connector;
disconnect?: () => void;
switchToAmb?: () => void;
}
For more info check ./src/components/Header/Header.types.ts
Replace old 'airdao-components-and-tools' utils
Before
import { switchToAmb } from "airdao-components-and-tools/utils";
switchToAmb(chainId);
After
import { useSwitchToConfiguredChain } from "@airdao/ui-library";
const switchToAmb = useSwitchToConfiguredChain();
switchToAmb();