@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.
77 lines (76 loc) • 4.71 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useContext } from "react";
import { AptosContext } from "./AptosContext";
import { Box, Button, Dialog, DialogContent, DialogTitle, Typography, } from "@mui/material";
import { AccountBalanceWalletOutlined as AccountBalanceWalletOutlinedIcon } from "@mui/icons-material";
export default function Wallet({ children }) {
const aptosContext = useContext(AptosContext);
const { address, handleDisconnect, handleConnect, isConnectedAptos } = aptosContext || {};
const [openWallet, setOpenWallet] = useState(false);
const handleClickOpenWallet = () => setOpenWallet(true);
const handleCloseWallet = () => setOpenWallet(false);
const petraHandleConnect = async () => {
handleConnect && (await handleConnect("petra"));
handleCloseWallet();
};
const isHandleDisconnect = async () => {
try {
if (handleDisconnect) {
await handleDisconnect();
console.log("wallet disconnected");
}
}
catch (error) {
console.error("Error disconnecting wallet:", error);
}
};
// Feature detection to check if window.aptos is present
let isAptosAvailable = false;
if (typeof window !== 'undefined') {
isAptosAvailable = !!window.aptos;
}
return (_jsxs(Box, { children: [_jsxs(Dialog, { open: openWallet, onClose: handleCloseWallet, children: [_jsx(DialogTitle, { sx: {
textAlign: "center",
alignItems: "center",
fontSize: "20px",
}, children: _jsx("span", { children: "Connect Wallet" }) }), _jsx(DialogContent, { children: isAptosAvailable ? (_jsxs(Box, { onClick: petraHandleConnect, display: "flex", flexDirection: "row", alignItems: "center", width: "100%", sx: {
background: "#272b2a",
width: "370px",
justifyContent: "space-between",
borderRadius: "8px",
p: "12px",
cursor: "pointer",
}, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Box, { component: "img", width: 30, height: 30, src: "https://arthuremma2.github.io/img-hosting/petra-bg.png", alt: "", sx: { marginLeft: "5px", marginRight: "10px" } }), _jsx(Typography, { variant: "body1", sx: { margin: 0, fontSize: "20px" }, children: "Petra" })] }), _jsx(Button, { variant: "contained", onClick: petraHandleConnect, type: "button", sx: {
"&.MuiButton-root": {
py: 2,
height: "40px",
minWidth: "100px",
},
}, children: "Connect" })] })) : (_jsx(Typography, { variant: "body1", children: "Petra Wallet extension is not detected." })) })] }), isConnectedAptos ? (_jsxs(Button, { type: "button", variant: "contained", sx: {
"&.MuiButton-root": {
py: 2,
height: "40px",
width: "100%",
marginBottom: 0,
color: "#ffff",
boxShadow: "0px 3px 4px rgba(0, 0, 0, 0.3)",
fontSize: "16.5px",
},
}, onClick: isHandleDisconnect, children: [_jsx(Box, { sx: {
marginTop: "7px",
marginRight: "8px",
}, children: _jsx("img", { width: 20, height: 20, src: "https://arthuremma2.github.io/img-hosting/petra-bg.png", alt: "" }) }), address?.slice(0, 4) + "..." + address?.slice(-4)] })) : (_jsxs(Button, { variant: "contained", sx: {
width: "100%",
"&.MuiButton-root": {
py: 2,
background: "transparent",
height: "40px",
minWidth: "170px",
fontSize: "16.5px",
marginBottom: 0,
color: "#ffff",
boxShadow: "0px 3px 4px rgba(0, 0, 0, 0.3)",
},
}, onClick: () => handleClickOpenWallet(), children: [_jsx(AccountBalanceWalletOutlinedIcon, { sx: { marginRight: 1 } }), " Connect Wallet"] })), _jsx(Box, { flexGrow: 1, p: 2, children: children })] }));
}