@depay/widgets 10.2.16 → 11.1.0

package/README.md

@@ -3,7 +3,7 @@
 You can either load the `@depay/widgets` package via CDN:
 
 ```
-<script defer async src="https://integrate.depay.com/widgets/v10.js"></script>
+<script defer async src="https://integrate.depay.com/widgets/v11.js"></script>
 ```
 
 or you install `@depay/widgets` via the package manager of your choice and ship it as part of your application bundle:
@@ -32,6 +32,30 @@ yarn add ethers react react-dom
 npm install ethers react react-dom --save
 ```
 
+## Platform specific packaging
+
+In case you want to use and package only specific platforms, use the platform-specific package:
+
+### EVM platform specific packaging
+
+```
+yarn add @depay/widgets-evm
+```
+
+```javascript
+import DePayWidgets from '@depay/widgets-evm'
+```
+
+### Solana platform specific packaging
+
+```
+yarn add @depay/widgets-solana
+```
+
+```javascript
+import DePayWidgets from '@depay/widgets-solana'
+```
+
 ## Server-side rendering
 
 Make sure you load this library as a client-side script for client-side rendering (CSR), in case you are using a server-side rendering (SSR) framework like next.js.
@@ -46,7 +70,7 @@ https://app.depay.com/integrations/new
 
 For a more low-key technical example/demo page have a look at:
 
-https://depayfi.github.io/widgets/dev.bundle.html
+https://depayfi.github.io/widgets/demo.bundle.html
 
 ## Support
 
@@ -55,41 +79,15 @@ https://depayfi.github.io/widgets/dev.bundle.html
 - [Ethereum](https://ethereum.org)
 - [BNB Smart Chain](https://www.binance.org/smartChain)
 - [Polygon](https://polygon.technology)
+- [Solana](https://solana.com)
 
 ### Wallets
 
-DePay supports the most popular crypto wallets:
-
-- [MetaMask](https://metamask.io)
-- [Coinbase Wallet](https://wallet.coinbase.com)
-
-100+ additional wallets via [WalletConnect](https://walletconnect.org), such as:
-- [Trust Wallet](https://trustwallet.com)
-- [DeFi Wallet by crypto.com](https://crypto.com/defi-wallet)
-- [1inch Wallet](https://1inch.io/wallet/)
-- [imToken Wallet](https://www.token.im)
-- [TokenPocket](https://www.tokenpocket.pro/en)
-- [Pillar](https://www.pillar.fi/)
-- [Math Wallet](https://mathwallet.org/)
-- [Ledger Live](https://www.ledger.com/ledger-live)
-- [Argent Wallet](https://www.argent.xyz)
-- [AlphaWallet](https://alphawallet.com/)
-- [Unstoppable Wallet](https://unstoppable.money)
-- [Atomic Wallet](https://atomicwallet.io)
-- [Rainbow](https://rainbow.me/)
-- and more...
-
-## DePay Payments
-
-DePay Payments allows you to accept and perform crypto payments.
-
-### Preparation
+DePay supports [most crypto wallets](https://depay.com/wallets).
 
-In order to receive decentralized payments on any blockchain you need to have your own wallet on that particular blockchain first:
+## DePayWidgets: Payments
 
-- [Create an Ethereum wallet](https://ethereum.org/en/wallets/)
-- [Create an BSC wallet](https://academy.binance.com/en/articles/how-to-get-started-with-binance-smart-chain-bsc)
-- [Create a Polygon wallet](https://wallet.polygon.technology/)
+DePay Payments allows you to accept and perform crypto payments.
 
 ### Quick start
 
@@ -276,6 +274,21 @@ DePayWidgets.Payment.preload({
 });
 ```
 
+#### title
+
+`title`
+
+Allows you to change the title of the widget:
+
+```javascript
+DePayWidgets.Payment({
+
+  title: 'Donation'
+
+  //...
+})
+```
+
 #### track
 
 `track`
@@ -550,8 +563,9 @@ A function that will be called once the payment has been validated by DePay Apis
 ```javascript
 DePayWidgets.Payment({
 
-  validated: (successful)=> {
+  validated: (successful, data)=> {
     // successful (true or false)
+    // data (can contain transaction_id)
   }
 })
 ```
@@ -890,18 +904,10 @@ DePayWidgets.Payment({
 })
 ```
 
-## DePay Sales
+## DePayWidgets: Sale
 
 DePay Sales allows you to sell tokens directly from your website or dApp with automatic any-to-any payment conversion (so people can use any token when buying your token directly off your website or dApp).
 
-### Preparation
-
-In order to sell tokens in a decentralized way, that token needs to have a liquidity pool on a decentralized exchange:
-
-- [Create Uniswap v2 Liquidity Pool](https://app.uniswap.org/#/add/v2/ETH)
-- [Create Uniswap v2 Liquidity Pool (Polygon)](https://app.uniswap.org/#/add/v2/ETH?chain=polygon)
-- [Create Pancakeswap Liquidity Pool](https://pancakeswap.finance/add)
-
 ### Quick start
 
 ```javascript
@@ -1285,483 +1291,6 @@ DePayWidgets.Sale({
 })
 ```
 
-## DePay Donations
-
-DePay Donations allows you to accept donation payments made with thousands of different cryptocurrencies.
-
-### Preparation
-
-In order to receive decentralized donation payments on any blockchain you need to have your own wallet on that particular blockchain first:
-
-- [Create an Ethereum wallet](https://ethereum.org/en/wallets/)
-- [Create an BSC wallet](https://academy.binance.com/en/articles/how-to-get-started-with-binance-smart-chain-bsc)
-
-### Quick start
-
-```javascript
-DePayWidgets.Donation({
-  accept: [{
-    blockchain: 'ethereum',
-    token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
-    receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
-  }]
-});
-```
-
-### Configuration
-
-You need to pass a configuration object to `DePayWidgets.Donation` which needs to at least contain the `accept` field:
-
-```javascript
-DePayWidgets.Donation({
-  accept: [{
-    blockchain: 'ethereum',
-    token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
-    receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
-  }]
-});
-```
-
-You can also accept donations on multiple blockchains:
-
-```javascript
-DePayWidgets.Donation({
-  accept: [{
-    blockchain: 'ethereum',
-    token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
-    receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
-  },{
-    blockchain: 'bsc',
-    token: '0xa0bEd124a09ac2Bd941b10349d8d224fe3c955eb',
-    receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
-  }]
-});
-```
-
-#### accept
-
-`blockchain`
-
-The blockchain you want to receive the payment on.
-
-Currently supported:
-
-- `ethereum`
-- `bsc` (Binance Smart Chain)
-
-`token`
-
-The address of the token you want to receive.
-
-Use our [donation configurator](https://depay.com/documentation/donations#donation-configurator) in order to simplify configuring this.
-
-`receiver`
-
-The address receiving the donation. Always double check that you've set the right address.
-
-#### amount
-
-When you want to control how the amount selection behaves, pass the `amount` configuration object,
-alongside values for `start`, `min` and `step`.
-
-`start`: The amount that is initially selected.
-
-`min`: The minimum amount selectable.
-
-`step`: The number by which to increment/decrement changes to the amount.
-
-#### connected
-
-`connected`
-
-A function that will be called once the user connects a wallet.
-
-Will be called with the connected wallet address as the main argument:
-
-```javascript
-DePayWidgets.Donation({
-
-  connected: (address)=> {
-    // do something with the address
-  }
-});
-```
-
-#### fee
-
-You can configure a fee which will be applied to every payment with its own dedicated fee receiver address.
-
-The fee will be taken from the target token and target amount (after swap, depending on your `accept` configuration).
-
-`amount`: Either percentage (e.g. `5%`, or absolute amount as BigNumber string ('100000000000000000') or pure number (2.5)
-
-`receiver`: The address that is supposed to receive the fee.
-
-```javascript
-DePayWidgets.Donation({
-  accept: [...],
-  fee: {
-    amount: '3%',
-    receiver: '0x4e260bB2b25EC6F3A59B478fCDe5eD5B8D783B02'
-  }
-});
-```
-
-#### closed
-
-`closed`
-
-A function that will be called once the user closes the widget (no matter if before or after the payment).
-
-```javascript
-DePayWidgets.Donation({
-
-  closed: ()=> {
-    // do something if user closed the widget
-  }
-});
-```
-
-#### sent
-
-`sent`
-
-A function that will be called once the payment has been sent to the network (but still needs to be mined/confirmed).
-
-The widget will call this function with a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)
-
-```javascript
-DePayWidgets.Donation({
-  
-  sent: (transaction)=> {
-    // called when payment transaction has been sent to the network
-  }
-});
-```
-
-#### succeeded
-
-`succeeded`
-
-A function that will be called once the payment has succeeded on the network (checked client-side).
-
-The widget will call this function passing a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)
-
-```javascript
-DePayWidgets.Donation({
-
-  succeeded: (transaction)=> {
-    // called when payment transaction has been confirmed once by the network
-  }
-});
-```
-
-#### validated
-
-`validated`
-
-A function that will be called once the payment has been validated by DePay Apis (server-side).
-
-```javascript
-DePayWidgets.Payment({
-
-  validated: (successful)=> {
-    // successful (true or false)
-  }
-})
-```
-
-#### failed
-
-`failed`
-
-A function that will be called if the payment execution failed on the blockchain (after it has been sent/submitted).
-
-The widget will call this function passing a transaction as single argument (see: [depay-web3-wallets](https://github.com/depayfi/depay-web3-wallets#transaction) for more details)
-
-```javascript
-DePayWidgets.Donation({
-
-  failed: (transaction)=> {
-    // called when payment transaction failed on the blockchain
-    // handled by the widget, no need to display anything
-  }
-});
-```
-
-#### critical
-
-`critical`
-
-A function that will be called if the widget throws a critical internal error that it can't handle and display on its own:
-
-```javascript
-DePayWidgets.Donation({
-  
-  critical: (error)=> {
-    // render and display the error with error.toString()
-  }
-});
-```
-
-#### error
-
-`error`
-
-A function that will be called if the widget throws a non-critical internal error that it can and will handle and display on its own:
-
-```javascript
-DePayWidgets.Donation({
-  
-  error: (error)=> {
-    // maybe do some internal tracking with error.toString()
-    // no need to display anything as widget takes care of displaying the error
-  }
-});
-```
-
-#### providers
-
-Allows to set providers to be used for making RPC calls to the individual blockchains:
-
-```javascript
-DePayWidgets.Donation({
-
-  providers: {
-    ethereum: ['http://localhost:8545'],
-    bsc: ['http://localhost:8545']
-  }
-});
-```
-
-#### currency
-
-Allows you to enforce displayed local currency (instead of automatically detecting it):
-
-```javascript
-DePayWidgets.Donation({
-
-  currency: 'USD'
-
-});
-```
-
-#### whitelist
-
-Allows only the configured tokens to be eligible as means of payment (from the sender):
-
-```javacript
-DePayWidgets.Donation({
-  
-  whitelist: {
-    ethereum: [
-      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // ETH
-      '0xdac17f958d2ee523a2206206994597c13d831ec7', // USDT
-      '0x6b175474e89094c44da98b954eedeac495271d0f'  // DAI
-    ],
-    bsc: [
-      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // BNB
-      '0xe9e7cea3dedca5984780bafc599bd69add087d56', // BUSD
-      '0x55d398326f99059ff775485246999027b3197955'  // BSC-USD
-    ],
-    polygon: [
-      '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE', // MATIC
-      '0x2791bca1f2de4661ed88a30c99a7a9449aa84174', // USDC
-    ]
-  }
-})
-```
-
-#### blacklist
-
-Allows to blacklist tokens so that they will not be suggested as means of payment (from the sender):
-
-```javacript
-DePayWidgets.Donation({
-  
-  blacklist: {
-    ethereum: [
-      '0x82dfDB2ec1aa6003Ed4aCBa663403D7c2127Ff67',  // akSwap
-      '0x1368452Bfb5Cd127971C8DE22C58fBE89D35A6BF',  // JNTR/e
-      '0xC12D1c73eE7DC3615BA4e37E4ABFdbDDFA38907E',  // KICK
-    ],
-    bsc: [
-      '0x119e2ad8f0c85c6f61afdf0df69693028cdc10be', // Zepe
-      '0xb0557906c617f0048a700758606f64b33d0c41a6', // Zepe
-      '0x5190b01965b6e3d786706fd4a999978626c19880', // TheEver
-      '0x68d1569d1a6968f194b4d93f8d0b416c123a599f', // AABek
-      '0xa2295477a3433f1d06ba349cde9f89a8b24e7f8d', // AAX
-      '0xbc6675de91e3da8eac51293ecb87c359019621cf', // AIR
-      '0x5558447b06867ffebd87dd63426d61c868c45904', // BNBW
-      '0x569b2cf0b745ef7fad04e8ae226251814b3395f9', // BSCTOKEN
-      '0x373233a38ae21cf0c4f9de11570e7d5aa6824a1e', // ALPACA
-      '0x7269163f2b060fb90101f58cf724737a2759f0bb', // PUPDOGE
-      '0xb16600c510b0f323dee2cb212924d90e58864421', // FLUX
-      '0x2df0b14ee90671021b016dab59f2300fb08681fa', // SAFEMOON.is
-      '0xd22202d23fe7de9e3dbe11a2a88f42f4cb9507cf', // MNEB
-      '0xfc646d0b564bf191b3d3adf2b620a792e485e6da', // PIZA
-      '0xa58950f05fea2277d2608748412bf9f802ea4901', // WSG
-      '0x12e34cdf6a031a10fe241864c32fb03a4fdad739' // FREE
-    ]
-  }
-})
-```
-
-#### container
-
-`container`
-
-Allows you to pass a container element that is supposed to contain the widget:
-
-```javascript
-DePayWidgets.Dontaion({
-  container: document.getElementById('my-container')
-})
-```
-
-Make sure to set the css value `position: relative;` for the container element. Otherwise it can not contain the widget.
-
-React example:
-
-```javascript
-let CustomComponentWithWidget = (props)=>{
-    let container = useRef()
-
-    useEffect(()=>{
-      if(container.current) {
-        DePayWidgets.Payment({ ...defaultArguments, document,
-          container: container.current
-        })
-      }
-    }, [container])
-
-    return(
-      <div ref={container} style={{ position: 'relative', border: '1px solid black', width: "600px", height: "600px" }}></div>
-    )
-  }
-```
-
-#### style
-
-`style`
-
-Allows you to change the style of the widget.
-
-```javascript
-DePayWidgets.Donation({
-  
-  style: {
-    colors: {
-      primary: '#ffd265',
-      text: '#e1b64a',
-      buttonText: '#000000',
-      icons: '#ffd265'
-    },
-    fontFamily: '"Cardo", serif !important',
-    css: `
-      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");
-
-      .ReactDialogBackground {
-        background: rgba(0,0,0,0.8);
-      }
-    `
-  }
-});
-```
-
-##### colors
-
-`colors`
-
-Allows you to set color values:
-
-```javascript
-DePayWidgets.Donation({
-  
-  style: {
-    colors: {
-      primary: '#ffd265',
-      text: '#ffd265',
-      buttonText: '#000000',
-      icons: '#ffd265'
-    }
-  }
-});
-```
-
-##### fontFamily
-
-`fontFamily`
-
-Allows you to set the font-family:
-
-```javascript
-DePayWidgets.Donation({
-  
-  style: {
-    fontFamily: '"Cardo", serif !important'
-  }
-});
-```
-
-##### css
-
-`css`
-
-Allows you to inject CSS:
-
-```javascript
-DePayWidgets.Donation({
-  
-  style: {
-    css: `
-      @import url("https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap");
-
-      .ReactDialogBackground {
-        background: rgba(0,0,0,0.8);
-      }
-    `
-  }
-});
-```
-
-#### unmount
-
-`unmount`
-
-Allows you to unmount (the React safe way) the entire widget from the outside:
-
-```javascript
-let { unmount } = await DePayWidgets.Donation({})
-
-unmount()
-```
-
-#### closable
-
-`closable`
-
-Makes the widget unclosable:
-
-```javascript
-DePayWidgets.Donation({
-  closable: false
-})
-
-```
-
-#### integration
-
-`integration`
-
-Labels donations to track them per integration.
-
-```javascript
-DePayWidgets.Donation({
-  integration: 'fe690fbc-1740-4894-b12c-23a72abec54d'
-})
-```
-
 ## DePay Connect
 
 DePay Connect allows you to have your users connect their crypto wallet to your dApp or website.
@@ -2035,5 +1564,5 @@ test:cypress:debug
 Test and debug single cypress file:
 
 ```
-yarn test:cypress:debug --spec "cypress/e2e/Payment/track.js"
+yarn test:cypress:debug --spec "cypress/e2e/Payment/main.solana.js"
 ```