@fewcha/web3-react
Version:
Check the documentation at https://docs.fewcha.app/
269 lines (216 loc) • 6.29 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.WalletTitleWrapper = exports.WalletTitle = exports.WalletList = exports.WalletItem = exports.WalletIcon = exports.WalletDetected = exports.PopupTitle = exports.PopupClose = exports.PopupBackgroundWrapper = exports.PopupBackgroundScreen = exports.PopupBackgroundBackground = exports.PopupBackground = exports.Popup = exports.ConnectWalletButton = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
let _ = t => t,
_t,
_t2,
_t3,
_t4,
_t5,
_t6,
_t7,
_t8,
_t9,
_t10,
_t11,
_t12,
_t13,
_t14,
_t15,
_t16,
_t17,
_t18,
_t19,
_t20,
_t21,
_t22,
_t23,
_t24;
// popup background
const PopupBackground = _styledComponents.default.div(_t || (_t = _`
overflow-y: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 40;
`));
exports.PopupBackground = PopupBackground;
const PopupBackgroundScreen = _styledComponents.default.div(_t2 || (_t2 = _`
display: flex;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 5rem;
text-align: center;
justify-content: center;
align-items: center;
min-height: 100vh;
@media (min-width: 640px) {
display: block;
padding: 0;
}
`));
exports.PopupBackgroundScreen = PopupBackgroundScreen;
const PopupBackgroundWrapper = _styledComponents.default.div(_t3 || (_t3 = _`
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition-property: opacity;
`));
exports.PopupBackgroundWrapper = PopupBackgroundWrapper;
const PopupBackgroundBackground = _styledComponents.default.div(_t4 || (_t4 = _`
background: rgba(255, 227, 227, 0.1) !important;
backdrop-filter: blur(3px) !important;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
`)); // button
exports.PopupBackgroundBackground = PopupBackgroundBackground;
const ConnectWalletButton = _styledComponents.default.button(_t5 || (_t5 = _`
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 15px 30px;
gap: 10px;
background: #14161a;
border-radius: 100px;
flex: none;
order: 0;
flex-grow: 0;
cursor: pointer;
line-height: 120%;
color: #ffffff;
font-weight: bold;
font-size: 18px;
outline: 0;
border: none;
&:hover {
background-color: #2a2c33;
}
transition: background-color 0.2s ease-in-out;
`)); // popup
exports.ConnectWalletButton = ConnectWalletButton;
const Popup = _styledComponents.default.div(_t6 || (_t6 = _`
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
position: relative;
display: inline-block;
overflow: hidden;
z-index: 50;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
background-color: #ffffff;
transition-property: all;
text-align: left;
vertical-align: bottom;
width: 100%;
border-radius: 0.5rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
@media (min-width: 640px) {
margin-top: 2rem;
margin-bottom: 2rem;
vertical-align: middle;
max-width: 480px;
}
background-color: #050507;
border-radius: 40px;
`));
exports.Popup = Popup;
const PopupTitle = _styledComponents.default.h1(_t7 || (_t7 = _`
font-style: normal;
font-weight: 500;
font-size: 32px;
line-height: 120%;
text-align: center;
letter-spacing: 0.02em;
color: #ffffff;
max-width: 70%;
margin: 36px auto 60px;
`));
exports.PopupTitle = PopupTitle;
const PopupClose = _styledComponents.default.div(_t8 || (_t8 = _`
display: flex;
background-color: #000000;
justify-content: flex-end;
cursor: pointer;
`)); // wallet list
exports.PopupClose = PopupClose;
const WalletList = _styledComponents.default.div(_t9 || (_t9 = _`
${0}
`), props => props.grid ? (0, _styledComponents.css)(_t10 || (_t10 = _`
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
`)) : (0, _styledComponents.css)(_t11 || (_t11 = _`
flex-direction: column;
`)));
exports.WalletList = WalletList;
const WalletItem = _styledComponents.default.div(_t12 || (_t12 = _`
${0}
align-items: center;
cursor: pointer;
`), props => props.grid ? (0, _styledComponents.css)(_t13 || (_t13 = _`
flex-direction: column;
display: flex;
border-radius: 16px;
border-width: 1px;
background: #201e28;
margin-bottom: 16px;
`)) : (0, _styledComponents.css)(_t14 || (_t14 = _`
display: flex;
border-radius: 16px;
border-width: 1px;
background: #201e28;
margin-bottom: 16px;
`)));
exports.WalletItem = WalletItem;
const WalletTitleWrapper = _styledComponents.default.div(_t15 || (_t15 = _`
${0}
display: flex;
padding: 24px 16px;
`), props => props.grid ? (0, _styledComponents.css)(_t16 || (_t16 = _`
flex-direction: column;
`)) : (0, _styledComponents.css)(_t17 || (_t17 = _`
flex-direction: row;
`)));
exports.WalletTitleWrapper = WalletTitleWrapper;
const WalletIcon = _styledComponents.default.div(_t18 || (_t18 = _`
display: flex;
justify-content: center;
align-items: center;
${0}
`), props => props.grid ? (0, _styledComponents.css)(_t19 || (_t19 = _`
margin-bottom: 12px;
`)) : (0, _styledComponents.css)(_t20 || (_t20 = _`
margin-right: 16px;
`)));
exports.WalletIcon = WalletIcon;
const WalletTitle = _styledComponents.default.div(_t21 || (_t21 = _`
color: #ffffff;
font-style: normal;
font-weight: 500;
font-size: 28px;
line-height: 120%;
`));
exports.WalletTitle = WalletTitle;
const WalletDetected = _styledComponents.default.div(_t22 || (_t22 = _`
color: #3b82f6;
font-size: 24px;
${0}
`), props => props.grid ? (0, _styledComponents.css)(_t23 || (_t23 = _`
margin-bottom: 15px;
`)) : (0, _styledComponents.css)(_t24 || (_t24 = _`
margin-left: auto;
margin-right: 24px;
`)));
exports.WalletDetected = WalletDetected;