v12.15.0: improve "No Payment Option Found" screen

cypress/e2e/Payment/no-payment-options-found.js

@@ -77,8 +77,7 @@ describe('Payment Widget: no payment options found', () => {
         DePayWidgets.Payment({ ...defaultArguments, document })
         cy.get('.ReactShadowDOMOutsideContainer').shadow().find('.Card').contains('detected').click()
         cy.get('.ReactShadowDOMOutsideContainer').shadow().contains('h1', 'No Payment Option Found')
-        cy.get('.ReactShadowDOMOutsideContainer').shadow().contains('.Text', 'Please check if you have connected the correct wallet and top up if necessary.')
-        cy.get('.ReactShadowDOMOutsideContainer').shadow().contains('button', 'Check available payment options')
+        cy.get('.ReactShadowDOMOutsideContainer').shadow().contains('.Text', 'Please check if you have connected the correct wallet')
       })
     })
   })

dev.html

@@ -117,6 +117,45 @@ <h5 class="px-4">Payment</h5>
                         token: document.getElementById("paymentTokenInput").value,
                         receiver: document.getElementById("paymentReceiverInput").value
                       }],
+                      style: {
+                        colors: {
+                          primary: '#000000',
+                        }
+                      }
+                    });
+                  });
+                </script>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="d-block d-md-inline-block p-2 col-12 col-md-4">
+          <div class="px-0 py-4 rounded-lg bg-white border">
+            <div class="col px-0">
+              <div class="overflow-auto" style="height: 140px;">
+                <h5 class="px-4">Payment: World App on World Chain</h5>
+                <div class="row px-4">
+                </div>
+              </div>
+              <div class="px-4 pt-3">
+                <button class='btn btn-primary' id="payWorldAppButton">Try it</button>
+                <script>
+                  var button = document.getElementById("payWorldAppButton");
+                  window.eruda.init();
+                  button.addEventListener("click",function(e){
+                    DePayWidgets.Payment({
+                      accept: [{
+                        blockchain: 'worldchain',
+                        amount: 0.01,
+                        token: '0x79A02482A880bCE3F13e09Da970dC34db4CD24d1',
+                        receiver: '0x317D875cA3B9f8d14f960486C0d1D1913be74e90'
+                      }],
+                      wallets: {
+                        whitelist: [
+                          "World App"
+                        ]
+                      }
                     });
                   });
                 </script>

package.evm.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets-evm",
   "moduleName": "DePayWidgets",
-  "version": "12.14.5",
+  "version": "12.15.0",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "12.14.5",
+  "version": "12.15.0",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

package.solana.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets-solana",
   "moduleName": "DePayWidgets",
-  "version": "12.14.5",
+  "version": "12.15.0",
   "description": "Web3 Payments with any token. DePay simplifies and improves Web3 Payments with the power of DeFi. Accept any token with on-the-fly conversion.",
   "main": "./dist/umd/index.js",
   "module": "./dist/esm/index.js",

src/dialogs/NoPaymentOptionFoundDialog.jsx

@@ -1,13 +1,25 @@
+import addressEllipsis from '../helpers/addressEllipsis'
+import Blockchains from '@depay/web3-blockchains'
 import ClosableContext from '../contexts/ClosableContext'
+import ConfigurationContext from '../contexts/ConfigurationContext'
 import Dialog from '../components/Dialog'
 import QuestionsGraphic from '../graphics/questions'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
+import WalletContext from '../contexts/WalletContext'
 import { NavigateStackContext } from '@depay/react-dialog-stack'
 
 export default ()=> {
 
   const { navigate } = useContext(NavigateStackContext)
+  const { accept } = useContext(ConfigurationContext)
   const { close } = useContext(ClosableContext)
+  const { wallet } = useContext(WalletContext)
+  const [ walletAddress, setWalletAddress ] = useState()
+
+  useEffect(()=>{
+    wallet.account().then(setWalletAddress)
+  }, [wallet])
+
 
   return(
     <Dialog
@@ -23,13 +35,18 @@ export default ()=> {
           <h1 className="LineHeightL Text FontSizeL PaddingTopS FontWeightBold">No Payment Option Found</h1>
           <div className="Text PaddingTopS PaddingBottomS PaddingLeftM PaddingRightM">
             <strong className="FontSizeM">
-              Please check if you have connected the correct wallet and top up if necessary.
+              Correct wallet connected {addressEllipsis(walletAddress)}?
+            </strong>
+          </div>
+          <div className="Text PaddingTopXS PaddingBottomXS PaddingLeftM PaddingRightM">
+            <strong className="FontSizeM">
+              Please make sure you have cryptocurrencies on one of the following blockchains:
             </strong>
           </div>
-          <div className="PaddingBottomM">
-            <button onClick={()=>navigate('PaymentOptions')} className="Link FontSizeM" title="Check which payment options are available">
-              Check available payment options
-            </button>
+          <div className="Text PaddingTopXS PaddingBottomS PaddingLeftM PaddingRightM">
+            <span className="FontSizeS">
+              { [...new Set(accept.map((accept)=>accept.blockchain))].map((blockchain)=>Blockchains[blockchain].label).join(', ') }.
+            </span>
           </div>
         </div>
       }

src/helpers/allWallets.js

@@ -1519,16 +1519,6 @@ export default [
     "logo": "https://img1.depay.com/wallets/volt.jpg",
     "blockchains": [...supported.evm]
   },
-  {
-    "name": "Wirex Wallet",
-    "desktop": { "qr": "WalletConnectV2" },
-    "mobile": { 
-      "ios": { "native": "wirexwallet://", "universal": "https://wwallet.app.link", "connect": "WalletConnectV2", "qr": "WalletConnectV2" },
-      "android": { "native": "wirexwallet://", "universal": "https://wwallet.app.link", "connect": "WalletConnectV2", "qr": "WalletConnectV2" },
-    },
-    "logo": "https://img1.depay.com/wallets/wirex_wallet.jpg",
-    "blockchains": [...supported.evm]
-  },
   {
     "name": "Robinhood Wallet",
     "desktop": { "qr": "WalletConnectV2" },

src/providers/PaymentProvider.jsx

@@ -23,7 +23,6 @@ import InsufficientAmountOfTokensDialog from '../dialogs/InsufficientAmountOfTok
 import NavigateContext from '../contexts/NavigateContext'
 import NoPaymentOptionFoundDialog from '../dialogs/NoPaymentOptionFoundDialog'
 import PaymentContext from '../contexts/PaymentContext'
-import PaymentOptionsDialog from '../dialogs/PaymentOptionsDialog'
 import PaymentRoutingContext from '../contexts/PaymentRoutingContext'
 import PaymentTrackingContext from '../contexts/PaymentTrackingContext'
 import React, { useContext, useEffect, useState, useCallback } from 'react'
@@ -276,7 +275,6 @@ export default (props)=>{
         dialogs={{
           InsufficientAmountOfTokens: <InsufficientAmountOfTokensDialog assets={allRoutes.assets} accept={accept} account={account}/>,
           NoPaymentOptionFound: <NoPaymentOptionFoundDialog/>,
-          PaymentOptions: <PaymentOptionsDialog/>,
         }}
       />
     )

src/stacks/SaleStack.js

@@ -4,7 +4,6 @@ import ClosableContext from '../contexts/ClosableContext'
 import NavigateContext from '../contexts/NavigateContext'
 import NoPaymentOptionFoundDialog from '../dialogs/NoPaymentOptionFoundDialog'
 import PaymentFailedDialog from '../dialogs/PaymentFailedDialog'
-import PaymentOptionsDialog from '../dialogs/PaymentOptionsDialog'
 import React, { useContext } from 'react'
 import SaleOverviewDialog from '../dialogs/SaleOverviewDialog'
 import SaleRoutingContext from '../contexts/SaleRoutingContext'
@@ -30,7 +29,6 @@ export default (props)=>{
         ChangeAmount: <ChangeAmountDialog/>,
         ChangePayment: <ChangePaymentDialog/>,
         NoPaymentOptionFound: <NoPaymentOptionFoundDialog/>,
-        PaymentOptions: <PaymentOptionsDialog/>,
         PaymentFailed: <PaymentFailedDialog/>,
         WrongNetwork: <WrongNetworkDialog/>,
       }}