allow rotating obligated token

Author: pixelis0x

README.md

@@ -37,11 +37,11 @@ import React from 'react';
 import SwapWidget from '@ensofinance/shortcuts-widget';
 
 const App = () => {
-  return (
-    <div>
-      <SwapWidget apiKey={"YOUR_API_KEY"} />
+    return (
+        <div>
+            <SwapWidget apiKey={"YOUR_API_KEY"} />
     </div>
-  );
+);
 };
 
 export default App;
@@ -60,7 +60,8 @@ The `SwapWidget` component accepts the following props:
 - `themeConfig` (SystemConfig): Optional theme configuration
 - `enableShare` (boolean): Enable route sharing functionality (copy with button)
 - `obligateSelection` (boolean): Obligate token selection
-- `indicateRoute` (boolean): Indicate the route of the swap
+- `rotateObligated` (boolean | 0 | 1): For use with `obligateSelection`, displays arrow to rotate the obligated token
+- `indicateRoute` (boolean): Displays shortcut execution route
 
 ## License
 

widget/README.md

@@ -60,7 +60,8 @@ The `SwapWidget` component accepts the following props:
 - `themeConfig` (SystemConfig): Optional theme configuration
 - `enableShare` (boolean): Enable route sharing functionality (copy with button)
 - `obligateSelection` (boolean): Obligate token selection
-- `indicateRoute` (boolean): Indicate the route of the swap
+- `rotateObligated` (boolean | 0 | 1): For use with `obligateSelection`, displays arrow to rotate the obligated token
+- `indicateRoute` (boolean): Displays shortcut execution route
 
 ## License
 

widget/index.tsx

@@ -35,6 +35,7 @@ export default ({
   obligateSelection,
   indicateRoute,
   adaptive,
+  rotateObligated,
 }: WidgetProps & {
   apiKey: string;
   themeConfig?: SystemConfig;
@@ -101,6 +102,7 @@ export default ({
           <CacheProvider value={cache}>
             <ChakraProvider value={system}>
               <SwapWidget
+                rotateObligated={rotateObligated}
                 indicateRoute={indicateRoute}
                 obligateSelection={obligateSelection}
                 tokenIn={tokenIn?.toLowerCase() as Address}

widget/package.json

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

widget/src/components/SwapWidget.tsx

@@ -6,7 +6,6 @@ import {
   Flex,
   IconButton,
   Link,
-  Tabs,
   Text,
   useDisclosure,
 } from "@chakra-ui/react";
@@ -44,8 +43,8 @@ import Notification from "@/components/Notification";
 import { ClipboardLink, ClipboardRoot } from "@/components/ui/clipboard";
 import RouteIndication from "@/components/RouteIndication";
 import { Tooltip } from "@/components/ui/tooltip";
-import { NotifyType, WidgetProps } from "@/types";
 import Slippage from "@/components/Slippage";
+import { NotifyType, ObligatedToken, WidgetProps } from "@/types";
 
 const SwapWidget = ({
   tokenOut: providedTokenOut,
@@ -54,12 +53,16 @@ const SwapWidget = ({
   enableShare,
   indicateRoute,
   adaptive,
+  rotateObligated,
 }: WidgetProps) => {
   const [tokenIn, setTokenIn] = useState<Address>();
   const [valueIn, setValueIn] = useState("");
   const [warningAccepted, setWarningAccepted] = useState(false);
   const [tokenOut, setTokenOut] = useState<Address>();
   const [slippage, setSlippage] = useState(DEFAULT_SLIPPAGE);
+  const [obligatedToken, setObligatedToken] = useState(
+    obligateSelection && (rotateObligated ?? ObligatedToken.TokenOut),
+  );
 
   const chainId = usePriorityChainId();
   const wagmiChainId = useChainId();
@@ -218,6 +221,10 @@ const SwapWidget = ({
 
   const limitInputTokens =
     chainId === mainnet.id && tokenOutInfo?.symbol === "UNI-V2";
+  const displayTokenRotation =
+    !obligateSelection ||
+    rotateObligated ||
+    typeof rotateObligated === "number";
 
   return (
     <Box
@@ -250,7 +257,7 @@ const SwapWidget = ({
         <SwapInput
           title={"You pay"}
           limitTokens={limitInputTokens && MAINNET_ZAP_INPUT_TOKENS}
-          obligatedToken={providedTokenIn && obligateSelection}
+          obligatedToken={obligatedToken === ObligatedToken.TokenIn}
           portalRef={portalRef}
           tokenValue={tokenIn}
           tokenOnChange={setTokenIn}
@@ -259,7 +266,7 @@ const SwapWidget = ({
           usdValue={tokenInUsdPrice}
         />
 
-        {!obligateSelection && (
+        {displayTokenRotation && (
           <Flex justifyContent="center" alignItems="center">
             <IconButton
               borderRadius={"full"}
@@ -272,6 +279,13 @@ const SwapWidget = ({
               onClick={() => {
                 const tempTokenIn = tokenIn;
 
+                if (obligateSelection)
+                  setObligatedToken((val) =>
+                    val === ObligatedToken.TokenIn
+                      ? ObligatedToken.TokenOut
+                      : ObligatedToken.TokenIn,
+                  );
+
                 setTokenIn(tokenOut);
                 setTokenOut(tempTokenIn);
                 setValueIn(valueOut);
@@ -284,7 +298,7 @@ const SwapWidget = ({
 
         <SwapInput
           disabled
-          obligatedToken={providedTokenOut && obligateSelection}
+          obligatedToken={obligatedToken === ObligatedToken.TokenOut}
           title={"You receive"}
           loading={routerLoading}
           portalRef={portalRef}

widget/src/types.ts

@@ -7,6 +7,7 @@ export type WidgetProps = {
   obligateSelection?: boolean;
   enableShare?: boolean;
   indicateRoute?: boolean;
+  rotateObligated?: boolean | ObligatedToken;
 };
 
 export enum NotifyType {
@@ -17,3 +18,8 @@ export enum NotifyType {
   Warning = "warning",
   Blocked = "blocked",
 }
+
+export enum ObligatedToken {
+  TokenIn,
+  TokenOut,
+}