frontend: use postmessage to communicate with the iframe #3146
Conversation
thisconnect
force-pushed
the
frontend-btcdirect-postmessage
branch
2 times, most recently
from
76b35fd to
adbd456
Compare
| textContent: message, | ||
| }) | ||
| ); | ||
| } | ||
|
|
||
| })(); | ||
| </script> |
There was a problem hiding this comment.
this is the file we host on shiftcrypto.io and is already deployed bitboxapp.shiftcrypto.io/widgets/btcdirect/v1/fiat-to-coin.html
but in order for it to communicate with the react app we need the changes in this PR in btcdirect.tsx
thisconnect
force-pushed
the
frontend-btcdirect-postmessage
branch
from
adbd456 to
5375e85
Compare
|
temporary cherry-picked commit from AddressFromBackend branch |
Provide an endpoint to be called from the frontend. This endpoints returns the APIKey, the URL address and, if the action is "buy", the address.
The previous approach depended on the iframe having access to the parent context, but this wont work when the iframe is hosted on a different domain. Instead of relaxing webengine restrictions this change simply uses postMessage api to pass data from and to the iframe.
thisconnect
force-pushed
the
frontend-btcdirect-postmessage
branch
from
5375e85 to
1f645e8
Compare
|
@Beerosagos @bznein I changed to draft and cherry-picked the backend change from #3142 to test this in the qt app. The widget loads 🎉 let me know if you want to test both changes or if I should drop the commit again so this is ready for review (but can't be tested as it needs the backend change) |
| token: apiKey, | ||
| debug: mode === 'debug', | ||
| locale: window.frameElement?.dataset.locale || 'en-GB', | ||
| theme: window.frameElement?.dataset.theme || 'light', |
There was a problem hiding this comment.
TODO: take locale and theme from onMessage "configuration" / event.data
There was a problem hiding this comment.
rebased this branch without the backend commit and fixed "locale" and "theme" in #3152
|
|
||
| window.addEventListener('btcdirect-embeddable-fiat-to-coin-order-confirmed', (event) => { | ||
| console.log('btcdirect-embeddable-fiat-to-coin-order-confirmed', event); | ||
| // Handle the event |
There was a problem hiding this comment.
Here you could directly post a message to pass the order confirmation, maybe? And leave the TODO in the handler inside btcdirect.tsx. No strong opinion, tho
There was a problem hiding this comment.
I only tested once, this event is fired after the user clicked proceed to payment and not really useful this way, I'll just remove.
There was a problem hiding this comment.
removed in #3152
| const locale = i18n.resolvedLanguage ? localeMapping[i18n.resolvedLanguage] : 'en-GB'; | ||
|
|
||
| const onMessage = useCallback((event: MessageEvent) => { | ||
| // if (!isDevserver && event.origin !== 'https://shiftcrypto.io') { return; } |
| theme: isDarkMode ? 'dark' : 'light', | ||
| baseCurrency: getCoinCode(account.coinCode), | ||
| quoteCurrency: 'EUR', | ||
| mode: isTesting || debug ? 'debug' : 'production', |
There was a problem hiding this comment.
Is this correct? I didn't test it (no pun intended 😇 ) but I think that isTesting is true for testnet, but we could use mainnet on the sandbox too, right? Maybe this is the cause of the apikey error you mentioned here? #3142 (comment)
There was a problem hiding this comment.
as discussed in DM it would be great to align with the backend, so we need something like isProdservers in the frontend.
Alternative: maybethe backend could pass 'debug' or 'production' in another field in some existing api call.
|
closing in favor of #3152 |
The previous approach depended on the iframe having access to the parent context, but this wont work when the iframe is hosted on a different domain.
Instead of relaxing webengine restrictions this change simply uses postMessage api to pass data from and to the iframe.