update readme

Author: pixelis0x

README.md

@@ -5,15 +5,17 @@
 
 </div>
 
-# Shortcuts Widget
+# Cross-chain Shortcuts Widget
 
 ## Overview
 
-This widget is a React component designed to provide a user-friendly interface for swapping tokens. It integrates with Enso API to allow not only simple swaps but also operations like zap-in.
+This widget is a React component that utilizes Enso API. It is designed to provide a user-friendly interface for swapping, bridging and executing DeFi action
 
 ## Features
 
 - Swap any-to-any tokens
+- Bridge any-to-any tokens
+- Deposit/withdraw into DeFi protocols
 - Perform zap-in operations
 - Display token details including balance, USD cost, slippage, etc.
 - Enable DeFi operations composition since Enso API is used
@@ -40,8 +42,8 @@ const App = () => {
     return (
         <div>
             <SwapWidget apiKey={"YOUR_API_KEY"} />
-    </div>
-);
+        </div>
+    );
 };
 
 export default App;

app/src/App.tsx

@@ -35,7 +35,7 @@ function App() {
   // Use a single state object instead of multiple state variables
   const [state, setState] = useState<AppState>({});
 
-  // Parse URL params on initial load and location changes
+  // Parse URL params and save to sate on initial load
   useEffect(() => {
     const searchParams = new URLSearchParams(location.search);
     const tokenInParam = searchParams.get("tokenIn");
@@ -45,10 +45,8 @@ function App() {
     const outProjectParam = searchParams.get("outProject");
     const obligated = searchParams.get("obligated");
 
-    // Create a new state object with URL parameters
     const newState: AppState = {};
 
-    // Set initial state from URL parameters
     if (chainIdParam) newState.chainId = parseInt(chainIdParam);
     if (outChainIdParam) newState.outChainId = parseInt(outChainIdParam);
     if (isAddress(tokenInParam)) newState.tokenIn = tokenInParam as Address;
@@ -64,22 +62,22 @@ function App() {
 
   // Update URL when parameters change
   useEffect(() => {
-    const searchParams = new URLSearchParams();
+    // Get current search params first to preserve any params not managed by this component
+    const searchParams = new URLSearchParams(location.search);
 
+    // Only update params that are in state
     if (state.tokenIn) searchParams.set("tokenIn", state.tokenIn);
 
-    if (state.tokenOut) {
-      state.tokenOut && searchParams.set("tokenOut", state.tokenOut);
-      state.outChainId &&
-        searchParams.set("outChainId", state.outChainId.toString());
-    }
+    if (state.tokenOut) searchParams.set("tokenOut", state.tokenOut);
 
+    if (state.outChainId)
+      searchParams.set("outChainId", state.outChainId.toString());
     if (state.chainId) searchParams.set("chainId", state.chainId.toString());
     if (state.obligateSelection)
       searchParams.set("obligated", state.obligateSelection.toString());
 
     navigate({ search: searchParams.toString() }, { replace: true });
-  }, [state, navigate]);
+  }, [state, navigate, location.search]);
 
   // Handler for state changes coming from the widget
   const handleStateChange = useCallback((newWidgetState: Partial<AppState>) => {

widget/README.md

@@ -5,15 +5,17 @@
 
 </div>
 
-# Shortcuts Widget
+# Cross-chain Shortcuts Widget
 
 ## Overview
 
-This widget is a React component designed to provide a user-friendly interface for swapping tokens. It integrates with Enso API to allow not only simple swaps but also operations like zap-in.
+This widget is a React component that utilizes Enso API. It is designed to provide a user-friendly interface for swapping, bridging and executing DeFi action
 
 ## Features
 
 - Swap any-to-any tokens
+- Bridge any-to-any tokens
+- Deposit/withdraw into DeFi protocols
 - Perform zap-in operations
 - Display token details including balance, USD cost, slippage, etc.
 - Enable DeFi operations composition since Enso API is used

widget/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ensofinance/shortcuts-widget",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "type": "module",
   "homepage": "https://www.enso.build/",
   "repository": {

widget/src/components/SwapWidget.tsx

@@ -196,12 +196,6 @@ const SwapWidget = ({
   const tokenOutUsdPrice =
     +(outUsdPrice?.price ?? 0) *
     +normalizeValue(routerData?.amountOut?.toString(), tokenOutInfo?.decimals);
-
-  const urlToCopy = useMemo(() => {
-    const url = new URL(window.location.href);
-    return url.toString();
-  }, []);
-
   const priceImpactValue = (routerData as any)?.priceImpact;
 
   const shouldWarnPriceImpact =
@@ -439,7 +433,7 @@ const SwapWidget = ({
         <Flex w={"100%"}>
           {enableShare && (
             <Box color={"gray.500"}>
-              <ClipboardRoot value={urlToCopy} position={"absolute"}>
+              <ClipboardRoot value={window.location.href} position={"absolute"}>
                 <ClipboardLink textStyle={"xs"} cursor={"pointer"} />
               </ClipboardRoot>
             </Box>

widget/src/constants.ts

@@ -133,7 +133,7 @@ export const STARGATE_CHAIN_NAMES: { [key in SupportedChainId]: string } = {
   [SupportedChainId.UNICHAIN]: "unichain",
   [SupportedChainId.INK]: "ink",
   [SupportedChainId.SONEIUM]: "soneium",
-  [SupportedChainId.PLUME]: "plume",
+  [SupportedChainId.PLUME]: "plumephoenix",
 };
 
 export const MOCK_IMAGE_URL =