-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge remote-tracking branch 'origin/main'
- Loading branch information
Showing
2 changed files
with
215 additions
and
172 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,187 +1,44 @@ | ||
| ## 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 | ||
| # @airdao/ui-library | ||
|
|
||
| ### Install peer dependencies | ||
| ## Install library to dapp: | ||
| ### Install package | ||
| ```bash | ||
| yarn add [email protected] [email protected] @tanstack/[email protected] | ||
| yarn add @airdao/ui-library | ||
| ``` | ||
| ```bash | ||
| npm install [email protected] [email protected] @tanstack/[email protected] | ||
| ``` | ||
|
|
||
| ### Wrap app with WagmiProvider and TanstackProvider | ||
| ```jsx | ||
| 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 | ||
| ```jsx | ||
| import { useWeb3React } from "@web3-react/core"; | ||
|
|
||
| function MyComponent() { | ||
| const { | ||
| connector, | ||
| chainId, | ||
| accounts, | ||
| isActivating, | ||
| account, | ||
| isActive, | ||
| } = useWeb3React(); | ||
|
|
||
| return (...) | ||
| } | ||
| ``` | ||
|
|
||
|
|
||
| #### After | ||
| ```jsx | ||
| 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 | ||
| npm install @airdao/ui-library | ||
| ``` | ||
| https://wagmi.sh/react/api/hooks/useAccount | ||
|
|
||
| ### Update Header | ||
| #### Before | ||
| ```jsx | ||
| 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> | ||
| ) | ||
| } | ||
| ### Install peer dependencies | ||
| ```bash | ||
| yarn add [email protected] [email protected] @tanstack/[email protected] | ||
| ``` | ||
| #### After | ||
| ```jsx | ||
| import { Header } from "@airdao/ui-library"; | ||
|
|
||
| const { REACT_APP_CHAIN_ID: chainId } = process.env; | ||
|
|
||
| function Layout() { | ||
| return ( | ||
| <main> | ||
| <Header | ||
| chainId={+chainId} //number | ||
| /> | ||
| ... | ||
| </main> | ||
| ) | ||
| ```bash | ||
| npm install [email protected] [email protected] @tanstack/[email protected] | ||
| ``` | ||
|
|
||
| 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: | ||
| ```jsx | ||
| 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; | ||
| } | ||
| ``` | ||
| ## Development | ||
| > Note: Use `npm` to install library dependencies or make sure to install peer dependencies | ||
| For more info check ./src/components/Header/Header.types.ts | ||
| ### Installation and testing | ||
| ```bash | ||
| # Install Yalc globally if not installed | ||
| yarn add global yalc | ||
|
|
||
| ### Replace old 'airdao-components-and-tools' utils | ||
| # Build library before linking | ||
| yarn build | ||
|
|
||
| #### Before | ||
| # Publish library to Yalc | ||
| yalc publish | ||
|
|
||
| ```jsx | ||
| import { switchToAmb } from "airdao-components-and-tools/utils"; | ||
| switchToAmb(chainId); | ||
| # Add library to dapp | ||
| yalc add @airdao/ui-library | ||
| ``` | ||
|
|
||
| #### After | ||
| ```jsx | ||
| import { useSwitchToConfiguredChain } from "@airdao/ui-library"; | ||
|
|
||
| const switchToAmb = useSwitchToConfiguredChain(); | ||
| switchToAmb(); | ||
| ``` | ||
| ### Before release | ||
| #### For library | ||
| - Build before pushing to make sure it works | ||
| - Bump version in `package.json` | ||
| #### For dapp | ||
| - Remove .yalc library from dapp (or add it to .gitignore) | ||
| - Reinstall library from npm |
Oops, something went wrong.