ApexUI.tsx
Apex UI Code
The following file provides an example of Apex UI style buttons.
- ApexStyleButton: Provides a simple button that is similar to Apex style
- ApexLogoButton: Provides a simple button with the Apex Logo
- ApexSigninButton: Provides a button that will send the user to download Apex, connect their Apex Wallet with the existing Dapp, or Disconnect from the current provider.

import { useState } from "react";
import { useConnect, useAccount, useDisconnect } from "wagmi";
export function ApexStyleButton({
children,
onClick,
}: React.PropsWithChildren<{
onClick: () => void;
}>) {
const [pd, setPd] = useState(false);
const [pe, setPe] = useState(false);
return (
<button
onClick={onClick}
onPointerDown={() => {
setPd(true);
}}
onPointerUp={() => {
setPd(false);
}}
onPointerEnter={() => {
setPe(true);
}}
onPointerOut={() => {
setPe(false);
setPd(false);
}}
style={{
minWidth: "250px",
borderRadius: "25px",
display: "inline-flex",
alignItems: "center",
fontWeight: 700,
background: pe || pd ? "hsl(237,94.2%,44.55%)" : "#363FF9",
color: "#FFFFFF",
boxShadow: !pd
? "0px 4px 0px hsl(237deg 94% 36%)"
: "0px 0px 0px hsl(237deg 94% 36%)",
padding: "8px 15px",
justifyContent: "center",
transform: pd ? "translateY(4px)" : "none",
transition: "transform .1s, background .3s, box-shadow .1s",
}}
>
{children}
</button>
);
}
export function ApexLogoButton({
title,
onClick,
}: {
title: string;
onClick: () => void;
}) {
return (
<ApexStyleButton onClick={onClick}>
<img
alt="apex-logo"
width="35px"
height="35px"
style={{ display: "inline", marginRight: 5 }}
src="https://gateway.pinata.cloud/ipfs/QmPgPhdwwiVPdZ7AdWJX2tajgZWNKJA8w12rNwPtr1PDvJ"
></img>
{title}
</ApexStyleButton>
);
}
export function ApexConnectButton() {
const { connect, connectors } = useConnect();
const { disconnect } = useDisconnect();
const { isConnected, connector } = useAccount();
const apexConnector = connectors.find((_) => _.id === "apex");
async function connectClicked() {
if (apexConnector === undefined) {
console.error(
"Couldn't find Apex wallet connector. Check your wallet configuration"
);
return;
}
const provider = await apexConnector.getProvider();
if (provider === undefined) {
console.log("Apex is not installed, going to the download page.");
window.open(
"https://chrome.google.com/webstore/detail/apex-wallet/oppceojapmdmhpnmjpballbbdclocdhj?utm_source=Marketing%20Site",
"_blank"
);
} else {
connect({ connector: apexConnector });
}
}
if (!isConnected) {
return (
<ApexLogoButton title={"Connect via Apex"} onClick={connectClicked} />
);
} else {
return (
<ApexLogoButton
title={`Disconnect from ${connector?.name}`}
onClick={() => {
disconnect();
}}
/>
);
}
}
Have a Question or Feedback?
Post in our discussion page!
Updated 8 months ago