-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend: integrate btc direct buy widget
This is the first step of the BTC Direct integration and includes the buy (fiat-to-coin) widget. The widget requires linking to a CSS and loading a script from BTC Direct as well as a few paramenters such as api-key. To keep intergrations consistent and have a clean separation between app and services, this commit includes a static page that can be iframed, as BTC Direct does not provide an iframe solution. Iframes have their own DOM and scoped CSS, so that our CSS cannot accidentally mess up BTC Directs styles. Currently data is only passed to the iframe via HTML attributes but when needed we can use postMessage to communicate back to the main app. Disclaimers etc have just been copied from BTC Direct OTC info and are currently placeholders, as the new disclaimers are not yet final.
- Loading branch information
1 parent
a3c724f
commit 6118f57
Showing
11 changed files
with
419 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| html, body { | ||
| font-family: sans-serif; | ||
| height: 100%; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .btcdirect-widget { | ||
| display: flex; | ||
| justify-content: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>BTC Direct - Buy</title> | ||
|
|
||
| <link href="./btcdirect.css" rel="stylesheet"> | ||
|
|
||
| <div class="btcdirect-widget"></div> | ||
| <script src="./polyfill.js"></script> | ||
|
|
||
| <script lang="js"> | ||
| ;(() => { | ||
| const { | ||
| address, | ||
| apiKey, | ||
| baseCurrency, | ||
| mode, | ||
| quoteCurrency, | ||
| } = window.frameElement?.dataset; | ||
|
|
||
| if (mode === 'debug') { | ||
| console.info(window.frameElement?.dataset); | ||
| } | ||
|
|
||
| if ( // this should never happen, but if it does we stop here | ||
| !address | ||
| || !baseCurrency | ||
| || !quoteCurrency | ||
| ) { | ||
| document.body.append( | ||
| Object.assign(document.createElement('h1'), { | ||
| style: 'color: red; padding: 1rem;', | ||
| textContent: `Unexpected error: | ||
| ${!address ? 'Address missing' : ''} | ||
| ${!baseCurrency ? 'BaseCurrency missing' : ''} | ||
| ${!quoteCurrency ? 'QuoteCurrency missing' : ''} | ||
| ` | ||
| }) | ||
| ); | ||
| return; | ||
| } | ||
|
|
||
| const currency = baseCurrency.toUpperCase(); | ||
|
|
||
| // add the btcdirect CSS | ||
| document.head.appendChild( | ||
| Object.assign(document.createElement('link'), { | ||
| href: ( | ||
| mode === 'production' | ||
| ? 'https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.css' | ||
| : 'https://cdn-sandbox.btcdirect.eu/fiat-to-coin/fiat-to-coin.css' | ||
| ), | ||
| rel: 'stylesheet', | ||
| }) | ||
| ); | ||
|
|
||
| // add the btcdirect script | ||
| (function (btc, d, i, r, e, c, t) { | ||
| btc[r] = btc[r] || function () { | ||
| (btc[r].q = btc[r].q || []).push(arguments) | ||
| }; | ||
| c = d.createElement(i); | ||
| c.id = r; c.src = e; c.async = true; | ||
| c.type = 'module'; c.dataset.btcdirect = ''; | ||
| t = d.getElementsByTagName(i)[0]; | ||
| t.parentNode.insertBefore(c, t); | ||
| })(window, document, 'script', 'btcdirect', | ||
| mode === 'production' | ||
| ? 'https://cdn.btcdirect.eu/fiat-to-coin/fiat-to-coin.js' | ||
| : 'https://cdn-sandbox.btcdirect.eu/fiat-to-coin/fiat-to-coin.js' | ||
| ); | ||
|
|
||
| btcdirect('init', { | ||
| token: apiKey, | ||
| debug: mode === 'debug', | ||
| locale: window.frameElement?.dataset.locale || 'en-US', | ||
| theme: window.frameElement?.dataset.theme || 'light', | ||
| }); | ||
|
|
||
| // fiat to coin order | ||
| btcdirect('wallet-addresses', { | ||
| addresses: { | ||
| address, | ||
| currency, | ||
| id: 'BitBox', | ||
| walletName: 'BitBox' | ||
| } | ||
| }); | ||
| // Note that the wallet addresses that are provided affect the cryptocurrencies that can be selected. | ||
| // So if only one address for Bitcoin is provided, the only option to select in the “Choose a coin”-section will be Bitcoin. | ||
| // When providing addresses for multiple cryptocurrencies, the available cryptocurrencies will be selectable. | ||
| // When using the sandbox environment (https://cdn-sandbox.btcdirect.eu) all provided wallet addresses need to be testnet wallet addresses | ||
|
|
||
| btcdirect('set-parameters', | ||
| mode === 'production' ? { | ||
| baseCurrency: currency, | ||
| fixedCurrency: true, | ||
| quoteCurrency, | ||
| // paymentMethod: any of 'bancontact', 'bankTransfer', 'creditCard', 'giropay', 'iDeal', 'sofort', 'applepay' | ||
| showWalletAddress: false, | ||
| } : { | ||
| baseCurrency: currency, | ||
| fixedCurrency: true, | ||
| paymentMethod: 'sofort', // sandbox currently only supports sofort payment method | ||
| quoteCurrency, | ||
| showWalletAddress: false, | ||
| } | ||
| ); | ||
|
|
||
| window.addEventListener('btcdirect-embeddable-fiat-to-coin-order-confirmed', (event) => { | ||
| consoel.log('btcdirect-embeddable-fiat-to-coin-order-confirmed', event); | ||
| // Handle the event | ||
| // Note that the sent information from the widget is found inside event.detail | ||
| }); | ||
|
|
||
| })(); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| if (!crypto.randomUUID) { | ||
| crypto.randomUUID = function () { | ||
| return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => | ||
| (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16) | ||
| ); | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.