Worldchain (#126)

* upgrade dependencies

* build

* update demo

* wording

* update demo

* fix demo page

* add worldcoin-precompiled to dev+demo page

* update dependencies

* update dep

* fix import

* update web3-payments

* world app only demo

* fix dependencies

* update dependencies

* upgrade web3-payments

* upgrade dependencies

* update dependencies

* update dependencies

* upgrade depdendencies

* no approval required for World App

* fix web3-payments conversion (uniswapv3 router2 pull instead of push)

* fix links in worldapp

* fix empty links

* fix poweredBy rendering

* approved to paying

* update

* remove console.log

* fix tests

cypress/e2e/Select/token.js

@@ -137,7 +137,7 @@ describe('Select Widget: token', () => {
       })
     })
 
-    it('shows major tokens again if reseting search to empty', async()=> {
+    it('shows major tokens again if resetting search to empty', async()=> {
       let selectedToken
 
       cy.document().then(async (document)=>{

dev.html

@@ -16,16 +16,17 @@
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/react-dialog-stack@8"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/react-shadow-dom@5"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/js-verify-signature-web@3"></script>
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-blockchains@9.5.3"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-blockchains@9.6.7"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/[email protected]"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/[email protected]"></script>
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/react-token-image@5.0.2"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/react-token-image@5.1.0"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/coinbase-wallet-sdk@3"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/[email protected]"></script>
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/[email protected]"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/worldcoin-precompiled@0"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/[email protected]"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-assets@7"></script>
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-exchanges@13.8.6"></script>
-    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-payments@13.10.0"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-exchanges@13.11.0"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-payments@13.12.5"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/qr-code-styling@1"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/fuse.js@6"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/react-rangeslider@2/umd/rangeslider.js"></script>
@@ -77,6 +78,7 @@ <h5 class="px-4">Payment</h5>
                       <option value='fantom'>Fantom</option>
                       <option value='avalanche'>Avalanche</option>
                       <option value='gnosis'>Gnosis</option>
+                      <option value='worldchain'>Worldchain</option>
                     </select>
                   </div>
                   <div class="col col-4">

package.evm.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets-evm",
   "moduleName": "DePayWidgets",
-  "version": "12.13.2",
+  "version": "12.14.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",
@@ -23,18 +23,19 @@
   "license": "MIT",
   "dependencies": {
     "@depay/coinbase-wallet-sdk": "^3.8.4",
-    "@depay/local-currency": "^3.8.1",
+    "@depay/local-currency": "^3.8.2",
     "@depay/react-dialog-stack": "^8.1.1",
     "@depay/react-shadow-dom": "^5.0.5",
-    "@depay/react-token-image-evm": "^5.0.2",
+    "@depay/react-token-image-evm": "^5.1.0",
     "@depay/walletconnect-v2": "^2.12.2",
-    "@depay/web3-assets-evm": "^7.3.1",
-    "@depay/web3-blockchains": "^9.5.3",
+    "@depay/web3-assets-evm": "^7.4.0",
+    "@depay/web3-blockchains": "^9.6.7",
     "@depay/web3-client-evm": "^10.19.1",
-    "@depay/web3-exchanges-evm": "^13.8.6",
-    "@depay/web3-payments-evm": "^13.10.0",
+    "@depay/web3-exchanges-evm": "^13.11.0",
+    "@depay/web3-payments-evm": "^13.12.5",
     "@depay/web3-tokens-evm": "^10.4.3",
-    "@depay/web3-wallets-evm": "^17.2.2",
+    "@depay/web3-wallets-evm": "^17.5.0",
+    "@depay/worldcoin-precompiled": "^0.0.33",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "@uiw/copy-to-clipboard": "^1.0.14",
     "decimal.js": "^10.4.3",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "12.13.2",
+  "version": "12.14.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",
@@ -36,19 +36,20 @@
   "dependencies": {
     "@depay/coinbase-wallet-sdk": "^3.8.4",
     "@depay/js-verify-signature-web": "^3.0.0",
-    "@depay/local-currency": "^3.8.1",
+    "@depay/local-currency": "^3.8.2",
     "@depay/react-dialog-stack": "^8.1.1",
     "@depay/react-shadow-dom": "^5.0.5",
-    "@depay/react-token-image": "^5.0.2",
+    "@depay/react-token-image": "^5.1.0",
     "@depay/solana-web3.js": "^1.26.0",
     "@depay/walletconnect-v2": "^2.12.2",
-    "@depay/web3-assets": "^7.3.1",
-    "@depay/web3-blockchains": "^9.5.3",
+    "@depay/web3-assets": "^7.4.0",
+    "@depay/web3-blockchains": "^9.6.7",
     "@depay/web3-client": "^10.19.1",
-    "@depay/web3-exchanges": "^13.8.6",
-    "@depay/web3-payments": "^13.10.0",
+    "@depay/web3-exchanges": "^13.11.0",
+    "@depay/web3-payments": "^13.12.5",
     "@depay/web3-tokens": "^10.4.3",
-    "@depay/web3-wallets": "^17.2.2",
+    "@depay/web3-wallets": "^17.5.0",
+    "@depay/worldcoin-precompiled": "^0.0.33",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "@uiw/copy-to-clipboard": "^1.0.14",
     "decimal.js": "^10.4.3",
@@ -68,7 +69,7 @@
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
     "@cypress/webpack-preprocessor": "^6.0.1",
-    "@depay/web3-mock": "^14.17.0",
+    "@depay/web3-mock": "^14.19.1",
     "@peculiar/webcrypto": "^1.4.3",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^17.1.0",
@@ -106,7 +107,7 @@
     "rollup-plugin-serve": "^1.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "stream-browserify": "^3.0.0",
-    "typescript": "^5.0.2",
+    "typescript": "^5.1.0",
     "util": "0.10.0",
     "webpack": "^5.73.0"
   },

package.solana.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets-solana",
   "moduleName": "DePayWidgets",
-  "version": "12.13.2",
+  "version": "12.14.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",
@@ -23,19 +23,19 @@
   "license": "MIT",
   "dependencies": {
     "@depay/coinbase-wallet-sdk": "^3.8.4",
-    "@depay/local-currency": "^3.8.1",
+    "@depay/local-currency": "^3.8.2",
     "@depay/react-dialog-stack": "^8.1.1",
     "@depay/react-shadow-dom": "^5.0.5",
-    "@depay/react-token-image-solana": "^5.0.2",
+    "@depay/react-token-image-solana": "^5.1.0",
     "@depay/solana-web3.js": "^1.26.0",
     "@depay/walletconnect-v2": "^2.12.2",
-    "@depay/web3-assets-solana": "^7.3.1",
-    "@depay/web3-blockchains": "^9.5.3",
+    "@depay/web3-assets-solana": "^7.4.0",
+    "@depay/web3-blockchains": "^9.6.7",
     "@depay/web3-client-solana": "^10.19.1",
-    "@depay/web3-exchanges-solana": "^13.8.6",
-    "@depay/web3-payments-solana": "^13.10.0",
+    "@depay/web3-exchanges-solana": "^13.11.0",
+    "@depay/web3-payments-solana": "^13.12.5",
     "@depay/web3-tokens-solana": "^10.4.3",
-    "@depay/web3-wallets-solana": "^17.2.2",
+    "@depay/web3-wallets-solana": "^17.5.0",
     "@tanstack/react-virtual": "^3.0.0-beta.54",
     "@uiw/copy-to-clipboard": "^1.0.14",
     "decimal.js": "^10.4.3",

rollup.globals.js

@@ -28,6 +28,7 @@ export default {
   '@depay/web3-wallets': 'Web3Wallets',
   '@depay/web3-wallets-evm': 'Web3Wallets',
   '@depay/web3-wallets-solana': 'Web3Wallets',
+  '@depay/worldcoin-precompiled': 'WorldcoinPrecompiled',
   '@depay/solana-web3.js': 'SolanaWeb3js',
   '@tanstack/react-virtual': 'ReactVirtual',
   '@uiw/copy-to-clipboard': 'copyTextToClipboard',

src/Payment.jsx

@@ -76,7 +76,6 @@ let Payment = async ({
             <UpdatableProvider>
               <ClosableProvider unmount={ unmount } closable={ closable }>
                 <NavigateProvider>
-                  <PoweredBy/>
                   <SolanaPayProvider unmount={ unmount } document={ document } container={ container }>
                     <WalletProvider document={ document } container={ container } connected={ connected } unmount={ unmount }>
                       <ConversionRateProvider>
@@ -90,6 +89,7 @@ let Payment = async ({
                                         document={ document }
                                         container={ container }
                                       />
+                                      <PoweredBy/>
                                   </PaymentValueProvider>
                                 </PaymentProvider>
                               </PaymentTrackingProvider>

src/blockchains.js

@@ -1,7 +1,7 @@
 /*#if _EVM
 
-let supported = ['ethereum', 'bsc', 'polygon', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom']
-supported.evm = ['ethereum', 'bsc', 'polygon', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom']
+let supported = ['ethereum', 'bsc', 'polygon', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom', 'worldchain']
+supported.evm = ['ethereum', 'bsc', 'polygon', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom', 'worldchain']
 supported.svm = []
 supported.solana = []
 
@@ -14,8 +14,8 @@ supported.solana = ['solana']
 
 //#else */
 
-let supported = ['ethereum', 'bsc', 'polygon', 'solana', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom']
-supported.evm = ['ethereum', 'bsc', 'polygon', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom']
+let supported = ['ethereum', 'bsc', 'polygon', 'solana', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom', 'worldchain']
+supported.evm = ['ethereum', 'bsc', 'polygon', 'arbitrum', 'optimism', 'base', 'avalanche', 'gnosis', 'fantom', 'worldchain']
 supported.svm = ['solana']
 supported.solana = ['solana']
 

src/components/Footer.jsx

@@ -4,12 +4,14 @@ import Checkmark from '../components/Checkmark'
 import ClosableContext from '../contexts/ClosableContext'
 import DigitalWalletIcon from '../components/DigitalWalletIcon'
 import etaForConfirmations from '../helpers/etaForConfirmations'
+import link from '../helpers/link'
 import LoadingText from '../components/LoadingText'
 import PaymentContext from '../contexts/PaymentContext'
 import PaymentRoutingContext from '../contexts/PaymentRoutingContext'
 import PaymentTrackingContext from '../contexts/PaymentTrackingContext'
 import PaymentValueContext from '../contexts/PaymentValueContext'
 import React, { useContext, useState, useEffect } from 'react'
+import WalletContext from '../contexts/WalletContext'
 import { Currency } from '@depay/local-currency'
 import { ethers } from 'ethers'
 import { NavigateStackContext } from '@depay/react-dialog-stack'
@@ -27,6 +29,7 @@ export default ()=>{
   const { updatedRouteWithNewPrice, updateRouteWithNewPrice } = useContext(PaymentRoutingContext)
   const { navigate } = useContext(NavigateStackContext)
   const { close } = useContext(ClosableContext)
+  const { wallet } = useContext(WalletContext)
   const [ secondsLeft, setSecondsLeft ] = useState()
   const [ secondsLeftCountdown, setSecondsLeftCountdown ] = useState(0)
   const [ requiresApprovalReset, setRequiresApprovalReset ] = useState(false)
@@ -102,7 +105,7 @@ export default ()=>{
     } else if(release) {
       return(
         <div>
-          <a className="Card transparent small" title="DePay has validated the payment" href={ `https://status.depay.com/tx/${transaction.blockchain}/${transaction.id}` } target="_blank" rel="noopener noreferrer">
+          <a className="Card transparent small" title="DePay has validated the payment" href={ link({ url: `https://status.depay.com/tx/${transaction.blockchain}/${transaction.id}`, target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer">
             <div className="CardImage">
               <div className="TextCenter Opacity05">
                 <Checkmark className="small"/>
@@ -121,7 +124,7 @@ export default ()=>{
     } else {
       return(
         <div>
-          <a className="Card transparent small" title="DePay is validating the payment" href={ `https://status.depay.com/tx/${transaction.blockchain}/${transaction.id}` } target="_blank" rel="noopener noreferrer">
+          <a className="Card transparent small" title="DePay is validating the payment" href={ link({ url: `https://status.depay.com/tx/${transaction.blockchain}/${transaction.id}`, target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer">
             <div className="CardImage">
               <div className="TextCenter">
                 <div className="Loading Icon"></div>
@@ -156,7 +159,7 @@ export default ()=>{
             <div className="CardBody">
               <div className="CardBodyWrapper">
                 <div className="Opacity05">
-                  Confirm in your wallet (<a href="https://depay.com/docs/payments/verify" target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>verify</a>)
+                  Confirm in your wallet (<a href={ link({ url: "https://depay.com/docs/payments/verify", target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none' }}>verify</a>)
                 </div>
               </div>
             </div>
@@ -167,7 +170,7 @@ export default ()=>{
       return(
         <div className="PaddingBottomS">
           <div>
-            <a className="Card transparent small" title="Transaction has been confirmed by the network" href={ transaction?.url } target="_blank" rel="noopener noreferrer">
+            <a className="Card transparent small" title="Transaction has been confirmed by the network" href={ link({ url: transaction?.url, target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer">
               <div className="CardImage">
                 <div className="TextCenter Opacity05">
                   <Checkmark className="small"/>
@@ -210,7 +213,7 @@ export default ()=>{
     } else if (paymentState == 'resetting') {
       return(
         <div className="PaddingBottomXS">
-          <a className="ButtonPrimary" title="Resetting current approval - please wait" href={ resetApprovalTransaction?.url } target="_blank" rel="noopener noreferrer">
+          <a className="ButtonPrimary" title="Resetting current approval - please wait" href={ link({ url: resetApprovalTransaction?.url, target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer">
             <LoadingText>Resetting</LoadingText>
           </a>
         </div>
@@ -219,7 +222,7 @@ export default ()=>{
   }
 
   const approvalButton = ()=> {
-    if(payment.route == undefined || (!payment.route.approvalRequired || payment.route.directTransfer) || updatedRouteWithNewPrice) {
+    if(payment.route == undefined || (!payment.route.approvalRequired || payment.route.directTransfer) || updatedRouteWithNewPrice || wallet?.name === 'World App') {
       return(null)
     } else if(paymentValueLoss || requiresApprovalReset) {
       return(
@@ -240,7 +243,7 @@ export default ()=>{
     } else if (paymentState == 'approving') {
       return(
         <div className="PaddingBottomXS">
-          <a className="ButtonPrimary" title="Approving payment token - please wait" href={ approvalTransaction?.url } target="_blank" rel="noopener noreferrer">
+          <a className="ButtonPrimary" title="Approving payment token - please wait" href={ link({ url: approvalTransaction?.url, target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer">
             <LoadingText>Approving</LoadingText>
           </a>
         </div>
@@ -271,13 +274,14 @@ export default ()=>{
         </div>
       )
     } else if((paymentState == 'initialized' || paymentState == 'approving' || paymentState == 'resetting') && payment.route) {
+      const approvalRequired = payment.route.approvalRequired && !payment.route.directTransfer && wallet?.name != 'World App'
       return(
         <button 
           tabIndex={1}
           type="button"
-          className={["ButtonPrimary", (payment.route.approvalRequired && !payment.route.directTransfer ? 'disabled': '')].join(' ')}
+          className={["ButtonPrimary", (approvalRequired ? 'disabled': '')].join(' ')}
           onClick={()=>{
-            if(payment.route.approvalRequired && !payment.route.directTransfer) { return }
+            if(approvalRequired) { return }
             throttledPay()
           }}
         >
@@ -286,7 +290,7 @@ export default ()=>{
       )
     } else if (paymentState == 'paying') {
       return(
-        <a className="ButtonPrimary" title="Performing the payment - please wait" href={ transaction?.url } target="_blank" rel="noopener noreferrer">
+        <a className="ButtonPrimary" title="Performing the payment - please wait" href={ link({ url: transaction?.url, target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer">
           <LoadingText>Paying</LoadingText>
         </a>
       )

src/components/PoweredBy.jsx

@@ -1,9 +1,14 @@
-import React from 'react'
+import link from '../helpers/link'
+import React, { useContext, useEffect } from 'react'
+import WalletContext from '../contexts/WalletContext'
 
 export default ()=>{
+  const walletContext = useContext(WalletContext)
+  const wallet = walletContext ? walletContext.wallet : undefined
+
   return(
     <div className="PoweredByWrapper">
-      <a href={'https://depay.com'} rel="noopener noreferrer" target="_blank" className="PoweredByLink">by DePay</a>
+      <a href={ link({ url: 'https://depay.com', target: '_blank', wallet }) } rel="noopener noreferrer" target="_blank" className="PoweredByLink">by DePay</a>
     </div>
   )
 }

src/dialogs/ConnectWalletDialog.jsx

@@ -172,6 +172,10 @@ export default (props)=> {
       setOpenInAppIsAvailable(openInAppIsAvailable)
       const scanQrAvailable = (props.platform?.solanaPay && ( ( accept && accept.every((accept)=>accept.amount)) )) || (props.platform?.qr && (!showQRCode || props.platform.qr === 'WalletLink'))
       setScanQrAvailable(scanQrAvailable)
+
+      if(extensionIsAvailable && !connectAppIsAvailable && !copyLinkIsAvailable && !openInAppIsAvailable && !scanQrAvailable) {
+        props.connectExtension(props.wallet)
+      }
     })()
   }, [])
 

src/dialogs/PaymentFailedDialog.jsx

@@ -2,13 +2,16 @@ import ClosableContext from '../contexts/ClosableContext'
 import ConfigurationContext from '../contexts/ConfigurationContext'
 import Dialog from '../components/Dialog'
 import ErrorGraphic from '../graphics/error'
+import link from '../helpers/link'
 import PaymentContext from '../contexts/PaymentContext'
 import React, { useContext } from 'react'
+import WalletContext from '../contexts/WalletContext'
 
 export default ()=> {
 
   const { close } = useContext(ClosableContext)
   const { transaction } = useContext(PaymentContext)
+  const { wallet } = useContext(WalletContext)
 
   return(
     <Dialog
@@ -29,7 +32,7 @@ export default ()=> {
             </strong>
             { transaction && 
               <div className="PaddingTopS">
-                <a className="Link" title="Check your transaction on a block explorer" href={ transaction?.url } target="_blank" rel="noopener noreferrer">
+                <a className="Link" title="Check your transaction on a block explorer" href={ link({ url: transaction?.url, target: '_blank', wallet }) } target="_blank" rel="noopener noreferrer">
                   View details
                 </a>
               </div>