croak-wallet-sdk/wallet/components/Main.js

Guide for installation and usage of Croak's Web3 walllet.

"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",
//
var react_1 = __importDefault(require("react"));
var react_2 = require("react");
var googleCardStyle = {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: '319px',
    height: '45px',
    background: '#252525',
    borderRadius: '12px',
    border: 'none',
    cursor: 'pointer'
};
var buttonTextSpan = {
    fontFamily: 'Chakra Petch',
    fontStyle: 'normal',
    fontWeight: 600,
    fontSize: '18px',
    lineHeight: '23px',
    display: 'flex',
    alignItems: 'center',
    textAlign: 'center',
    color: '#FFFFFF'
};
var grid = {
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column'
};
var 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'
};
var footer = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: '26.39px'
};
var footerNormalText = {
    fontFamily: 'Chakra Petch',
    fontStyle: 'normal',
    fontWeight: '600',
    fontSize: '14.109px',
    color: '#535353',
    lineGeight: '18px'
};
var footerBigText = {
    fontFamily: 'Chakra Petch',
    fontStyle: 'normal',
    fontWeight: '700',
    fontSize: '16.1351px',
    lineHeight: '21px',
    color: '#535353'
};
var Main = function (props) {
    var _a = (0, react_2.useState)(true), show = _a[0], setShow = _a[1];
    (0, react_2.useEffect)(function () {
        document.addEventListener("show-glip-modal", function (e) {
            setShow(true);
        });
        document.addEventListener("hide-glip-modal", function (e) {
            setShow(false);
        });
    }, []);
    var unloggedInView = (react_1.default.createElement("div", null,
        react_1.default.createElement("button", { onClick: function () {
                console.log('wow');
                props.skadiWallet.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));
    }
    var MainComp = function () { return (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("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;