@moveflow/widget
Version:
> ⚠️ **This is a testnet version** of the MoveFlow Checkout Widget. It is intended for development and testing purposes only. Do not use for mainnet payments.
171 lines (170 loc) • 6.22 kB
JavaScript
// import { AccountBalanceWalletOutlined as AccountBalanceWalletOutlinedIcon } from "@mui/icons-material";
// import { Button, Typography } from "@mui/material";
// import { ConnectButton } from "@rainbow-me/rainbowkit";
// interface ConnectButtonProps {
// fontFamily: string;
// borderRadius: number;
// }
// const ETHConnectButton = (props: ConnectButtonProps) => {
// const { fontFamily, borderRadius } = props;
// return (
// <ConnectButton.Custom>
// {({
// account,
// chain,
// openAccountModal,
// openChainModal,
// openConnectModal,
// authenticationStatus,
// mounted,
// }) => {
// const ready = mounted && authenticationStatus !== "loading";
// const connected =
// ready &&
// account &&
// chain &&
// (!authenticationStatus || authenticationStatus === "authenticated");
// return (
// <div
// {...(!ready && {
// "aria-hidden": true,
// style: {
// opacity: 0,
// pointerEvents: "none",
// userSelect: "none",
// },
// })}
// >
// {(() => {
// if (!connected) {
// return (
// <>
// <Button
// variant="contained"
// onClick={openConnectModal}
// type="button"
// sx={{
// width: "100%",
// "&.MuiButton-root": {
// py: 2,
// borderRadius: `${borderRadius}px`,
// background: "transparent",
// height: "40px",
// minWidth: "170px",
// },
// }}
// >
// <AccountBalanceWalletOutlinedIcon
// sx={{ marginRight: 1 }}
// />
// <Typography
// noWrap
// sx={{
// fontFamily: fontFamily,
// }}
// >
// Connect Wallet
// </Typography>
// </Button>
// </>
// );
// }
// // if (chain.unsupported) {
// // return (
// // <Button
// // variant="contained"
// // // onClick={openConnectModal}
// // type="button"
// // sx={{
// // width: "100%",
// // "&.MuiButton-root": {
// // py: 2,
// // borderRadius: `${borderRadius}px`,
// // background: "transparent",
// // height: "40px",
// // minWidth: "170px",
// // },
// // }}
// // >
// // <Typography
// // noWrap
// // sx={{
// // fontFamily: fontFamily,
// // }}
// // >
// // Wrong network
// // </Typography>
// // </Button>
// // );
// // }
// return (
// <div style={{ display: "flex", gap: 12 }}>
// <Button
// variant="contained"
// onClick={openAccountModal}
// type="button"
// sx={{
// width: "100%",
// "&.MuiButton-root": {
// py: 2,
// borderRadius: `${borderRadius}px`,
// height: "40px",
// minWidth: "170px",
// fontFamily: fontFamily,
// },
// }}
// >
// {account.displayName}
// </Button>
// </div>
// );
// })()}
// </div>
// );
// }}
// </ConnectButton.Custom>
// );
// };
// export default ETHConnectButton;
"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { AccountBalanceWalletOutlined as AccountBalanceWalletOutlinedIcon } from "@mui/icons-material";
import { Button, Typography } from "@mui/material";
import { useSDK } from "@metamask/sdk-react";
const ETHConnectButton = (props) => {
const { sdk, connected, account, chainId } = useSDK();
const disconnect = () => {
if (sdk) {
sdk.terminate();
}
};
const handleClick = () => {
if (connected) {
disconnect();
}
else {
try {
sdk?.connect();
}
catch (err) {
console.warn(`No accounts found`, err);
}
}
};
const formatAddress = (address) => {
return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
};
return (_jsx(Button, { variant: "contained", type: "button", onClick: handleClick, sx: {
width: "100%",
"&.MuiButton-root": {
py: 2,
borderRadius: `${props.borderRadius}px`,
background: "transparent",
height: "40px",
minWidth: "170px",
},
}, children: connected ? (_jsx(Typography, { noWrap: true, children: formatAddress(account || "") })) : (_jsxs(_Fragment, { children: [_jsx(AccountBalanceWalletOutlinedIcon, { sx: { marginRight: 1 } }), _jsx(Typography, { noWrap: true, sx: {
fontFamily: `${props.fontFamily}`,
}, children: "Connect Wallet" })] })) }));
};
export default ETHConnectButton;