v12.17.0: uniswap v2 on base support + some dialog improvements for i…

…nsufficient funds

dev.html

@@ -25,7 +25,7 @@
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/worldcoin-precompiled@1"></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/web3-exchanges@13.11.0"></script>
+    <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/web3-exchanges@13.13.0"></script>
     <script crossorigin src="https://cdn.jsdelivr.net/npm/@depay/[email protected]"></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>

package.evm.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets-evm",
   "moduleName": "DePayWidgets",
-  "version": "12.16.8",
+  "version": "12.17.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",
@@ -31,7 +31,7 @@
     "@depay/web3-assets-evm": "^7.4.1",
     "@depay/web3-blockchains": "^9.7.5",
     "@depay/web3-client-evm": "^10.19.3",
-    "@depay/web3-exchanges-evm": "^13.11.0",
+    "@depay/web3-exchanges-evm": "^13.13.0",
     "@depay/web3-payments-evm": "^13.12.10",
     "@depay/web3-tokens-evm": "^10.4.3",
     "@depay/web3-wallets-evm": "^17.6.2",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets",
   "moduleName": "DePayWidgets",
-  "version": "12.16.8",
+  "version": "12.17.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",
@@ -45,7 +45,7 @@
     "@depay/web3-assets": "^7.4.1",
     "@depay/web3-blockchains": "^9.7.5",
     "@depay/web3-client": "^10.19.3",
-    "@depay/web3-exchanges": "^13.11.0",
+    "@depay/web3-exchanges": "^13.13.0",
     "@depay/web3-payments": "^13.12.10",
     "@depay/web3-tokens": "^10.4.3",
     "@depay/web3-wallets": "^17.6.2",

package.solana.json

@@ -1,7 +1,7 @@
 {
   "name": "@depay/widgets-solana",
   "moduleName": "DePayWidgets",
-  "version": "12.16.8",
+  "version": "12.17.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",
@@ -32,7 +32,7 @@
     "@depay/web3-assets-solana": "^7.4.1",
     "@depay/web3-blockchains": "^9.7.5",
     "@depay/web3-client-solana": "^10.19.3",
-    "@depay/web3-exchanges-solana": "^13.11.0",
+    "@depay/web3-exchanges-solana": "^13.13.0",
     "@depay/web3-payments-solana": "^13.12.10",
     "@depay/web3-tokens-solana": "^10.4.3",
     "@depay/web3-wallets-solana": "^17.6.2",

src/dialogs/InsufficientAmountOfTokensDialog.jsx

@@ -23,6 +23,7 @@ import Dialog from '../components/Dialog'
 import InsufficientGraphic from '../graphics/insufficient'
 import React, { useContext, useState, useEffect } from 'react'
 import round from '../helpers/round'
+import WalletContext from '../contexts/WalletContext'
 import { ethers } from 'ethers'
 import { NavigateStackContext } from '@depay/react-dialog-stack'
 
@@ -37,6 +38,7 @@ const NATIVE_AMOUNT_REQUIRED_FOR_TRANSACTION = {
   fantom: ethers.BigNumber.from('3000000000000000'),
   avalanche: ethers.BigNumber.from('3000000000000000'),
   gnosis: ethers.BigNumber.from('3000000000000000'),
+  worldchain: ethers.BigNumber.from('3000000000000000'),
 }
 
 export default (props)=> {
@@ -50,6 +52,12 @@ export default (props)=> {
   const { accept, sell } = useContext(ConfigurationContext)
   const { acceptWithAmount } = useContext(ChangableAmountContext)
   const { close } = useContext(ClosableContext)
+  const { wallet } = useContext(WalletContext)
+  const [ walletAddress, setWalletAddress ] = useState()
+
+  useEffect(()=>{
+    wallet.account().then(setWalletAddress)
+  }, [wallet])
 
   const setRecommendation = async ({ route, accept })=>{
     const nativeAvailableAsset = props.assets.find((asset)=>Blockchains[asset.blockchain].currency.address.toLowerCase() === asset.address.toLowerCase())
@@ -187,8 +195,8 @@ export default (props)=> {
           <div className="GraphicWrapper">
             <img className="Graphic" src={ InsufficientGraphic }/>
           </div>
-          <h1 className="LineHeightL Text FontSizeL PaddingTopS FontWeightBold">Insufficient Amount</h1>
-          <div className="Text PaddingTopS PaddingBottomS PaddingLeftM PaddingRightM">
+          <h1 className="LineHeightL Text FontSizeL PaddingTopS FontWeightBold">No enough funds!</h1>
+          <div className="Text PaddingTopS PaddingLeftM PaddingRightM">
             { loading && 
               <div className="Skeleton" style={{ borderRadius: "18px", width: "100%", height: "170px" }}>
                 <div className="SkeletonBackground"/>
@@ -232,6 +240,11 @@ export default (props)=> {
               </div>
             }
           </div>
+          <div className="Text PaddingLeftM PaddingRightM">
+            <div className="Card tiny disabled center">
+              <div className="ResponsiveText FontWeightLight TextCenter">{walletAddress}</div>
+            </div>
+          </div>
         </div>
       }
       footer={

src/dialogs/NoPaymentOptionFoundDialog.jsx

@@ -21,7 +21,6 @@ export default ()=> {
     wallet.account().then(setWalletAddress)
   }, [wallet])
 
-
   return(
     <Dialog
       header={
@@ -33,21 +32,24 @@ export default ()=> {
           <div className="GraphicWrapper" onClick={initDebug}>
             <img className="Graphic" src={ QuestionsGraphic }/>
           </div>
-          <h1 className="LineHeightL Text FontSizeL PaddingTopS FontWeightBold">No Payment Option Found</h1>
-          <div className="Text PaddingTopS PaddingBottomS PaddingLeftM PaddingRightM">
-            <strong className="FontSizeM">
-              Correct wallet connected {addressEllipsis(walletAddress)}?
-            </strong>
+          <h1 className="LineHeightL Text FontSizeL PaddingTopS FontWeightBold">No enough funds!</h1>
+          <div className="Text PaddingTopS PaddingBottomXS PaddingLeftM PaddingRightM">
+            <div className="Card tiny disabled center">
+              <div className="ResponsiveText FontWeightLight TextCenter">{walletAddress}</div>
+            </div>
           </div>
           <div className="Text PaddingTopXS PaddingBottomXS PaddingLeftM PaddingRightM">
             <strong className="FontSizeM">
-              Please make sure you have cryptocurrencies on one of the following blockchains:
+              Please make sure you have enough funds on one of the following blockchains:
             </strong>
           </div>
           <div className="Text PaddingTopXS PaddingBottomS PaddingLeftM PaddingRightM">
-            <span className="FontSizeS">
-              { [...new Set(accept.map((accept)=>accept.blockchain))].map((blockchain)=>Blockchains[blockchain].label).join(', ') }.
-            </span>
+            { [...new Set(accept.map((accept)=>accept.blockchain))].map((blockchain)=>{return(
+              <div className="Card tiny disabled inlineBlock MarginRightXS MarginBottomXS">
+                <img className="MarginRightXS" src={Blockchains[blockchain].logoWhiteBackground}/>
+                <span className="ResponsiveText FontWeightLight">{Blockchains[blockchain].label}</span>
+              </div>
+            )}) }
           </div>
         </div>
       }

src/helpers/style.js

@@ -16,6 +16,7 @@ import LoadingTextStyle from '../styles/LoadingTextStyle'
 import LogoStyle from '../styles/LogoStyle'
 import OpacityStyle from '../styles/OpacityStyle'
 import PaddingStyle from '../styles/PaddingStyle'
+import MarginStyle from '../styles/MarginStyle'
 import PoweredByStyle from '../styles/PoweredByStyle'
 import QRCodeStyle from '../styles/QRCodeStyle'
 import RangeSliderStyle from '../styles/RangeSliderStyle'
@@ -62,6 +63,7 @@ export default (style)=>{
       IconStyle(style),
       OpacityStyle(style),
       PaddingStyle(style),
+      MarginStyle(style),
       HeightStyle(style),
       TabStyle(style),
       LoadingTextStyle(style),

src/styles/CardStyle.js

@@ -87,6 +87,20 @@ export default (style)=>{
       box-shadow: none;
     }
 
+    .Card.tiny {
+      border-radius: 4px;
+      min-height: auto;
+      padding: 2px 2px;
+    }
+    
+    .Card.tiny img {
+      width: 18px;
+      height: 18px;
+      position: relative;
+      top: 3px;
+      marginRight: 2px;
+    }
+
     .Card.small {
       min-height: auto;
       padding: 8px 8px;
@@ -235,6 +249,11 @@ export default (style)=>{
       opacity: 0.2;
     }
 
+    .Card.inlineBlock {
+      display: inline-block;
+      width: auto;
+    }
+    
     .Card.More {
       display: inline-block;
       text-align: center;

src/styles/FontStyle.js

@@ -29,6 +29,10 @@ export default (style)=>{
       font-size: 42px;
     }
 
+    .FontWeightLight {
+      font-weight: 300;
+    }
+
     .FontWeightMedium {
       font-weight: 500;
     }

src/styles/MarginStyle.js

@@ -0,0 +1,68 @@
+export default ()=>{
+  return(`
+
+    .MarginTopXS {
+      margin-top: 3px;
+    }
+
+    .MarginRightXS {
+      margin-right: 3px;
+    }
+
+    .MarginBottomXS {
+      margin-bottom: 3px;
+    }
+
+    .MarginLeftXS {
+      margin-left: 3px; 
+    }
+
+    .MarginTopS {
+      margin-top: 13px;
+    }
+
+    .MarginRightS {
+      margin-right: 13px;
+    }
+
+    .MarginBottomS {
+      margin-bottom: 13px;
+    }
+
+    .MarginLeftS {
+      margin-left: 13px; 
+    }
+
+    .MarginTopM {
+      margin-top: 19px;
+    }
+
+    .MarginRightM {
+      margin-right: 19px;
+    }
+
+    .MarginBottomM {
+      margin-bottom: 19px;
+    }
+
+    .MarginLeftM {
+      margin-left: 19px; 
+    }
+
+    .MarginTopL {
+      margin-top: 29px;
+    }
+
+    .MarginRightL {
+      margin-right: 29px;
+    }
+
+    .MarginBottomL {
+      margin-bottom: 29px;
+    }
+
+    .MarginLeftL {
+      margin-left: 29px; 
+    }
+  `)
+}

src/styles/TextStyle.js

@@ -48,5 +48,10 @@ export default (style)=>{
       white-space: pre-wrap;
       word-wrap: break-word;
     }
+
+    .ResponsiveText {
+      font-size: clamp(14px, 2vw, 15px);
+      max-width: fit-content;
+    }
   `)
 }

yarn.lock

@@ -1350,10 +1350,10 @@
   resolved "https://registry.yarnpkg.com/@depay/web3-client/-/web3-client-10.19.3.tgz#7c7119fdd4c0d1bce1fafbd4f67048d0b62c4807"
   integrity sha512-Chj/mqI6KJuijTD5LMZvJ+NFzhBnp7CHTFOxMngPNxgRGIQwRpRn3wXamVUWWnzHmJ2LYqj6xi3oqfSpObyzgw==
 
-"@depay/web3-exchanges@^13.11.0":
-  version "13.11.0"
-  resolved "https://registry.yarnpkg.com/@depay/web3-exchanges/-/web3-exchanges-13.11.0.tgz#5c02fecb8de550b39a899901a33ebed379e0a10a"
-  integrity sha512-eZTiI8rvAIk8TvlClDpuCQYEWa49vi0Izi7WbSDibyxS3WkEl1KFQSPgUZ7XH+eRxgBO6eWWeEk4KGGsoiZnuQ==
+"@depay/web3-exchanges@^13.13.0":
+  version "13.13.0"
+  resolved "https://registry.yarnpkg.com/@depay/web3-exchanges/-/web3-exchanges-13.13.0.tgz#f99ba4ec7e04e3b77bb96e66e52bf468be55a16b"
+  integrity sha512-z9957vm0f1H6fnEF6XxTqBxX3tEbPVwKupRhJRmbaY60jRZZ5q120d75ZFnxxEtwPdbpvKjKiX+11Fv+KdHQBw==
 
 "@depay/web3-mock@^14.19.1":
   version "14.19.1"