@spicenet-io/spiceflow-ui 1.9.4 → 1.9.5

package/dist/index.cjs.js

@@ -2753,6 +2753,7 @@ const PrivyProviderWrapper = ({ children, appId, supportedViemChains }) => {
           theme: "#fafafa",
           showWalletLoginFirst: false,
           walletChainType: "ethereum-only",
+          logo: "https://spicenet.io/assets/Spicenet_Lockup_Secondary_FullColor.png",
           walletList: [
             "detected_ethereum_wallets",
             "metamask",
@@ -6076,6 +6077,9 @@ const SelectChainModal = ({
   const [selectedNetwork, setSelectedNetwork] = React.useState(null);
   const [hoveredNetwork, setHoveredNetwork] = React.useState(null);
   const [isSelectHovered, setIsSelectHovered] = React.useState(false);
+  const [isSwitching, setIsSwitching] = React.useState(false);
+  const [switchError, setSwitchError] = React.useState(null);
+  const { switchChainAsync } = wagmi.useSwitchChain();
   React.useEffect(() => {
     const link = document.createElement("link");
     link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap";
@@ -6099,9 +6103,24 @@ const SelectChainModal = ({
   const filteredNetworks = networks.filter(
     (network) => network.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
-  const handleSelect = () => {
-    if (selectedNetwork && onChainSelect) {
-      onChainSelect(selectedNetwork);
+  const handleSelect = async () => {
+    if (!selectedNetwork) return;
+    const chainId = parseInt(selectedNetwork, 10);
+    setIsSwitching(true);
+    setSwitchError(null);
+    try {
+      await switchChainAsync({ chainId });
+      if (onChainSelect) {
+        onChainSelect(selectedNetwork);
+      }
+      onClose();
+    } catch (error) {
+      console.error("Failed to switch chain:", error);
+      setSwitchError(
+        error instanceof Error ? error.message : "Failed to switch chain"
+      );
+    } finally {
+      setIsSwitching(false);
     }
   };
   if (!isOpen) return null;
@@ -6315,7 +6334,7 @@ const SelectChainModal = ({
                 onClick: handleSelect,
                 onMouseEnter: () => setIsSelectHovered(true),
                 onMouseLeave: () => setIsSelectHovered(false),
-                disabled: !selectedNetwork,
+                disabled: !selectedNetwork || isSwitching,
                 style: {
                   width: "100%",
                   padding: "10px",
@@ -6331,7 +6350,7 @@ const SelectChainModal = ({
                   backgroundColor: "white",
                   border: "1px solid #00000029",
                   color: "black",
-                  cursor: selectedNetwork ? "pointer" : "not-allowed"
+                  cursor: selectedNetwork && !isSwitching ? "pointer" : "not-allowed"
                 },
                 children: [
                   "SELECT",

package/dist/index.js

@@ -2751,6 +2751,7 @@ const PrivyProviderWrapper = ({ children, appId, supportedViemChains }) => {
           theme: "#fafafa",
           showWalletLoginFirst: false,
           walletChainType: "ethereum-only",
+          logo: "https://spicenet.io/assets/Spicenet_Lockup_Secondary_FullColor.png",
           walletList: [
             "detected_ethereum_wallets",
             "metamask",
@@ -6074,6 +6075,9 @@ const SelectChainModal = ({
   const [selectedNetwork, setSelectedNetwork] = useState(null);
   const [hoveredNetwork, setHoveredNetwork] = useState(null);
   const [isSelectHovered, setIsSelectHovered] = useState(false);
+  const [isSwitching, setIsSwitching] = useState(false);
+  const [switchError, setSwitchError] = useState(null);
+  const { switchChainAsync } = useSwitchChain();
   useEffect(() => {
     const link = document.createElement("link");
     link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap";
@@ -6097,9 +6101,24 @@ const SelectChainModal = ({
   const filteredNetworks = networks.filter(
     (network) => network.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
-  const handleSelect = () => {
-    if (selectedNetwork && onChainSelect) {
-      onChainSelect(selectedNetwork);
+  const handleSelect = async () => {
+    if (!selectedNetwork) return;
+    const chainId = parseInt(selectedNetwork, 10);
+    setIsSwitching(true);
+    setSwitchError(null);
+    try {
+      await switchChainAsync({ chainId });
+      if (onChainSelect) {
+        onChainSelect(selectedNetwork);
+      }
+      onClose();
+    } catch (error) {
+      console.error("Failed to switch chain:", error);
+      setSwitchError(
+        error instanceof Error ? error.message : "Failed to switch chain"
+      );
+    } finally {
+      setIsSwitching(false);
     }
   };
   if (!isOpen) return null;
@@ -6313,7 +6332,7 @@ const SelectChainModal = ({
                 onClick: handleSelect,
                 onMouseEnter: () => setIsSelectHovered(true),
                 onMouseLeave: () => setIsSelectHovered(false),
-                disabled: !selectedNetwork,
+                disabled: !selectedNetwork || isSwitching,
                 style: {
                   width: "100%",
                   padding: "10px",
@@ -6329,7 +6348,7 @@ const SelectChainModal = ({
                   backgroundColor: "white",
                   border: "1px solid #00000029",
                   color: "black",
-                  cursor: selectedNetwork ? "pointer" : "not-allowed"
+                  cursor: selectedNetwork && !isSwitching ? "pointer" : "not-allowed"
                 },
                 children: [
                   "SELECT",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spicenet-io/spiceflow-ui",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "Spiceflow UI SDK",
   "type": "module",
   "main": "dist/index.cjs.js",