diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml index d1b229a..d7410e3 100644 --- a/.github/workflows/website.yml +++ b/.github/workflows/website.yml @@ -4,7 +4,7 @@ name: Deploy static content to Pages on: # Runs on pushes targeting the default branch push: - branches: ['feat/website', 'master'] + branches: ['feat/website', 'master', 'feat/new-design'] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: diff --git a/README.md b/README.md index 3a44c29..ee387af 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,19 @@ Current wallets supported: ### Styling -- the following attributes can be configured as hex or rgb: `color-gradient1`, `color-gradient2`, `color-primary`, `color-secondary` +- the following css variables can be configured as hex or rgb: + +```css +html { + --lwc-color-primary: #21ecc7; + --lwc-color-secondary: #21ecc7; + --lwc-color-bg-primary: black; + --lwc-color-bg-secondary: black; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: #f4f4f4; + --lwc-color-text-tertiary: white; +} +``` ### Pure HTML @@ -149,6 +161,7 @@ We are happy to help, please contact us or create an issue. - Read the [Alby developer guide](https://guides.getalby.com/overall-guide/alby-for-developers/getting-started) to better understand how Alby packages and APIs can be used to power your app. ## FAQ + - Does this work on mobile browsers and mobile PWAs, or desktop browsers without a WebLN extension? Yes! that's the main benefit. @@ -178,8 +191,6 @@ You should have a certain level of trust on the website you decide to connect yo 1. add the "Connect Wallet" button 2. wait for a connection event (using window.addEventListener) and then request to pay the invoice with window.webln - - # 🔥 Lit This project is powered by Lit. diff --git a/dev/vite/index.html b/dev/vite/index.html index 9b9a62f..8c3deb6 100644 --- a/dev/vite/index.html +++ b/dev/vite/index.html @@ -26,21 +26,73 @@ body { font-family: Arial, Helvetica, sans-serif; } + .theme-default-dark { + --lwc-color-bg-primary: #222; + --lwc-color-bg-secondary: #000; + --lwc-color-text-secondary: #808080; + } + .theme-geyser-light { + --lwc-color-primary: #10caa8; + --lwc-color-secondary: #10caa8; + --lwc-color-tertiary: #21ecc7; + --lwc-color-bg-primary: white; + --lwc-color-bg-secondary: black; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: #1a202c; + --lwc-color-text-tertiary: white; + } + .theme-geyser-dark { + --lwc-color-primary: #21ecc7; + --lwc-color-secondary: #21ecc7; + --lwc-color-bg-primary: black; + --lwc-color-bg-secondary: black; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: #f4f4f4; + --lwc-color-text-tertiary: white; + } + .theme-orange-dark { + --lwc-color-primary: #ffc837; + --lwc-color-secondary: #ff8008; + --lwc-color-bg-primary: black; + --lwc-color-bg-secondary: black; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: #ca9; + }

Components

-

Buttons

+

Button

+

Light



- +
+ +


+

Dark

+
+
+ +
+

+ +
+ +
+

+ +
+ +
+
+

Icon only

+

Modal Content

+
+ +
+

Connector List

diff --git a/package.json b/package.json index 4203d5e..29f4fe9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@getalby/lightning-wallet-connect", - "version": "1.0.6", + "version": "1.0.13", "description": "Web components to connect to a lightning wallet and power a website with WebLN", "type": "module", "source": "src/index.ts", @@ -59,7 +59,7 @@ "@web/dev-server-esbuild": "^0.4.1", "@web/test-runner": "^0.15.0", "@web/test-runner-playwright": "^0.9.0", - "@webbtc/webln-types": "^1.0.12", + "@webbtc/webln-types": "^2.0.0", "@webcomponents/webcomponentsjs": "^2.6.0", "concurrently": "^8.2.0", "esbuild": "^0.18.17", diff --git a/src/components/connectors/lwc-alby-nwc-connector.ts b/src/components/connectors/lwc-alby-nwc-connector.ts index 70ad3c8..8539bc7 100644 --- a/src/components/connectors/lwc-alby-nwc-connector.ts +++ b/src/components/connectors/lwc-alby-nwc-connector.ts @@ -2,7 +2,6 @@ import {customElement} from 'lit/decorators.js'; import {LwcConnector} from './lwc-connector'; import {albyIcon} from '../icons/albyIcon'; import {webln} from '@getalby/sdk'; -import store from '../../state/store'; @customElement('lwc-alby-nwc-connector') export class LwcAlbyNWCConnector extends LwcConnector { @@ -23,9 +22,7 @@ export class LwcAlbyNWCConnector extends LwcConnector { name: 'Lightning Wallet Connect', }); - store.getState().connect({ - connectorName: this._title, - connectorType: this._connectorType, + this._connect({ nwcUrl: nwc.getNostrWalletConnectUrl(true), }); } diff --git a/src/components/connectors/lwc-connector.ts b/src/components/connectors/lwc-connector.ts index 529af78..8635958 100644 --- a/src/components/connectors/lwc-connector.ts +++ b/src/components/connectors/lwc-connector.ts @@ -2,8 +2,11 @@ import {TemplateResult, html} from 'lit'; import {LwcElement} from '../lwc-element'; import {withTwind} from '../twind/withTwind'; import {ConnectorType} from '../../types/ConnectorType'; +import {color} from '../css/colors'; +import {ConnectorConfig} from '../../types/ConnectorConfig'; +import store from '../../state/store'; -export abstract class LwcConnector extends withTwind(LwcElement) { +export abstract class LwcConnector extends withTwind()(LwcElement) { private _background: string; private _icon: TemplateResult<2>; protected _title: string; @@ -33,7 +36,21 @@ export abstract class LwcConnector extends withTwind(LwcElement) { > ${this._icon} - ${this._title} + ${this._title} `; } + + protected _connect( + config: Omit + ) { + store.getState().connect({ + ...config, + connectorName: this._title, + connectorType: this._connectorType, + }); + } } diff --git a/src/components/connectors/lwc-extension-connector.ts b/src/components/connectors/lwc-extension-connector.ts index 3096c58..b477a34 100644 --- a/src/components/connectors/lwc-extension-connector.ts +++ b/src/components/connectors/lwc-extension-connector.ts @@ -1,7 +1,6 @@ import {customElement} from 'lit/decorators.js'; import {LwcConnector} from './lwc-connector'; import {puzzleIcon} from '../icons/puzzleIcon'; -import store from '../../state/store'; @customElement('lwc-extension-connector') export class LwcExtensionConnector extends LwcConnector { @@ -15,10 +14,7 @@ export class LwcExtensionConnector extends LwcConnector { } protected _onClick() { - store.getState().connect({ - connectorName: this._title, - connectorType: this._connectorType, - }); + this._connect({}); } } diff --git a/src/components/connectors/lwc-nwc-connector.ts b/src/components/connectors/lwc-nwc-connector.ts index fd0e05c..1c78d87 100644 --- a/src/components/connectors/lwc-nwc-connector.ts +++ b/src/components/connectors/lwc-nwc-connector.ts @@ -1,7 +1,6 @@ import {customElement} from 'lit/decorators.js'; import {LwcConnector} from './lwc-connector'; import {nwcIcon} from '../icons/nwcIcon'; -import store from '../../state/store'; @customElement('lwc-nwc-connector') export class LwcGenericNWCConnector extends LwcConnector { @@ -16,9 +15,7 @@ export class LwcGenericNWCConnector extends LwcConnector { return; } - store.getState().connect({ - connectorName: this._title, - connectorType: this._connectorType, + this._connect({ nwcUrl: nostrWalletConnectUrl, }); } diff --git a/src/components/css/colors.ts b/src/components/css/colors.ts new file mode 100644 index 0000000..9fe3212 --- /dev/null +++ b/src/components/css/colors.ts @@ -0,0 +1,16 @@ +const prefix = 'lwc-color-'; + +const colors = { + primary: '#2EA7FF', + secondary: '#0045B1', + tertiary: undefined, + 'bg-primary': '#FFFFFF', + 'bg-secondary': '#000000', + 'text-primary': '#FFFFFF', + 'text-secondary': '#404040', + 'text-tertiary': '#FFFFFF', +}; + +export function color(key: keyof typeof colors, fallback = colors[key]) { + return `var(--${prefix}${key}, ${fallback})`; +} diff --git a/src/components/css/gradientText.ts b/src/components/css/gradientText.ts new file mode 100644 index 0000000..405ab86 --- /dev/null +++ b/src/components/css/gradientText.ts @@ -0,0 +1,9 @@ +import {color} from './colors'; + +export function gradientText() { + return `background: -webkit-linear-gradient(${color('primary')}, ${color( + 'secondary' + )}); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent;`; +} diff --git a/src/components/icons/bcLogo.ts b/src/components/icons/bcLogo.ts index 0945af1..9cd80e8 100644 --- a/src/components/icons/bcLogo.ts +++ b/src/components/icons/bcLogo.ts @@ -1,39 +1,76 @@ import {svg} from 'lit'; +import {color} from '../css/colors'; export const bcLogo = svg` - - - - + + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - + + - - + + - - + + diff --git a/src/components/icons/crossIcon.ts b/src/components/icons/crossIcon.ts index 1685ef0..94ca222 100644 --- a/src/components/icons/crossIcon.ts +++ b/src/components/icons/crossIcon.ts @@ -1,7 +1,12 @@ -import { svg } from "lit"; +import {svg} from 'lit'; +import {color} from '../css/colors'; export const crossIcon = svg` - - + + -` \ No newline at end of file +`; diff --git a/src/components/icons/exitIcon.ts b/src/components/icons/exitIcon.ts index 75f28d6..ee7ea2d 100644 --- a/src/components/icons/exitIcon.ts +++ b/src/components/icons/exitIcon.ts @@ -1,12 +1,13 @@ import {svg} from 'lit'; +import {color} from '../css/colors'; export const exitIcon = svg` - - + + diff --git a/src/components/icons/loadingIcon.ts b/src/components/icons/loadingIcon.ts index 14b9f25..7986c10 100644 --- a/src/components/icons/loadingIcon.ts +++ b/src/components/icons/loadingIcon.ts @@ -1,15 +1,24 @@ import {svg} from 'lit'; +import {color} from '../css/colors'; -export const loadingIcon = svg` - - - +export const loadingIconPrimary = svg` + + + `; -export const loadingIcon2 = svg` - - - +export const loadingIconSecondary = svg` + + + `; diff --git a/src/components/icons/lwcConnectedIcon.ts b/src/components/icons/lwcConnectedIcon.ts index a993870..4c017ec 100644 --- a/src/components/icons/lwcConnectedIcon.ts +++ b/src/components/icons/lwcConnectedIcon.ts @@ -1,31 +1,10 @@ import {svg} from 'lit'; +import {color} from '../css/colors'; -export const lwcConnectedIcon = svg` - - - - - - - - - - - - - - - - - - - - - - - - - - +export const lwcConnectedIcon = svg` + -`; + +`; diff --git a/src/components/icons/lwcIcon.ts b/src/components/icons/lwcIcon.ts index ace1f2b..e7da033 100644 --- a/src/components/icons/lwcIcon.ts +++ b/src/components/icons/lwcIcon.ts @@ -1,31 +1,9 @@ import {svg} from 'lit'; +import {color} from '../css/colors'; -export const lwcIcon = svg` - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; +export const lwcIcon = svg` + + +`; diff --git a/src/components/icons/lwcIconColored.ts b/src/components/icons/lwcIconColored.ts deleted file mode 100644 index a7ce23b..0000000 --- a/src/components/icons/lwcIconColored.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { svg } from "lit"; - -export const lwcIconColored = svg` - - - - - - - - - -` \ No newline at end of file diff --git a/src/components/lwc-button.ts b/src/components/lwc-button.ts index 28779b8..4ee4e51 100644 --- a/src/components/lwc-button.ts +++ b/src/components/lwc-button.ts @@ -4,9 +4,11 @@ import './lwc-modal.js'; import {LwcElement} from './lwc-element.js'; import {lwcIcon} from './icons/lwcIcon.js'; import {withTwind} from './twind/withTwind.js'; -import {loadingIcon} from './icons/loadingIcon.js'; +import {loadingIconPrimary} from './icons/loadingIcon.js'; import {satIcon} from './icons/satIcon.js'; import {lwcConnectedIcon} from './icons/lwcConnectedIcon.js'; +import {color} from './css/colors'; +import {innerBorder} from './templates/innerBorder.js'; /** * A button that when clicked launches the LWC modal. @@ -14,7 +16,7 @@ import {lwcConnectedIcon} from './icons/lwcConnectedIcon.js'; * @csspart button - The button */ @customElement('lwc-button') -export class LwcButton extends withTwind(LwcElement) { +export class LwcButton extends withTwind()(LwcElement) { @state() private _modalOpen = false; @@ -55,56 +57,57 @@ export class LwcButton extends withTwind(LwcElement) { ? 'rounded-lg gap-2 justify-center items-center' : ''}" style="${this._connected && !iconOnly - ? `background: linear-gradient(180deg, #fff6 0%, #fff0 100%), linear-gradient(180deg, ${this.colorSecondary} 0%, ${this.colorSecondary} 100%);` + ? `background: linear-gradient(180deg, #fff6 0%, #fff0 100%), linear-gradient(180deg, ${color( + 'bg-secondary' + )}, ${color('bg-secondary')} 100%)` : ''}" @click=${this._onClick} > - ${this._connected - ? html`
` - : html``} + ${this._connected ? innerBorder() : null} ${this._connected && !iconOnly && this._balance !== undefined ? html`${satIcon}${this._balance}` - : html``} + : null} ${this._modalOpen ? html`` - : html``} + : null} `; } diff --git a/src/components/lwc-connector-list.ts b/src/components/lwc-connector-list.ts index caf0b27..0c7753c 100644 --- a/src/components/lwc-connector-list.ts +++ b/src/components/lwc-connector-list.ts @@ -12,7 +12,7 @@ import './connectors/lwc-nwc-connector.js'; * @csspart connector-list */ @customElement('lwc-connector-list') -export class LwcConnectorList extends withTwind(LwcElement) { +export class LwcConnectorList extends withTwind()(LwcElement) { override render() { return html`
${window.webln ? html`` - : html``} + : null}
`; diff --git a/src/components/lwc-element.ts b/src/components/lwc-element.ts index 4363230..afdb33f 100644 --- a/src/components/lwc-element.ts +++ b/src/components/lwc-element.ts @@ -1,6 +1,6 @@ import {LitElement, css} from 'lit'; import {loadFonts} from './utils/loadFonts'; -import {property, state} from 'lit/decorators.js'; +import {state} from 'lit/decorators.js'; import store from '../state/store'; /** @@ -21,32 +21,6 @@ export class LwcElement extends LitElement { @state() protected _balance: number | undefined = undefined; - // TODO: can these be passed to the twind config instead? - // TODO: handle dark mode - @property({ - attribute: 'color-gradient1', - type: String, - }) - colorGradient1 = '#2EA7FF'; - - @property({ - attribute: 'color-gradient2', - type: String, - }) - colorGradient2 = '#0045B1'; - - @property({ - attribute: 'color-primary', - type: String, - }) - colorPrimary = '#FFFFFF'; - - @property({ - attribute: 'color-secondary', - type: String, - }) - colorSecondary = '#000000'; - constructor() { super(); loadFonts(); diff --git a/src/components/lwc-modal-content.ts b/src/components/lwc-modal-content.ts new file mode 100644 index 0000000..d59b308 --- /dev/null +++ b/src/components/lwc-modal-content.ts @@ -0,0 +1,94 @@ +import {html} from 'lit'; +import {customElement} from 'lit/decorators.js'; +import {LwcElement} from './lwc-element'; +import './lwc-connector-list.js'; +import {withTwind} from './twind/withTwind'; +import store from '../state/store'; +import {loadingIconSecondary} from './icons/loadingIcon'; +import {exitIcon} from './icons/exitIcon'; +import {color} from './css/colors'; +import {gradientText} from './css/gradientText'; + +// TODO: split up this component into disconnected and connected +@customElement('lwc-modal-content') +export class LwcModalContent extends withTwind()(LwcElement) { + override render() { + return html`
+ ${this._connecting + ? html`
${loadingIconSecondary}
` + : this._connected + ? html`

+ Hello, + + ${this._alias || 'Anon'} + +

+ + Balance + +

+ ${this._balance || 0} sats +

+ +
+ + Connected through ${this._connectorName} + + ` + : html` +

+ How would you like to connect? +

+ + + `} + `; + } + + private _handleDisconnect() { + store.getState().disconnect(); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'lwc-modal-content': LwcModalContent; + } +} diff --git a/src/components/lwc-modal.ts b/src/components/lwc-modal.ts index 2e85fee..aad698c 100644 --- a/src/components/lwc-modal.ts +++ b/src/components/lwc-modal.ts @@ -1,42 +1,16 @@ import {html} from 'lit'; import {customElement, property, state} from 'lit/decorators.js'; import {LwcElement} from './lwc-element'; -import {crossIcon} from './icons/crossIcon'; -import './lwc-connector-list.js'; -import {withTwindExtended} from './twind/withTwind'; +import './lwc-modal-content.js'; import store from '../state/store'; import {dispatchLwcEvent} from '../utils/dispatchLwcEvent'; +import {color} from './css/colors'; +import {crossIcon} from './icons/crossIcon'; import {bcLogo} from './icons/bcLogo'; -import {loadingIcon2} from './icons/loadingIcon'; -import {exitIcon} from './icons/exitIcon'; +import {withTwind} from './twind/withTwind'; @customElement('lwc-modal') -export class LwcModal extends withTwindExtended({ - animation: { - darken: 'darken 0.2s ease-out forwards', - lighten: 'lighten 0.2s ease-out forwards', - 'fade-in': 'fade-in 0.2s ease-out forwards', - 'fade-out': 'fade-out 0.2s ease-out forwards', - }, - keyframes: { - darken: { - '0%': {'background-color': '#0000'}, - '100%': {'background-color': '#000A'}, - }, - lighten: { - '0%': {'background-color': '#000A'}, - '100%': {'background-color': '#0000'}, - }, - 'fade-in': { - '0%': {opacity: 0}, - '100%': {opacity: 1}, - }, - 'fade-out': { - '0%': {opacity: 1}, - '100%': {opacity: 0}, - }, - }, -})(LwcElement) { +export class LwcModal extends withTwind()(LwcElement) { /** * Called when modal is closed */ @@ -69,16 +43,21 @@ export class LwcModal extends withTwindExtended({ dispatchLwcEvent('lwc:modalclosed'); } - // TODO: move buttons to a separate component so they can be displayed outside of a modal override render() { return html`
+
@@ -88,83 +67,11 @@ export class LwcModal extends withTwindExtended({
${bcLogo}
- ${this._connecting - ? html`
${loadingIcon2}
` - : this._connected - ? html`

- Hello, - - ${this._alias || 'Anon'} - -

- - Balance - -

- ${this._balance || 0} sats -

- -
- - Connected through ${ - this._connectorName - } - - ` - : html` -

- How would you like to connect? -

- - - `} +
`; } - private _handleDisconnect() { - store.getState().disconnect(); - } - private _handleClose() { this._closing = true; setTimeout(() => this.onClose?.(), 750); diff --git a/src/components/templates/innerBorder.ts b/src/components/templates/innerBorder.ts new file mode 100644 index 0000000..9ca7922 --- /dev/null +++ b/src/components/templates/innerBorder.ts @@ -0,0 +1,9 @@ +import {html} from 'lit'; +import {color} from '../css/colors'; + +export function innerBorder() { + return html`
`; +} diff --git a/src/components/twind/withTwind.ts b/src/components/twind/withTwind.ts index 17c14c6..7563cc3 100644 --- a/src/components/twind/withTwind.ts +++ b/src/components/twind/withTwind.ts @@ -2,7 +2,7 @@ import {defineConfig} from '@twind/core'; import presetTailwind from '@twind/preset-tailwind'; import install from '@twind/with-web-components'; -export const withTwindExtended = (extend?: object) => +export const withTwindExtended = () => install( defineConfig({ theme: { @@ -10,11 +10,36 @@ export const withTwindExtended = (extend?: object) => sans: ['Inter', 'sans-serif'], mono: ['Roboto Mono', 'monospace'], }, - extend, + extend: { + animation: { + darken: 'darken 0.2s ease-out forwards', + lighten: 'lighten 0.2s ease-out forwards', + 'fade-in': 'fade-in 0.2s ease-out forwards', + 'fade-out': 'fade-out 0.2s ease-out forwards', + }, + keyframes: { + darken: { + '0%': {opacity: 0}, + '100%': {opacity: 0.5}, + }, + lighten: { + '0%': {opacity: 0.5}, + '100%': {opacity: 0}, + }, + 'fade-in': { + '0%': {opacity: 0}, + '100%': {opacity: 1}, + }, + 'fade-out': { + '0%': {opacity: 1}, + '100%': {opacity: 0}, + }, + }, + }, }, presets: [presetTailwind({})], hash: false, }) ); -export const withTwind = withTwindExtended(); +export const withTwind = () => withTwindExtended(); diff --git a/src/connectors/Connector.ts b/src/connectors/Connector.ts index ca7096f..f5c0646 100644 --- a/src/connectors/Connector.ts +++ b/src/connectors/Connector.ts @@ -1,4 +1,3 @@ -import store from '../state/store'; import {ConnectorConfig} from '../types/ConnectorConfig'; export abstract class Connector { @@ -13,34 +12,31 @@ export abstract class Connector { throw new Error('window.webln does not exist'); } await window.webln.enable(); - await this.loadAlias(); - await this.loadBalance(); } - async loadBalance() { + async getBalance() { try { - // FIXME: typings - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const balanceResponse = await (window.webln as any).getBalance(); - if (balanceResponse.balance !== undefined) { - store.getState().setBalance(balanceResponse.balance); + if (!window.webln) { + throw new Error('webln not found'); } + const balanceResponse = await window.webln.getBalance?.(); + return balanceResponse?.balance; } catch (error) { console.error('Failed to get balance', error); } + return undefined; } - async loadAlias() { + async getAlias() { try { if (!window.webln) { throw new Error('webln not found'); } const info = await window.webln.getInfo(); - if (info.node.alias) { - store.getState().setAlias(info.node.alias); - } + return info.node.alias; } catch (error) { console.error('Failed to get alias', error); + return undefined; } } } diff --git a/src/state/store.ts b/src/state/store.ts index aac087d..b9cd9df 100644 --- a/src/state/store.ts +++ b/src/state/store.ts @@ -1,8 +1,8 @@ import {createStore} from 'zustand/vanilla'; -import {Connector} from '../connectors/Connector'; import {ConnectorConfig} from '../types/ConnectorConfig'; import {connectors} from '../connectors'; import {dispatchLwcEvent} from '../utils/dispatchLwcEvent'; +import {Connector} from '../connectors/Connector'; interface PrivateStore { readonly connector: Connector | undefined; @@ -49,11 +49,15 @@ const store = createStore((set) => ({ try { const connector = new connectors[config.connectorType](config); await connector.init(); + const balance = await connector.getBalance(); + const alias = await connector.getAlias(); privateStore.getState().setConfig(config); privateStore.getState().setConnector(connector); set({ connected: true, connecting: false, + balance, + alias, connectorName: config.connectorName, }); dispatchLwcEvent('lwc:connected'); diff --git a/website/index.html b/website/index.html index 4c92bfe..22315f6 100644 --- a/website/index.html +++ b/website/index.html @@ -2,7 +2,7 @@ - + Bitcoin Connect diff --git a/website/package.json b/website/package.json index 389e5fb..0a018d3 100644 --- a/website/package.json +++ b/website/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@getalby/lightning-wallet-connect": "^1.0.7", + "@getalby/lightning-wallet-connect": "^1.0.13", "@heroicons/react": "^2.0.18", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/website/public/bitcoin-connect.svg b/website/public/bitcoin-connect.svg new file mode 100644 index 0000000..5be6cf0 --- /dev/null +++ b/website/public/bitcoin-connect.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/public/vite.svg b/website/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/website/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/src/App.tsx b/website/src/App.tsx index b29f152..1b908eb 100644 --- a/website/src/App.tsx +++ b/website/src/App.tsx @@ -7,6 +7,7 @@ import phoneImageUrl from './assets/phone.png'; import zappyBirdImageUrl from './assets/zappy-bird.png'; import {ShowcaseCard} from './components/ShowcaseCard'; import React from 'react'; +import {DarkModeToggle} from './components/DarkModeToggle'; function App() { const isDarkMode = useAppStore((store) => store.isDarkMode); @@ -124,7 +125,8 @@ function App() {
- {[0, 1].map((index) => ( + + {[...new Array(4)].map((_, index) => (
setThemeIndex(index)} @@ -133,7 +135,7 @@ function App() { }`} style={{ background: - 'linear-gradient(180deg, var(--lwc-color-gradient-1) 0%, var(--lwc-color-gradient-2) 100%)', + 'linear-gradient(180deg, var(--lwc-color-primary) 0%, var(--lwc-color-secondary) 100%)', }} />
@@ -161,6 +163,17 @@ function App() { />
+

+ Supported Wallets +

+
+

Alby Extension

+

Alby NWC

+

Alby NWC (Umbrel)

+

NWC (Generic)

+

WebLN Browser Extension (Generic)

+
+

Bitcoin ipsum dolor sit amet. Public key soft fork fee market electronic cash Satoshi Nakamoto blockchain, block height, space diff --git a/website/src/components/DarkModeToggle.tsx b/website/src/components/DarkModeToggle.tsx new file mode 100644 index 0000000..ade3b1d --- /dev/null +++ b/website/src/components/DarkModeToggle.tsx @@ -0,0 +1,18 @@ +import {useAppStore} from '../AppStore'; +import {SunIcon, MoonIcon} from '@heroicons/react/24/solid'; + +export function DarkModeToggle() { + const store = useAppStore(); + return ( + + ); +} diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx index 62e2460..9338c29 100644 --- a/website/src/components/Header.tsx +++ b/website/src/components/Header.tsx @@ -1,11 +1,8 @@ import '@getalby/lightning-wallet-connect'; -import {useAppStore} from '../AppStore'; import {BCLogo} from '../icons/BCLogo'; -import {SunIcon, MoonIcon} from '@heroicons/react/24/solid'; +import {DarkModeToggle} from './DarkModeToggle'; export function Header() { - const store = useAppStore(); - return (

@@ -15,16 +12,7 @@ export function Header() {
{/* @ts-ignore */} - +
); diff --git a/website/src/index.css b/website/src/index.css index 1e42570..b1255dd 100644 --- a/website/src/index.css +++ b/website/src/index.css @@ -3,24 +3,52 @@ @tailwind utilities; [data-theme='dark'] { - --lwc-color-gradient-1: #2ea7ff; - --lwc-color-gradient-2: #0045b1; - --lwc-color-primary: #fff; - --lwc-color-secondary: #000; - --lwc-color-tertiary: #404040; + --lwc-color-bg-primary: #222; + --lwc-color-bg-secondary: #000; + --lwc-color-text-primary: #000; + --lwc-color-text-secondary: #808080; +} + +[data-theme='dark'] .theme-2 { + --lwc-color-primary: #21ecc7; + --lwc-color-secondary: #21ecc7; + --lwc-color-tertiary: unset; + --lwc-color-bg-primary: black; + --lwc-color-bg-secondary: black; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: #f4f4f4; + --lwc-color-text-tertiary: white; } .theme-0 { - --lwc-color-gradient-1: #2ea7ff; - --lwc-color-gradient-2: #0045b1; - --lwc-color-primary: #fff; - --lwc-color-secondary: #000; - --lwc-color-tertiary: #404040; + --lwc-color-primary: #2ea7ff; + --lwc-color-secondary: #0045b1; } .theme-1 { - --lwc-color-gradient-1: #fada5e; - --lwc-color-gradient-2: #fada5e; - --lwc-color-primary: #000; - --lwc-color-secondary: rgb(245 245 245); - --lwc-color-tertiary: rgb(245 245 245); + --lwc-color-primary: #fada5e; + --lwc-color-secondary: #fada5e; + --lwc-color-bg-primary: #000; + --lwc-color-bg-secondary: #000; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: rgb(245 245 245); + --lwc-color-text-tertiary: white; +} +.theme-2 { + --lwc-color-tertiary: #21ecc7; + --lwc-color-primary: #10caa8; + --lwc-color-secondary: #10caa8; + --lwc-color-bg-primary: white; + --lwc-color-bg-secondary: black; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: #1a202c; + --lwc-color-text-tertiary: white; +} + +.theme-3 { + --lwc-color-primary: #ffc837; + --lwc-color-secondary: #ff8008; + --lwc-color-bg-primary: black; + --lwc-color-bg-secondary: black; + --lwc-color-text-primary: black; + --lwc-color-text-secondary: #ca9; } diff --git a/website/yarn.lock b/website/yarn.lock index 17f3559..0cd2c6c 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -154,10 +154,10 @@ resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d" integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og== -"@getalby/lightning-wallet-connect@^1.0.7": - version "1.0.7" - resolved "https://registry.yarnpkg.com/@getalby/lightning-wallet-connect/-/lightning-wallet-connect-1.0.7.tgz#279cc75e1fa37b283bcf351379e22b80227a861a" - integrity sha512-H5HaRQSlTNuunJ617HA3xanl8QH7qoqVYLDgRhKaFkABAqqElNuncq7xuoJavYEsttHiH7zM7iWRNzACEOQKWw== +"@getalby/lightning-wallet-connect@^1.0.13": + version "1.0.13" + resolved "https://registry.yarnpkg.com/@getalby/lightning-wallet-connect/-/lightning-wallet-connect-1.0.13.tgz#28f59232b8dc6c624ecc311857fa4704ed1c723a" + integrity sha512-RsPma/v2t+QyK5QX652AJGBYttfLbYN5J3rmzIq37Nek0WvUbQyi1lsfTpkELQrXzaoRWO80PgsnjLb6+/W10g== dependencies: "@getalby/sdk" "^2.2.3" lit "^2.2.4" diff --git a/yarn.lock b/yarn.lock index 79aa920..d0d0b4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2376,10 +2376,10 @@ portfinder "^1.0.32" source-map "^0.7.3" -"@webbtc/webln-types@^1.0.12": - version "1.0.12" - resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-1.0.12.tgz#ddb5f0dbaa0a853ef21a4f36a603199d43cc8682" - integrity sha512-uCsJt78RaW/UYDXwAjjs6aj7fiXyozwMknWvPROCaGMx+rXoPddtDjMIMbMFLvUJVQmnyzpqGkx/0jBIvVaVvA== +"@webbtc/webln-types@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-2.0.0.tgz#d0fae5d2bf253a77dccbd37b2c9752292b798686" + integrity sha512-tLYbKHDHUugArcw1nyAOelpMhno4FrCAcHiNm6Fzt4c9EqVbGpP9HSE9v4tSiWP+5oExecZ9cdWCAarDL/qoLw== "@webcomponents/webcomponentsjs@^2.6.0": version "2.8.0"