diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js new file mode 100644 index 0000000000..b2498101c2 Binary files /dev/null and b/app/soapbox/features/crypto_donate/components/crypto_address.js differ diff --git a/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js new file mode 100644 index 0000000000..de5971d365 Binary files /dev/null and b/app/soapbox/features/crypto_donate/components/detailed_crypto_address.js differ diff --git a/app/soapbox/features/crypto_donate/components/site_wallet.js b/app/soapbox/features/crypto_donate/components/site_wallet.js new file mode 100644 index 0000000000..3e5d30bc55 Binary files /dev/null and b/app/soapbox/features/crypto_donate/components/site_wallet.js differ diff --git a/app/soapbox/features/crypto_donate/index.js b/app/soapbox/features/crypto_donate/index.js new file mode 100644 index 0000000000..a06652ffef Binary files /dev/null and b/app/soapbox/features/crypto_donate/index.js differ diff --git a/app/soapbox/features/crypto_donate/utils/block_explorer.js b/app/soapbox/features/crypto_donate/utils/block_explorer.js new file mode 100644 index 0000000000..0929250bfb Binary files /dev/null and b/app/soapbox/features/crypto_donate/utils/block_explorer.js differ diff --git a/app/soapbox/features/crypto_donate/utils/block_explorers.json b/app/soapbox/features/crypto_donate/utils/block_explorers.json new file mode 100644 index 0000000000..624cd5026e --- /dev/null +++ b/app/soapbox/features/crypto_donate/utils/block_explorers.json @@ -0,0 +1,8 @@ +{ + "bch": "https://explorer.bitcoin.com/bch/address/{address}", + "btc": "https://explorer.bitcoin.com/btc/address/{address}", + "doge": "https://dogechain.info/address/{address}", + "eth": "https://etherscan.io/address/{address}", + "ubq": "https://ubiqscan.io/address/{address}", + "xmr": "https://monerohash.com/explorer/search?value={address}" +} diff --git a/app/soapbox/features/crypto_donate/utils/coin_db.js b/app/soapbox/features/crypto_donate/utils/coin_db.js new file mode 100644 index 0000000000..33c566cdbd Binary files /dev/null and b/app/soapbox/features/crypto_donate/utils/coin_db.js differ diff --git a/app/soapbox/features/crypto_donate/utils/coin_icons.js b/app/soapbox/features/crypto_donate/utils/coin_icons.js new file mode 100644 index 0000000000..2c0376bfa5 Binary files /dev/null and b/app/soapbox/features/crypto_donate/utils/coin_icons.js differ diff --git a/app/soapbox/features/crypto_donate/utils/manifest_map.js b/app/soapbox/features/crypto_donate/utils/manifest_map.js new file mode 100644 index 0000000000..bab27695fc Binary files /dev/null and b/app/soapbox/features/crypto_donate/utils/manifest_map.js differ diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js index d73e428dc0..0ad1f361dc 100644 Binary files a/app/soapbox/features/forms/index.js and b/app/soapbox/features/forms/index.js differ diff --git a/app/soapbox/features/ui/components/crypto_donate_modal.js b/app/soapbox/features/ui/components/crypto_donate_modal.js new file mode 100644 index 0000000000..90ae87842f Binary files /dev/null and b/app/soapbox/features/ui/components/crypto_donate_modal.js differ diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index b6cfa57372..b3f7f8681e 100644 Binary files a/app/soapbox/features/ui/components/modal_root.js and b/app/soapbox/features/ui/components/modal_root.js differ diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js index 4af0d84c43..cb8a7ed760 100644 Binary files a/app/soapbox/features/ui/components/profile_info_panel.js and b/app/soapbox/features/ui/components/profile_info_panel.js differ diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 20b2ecf581..9595bf2a5a 100644 Binary files a/app/soapbox/features/ui/index.js and b/app/soapbox/features/ui/index.js differ diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index cc55669372..dc06d16777 100644 Binary files a/app/soapbox/features/ui/util/async-components.js and b/app/soapbox/features/ui/util/async-components.js differ diff --git a/app/styles/application.scss b/app/styles/application.scss index 366b7fcae7..457a4faf4e 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -81,6 +81,7 @@ @import 'components/server-info'; @import 'components/admin'; @import 'components/backups'; +@import 'components/crypto-donate'; // Holiday @import 'holiday/halloween'; diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss new file mode 100644 index 0000000000..10289e976c --- /dev/null +++ b/app/styles/components/crypto-donate.scss @@ -0,0 +1,69 @@ +.crypto-address { + padding: 20px; + display: flex; + flex-direction: column; + + &__head { + display: flex; + align-items: center; + margin-bottom: 6px; + } + + &__title { + font-weight: bold; + } + + &__icon { + display: flex; + align-items: flex-start; + justify-content: center; + width: 24px; + margin-right: 10px; + + img { + width: 100%; + } + } + + &__actions { + margin-left: auto; + + a { + color: var(--primary-text-color--faint); + margin-left: 10px; + } + } + + &__note { + margin-bottom: 10px; + } + + &__qrcode { + margin-bottom: 12px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + } + + &__address { + margin-top: auto; + } +} + +.site-wallet { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + +.crypto-donate-modal { + background: var(--foreground-color); + border-radius: 8px; + padding-bottom: 13px; +} + +.profile-info-panel-content__fields { + .crypto-address { + padding: 10px 0; + } +} diff --git a/app/styles/forms.scss b/app/styles/forms.scss index ce782ac7d6..4367a8efc8 100644 --- a/app/styles/forms.scss +++ b/app/styles/forms.scss @@ -788,3 +788,23 @@ code { } } } + +.copyable-input { + display: flex; + align-items: center; + justify-content: center; + + input { + flex: 1; + font-size: 14px !important; + border-radius: 4px 0 0 4px !important; + } + + button { + width: auto; + font-size: 14px; + margin: 0; + padding-bottom: 9px; + border-radius: 0 4px 4px 0; + } +} diff --git a/package.json b/package.json index a184ce62ad..707c474be7 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "classnames": "^2.2.5", "compression-webpack-plugin": "^6.0.2", "copy-webpack-plugin": "6.4.0", + "cryptocurrency-icons": "^0.17.2", "css-loader": "^4.3.0", "cssnano": "^4.1.10", "detect-passive-events": "^2.0.0", diff --git a/yarn.lock b/yarn.lock index 91c283bcc1..b4cce27af0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3866,6 +3866,11 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" +cryptocurrency-icons@^0.17.2: + version "0.17.2" + resolved "https://registry.yarnpkg.com/cryptocurrency-icons/-/cryptocurrency-icons-0.17.2.tgz#25811b450d8698e7985bc91005d89555f13e6686" + integrity sha512-301lellubLNhxkySIBNNG3VD05rWfMR+CFgo9LoLfuNybG2OLy0mpWduxv65WZkJpLl9hhpaVAxCV5SYbG5o9A== + css-color-names@0.0.4, css-color-names@^0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"