Skip to content

Commit

Permalink
fix: broken custom payment with Bidali (#6383)
Browse files Browse the repository at this point in the history
### Description

This fixes the custom payment integration with Bidali that was broken by
#5692
Because it renamed `window.valora` to `window.walletApp`.

Note: it would be nice to make this Bidali payment flow work multichain
too. Right now it's only for the Celo network.

### Test plan

**Before**


https://github.com/user-attachments/assets/f2d0946a-376e-4b2b-b029-d25e5659ef74

It's not showing the custom payment integration. Only WalletConnect or
the QR code (which is not really usable as is in the mobile-to-mobile
flow).
Note: the payment QR code causes an incorrect conversion, but that's
another story, we'll tackle that separately.

**After**


https://github.com/user-attachments/assets/abe723c9-0a33-4737-81ac-de1834ab02b9

It's showing the custom payment integration "Pay with Valora".

### Related issues

- Part of RET-1292

### Backwards compatibility

Yes

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [x] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)
  • Loading branch information
jeanregisser authored Dec 18, 2024
1 parent f0fad04 commit 1421494
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 9 deletions.
10 changes: 5 additions & 5 deletions src/fiatExchanges/BidaliScreen.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@ const mockScreenProps = getMockStackScreenProps(Screens.BidaliScreen, {

declare global {
interface Window {
walletApp: any
valora: any
}
}

describe(BidaliScreen, () => {
beforeEach(() => {
// Reset injected JS effect
window.walletApp = undefined
window.valora = undefined
})

it('renders correctly when no phone number is provided', () => {
Expand Down Expand Up @@ -51,7 +51,7 @@ describe(BidaliScreen, () => {
expect(webView).toBeDefined()
// eslint-disable-next-line no-eval
expect(eval(webView.props.injectedJavaScriptBeforeContentLoaded)).toBe(true)
expect(window.walletApp).toMatchInlineSnapshot(`
expect(window.valora).toMatchInlineSnapshot(`
{
"balances": {
"CEUR": "5",
Expand Down Expand Up @@ -91,7 +91,7 @@ describe(BidaliScreen, () => {
expect(webView).toBeDefined()
// eslint-disable-next-line no-eval
expect(eval(webView.props.injectedJavaScriptBeforeContentLoaded)).toBe(true)
expect(window.walletApp).toMatchInlineSnapshot(`
expect(window.valora).toMatchInlineSnapshot(`
{
"balances": {
"CEUR": "5",
Expand Down Expand Up @@ -136,7 +136,7 @@ describe(BidaliScreen, () => {
// eslint-disable-next-line no-eval
expect(eval(webView.props.injectedJavaScriptBeforeContentLoaded)).toBe(true)
// `paymentCurrency` is CEUR here because it has the highest balance in the local currency
expect(window.walletApp).toMatchInlineSnapshot(`
expect(window.valora).toMatchInlineSnapshot(`
{
"balances": {
"CEUR": "9",
Expand Down
9 changes: 5 additions & 4 deletions src/fiatExchanges/BidaliScreen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,9 @@ function useInitialJavaScript(
// When a payment request is needed, Bidali calls the provided `onPaymentRequest` method.
// When a new url needs to be open (currently for FAQ, Terms of Service), `openUrl` is called by Bidali.
// See also the comment in the `onMessage` handler
// IMPORTANT: DO NOT RENAME window.valora to anything else, it is used by Bidali for the custom integration.
setInitialJavaScript(`
window.walletApp = {
window.valora = {
paymentCurrency: "${currency.toUpperCase()}",
phoneNumber: ${JSON.stringify(e164PhoneNumber)},
balances: ${jsonBalances},
Expand Down Expand Up @@ -84,10 +85,10 @@ function BidaliScreen({ route, navigation }: Props) {
// These 2 callbacks needs to be called to notify Bidali of the status of the payment request
// so it can update the WebView accordingly.
const onPaymentSent = () => {
webViewRef.current?.injectJavaScript(`window.walletApp.paymentSent();`)
webViewRef.current?.injectJavaScript(`window.valora.paymentSent();`)
}
const onCancelled = () => {
webViewRef.current?.injectJavaScript(`window.walletApp.paymentCancelled();`)
webViewRef.current?.injectJavaScript(`window.valora.paymentCancelled();`)
}
dispatch(
bidaliPaymentRequested(
Expand Down Expand Up @@ -135,7 +136,7 @@ function BidaliScreen({ route, navigation }: Props) {
// Update balances when they change
useEffect(() => {
webViewRef.current?.injectJavaScript(`
window.walletApp.balances = ${jsonBalances}
window.valora.balances = ${jsonBalances};
`)
}, [jsonBalances])

Expand Down

0 comments on commit 1421494

Please sign in to comment.