@reown/appkit-ui
Version:
The full stack toolkit to build onchain app UX.
291 lines • 12.4 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { html, unsafeStatic } from 'lit/static-html.js';
import { appStoreSvg } from '../../assets/svg/app-store.js';
import { appleSvg } from '../../assets/svg/apple.js';
import { bitcoinSvg } from '../../assets/svg/bitcoin.js';
import { checkmarkSvg } from '../../assets/svg/checkmark.js';
import { chromeStoreSvg } from '../../assets/svg/chrome-store.js';
import { coinsSvg } from '../../assets/svg/coins.js';
import { cursorSvg } from '../../assets/svg/cursor.js';
import { discordSvg } from '../../assets/svg/discord.js';
import { ethereumSvg } from '../../assets/svg/ethereum.js';
import { etherscanSvg } from '../../assets/svg/etherscan.js';
import { facebookSvg } from '../../assets/svg/facebook.js';
import { farcasterSvg } from '../../assets/svg/farcaster.js';
import { githubSvg } from '../../assets/svg/github.js';
import { googleSvg } from '../../assets/svg/google.js';
import { infoSealSvg } from '../../assets/svg/info.js';
import { paperPlaneTitleSvg } from '../../assets/svg/paper-plane-titl.js';
import { playStoreSvg } from '../../assets/svg/play-store.js';
import { reownSvg } from '../../assets/svg/reown-logo.js';
import { solanaSvg } from '../../assets/svg/solana.js';
import { telegramSvg } from '../../assets/svg/telegram.js';
import { tonSvg } from '../../assets/svg/ton.js';
import { tronSvg } from '../../assets/svg/tron.js';
import { twitchSvg } from '../../assets/svg/twitch.js';
import { twitterIconSvg } from '../../assets/svg/twitterIcon.js';
import { walletConnectBrownSvg, walletConnectInvertSvg, walletConnectLightBrownSvg, walletConnectSvg } from '../../assets/svg/walletconnect.js';
import { xSvg } from '../../assets/svg/x.js';
import { vars } from '../../utils/ThemeHelperUtil.js';
import { resetStyles } from '../../utils/ThemeUtil.js';
import { customElement } from '../../utils/WebComponentsUtil.js';
import styles from './styles.js';
const phosphorIconsMap = {
add: 'ph-plus',
allWallets: 'ph-dots-three',
arrowBottom: 'ph-arrow-down',
arrowBottomCircle: 'ph-arrow-circle-down',
arrowClockWise: 'ph-arrow-clockwise',
arrowLeft: 'ph-arrow-left',
arrowRight: 'ph-arrow-right',
arrowTop: 'ph-arrow-up',
arrowTopRight: 'ph-arrow-up-right',
bank: 'ph-bank',
bin: 'ph-trash',
browser: 'ph-browser',
card: 'ph-credit-card',
checkmarkBold: 'ph-check',
chevronBottom: 'ph-caret-down',
chevronLeft: 'ph-caret-left',
chevronRight: 'ph-caret-right',
chevronTop: 'ph-caret-up',
clock: 'ph-clock',
close: 'ph-x',
coinPlaceholder: 'ph-circle-half',
compass: 'ph-compass',
copy: 'ph-copy',
desktop: 'ph-desktop',
dollar: 'ph-currency-dollar',
download: 'ph-vault',
exclamationCircle: 'ph-warning-circle',
extension: 'ph-puzzle-piece',
externalLink: 'ph-arrow-square-out',
filters: 'ph-funnel-simple',
helpCircle: 'ph-question',
id: 'ph-identification-card',
image: 'ph-image',
info: 'ph-info',
lightbulb: 'ph-lightbulb',
mail: 'ph-envelope',
mobile: 'ph-device-mobile',
more: 'ph-dots-three',
networkPlaceholder: 'ph-globe',
nftPlaceholder: 'ph-image',
plus: 'ph-plus',
power: 'ph-power',
qrCode: 'ph-qr-code',
questionMark: 'ph-question',
refresh: 'ph-arrow-clockwise',
recycleHorizontal: 'ph-arrows-clockwise',
search: 'ph-magnifying-glass',
sealCheck: 'ph-seal-check',
send: 'ph-paper-plane-right',
signOut: 'ph-sign-out',
spinner: 'ph-spinner',
swapHorizontal: 'ph-arrows-left-right',
swapVertical: 'ph-arrows-down-up',
threeDots: 'ph-dots-three',
user: 'ph-user',
verify: 'ph-seal-check',
verifyFilled: 'ph-seal-check',
wallet: 'ph-wallet',
warning: 'ph-warning',
warningCircle: 'ph-warning-circle',
appStore: '',
apple: '',
bitcoin: '',
coins: '',
chromeStore: '',
cursor: '',
discord: '',
ethereum: '',
etherscan: '',
facebook: '',
farcaster: '',
github: '',
google: '',
playStore: '',
paperPlaneTitle: '',
reown: '',
solana: '',
ton: '',
tron: '',
telegram: '',
twitch: '',
twitterIcon: '',
twitter: '',
walletConnect: '',
walletConnectBrown: '',
walletConnectLightBrown: '',
x: '',
infoSeal: '',
checkmark: ''
};
const phosphorImports = {
'ph-arrow-circle-down': () => import('@phosphor-icons/webcomponents/PhArrowCircleDown'),
'ph-arrow-clockwise': () => import('@phosphor-icons/webcomponents/PhArrowClockwise'),
'ph-arrow-down': () => import('@phosphor-icons/webcomponents/PhArrowDown'),
'ph-arrow-left': () => import('@phosphor-icons/webcomponents/PhArrowLeft'),
'ph-arrow-right': () => import('@phosphor-icons/webcomponents/PhArrowRight'),
'ph-arrow-square-out': () => import('@phosphor-icons/webcomponents/PhArrowSquareOut'),
'ph-arrows-down-up': () => import('@phosphor-icons/webcomponents/PhArrowsDownUp'),
'ph-arrows-left-right': () => import('@phosphor-icons/webcomponents/PhArrowsLeftRight'),
'ph-arrow-up': () => import('@phosphor-icons/webcomponents/PhArrowUp'),
'ph-arrow-up-right': () => import('@phosphor-icons/webcomponents/PhArrowUpRight'),
'ph-arrows-clockwise': () => import('@phosphor-icons/webcomponents/PhArrowsClockwise'),
'ph-bank': () => import('@phosphor-icons/webcomponents/PhBank'),
'ph-browser': () => import('@phosphor-icons/webcomponents/PhBrowser'),
'ph-caret-down': () => import('@phosphor-icons/webcomponents/PhCaretDown'),
'ph-caret-left': () => import('@phosphor-icons/webcomponents/PhCaretLeft'),
'ph-caret-right': () => import('@phosphor-icons/webcomponents/PhCaretRight'),
'ph-caret-up': () => import('@phosphor-icons/webcomponents/PhCaretUp'),
'ph-check': () => import('@phosphor-icons/webcomponents/PhCheck'),
'ph-circle-half': () => import('@phosphor-icons/webcomponents/PhCircleHalf'),
'ph-clock': () => import('@phosphor-icons/webcomponents/PhClock'),
'ph-compass': () => import('@phosphor-icons/webcomponents/PhCompass'),
'ph-copy': () => import('@phosphor-icons/webcomponents/PhCopy'),
'ph-credit-card': () => import('@phosphor-icons/webcomponents/PhCreditCard'),
'ph-currency-dollar': () => import('@phosphor-icons/webcomponents/PhCurrencyDollar'),
'ph-desktop': () => import('@phosphor-icons/webcomponents/PhDesktop'),
'ph-device-mobile': () => import('@phosphor-icons/webcomponents/PhDeviceMobile'),
'ph-dots-three': () => import('@phosphor-icons/webcomponents/PhDotsThree'),
'ph-vault': () => import('@phosphor-icons/webcomponents/PhVault'),
'ph-envelope': () => import('@phosphor-icons/webcomponents/PhEnvelope'),
'ph-funnel-simple': () => import('@phosphor-icons/webcomponents/PhFunnelSimple'),
'ph-globe': () => import('@phosphor-icons/webcomponents/PhGlobe'),
'ph-identification-card': () => import('@phosphor-icons/webcomponents/PhIdentificationCard'),
'ph-image': () => import('@phosphor-icons/webcomponents/PhImage'),
'ph-info': () => import('@phosphor-icons/webcomponents/PhInfo'),
'ph-lightbulb': () => import('@phosphor-icons/webcomponents/PhLightbulb'),
'ph-magnifying-glass': () => import('@phosphor-icons/webcomponents/PhMagnifyingGlass'),
'ph-paper-plane-right': () => import('@phosphor-icons/webcomponents/PhPaperPlaneRight'),
'ph-plus': () => import('@phosphor-icons/webcomponents/PhPlus'),
'ph-power': () => import('@phosphor-icons/webcomponents/PhPower'),
'ph-puzzle-piece': () => import('@phosphor-icons/webcomponents/PhPuzzlePiece'),
'ph-qr-code': () => import('@phosphor-icons/webcomponents/PhQrCode'),
'ph-question': () => import('@phosphor-icons/webcomponents/PhQuestion'),
'ph-question-circle': () => import('@phosphor-icons/webcomponents/PhQuestionMark'),
'ph-seal-check': () => import('@phosphor-icons/webcomponents/PhSealCheck'),
'ph-sign-out': () => import('@phosphor-icons/webcomponents/PhSignOut'),
'ph-spinner': () => import('@phosphor-icons/webcomponents/PhSpinner'),
'ph-trash': () => import('@phosphor-icons/webcomponents/PhTrash'),
'ph-user': () => import('@phosphor-icons/webcomponents/PhUser'),
'ph-wallet': () => import('@phosphor-icons/webcomponents/PhWallet'),
'ph-warning': () => import('@phosphor-icons/webcomponents/PhWarning'),
'ph-warning-circle': () => import('@phosphor-icons/webcomponents/PhWarningCircle'),
'ph-x': () => import('@phosphor-icons/webcomponents/PhX')
};
const svgOptions = {
appStore: appStoreSvg,
apple: appleSvg,
bitcoin: bitcoinSvg,
coins: coinsSvg,
chromeStore: chromeStoreSvg,
cursor: cursorSvg,
discord: discordSvg,
ethereum: ethereumSvg,
etherscan: etherscanSvg,
facebook: facebookSvg,
farcaster: farcasterSvg,
github: githubSvg,
google: googleSvg,
playStore: playStoreSvg,
paperPlaneTitle: paperPlaneTitleSvg,
reown: reownSvg,
solana: solanaSvg,
ton: tonSvg,
tron: tronSvg,
telegram: telegramSvg,
twitch: twitchSvg,
twitter: xSvg,
twitterIcon: twitterIconSvg,
walletConnect: walletConnectSvg,
walletConnectInvert: walletConnectInvertSvg,
walletConnectBrown: walletConnectBrownSvg,
walletConnectLightBrown: walletConnectLightBrownSvg,
x: xSvg,
infoSeal: infoSealSvg,
checkmark: checkmarkSvg
};
export const ICON_COLOR = {
'accent-primary': vars.tokens.core.iconAccentPrimary,
'accent-certified': vars.tokens.core.iconAccentCertified,
'foreground-secondary': vars.tokens.theme.foregroundSecondary,
default: vars.tokens.theme.iconDefault,
success: vars.tokens.core.iconSuccess,
error: vars.tokens.core.iconError,
warning: vars.tokens.core.iconWarning,
inverse: vars.tokens.theme.iconInverse
};
let WuiIcon = class WuiIcon extends LitElement {
constructor() {
super(...arguments);
this.size = 'md';
this.name = 'copy';
this.weight = 'bold';
this.color = 'inherit';
}
render() {
const getSize = {
xxs: '2',
xs: '3',
sm: '3',
md: '4',
mdl: '5',
lg: '5',
xl: '6',
xxl: '7',
inherit: 'inherit'
};
this.style.cssText = `
--local-width: ${this.size === 'inherit' ? 'inherit' : `var(--apkt-spacing-${getSize[this.size]})`};
--local-color: ${this.color === 'inherit' ? 'inherit' : ICON_COLOR[this.color]}
`;
const phosphorIconTag = phosphorIconsMap[this.name];
if (phosphorIconTag && phosphorIconTag !== '') {
const importFn = phosphorImports[phosphorIconTag];
if (importFn) {
importFn();
}
const tag = unsafeStatic(phosphorIconTag);
const getPhosphorSize = {
xxs: '0.5em',
xs: '0.75em',
sm: '0.75em',
md: '1em',
mdl: '1.25em',
lg: '1.25em',
xl: '1.5em',
xxl: '1.75em'
};
return html `<${tag} size=${ifDefined(getPhosphorSize[this.size])} weight="${this.weight}"></${tag}>`;
}
return svgOptions[this.name] || html ``;
}
};
WuiIcon.styles = [resetStyles, styles];
__decorate([
property()
], WuiIcon.prototype, "size", void 0);
__decorate([
property()
], WuiIcon.prototype, "name", void 0);
__decorate([
property()
], WuiIcon.prototype, "weight", void 0);
__decorate([
property()
], WuiIcon.prototype, "color", void 0);
WuiIcon = __decorate([
customElement('wui-icon')
], WuiIcon);
export { WuiIcon };
//# sourceMappingURL=index.js.map