Coin98 Finance
English
Search
⌃K

Setup Coin98 Adapter for React

Setup for React

// Configure blockchains, wallets then wrap app with WalletProvider, WalletModalProvider
import {
BLOCKCHAINS_DATA,
WalletProvider,
} from "@coin98-com/wallet-adapter-react";
import { WalletModalProvider } from "@coin98-com/wallet-adapter-react-ui";
import { Coin98WalletAdapter } from "@coin98-com/wallet-adapter-coin98";
import { MetaMaskWalletAdapter } from "@coin98-com/wallet-adapter-metamask";
​
const Coin98AdapterProvider = ({ children }) => {
const enables = [BLOCKCHAINS_DATA.ethereum];
const wallets = [Coin98WalletAdapter, MetaMaskWalletAdapter];
return (
<WalletProvider wallets={wallets} enables={enables} autoConnect>
<WalletModalProvider>{children}</WalletModalProvider>
</WalletProvider>
);
};
​
export default Coin98AdapterProvider;
// modal.js
import { evmChains, WalletModalC98 } from "@coin98-com/wallet-adapter-react-ui";
​
const Coin98AdapterModal = () => {
const defaultChains = [...evmChains]; // multi-chain
// const defaultChains = [tomo,ether]; // single-chain
return <WalletModalC98 isC98Theme enableChains={defaultChains} />;
};
​
export default Coin98AdapterModal;
Common props:
className?: string;
container?: string;
enableChains?: ChainInfo[];
activeChainId?: string;
titleModal?: string | ReactNode;
titleWallets?: string | ReactNode;›
titleNetworks?: string | ReactNode;
layoutClass?: string;
layoutStyle?: CSSProperties;
overlayStyle?: CSSProperties;
overlayClass?: string;
isC98Theme?: boolean;
renderListChains?: (chainData: ChainInfo, isActive: boolean) => ReactNode;
renderListWallets?: (walletIcon: string, walletName: string) => ReactNode;
// index.js
...
import Coin98AdapterProvider from "./provider";
import Coin98AdapterModal from "./modal";
​
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Coin98AdapterProvider>
<App />
<Coin98AdapterModal />
</Coin98AdapterProvider>
</React.StrictMode>
);
Then use it in your dApp
// app.js
import { useWallet } from '@coin98-com/wallet-adapter-react';
import { useWalletModal } from '@coin98-com/wallet-adapter-react-ui';
​
import '@coin98-com/wallet-adapter-react-ui/styles.css';
​
export default function App() {
const { address, selectedChainId, disconnect, selectedBlockChain, connected } = useWallet();
const { openWalletModal } = useWalletModal();
​
return (
<>
<div>
{!connected && <button onClick={openWalletModal}>Connect</button>}
{connected && <button onClick={disconnect}>Disconnect</button>}
</div>
​
<div>
{connected && (
<div>
<div>
Address: <span>{address}</span>
</div>
​
<div>
Network: <span>{selectedChainId}</span>
</div>
​
<div>
Blockchain: <span>{selectedBlockChain}</span>
</div>
</div>
)}
</div>
</>
);
}