diff --git a/package.json b/package.json index dcee5f4..338f3d4 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "astro-icon": "^0.8.0", "autoprefixer": "^10.4.14", "dynamic-react-grid": "^0.2.0", + "qrcode": "^1.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.62.1", diff --git a/src/assets/patreon-logo.png b/src/assets/patreon-logo.png deleted file mode 100644 index 3d6ede9..0000000 Binary files a/src/assets/patreon-logo.png and /dev/null differ diff --git a/src/assets/paypal-logo.png b/src/assets/paypal-logo.png deleted file mode 100644 index 25273bb..0000000 Binary files a/src/assets/paypal-logo.png and /dev/null differ diff --git a/src/components/Donate/Methods/Methods.astro b/src/components/Donate/Methods/Methods.astro index 2726247..be2543b 100644 --- a/src/components/Donate/Methods/Methods.astro +++ b/src/components/Donate/Methods/Methods.astro @@ -1,150 +1,60 @@ --- import './Methods.scss'; -import paypalLogo from '../../../../src/assets/paypal-logo.png'; -import patreonLogo from '../../../../src/assets/patreon-logo.png'; +import QRCode from 'qrcode'; + +const currencies = []; + +const addCurrency = async (id, title, address) => { + currencies.push({ + id: id, + title: title, + address: address, + svgLogo: await import('./icons/' + id + '.svg?raw'), + qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }), + qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 }) + }); +}; + +await addCurrency('bitcoin', 'Bitcoin (BTC)', 'bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a'); +await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq'); +await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468'); +await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468'); +await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu'); +await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6'); +await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23'); +await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h'); +await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy'); +await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z'); +await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y'); +await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE'); ---

Donate Cryptocurrency

- -
+ + + \ No newline at end of file diff --git a/src/components/Donate/Methods/Methods.scss b/src/components/Donate/Methods/Methods.scss index 597df55..d714ae7 100644 --- a/src/components/Donate/Methods/Methods.scss +++ b/src/components/Donate/Methods/Methods.scss @@ -29,7 +29,7 @@ > div { display: flex; flex-direction: column; - padding: 4em 4em 2em; + padding: 4em 4em 1em; background: $color-blue-charcoal; border: 0.1em solid transparent; border-radius: 1em; @@ -39,30 +39,95 @@ border-color: $color-aquamarine; } - > div { + > div:first-child { display: flex; align-items: center; gap: 2em; - margin-bottom: 2em; + margin-bottom: 3em; + + svg { + flex-shrink: 0; + @include fluid-max-width-height(3.4375rem, 3.4375rem); + } + + h3 { + flex-grow: 1; + font-family: $font-family-jetbrains-mono; + @include fluid-font-size(1.4375rem); + } + + img { + @include fluid-width-height(3.4375rem, 3.4375rem); + image-rendering: pixelated; + cursor: zoom-in; + } } } - img, svg { - @include fluid-max-width-height(3.4375rem, 3.4375rem); - } - - h3 { - flex-grow: 1; - font-family: $font-family-jetbrains-mono; - @include fluid-font-size(1.4375rem); - } - .address { + display: flex; + margin-bottom: 3em; color: $color-cloud; - margin-bottom: 1em; - word-break: break-all; - user-select: all; - @include fluid-font-size(1.3125rem); + + div { + order: 1; + position: relative; + @include fluid-font-size(1.3125rem); + word-break: break-all; + user-select: all; + } + + button { + order: 2; + flex-shrink: 0; + @include fluid-width-height(1.875rem, 1.875rem); + @include fluid-margin-lr-rem(0.78125rem); + mask-image: url('data:image/svg+xml,'); + background: $color-cloud; + transition: background $transition-duration; + + &:hover { + background: $color-white; + } + + &.success { + mask-image: url('data:image/svg+xml,'); + background: $color-aquamarine; + } + } + + button:hover + div, button.success + div { + &::before { + content: ""; + position: absolute; + inset: -0.5em; + padding: 0.5em; + background: $color-blue-charcoal; + animation: $transition-duration overlay-opacity forwards; + } + + &::after { + content: "Copy to Clipboard"; + position: absolute; + top: 0; + right: -0.5em; + padding: 0 0.5em; + background: $color-blue-charcoal; + text-align: center; + white-space: nowrap; + color: $color-white; + border-radius: 0.5em 0 0 0.5em; + animation: $transition-duration overlay-opacity forwards; + transition: color $transition-duration; + } + } + + button.success + div { + &::after { + content: "Copied to Clipboard"; + color: $color-aquamarine; + } + } } } @@ -109,15 +174,31 @@ border-color: #f26822; } + #donate-handshake:hover { + border-color: #fff; + } + + #donate-cosmos:hover { + border-color: #6f7390; + } + + #donate-secret:hover { + border-color: #fff; + } + + #donate-algorand:hover { + border-color: #fff; + } + #donate-paypal { &:hover { - border-color: #019be1; + border-color: #0070e0; } .btn-main { - color: $color-white; - background: #019be1; - border-color: #019be1; + color: #fff; + background: #0070e0; + border-color: #0070e0; &:hover { background: inherit; @@ -131,7 +212,7 @@ } .btn-main { - color: $color-white; + color: #fff; background: #ff424d; border-color: #ff424d; @@ -140,4 +221,56 @@ } } } + + #donate-liberapay { + &:hover { + border-color: #f6c915; + } + + .btn-main { + color: #000; + background: #f6c915; + border-color: #f6c915; + + &:hover { + color: inherit; + background: inherit; + } + } + } + + #donate-github { + &:hover { + border-color: #fff; + } + + .btn-main { + color: #000; + background: #fff; + border-color: #fff; + + &:hover { + color: inherit; + background: inherit; + } + } + } +} + +#qr-dialog { + padding: 0; + + &::backdrop { + background: rgba($color-black, 0.85); + } +} + +@keyframes overlay-opacity { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.75; + } } diff --git a/src/components/Donate/Methods/icons/algorand.svg b/src/components/Donate/Methods/icons/algorand.svg new file mode 100644 index 0000000..4273af5 --- /dev/null +++ b/src/components/Donate/Methods/icons/algorand.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/bitcoin.svg b/src/components/Donate/Methods/icons/bitcoin.svg new file mode 100644 index 0000000..46595c3 --- /dev/null +++ b/src/components/Donate/Methods/icons/bitcoin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/cardano.svg b/src/components/Donate/Methods/icons/cardano.svg new file mode 100644 index 0000000..0baa777 --- /dev/null +++ b/src/components/Donate/Methods/icons/cardano.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/cosmos.svg b/src/components/Donate/Methods/icons/cosmos.svg new file mode 100644 index 0000000..6108d4f --- /dev/null +++ b/src/components/Donate/Methods/icons/cosmos.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/ethereum.svg b/src/components/Donate/Methods/icons/ethereum.svg new file mode 100644 index 0000000..3f0e216 --- /dev/null +++ b/src/components/Donate/Methods/icons/ethereum.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/handshake.svg b/src/components/Donate/Methods/icons/handshake.svg new file mode 100644 index 0000000..c11b041 --- /dev/null +++ b/src/components/Donate/Methods/icons/handshake.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/litecoin.svg b/src/components/Donate/Methods/icons/litecoin.svg new file mode 100644 index 0000000..749a3cd --- /dev/null +++ b/src/components/Donate/Methods/icons/litecoin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/monero.svg b/src/components/Donate/Methods/icons/monero.svg new file mode 100644 index 0000000..2d2587d --- /dev/null +++ b/src/components/Donate/Methods/icons/monero.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/polygon.svg b/src/components/Donate/Methods/icons/polygon.svg new file mode 100644 index 0000000..6f4f2e2 --- /dev/null +++ b/src/components/Donate/Methods/icons/polygon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/secret.svg b/src/components/Donate/Methods/icons/secret.svg new file mode 100644 index 0000000..b2279f1 --- /dev/null +++ b/src/components/Donate/Methods/icons/secret.svg @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/siacoin.svg b/src/components/Donate/Methods/icons/siacoin.svg new file mode 100644 index 0000000..b0bcbcc --- /dev/null +++ b/src/components/Donate/Methods/icons/siacoin.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/components/Donate/Methods/icons/solana.svg b/src/components/Donate/Methods/icons/solana.svg new file mode 100644 index 0000000..fc6b7da --- /dev/null +++ b/src/components/Donate/Methods/icons/solana.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Home/PoweredBy/PoweredBy.astro b/src/components/Home/PoweredBy/PoweredBy.astro index 41de058..51720af 100644 --- a/src/components/Home/PoweredBy/PoweredBy.astro +++ b/src/components/Home/PoweredBy/PoweredBy.astro @@ -13,8 +13,8 @@ import './PoweredBy.scss';