@avalabs/avacloud-waas-react 1.0.3 → 1.0.4

package/dist/index.js

@@ -2376,7 +2376,8 @@ function SendFormView({
           value: recipient,
           onChange: (e) => handleRecipientChange(e.target.value),
           error: !!error || !!addressError,
-          helperText: addressError
+          helperText: !selectedToken ? "Select a token first" : addressError,
+          disabled: !selectedToken
         }
       )
     ] }),
@@ -2395,7 +2396,8 @@ function SendFormView({
           placeholder: "0.00",
           value: amount,
           onChange: handleAmountChange,
-          error: !!error
+          error: !!error,
+          disabled: !selectedToken
         }
       )
     ] }),
@@ -2712,6 +2714,14 @@ function SendView({ onBack, onViewStateChange, selectedToken: initialToken }) {
   const [selectedToken, setSelectedToken] = (0, import_react13.useState)(initialToken);
   const { transfer, transferERC20, error, isLoading, txHash, viewState, reset, actualBaseFee, actualPriorityFee, actualTotalFee } = useTransferTokens();
   const { data: blockchainInfo } = useBlockchain((chainId == null ? void 0 : chainId.toString()) || "");
+  const { wallet } = useAvaCloudWallet();
+  const { data: tokenBalancesResponse } = useERC20Balances((wallet == null ? void 0 : wallet.address) || void 0, chainId == null ? void 0 : chainId.toString());
+  const tokenBalances = tokenBalancesResponse;
+  (0, import_react13.useEffect)(() => {
+    if (!selectedToken && (tokenBalances == null ? void 0 : tokenBalances.nativeTokenBalance)) {
+      setSelectedToken(tokenBalances.nativeTokenBalance);
+    }
+  }, [selectedToken, tokenBalances]);
   (0, import_react13.useEffect)(() => {
     onViewStateChange == null ? void 0 : onViewStateChange(viewState);
   }, [viewState, onViewStateChange]);
@@ -2805,6 +2815,8 @@ function ReceiveView(_props) {
   const { wallet } = useAvaCloudWallet();
   const { chainId } = useChainId();
   const [_copied, setCopied] = (0, import_react15.useState)(false);
+  const theme = (0, import_core_k2_components10.useTheme)();
+  const { isDarkMode } = useThemeMode();
   if (!wallet.address) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core_k2_components10.Box, { sx: { p: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core_k2_components10.Typography, { color: "text.secondary", children: "No wallet address available" }) });
   }
@@ -2826,7 +2838,7 @@ function ReceiveView(_props) {
       import_core_k2_components10.Typography,
       {
         sx: {
-          color: "#000",
+          color: "text.primary",
           fontSize: "14px",
           fontWeight: 500,
           lineHeight: "20px"
@@ -2847,7 +2859,7 @@ function ReceiveView(_props) {
             flex: 1,
             fontFamily: "monospace",
             fontSize: "14px",
-            color: "#000",
+            color: "text.primary",
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
@@ -2863,16 +2875,18 @@ function ReceiveView(_props) {
       width: "100%",
       aspectRatio: "1",
       p: 2,
-      background: "#FFF",
+      background: isDarkMode ? theme.palette.background.paper : "#FFF",
       borderRadius: "8px",
-      border: "1px solid rgba(0, 0, 0, 0.12)"
+      border: `1px solid ${isDarkMode ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"}`
     }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_qrcode.QRCodeSVG,
       {
         value: wallet.address ? `ethereum:${wallet.address}@${chainId}` : "",
         level: "H",
         includeMargin: false,
-        size: 200
+        size: 200,
+        bgColor: isDarkMode ? theme.palette.background.paper : "#FFFFFF",
+        fgColor: isDarkMode ? "#FFFFFF" : "#000000"
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core_k2_components10.Box, { sx: { mt: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PoweredByAvaCloud, {}) })

package/dist/index.mjs

@@ -1604,7 +1604,7 @@ import {
   IconButton as IconButton9,
   CopyIcon as CopyIcon5,
   AvaCloudIcon as AvaCloudIcon2,
-  useTheme as useTheme4
+  useTheme as useTheme5
 } from "@avalabs/core-k2-components";
 
 // src/components/WalletCard.tsx
@@ -1614,7 +1614,7 @@ import {
   Box as Box10,
   IconButton as IconButton8,
   CopyIcon as CopyIcon4,
-  useTheme as useTheme3,
+  useTheme as useTheme4,
   CircularProgress as CircularProgress2,
   AvaCloudIcon,
   Dialog as Dialog4,
@@ -2370,7 +2370,8 @@ function SendFormView({
           value: recipient,
           onChange: (e) => handleRecipientChange(e.target.value),
           error: !!error || !!addressError,
-          helperText: addressError
+          helperText: !selectedToken ? "Select a token first" : addressError,
+          disabled: !selectedToken
         }
       )
     ] }),
@@ -2389,7 +2390,8 @@ function SendFormView({
           placeholder: "0.00",
           value: amount,
           onChange: handleAmountChange,
-          error: !!error
+          error: !!error,
+          disabled: !selectedToken
         }
       )
     ] }),
@@ -2706,6 +2708,14 @@ function SendView({ onBack, onViewStateChange, selectedToken: initialToken }) {
   const [selectedToken, setSelectedToken] = useState11(initialToken);
   const { transfer, transferERC20, error, isLoading, txHash, viewState, reset, actualBaseFee, actualPriorityFee, actualTotalFee } = useTransferTokens();
   const { data: blockchainInfo } = useBlockchain((chainId == null ? void 0 : chainId.toString()) || "");
+  const { wallet } = useAvaCloudWallet();
+  const { data: tokenBalancesResponse } = useERC20Balances((wallet == null ? void 0 : wallet.address) || void 0, chainId == null ? void 0 : chainId.toString());
+  const tokenBalances = tokenBalancesResponse;
+  useEffect6(() => {
+    if (!selectedToken && (tokenBalances == null ? void 0 : tokenBalances.nativeTokenBalance)) {
+      setSelectedToken(tokenBalances.nativeTokenBalance);
+    }
+  }, [selectedToken, tokenBalances]);
   useEffect6(() => {
     onViewStateChange == null ? void 0 : onViewStateChange(viewState);
   }, [viewState, onViewStateChange]);
@@ -2797,13 +2807,16 @@ import {
   Box as Box4,
   Typography as Typography5,
   IconButton as IconButton4,
-  CopyIcon
+  CopyIcon,
+  useTheme as useTheme2
 } from "@avalabs/core-k2-components";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function ReceiveView(_props) {
   const { wallet } = useAvaCloudWallet();
   const { chainId } = useChainId();
   const [_copied, setCopied] = useState12(false);
+  const theme = useTheme2();
+  const { isDarkMode } = useThemeMode();
   if (!wallet.address) {
     return /* @__PURE__ */ jsx12(Box4, { sx: { p: 2 }, children: /* @__PURE__ */ jsx12(Typography5, { color: "text.secondary", children: "No wallet address available" }) });
   }
@@ -2825,7 +2838,7 @@ function ReceiveView(_props) {
       Typography5,
       {
         sx: {
-          color: "#000",
+          color: "text.primary",
           fontSize: "14px",
           fontWeight: 500,
           lineHeight: "20px"
@@ -2846,7 +2859,7 @@ function ReceiveView(_props) {
             flex: 1,
             fontFamily: "monospace",
             fontSize: "14px",
-            color: "#000",
+            color: "text.primary",
             overflow: "hidden",
             textOverflow: "ellipsis"
           },
@@ -2862,16 +2875,18 @@ function ReceiveView(_props) {
       width: "100%",
       aspectRatio: "1",
       p: 2,
-      background: "#FFF",
+      background: isDarkMode ? theme.palette.background.paper : "#FFF",
       borderRadius: "8px",
-      border: "1px solid rgba(0, 0, 0, 0.12)"
+      border: `1px solid ${isDarkMode ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)"}`
     }, children: /* @__PURE__ */ jsx12(
       QRCodeSVG,
       {
         value: wallet.address ? `ethereum:${wallet.address}@${chainId}` : "",
         level: "H",
         includeMargin: false,
-        size: 200
+        size: 200,
+        bgColor: isDarkMode ? theme.palette.background.paper : "#FFFFFF",
+        fgColor: isDarkMode ? "#FFFFFF" : "#000000"
       }
     ) }),
     /* @__PURE__ */ jsx12(Box4, { sx: { mt: "auto" }, children: /* @__PURE__ */ jsx12(PoweredByAvaCloud, {}) })
@@ -2994,7 +3009,7 @@ import {
   Box as Box8,
   Tabs,
   Tab,
-  useTheme as useTheme2
+  useTheme as useTheme3
 } from "@avalabs/core-k2-components";
 
 // src/components/FungibleList.tsx
@@ -3390,7 +3405,7 @@ function NonFungibleList() {
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function TokensView({ onSend }) {
   const [activeTab, setActiveTab] = useState14("tokens");
-  const theme = useTheme2();
+  const theme = useTheme3();
   const handleCopyAddress = (address) => {
     navigator.clipboard.writeText(address);
   };
@@ -3631,7 +3646,7 @@ function WalletCard({ onClose }) {
   const { balance, isLoadingBalance, currencySymbol, blockchain } = useGlacier();
   const [currentView, setCurrentView] = useState15("main");
   const [selectedToken, setSelectedToken] = useState15();
-  const theme = useTheme3();
+  const theme = useTheme4();
   if (!isAuthenticated || !user) return null;
   const handleCopy = (e) => {
     e.stopPropagation();
@@ -3823,7 +3838,7 @@ function WalletButton({
 }) {
   const { isLoading, isAuthenticated, wallet } = useAvaCloudWallet();
   const [isModalOpen, setIsModalOpen] = useState16(false);
-  const theme = useTheme4();
+  const theme = useTheme5();
   const { isDarkMode } = useThemeMode();
   const handleOpen = () => setIsModalOpen(true);
   const handleClose = () => setIsModalOpen(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avalabs/avacloud-waas-react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React SDK for AvaCloud Wallet as a Service",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",