@kimafinance/kima-transaction-widget 1.1.13 → 1.1.14

package/dist/index.modern.js

@@ -1,8 +1,9 @@
-import React, { useState, useCallback, useMemo, useContext, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useContext, useRef } from 'react';
 import { createSlice, configureStore } from '@reduxjs/toolkit';
 import { clusterApiUrl, TransactionInstruction, SystemProgram, SYSVAR_RENT_PUBKEY, PublicKey, Transaction } from '@solana/web3.js';
 import { useSelector, useDispatch, Provider } from 'react-redux';
-import { useWallet, useConnection, ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react';
+import * as SolanaAdapter from '@solana/wallet-adapter-react';
+import { useWallet, useConnection } from '@solana/wallet-adapter-react';
 import { PhantomWalletAdapter, SolflareWalletAdapter, SolletWalletAdapter, SolletExtensionWalletAdapter, CloverWalletAdapter, Coin98WalletAdapter, SlopeWalletAdapter, SolongWalletAdapter, TorusWalletAdapter } from '@solana/wallet-adapter-wallets';
 import detectEthereumProvider from '@metamask/detect-provider';
 import { ethers, BigNumber } from 'ethers';
@@ -747,14 +748,19 @@ var CurrencyOptions;
   CurrencyOptions["USDK"] = "USDK";
   CurrencyOptions["G$"] = "GDOLLAR";
 })(CurrencyOptions || (CurrencyOptions = {}));
-var ThemeOptions;
-(function (ThemeOptions) {
-  ThemeOptions["light"] = "light";
-  ThemeOptions["dark"] = "dark";
-})(ThemeOptions || (ThemeOptions = {}));
+var ColorModeOptions;
+(function (ColorModeOptions) {
+  ColorModeOptions["light"] = "light";
+  ColorModeOptions["dark"] = "dark";
+})(ColorModeOptions || (ColorModeOptions = {}));
+var DAppOptions;
+(function (DAppOptions) {
+  DAppOptions["G$"] = "G$";
+  DAppOptions["None"] = "none";
+})(DAppOptions || (DAppOptions = {}));
 
 const initialState = {
-  theme: ThemeOptions.light,
+  theme: {},
   mode: ModeOptions.bridge,
   originNetwork: '',
   targetNetwork: '',
@@ -763,6 +769,9 @@ const initialState = {
   helpPopup: false,
   hashPopup: false,
   bankPopup: false,
+  walletAutoConnect: false,
+  provider: undefined,
+  dAppOption: DAppOptions.None,
   solanaProvider: undefined,
   submitted: false,
   amount: 0,
@@ -824,6 +833,15 @@ const optionSlice = createSlice({
     setBankPopup: (state, action) => {
       state.bankPopup = action.payload;
     },
+    setProvider: (state, action) => {
+      state.provider = action.payload;
+    },
+    setDappOption: (state, action) => {
+      state.dAppOption = action.payload;
+    },
+    setWalletAutoConnect: (state, action) => {
+      state.walletAutoConnect = action.payload;
+    },
     setSolanaProvider: (state, action) => {
       state.solanaProvider = action.payload;
     },
@@ -900,6 +918,9 @@ const {
   setHashPopup,
   setBankPopup,
   setSolanaProvider,
+  setProvider,
+  setDappOption,
+  setWalletAutoConnect,
   setSubmitted,
   setTransactionOption,
   setAmount,
@@ -941,6 +962,9 @@ const selectHelpPopup = state => state.option.helpPopup;
 const selectHashPopup = state => state.option.hashPopup;
 const selectBankPopup = state => state.option.bankPopup;
 const selectSolanaProvider = state => state.option.solanaProvider;
+const selectProvider = state => state.option.provider;
+const selectDappOption = state => state.option.dAppOption;
+const selectWalletAutoConnect = state => state.option.walletAutoConnect;
 const selectSubmitted = state => state.option.submitted;
 const selectTransactionOption = state => state.option.transactionOption;
 const selectAmount = state => state.option.amount;
@@ -980,62 +1004,75 @@ const EthereumProvider = ({
   const [chainId, setChainId] = useState(undefined);
   const [signer, setSigner] = useState(undefined);
   const [signerAddress, setSignerAddress] = useState(undefined);
+  const dispatch = useDispatch();
+  const ethereumProvider = useSelector(selectProvider);
+  useEffect(() => {
+    if (!ethereumProvider || !chainId) return;
+    dispatch(setOriginNetwork(CHAIN_IDS_TO_NAMES[chainId]));
+  }, [ethereumProvider, chainId]);
   const connect = useCallback(() => {
     setProviderError(null);
-    detectEthereumProvider().then(detectedProvider => {
-      if (detectedProvider) {
-        const provider = new ethers.providers.Web3Provider(detectedProvider, 'any');
-        provider.send('eth_requestAccounts', []).then(() => {
-          setProviderError(null);
-          setProvider(provider);
-          provider.getNetwork().then(network => {
-            setChainId(network.chainId);
-          }).catch(e => {
-            errorHandler(e);
-            setProviderError('An error occurred while getting the network');
-          });
-          const signer = provider.getSigner();
-          setSigner(signer);
-          signer.getAddress().then(address => {
-            setSignerAddress(address);
-          }).catch(e => {
-            errorHandler(e);
-            setProviderError('An error occurred while getting the signer address');
-          });
-          if (detectedProvider && detectedProvider.on) {
-            detectedProvider.on('chainChanged', chainId => {
-              try {
-                setChainId(BigNumber.from(chainId).toNumber());
-              } catch (e) {
-                errorHandler(e);
-              }
-            });
-            detectedProvider.on('accountsChanged', accounts => {
-              try {
-                const signer = provider.getSigner();
-                setSigner(signer);
-                signer.getAddress().then(address => {
-                  setSignerAddress(address);
-                }).catch(e => {
-                  errorHandler(e);
-                  setProviderError('An error occurred while getting the signer address');
-                });
-              } catch (e) {
-                errorHandler(e);
-              }
-            });
-          }
+    const handleProvider = provider => {
+      provider.send('eth_requestAccounts', []).then(() => {
+        setProviderError(null);
+        setProvider(provider);
+        provider.getNetwork().then(network => {
+          setChainId(network.chainId);
         }).catch(e => {
           errorHandler(e);
-          setProviderError('An error occurred while requesting eth accounts');
+          setProviderError('An error occurred while getting the network');
         });
-      } else {
+        const signer = provider.getSigner();
+        setSigner(signer);
+        signer.getAddress().then(address => {
+          setSignerAddress(address);
+        }).catch(e => {
+          errorHandler(e);
+          setProviderError('An error occurred while getting the signer address');
+        });
+        if (detectedProvider && detectedProvider.on) {
+          detectedProvider.on('chainChanged', chainId => {
+            try {
+              setChainId(BigNumber.from(chainId).toNumber());
+            } catch (e) {
+              errorHandler(e);
+            }
+          });
+          detectedProvider.on('accountsChanged', accounts => {
+            try {
+              const signer = provider.getSigner();
+              setSigner(signer);
+              signer.getAddress().then(address => {
+                setSignerAddress(address);
+              }).catch(e => {
+                errorHandler(e);
+                setProviderError('An error occurred while getting the signer address');
+              });
+            } catch (e) {
+              errorHandler(e);
+            }
+          });
+        }
+      }).catch(e => {
+        errorHandler(e);
+        setProviderError('An error occurred while requesting eth accounts');
+      });
+    };
+    if (ethereumProvider) {
+      handleProvider(ethereumProvider);
+    } else {
+      detectEthereumProvider().then(detectedProvider => {
+        if (detectedProvider) {
+          const provider = new ethers.providers.Web3Provider(detectedProvider, 'any');
+          handleProvider(provider);
+        } else {
+          setProviderError('Please install MetaMask');
+        }
+      }).catch(e => {
+        errorHandler(e);
         setProviderError('Please install MetaMask');
-      }
-    }).catch(e => {
-      errorHandler(e);
-      setProviderError('Please install MetaMask');
-    });
+      });
+    }
   }, []);
   const disconnect = useCallback(() => {
     setProviderError(null);
@@ -1119,7 +1156,7 @@ const Progressbar = ({
   }, React.createElement("div", {
     className: 'step-info'
   }, index === loadingStep ? React.createElement(Loading180Ring, {
-    fill: theme === ThemeOptions.dark ? 'white' : '#5aa0db'
+    fill: theme.colorMode === 'dark' ? 'white' : '#5aa0db'
   }) : step >= index ? index === errorStep ? React.createElement(Warning, null) : React.createElement(Check, null) : null, React.createElement("span", null, item.title))))));
 };
 
@@ -1150,7 +1187,7 @@ const NetworkLabel = ({
   }, React.createElement("div", {
     className: 'icon-wrapper'
   }, SourceInfo && React.createElement(SourceInfo.icon, null)), SourceInfo === null || SourceInfo === void 0 ? void 0 : SourceInfo.label), React.createElement(ArrowRight, {
-    fill: theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   }), React.createElement("div", {
     className: 'label'
   }, React.createElement("div", {
@@ -1234,18 +1271,23 @@ function handleResponse(response) {
 
 function useNetworkOptions() {
   const [options, setOptions] = useState(networkOptions);
+  const dAppOption = useSelector(selectDappOption);
   const nodeProviderQuery = useSelector(selectNodeProviderQuery);
   useEffect(() => {
     if (!nodeProviderQuery) return;
-    (async function () {
-      try {
-        const networks = await fetchWrapper.get(`${nodeProviderQuery}/kima-finance/kima/kima/getChains`);
-        setOptions(networkOptions.filter(network => networks.Chains.findIndex(id => id === network.id) >= 0));
-      } catch (e) {
-        console.log('rpc disconnected', e);
-      }
-    })();
-  }, [nodeProviderQuery]);
+    if (dAppOption === DAppOptions.None) {
+      (async function () {
+        try {
+          const networks = await fetchWrapper.get(`${nodeProviderQuery}/kima-finance/kima/kima/getChains`);
+          setOptions(networkOptions.filter(network => networks.Chains.findIndex(id => id === network.id) >= 0));
+        } catch (e) {
+          console.log('rpc disconnected', e);
+        }
+      })();
+    } else {
+      setOptions(networkOptions.filter(network => network.label === 'Fuse' || network.label === 'Celo'));
+    }
+  }, [nodeProviderQuery, dAppOption]);
   return useMemo(() => ({
     options
   }), [options]);
@@ -1348,10 +1390,10 @@ const Network = ({
   }, React.createElement("p", null, _isOriginChain ? 'Which network are you funding from?' : 'Which network are you funding to?'), React.createElement("div", {
     className: 'scroll-button'
   }, React.createElement(Arrow, {
-    fill: theme === 'light' ? 'black' : 'white',
+    fill: theme.colorMode === 'light' ? 'black' : 'white',
     onClick: slideLeft
   }), React.createElement(Arrow, {
-    fill: theme === 'light' ? 'black' : 'white',
+    fill: theme.colorMode === 'light' ? 'black' : 'white',
     onClick: slideRight
   })), React.createElement("div", {
     className: 'slide-area hide-scrollbar',
@@ -1359,7 +1401,7 @@ const Network = ({
   }, React.createElement("div", {
     className: 'network-container'
   }, networks.map(network => React.createElement("div", {
-    className: `card-item ${theme} ${network.id === selectedNetwork.id ? 'active' : ''}`,
+    className: `card-item ${theme.colorMode} ${network.id === selectedNetwork.id ? 'active' : ''}`,
     key: network.id,
     onClick: () => {
       if (_isOriginChain) {
@@ -1439,10 +1481,10 @@ const WalletSelect = () => {
   }, React.createElement("p", null, "Please select:"), React.createElement("div", {
     className: 'scroll-button'
   }, React.createElement(Arrow, {
-    fill: theme === 'light' ? 'black' : 'white',
+    fill: theme.colorMode === 'light' ? 'black' : 'white',
     onClick: slideLeft
   }), React.createElement(Arrow, {
-    fill: theme === 'light' ? 'black' : 'white',
+    fill: theme.colorMode === 'light' ? 'black' : 'white',
     onClick: slideRight
   })), React.createElement("div", {
     className: 'slide-area hide-scrollbar',
@@ -1450,7 +1492,7 @@ const WalletSelect = () => {
   }, React.createElement("div", {
     className: 'wallet-container'
   }, detected.map(wallet => React.createElement("div", {
-    className: `card-item ${theme} ${wallet.adapter.name === selectedProvider ? 'active' : ''}`,
+    className: `card-item ${theme.colorMode} ${wallet.adapter.name === selectedProvider ? 'active' : ''}`,
     onClick: () => dispatch(setSolanaProvider(wallet.adapter.name)),
     key: wallet.adapter.name
   }, React.createElement("img", {
@@ -1458,7 +1500,7 @@ const WalletSelect = () => {
     alt: wallet.adapter.name
   }), React.createElement("span", null, wallet.adapter.name))), undetected.map(wallet => React.createElement(ExternalLink, {
     to: wallet.adapter.url,
-    className: `card-item ${theme}`,
+    className: `card-item ${theme.colorMode}`,
     key: wallet.adapter.name
   }, React.createElement("img", {
     src: wallet.adapter.icon,
@@ -1467,7 +1509,6 @@ const WalletSelect = () => {
 };
 
 const version = "logger/5.7.0";
-//# sourceMappingURL=_version.js.map
 
 let _permanentCensorErrors = false;
 let _censorErrors = false;
@@ -1817,10 +1858,8 @@ class Logger {
 }
 Logger.errors = ErrorCode;
 Logger.levels = LogLevel;
-//# sourceMappingURL=index.js.map
 
 const version$1 = "bytes/5.7.0";
-//# sourceMappingURL=_version.js.map
 
 const logger = new Logger(version$1);
 ///////////////////////////////
@@ -1931,7 +1970,6 @@ function hexStripZeros(value) {
     }
     return "0x" + value.substring(offset);
 }
-//# sourceMappingURL=index.js.map
 
 const createWalletStatus = (isReady, statusMessage = '', forceNetworkSwitch, walletAddress) => ({
   isReady,
@@ -2001,6 +2039,7 @@ const WalletButton = ({
   const sourceCompliant = useSelector(selectSourceCompliant);
   const compliantOption = useSelector(selectCompliantOption);
   const selectedNetwork = useSelector(selectOriginNetwork);
+  const walletAutoConnect = useSelector(selectWalletAutoConnect);
   const {
     disconnect: disconnectSolana
   } = useWallet();
@@ -2012,7 +2051,7 @@ const WalletButton = ({
     isReady,
     statusMessage,
     walletAddress
-  } = useIsWalletReady(true);
+  } = useIsWalletReady(walletAutoConnect);
   useEffect(() => {
     if (!connect) return;
     connect();
@@ -2033,7 +2072,7 @@ const WalletButton = ({
     connect();
   };
   return React.createElement("div", {
-    className: `wallet-button ${theme} ${_errorBelow ? 'error-below' : ''}`,
+    className: `wallet-button ${theme.colorMode} ${_errorBelow ? 'error-below' : ''}`,
     "data-testid": connectWalletBtn
   }, React.createElement(PrimaryButton, {
     clickHandler: handleClick
@@ -2049,7 +2088,7 @@ const CoinDropdown = () => {
   const selectedCoin = useSelector(selectCurrencyOptions);
   const theme = useSelector(selectTheme);
   return React.createElement("div", {
-    className: `coin-dropdown ${theme} ${collapsed ? 'collapsed' : ''}`,
+    className: `coin-dropdown ${theme.colorMode} ${collapsed ? 'collapsed' : ''}`,
     onClick: () => setCollapsed(prev => !prev)
   }, React.createElement("div", {
     className: 'coin-wrapper'
@@ -2108,12 +2147,12 @@ const NetworkDropdown = ({
     })();
   }, [nodeProviderQuery, mode]);
   return React.createElement("div", {
-    className: `network-dropdown ${theme} ${collapsed ? 'collapsed' : ''}`,
+    className: `network-dropdown ${theme.colorMode} ${collapsed ? 'collapsed' : ''}`,
     onClick: () => setCollapsed(prev => !prev)
   }, React.createElement("div", {
     className: 'network-wrapper'
   }, React.createElement(selectedNetwork.icon, null), selectedNetwork.label), React.createElement("div", {
-    className: `network-menu custom-scrollbar ${theme} ${collapsed ? 'collapsed' : ''}`
+    className: `network-menu custom-scrollbar ${theme.colorMode} ${collapsed ? 'collapsed' : ''}`
   }, networks.map(network => React.createElement("div", {
     className: 'network-menu-item',
     key: network.label,
@@ -2159,7 +2198,7 @@ const ConfirmDetails = ({
   const targetNetworkOption = useMemo(() => networkOptions.filter(network => network.id === (mode === ModeOptions.payment ? transactionOption === null || transactionOption === void 0 ? void 0 : transactionOption.targetChain : targetNetwork))[0], [networkOptions, originNetwork]);
   const selectedCoin = useSelector(selectCurrencyOptions);
   return React.createElement("div", {
-    className: `confirm-details ${theme}`
+    className: `confirm-details ${theme.colorMode}`
   }, React.createElement("p", null, "Step ", isApproved ? '2' : '1', "\u00A0of 2\u00A0\u00A0\u00A0", isApproved ? 'Submit trasaction' : 'Approval'), React.createElement("div", {
     className: 'detail-item'
   }, React.createElement("span", {
@@ -2239,7 +2278,7 @@ const StepBox = ({
   }, React.createElement("div", {
     className: 'info-item'
   }, index === loadingStep ? React.createElement(Loading180Ring, {
-    fill: theme === ThemeOptions.dark ? 'white' : '#5aa0db'
+    fill: theme.colorMode === 'dark' ? 'white' : '#5aa0db'
   }) : step >= index ? index === errorStep ? React.createElement(Warning, null) : React.createElement(Check, null) : null, React.createElement("p", null, item.title)), index === 0 && data !== null && data !== void 0 && data.kimaTxHash ? React.createElement("div", {
     className: 'info-item'
   }, React.createElement("p", null, "Kima TX ID:", ' ', React.createElement(ExternalLink, {
@@ -2286,7 +2325,7 @@ const HelpPopup = () => {
     className: 'icon-button',
     onClick: () => dispatch(setHelpPopup(false))
   }, React.createElement(Cross, {
-    fill: theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   }))))), React.createElement("div", {
     className: 'modal-content'
   }, React.createElement("p", null, "The SDK enables dApp developers to process Kima transactions on behalf of their clients. It will include visual and API components that communicate with the Kima RPC nodes. The developers can pick and choose the right level of integration, based on their usage scenario."))));
@@ -2319,7 +2358,7 @@ const HashPopup = ({
     className: 'icon-button',
     onClick: () => dispatch(setHashPopup(false))
   }, React.createElement(Cross, {
-    fill: theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   }))))), React.createElement("div", {
     className: 'modal-content'
   }, React.createElement("div", {
@@ -2354,7 +2393,7 @@ const WalletConnectModal = () => {
     dispatch(setConnectModal(false));
   };
   return React.createElement("div", {
-    className: `kima-modal wallet-connect ${theme} ${connectModal ? 'open' : ''}`
+    className: `kima-modal wallet-connect ${theme.colorMode} ${connectModal ? 'open' : ''}`
   }, React.createElement("div", {
     className: 'modal-overlay'
   }), React.createElement("div", {
@@ -2371,7 +2410,7 @@ const WalletConnectModal = () => {
     className: 'icon-button',
     onClick: () => dispatch(setConnectModal(false))
   }, React.createElement(Cross, {
-    fill: theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   }))))), React.createElement("div", {
     className: 'modal-content'
   }, React.createElement(WalletSelect, null)), React.createElement("div", {
@@ -2382,7 +2421,7 @@ const WalletConnectModal = () => {
     }
   }, React.createElement(SecondaryButton, {
     clickHandler: () => dispatch(setConnectModal(false)),
-    theme: theme
+    theme: theme.colorMode
   }, "Cancel"), React.createElement(PrimaryButton, {
     clickHandler: handleConnect
   }, "Connect"))));
@@ -2395,7 +2434,7 @@ const HelpPopup$1 = () => {
   const amount = useSelector(selectAmount);
   const bankPopup = useSelector(selectBankPopup);
   const [loading, setLoading] = useState(false);
-  const [memo, setMemo] = useState("");
+  const [memo, setMemo] = useState('');
   useEffect(() => {
     setMemo(md5(Math.random().toString()).toString());
   }, []);
@@ -2430,27 +2469,26 @@ const HelpPopup$1 = () => {
     className: 'icon-button',
     onClick: () => dispatch(setBankPopup(false))
   }, React.createElement(Cross, {
-    fill: theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   }))))), React.createElement("div", {
     className: 'modal-content'
   }, React.createElement("div", {
-    className: "bank-simulation"
+    className: 'bank-simulation'
   }, React.createElement("h1", null, "Welcome to the First National Crypto Bank"), React.createElement("p", null, "You\u2019re about to send funds to the Kima Finance LTD. bank account"), React.createElement("div", {
-    className: "content-item"
+    className: 'content-item'
   }, React.createElement("span", null, "User account:"), React.createElement("p", null, "2345234525245")), React.createElement("div", {
-    className: "content-item"
+    className: 'content-item'
   }, React.createElement("span", null, "Sum:"), React.createElement("p", null, "$", amount)), React.createElement("div", {
-    className: "content-item"
+    className: 'content-item'
   }, React.createElement("span", null, "Memo:"), React.createElement("p", null, memo)), React.createElement(PrimaryButton, {
     clickHandler: onSubmit,
     isLoading: loading,
     disabled: loading
-  }, loading ? "Transferring funds ..." : "Submit")))));
+  }, loading ? 'Transferring funds ...' : 'Submit')))));
 };
 
 const TransactionWidget = ({
-  theme: _theme = ThemeOptions.light,
-  fontSize: _fontSize = FontSizeOptions.medium
+  theme
 }) => {
   const [step, setStep] = useState(0);
   const [focus, setFocus] = useState(-1);
@@ -2496,7 +2534,7 @@ const TransactionWidget = ({
           setPercent(25);
           setErrorStep(1);
           setLoadingStep(-1);
-          console.log(data.failReason);
+          console.error(data.failReason);
         } else if (status === TransactionStatus.KEYSIGNED) {
           setStep(3);
           setPercent(75);
@@ -2510,13 +2548,13 @@ const TransactionWidget = ({
           setPercent(90);
           setErrorStep(3);
           setLoadingStep(-1);
-          console.log(data.failReason);
+          console.error(data.failReason);
         } else if (status === TransactionStatus.FAILEDTOPULL) {
           setStep(1);
           setPercent(25);
           setErrorStep(1);
           setLoadingStep(-1);
-          console.log(data.failReason);
+          console.error(data.failReason);
         } else if (status === TransactionStatus.COMPLETED) {
           setStep(4);
           setPercent(100);
@@ -2539,7 +2577,10 @@ const TransactionWidget = ({
   return React.createElement(Provider, {
     store: store
   }, React.createElement("div", {
-    className: `kima-card transaction-card ${_theme} font-${_fontSize} ${minimized ? 'minimized' : ''}`
+    className: `kima-card transaction-card ${theme.colorMode} font-${theme.fontSize} ${minimized ? 'minimized' : ''}`,
+    style: {
+      fontFamily: theme.fontFamily
+    }
   }, React.createElement("div", {
     className: 'kima-card-header'
   }, React.createElement("div", {
@@ -2559,7 +2600,7 @@ const TransactionWidget = ({
       setMinimized(true);
     }
   }, React.createElement(Minimize, {
-    fill: _theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   })), loadingStep < 0 ? React.createElement("button", {
     className: 'icon-button',
     onClick: () => {
@@ -2567,7 +2608,7 @@ const TransactionWidget = ({
       closeHandler();
     }
   }, React.createElement(Cross, {
-    fill: _theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   })) : null) : React.createElement("div", {
     className: 'control-buttons'
   }, React.createElement("div", {
@@ -2593,7 +2634,7 @@ const TransactionWidget = ({
   })), React.createElement("div", {
     className: 'kima-card-footer'
   }, React.createElement(FooterLogo, {
-    fill: _theme === 'light' ? 'black' : '#C5C5C5'
+    fill: theme.colorMode === 'light' ? 'black' : '#C5C5C5'
   })), React.createElement(HelpPopup, null), React.createElement(HashPopup, {
     data: data
   })));
@@ -2630,13 +2671,13 @@ const SingleForm = ({
   }, "Target Network:"), React.createElement(NetworkDropdown, {
     isOriginChain: false
   })), mode === ModeOptions.bridge && React.createElement("div", {
-    className: `form-item ${theme}`
+    className: `form-item ${theme.colorMode}`
   }, React.createElement("span", {
     className: 'label'
   }, "Target Address:"), React.createElement(AddressInput, null), compliantOption && targetCompliant !== 'low' ? React.createElement("p", {
     className: 'error'
   }, "Non-compliant address ", `(${targetCompliant} risk)`) : null), mode === ModeOptions.bridge ? React.createElement("div", {
-    className: `form-item ${theme}`
+    className: `form-item ${theme.colorMode}`
   }, React.createElement("span", {
     className: 'label'
   }, "Amount:"), React.createElement("input", {
@@ -2647,11 +2688,11 @@ const SingleForm = ({
       dispatch(setAmount(parseFloat(_amount.toFixed(2))));
     }
   }), React.createElement(CoinDropdown, null)) : React.createElement("div", {
-    className: `form-item ${theme}`
+    className: `form-item ${theme.colorMode}`
   }, React.createElement("span", {
     className: 'label'
   }, "Amount:"), React.createElement("div", {
-    className: `amount-label ${theme}`
+    className: `amount-label ${theme.colorMode}`
   }, React.createElement("span", null, (transactionOption === null || transactionOption === void 0 ? void 0 : transactionOption.amount) || ''), React.createElement("div", {
     className: 'coin-wrapper'
   }, React.createElement(selectedCoin.icon, null), selectedCoin.symbol))));
@@ -2666,7 +2707,7 @@ const CoinSelect = () => {
   return React.createElement("div", {
     className: `coin-select`
   }, React.createElement("p", null, "Select Amount of Token for Funding"), React.createElement("div", {
-    className: `amount-input ${theme}`
+    className: `amount-input ${theme.colorMode}`
   }, React.createElement("span", null, "Amount:"), React.createElement("div", {
     className: 'input-wrapper'
   }, React.createElement("input", {
@@ -6662,7 +6703,7 @@ const AddressInputWizard = () => {
   return React.createElement("div", {
     className: `coin-select`
   }, React.createElement("p", null, "Select Target Address for Funding"), React.createElement("div", {
-    className: `address-input ${theme}`
+    className: `address-input ${theme.colorMode}`
   }, React.createElement("span", null, "Target Address:"), React.createElement(AddressInput, null)));
 };
 
@@ -6689,8 +6730,7 @@ function useCurrencyOptions() {
 }
 
 const TransferWidget = ({
-  theme: _theme = ThemeOptions.light,
-  fontSize: _fontSize = FontSizeOptions.medium,
+  theme,
   titleOption,
   paymentTitleOption
 }) => {
@@ -6727,7 +6767,7 @@ const TransferWidget = ({
   const backendUrl = useSelector(selectBackendUrl);
   const nodeProviderQuery = useSelector(selectNodeProviderQuery);
   useEffect(() => {
-    if (!walletAddress) return;
+    if (!walletAddress || !compliantOption) return;
     (async function () {
       try {
         const res = await fetchWrapper.post(`${backendUrl}/compliant`, JSON.stringify({
@@ -6738,9 +6778,9 @@ const TransferWidget = ({
         console.log('xplorisk check failed', e);
       }
     })();
-  }, [walletAddress]);
+  }, [walletAddress, compliantOption]);
   useEffect(() => {
-    if (!targetAddress) return;
+    if (!targetAddress || !compliantOption) return;
     (async function () {
       try {
         const res = await fetchWrapper.post(`${backendUrl}/compliant`, JSON.stringify({
@@ -6751,7 +6791,7 @@ const TransferWidget = ({
         console.log('xplorisk check failed', e);
       }
     })();
-  }, [targetAddress]);
+  }, [targetAddress, compliantOption]);
   useEffect(() => {
     if (!nodeProviderQuery) return;
     (async function () {
@@ -6889,17 +6929,21 @@ const TransferWidget = ({
     }
   };
   useEffect(() => {
-    dispatch(setTheme(_theme));
-  }, [_theme]);
+    dispatch(setTheme(theme));
+  }, [theme]);
   return React.createElement("div", {
-    className: `kima-card ${_theme} font-${_fontSize}`
+    className: `kima-card ${theme.colorMode} font-${theme.fontSize}`,
+    style: {
+      fontFamily: theme.fontFamily,
+      background: theme.colorMode === ColorModeOptions.light ? theme.backgroundColorLight : theme.backgroundColorDark
+    }
   }, React.createElement("div", {
     className: 'kima-card-header'
   }, React.createElement("div", {
     className: 'topbar'
   }, React.createElement("div", {
     className: 'title'
-  }, React.createElement("h3", null, isWizard && wizardStep === 3 || !isWizard && formStep > 0 ? (titleOption === null || titleOption === void 0 ? void 0 : titleOption.confirmTitle) ?? 'Transfer Details' : (titleOption === null || titleOption === void 0 ? void 0 : titleOption.initialTitle) ?? 'New Transfer')), React.createElement("div", {
+  }, React.createElement("h3", null, isWizard && wizardStep === 3 || !isWizard && formStep > 0 ? titleOption !== null && titleOption !== void 0 && titleOption.confirmTitle ? titleOption === null || titleOption === void 0 ? void 0 : titleOption.confirmTitle : 'Transfer Details' : titleOption !== null && titleOption !== void 0 && titleOption.initialTitle ? titleOption === null || titleOption === void 0 ? void 0 : titleOption.initialTitle : 'New Transfer')), React.createElement("div", {
     className: 'control-buttons'
   }, React.createElement(ExternalLink, {
     to: 'https://docs.kima.finance/demo'
@@ -6912,7 +6956,7 @@ const TransferWidget = ({
       closeHandler();
     }
   }, React.createElement(Cross, {
-    fill: _theme === 'light' ? 'black' : 'white'
+    fill: theme.colorMode === 'light' ? 'black' : 'white'
   }))))), React.createElement("div", {
     className: 'kima-card-content'
   }, isWizard ? wizardStep === 0 ? React.createElement(Network, null) : wizardStep === 1 ? React.createElement("div", {
@@ -6930,12 +6974,12 @@ const TransferWidget = ({
   })), React.createElement("div", {
     className: 'kima-card-footer'
   }, React.createElement(FooterLogo, {
-    fill: _theme === 'light' ? 'black' : '#C5C5C5'
+    fill: theme.colorMode === 'light' ? 'black' : '#C5C5C5'
   }), React.createElement(SecondaryButton, {
     clickHandler: () => {
       setWizard(prev => !prev);
     },
-    theme: _theme,
+    theme: theme.colorMode,
     style: {
       style: {
         width: '12em',
@@ -6944,7 +6988,7 @@ const TransferWidget = ({
     }
   }, "Switch to ", isWizard ? 'Form' : 'Wizard'), React.createElement(SecondaryButton, {
     clickHandler: onBack,
-    theme: _theme
+    theme: theme.colorMode
   }, isWizard && wizardStep > 0 || !isWizard && formStep > 0 ? 'Back' : 'Cancel'), React.createElement(PrimaryButton, {
     clickHandler: onNext,
     isLoading: isApproving || isSubmitting
@@ -6954,8 +6998,10 @@ const TransferWidget = ({
 const KimaTransactionWidget = ({
   mode,
   txId,
-  theme: _theme = ThemeOptions.light,
-  fontSize: _fontSize = FontSizeOptions.medium,
+  autoConnect: _autoConnect = false,
+  provider,
+  dAppOption: _dAppOption = DAppOptions.None,
+  theme,
   titleOption,
   paymentTitleOption,
   useFIAT: _useFIAT = false,
@@ -6970,7 +7016,7 @@ const KimaTransactionWidget = ({
   const submitted = useSelector(selectSubmitted);
   const dispatch = useDispatch();
   useEffect(() => {
-    dispatch(setTheme(_theme));
+    dispatch(setTheme(theme));
     if (transactionOption) dispatch(setTransactionOption(transactionOption));
     dispatch(setCompliantOption(_compliantOption));
     dispatch(setErrorHandler(_errorHandler));
@@ -6979,6 +7025,9 @@ const KimaTransactionWidget = ({
     dispatch(setBackendUrl(kimaBackendUrl));
     dispatch(setNodeProviderQuery(kimaNodeProviderQuery));
     dispatch(setMode(mode));
+    dispatch(setProvider(provider));
+    dispatch(setDappOption(_dAppOption));
+    dispatch(setWalletAutoConnect(_autoConnect));
     if (mode === ModeOptions.payment) {
       dispatch(setTargetNetwork((transactionOption === null || transactionOption === void 0 ? void 0 : transactionOption.targetChain) || ChainName.ETHEREUM));
       dispatch(setUseFIAT(_useFIAT));
@@ -7009,20 +7058,22 @@ const KimaTransactionWidget = ({
       dispatch(setTxId(txId || 1));
       dispatch(setSubmitted(true));
     } else {
-      dispatch(setOriginNetwork('ETH'));
+      if (_dAppOption === DAppOptions.G$) dispatch(setOriginNetwork('CEL'));else if (_dAppOption === DAppOptions.None) dispatch(setOriginNetwork('ETH'));
     }
-  }, [_theme, transactionOption, _errorHandler, _closeHandler, mode]);
+  }, [provider, theme, transactionOption, _errorHandler, _closeHandler, mode]);
   return submitted ? React.createElement(TransactionWidget, {
-    theme: _theme,
-    fontSize: _fontSize
+    theme: theme
   }) : React.createElement(TransferWidget, {
-    theme: _theme,
-    fontSize: _fontSize,
+    theme: theme,
     titleOption: titleOption,
     paymentTitleOption: paymentTitleOption
   });
 };
 
+const {
+  ConnectionProvider,
+  WalletProvider
+} = SolanaAdapter;
 const KimaProvider = ({
   children
 }) => {
@@ -7036,5 +7087,5 @@ const KimaProvider = ({
   }, children))));
 };
 
-export { CurrencyOptions, FontSizeOptions, KimaProvider, KimaTransactionWidget, ModeOptions, ChainName as SupportNetworks, ThemeOptions };
+export { ColorModeOptions, CurrencyOptions, DAppOptions, FontSizeOptions, KimaProvider, KimaTransactionWidget, ModeOptions, ChainName as SupportNetworks };
 //# sourceMappingURL=index.modern.js.map