glip-wallet-sdk
Version:
Guide for installation and usage of Glip's Web3 Wallet.\ Glip Wallet through its SDK provides a signer using which a user's transaction can be signed.\ It also contains a iframe based UI element which can be embedded into any webpage.\ The UI contains
125 lines (124 loc) • 4.72 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
// "prepublishOnly": "npm test && npm run lint",
//"preversion": "npm run lint",
//
const react_1 = __importDefault(require("react"));
const react_2 = require("react");
const googleCardStyle = {
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
width: '319px',
height: '45px',
background: '#252525',
borderRadius: '12px',
border: 'none',
cursor: 'pointer'
};
const buttonTextSpan = {
fontFamily: 'Chakra Petch',
fontStyle: 'normal',
fontWeight: 600,
fontSize: '18px',
lineHeight: '23px',
display: 'flex',
alignItems: 'center',
textAlign: 'center',
color: '#FFFFFF'
};
const grid = {
display: 'flex',
alignItems: 'center',
flexDirection: 'column'
};
const container = {
position: 'absolute',
float: 'left',
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)',
transition: "opacity 400ms ease-in",
borderRadius: 10,
padding: 30,
zIndex: 100,
background: 'black'
};
const footer = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginTop: '26.39px'
};
const footerNormalText = {
fontFamily: 'Chakra Petch',
fontStyle: 'normal',
fontWeight: '600',
fontSize: '14.109px',
color: '#535353',
lineGeight: '18px'
};
const footerBigText = {
fontFamily: 'Chakra Petch',
fontStyle: 'normal',
fontWeight: '700',
fontSize: '16.1351px',
lineHeight: '21px',
color: '#535353'
};
const Main = (props) => {
const [show, setShow] = (0, react_2.useState)(true);
(0, react_2.useEffect)(() => {
document.addEventListener("show-glip-modal", (e) => {
setShow(true);
});
document.addEventListener("hide-glip-modal", (e) => {
setShow(false);
});
}, []);
const unloggedInView = (react_1.default.createElement("div", null,
react_1.default.createElement("button", { onClick: () => {
props.glipWallet.login("google", window.location.href);
}, style: googleCardStyle },
react_1.default.createElement("img", { src: 'https://live-nft-hosted-assets.s3.ap-south-1.amazonaws.com/google_logo.svg', style: { marginRight: 14 } }),
react_1.default.createElement("span", { style: buttonTextSpan }, "Continue with Google"))));
if (!show) {
return (react_1.default.createElement(react_1.default.Fragment, null));
}
const MainComp = () => (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: grid }, unloggedInView)));
return (react_1.default.createElement("div", { style: container },
react_1.default.createElement("img", { src: 'https://live-nft-hosted-assets.s3.ap-south-1.amazonaws.com/cancel_icon.svg', style: { position: 'absolute', right: 18, cursor: 'pointer' }, onClick: () => { setShow(false); } }),
react_1.default.createElement("div", { style: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
position: 'relative'
} },
react_1.default.createElement("h1", { style: {
fontFamily: 'Chakra Petch',
fontStyle: "normal",
fontWeight: "700",
fontSize: "28px",
lineHeight: "110%",
display: "flex",
alignItems: "center",
textAlign: "center",
color: "#FFFFFF",
border: "1px solid #000000",
textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
} },
"Create a wallet ",
react_1.default.createElement("br", null),
"to continue")),
react_1.default.createElement(MainComp, null),
react_1.default.createElement("div", { style: footer },
react_1.default.createElement("span", { style: footerNormalText }, "powered by"),
react_1.default.createElement("img", { src: 'https://live-nft-hosted-assets.s3.ap-south-1.amazonaws.com/glip_wallet_logo.svg', style: { marginLeft: 12, marginRight: 6 } }),
react_1.default.createElement("span", { style: footerBigText }, "glipwallet"))));
};
exports.default = Main;