@aurora-is-near/intents-swap-widget 3.21.0 → 3.22.0

package/dist/widgets/WidgetWithdraw/index.js

@@ -1,24 +1,23 @@
-import { jsx as r } from "react/jsx-runtime";
-import { BaseContainer as m } from "../../components/BaseContainer.js";
-import { WidgetContainer as d } from "../../components/WidgetContainer.js";
-import { WidgetWithdrawContent as a } from "./WidgetWithdrawContent.js";
-const c = ({
-  HeaderComponent: t,
+import { jsx as t } from "react/jsx-runtime";
+import { WidgetContainer as m } from "../../components/WidgetContainer.js";
+import { WidgetWithdrawContent as n } from "./WidgetWithdrawContent.js";
+const f = ({
+  HeaderComponent: r,
   FooterComponent: i,
   isFullPage: o,
   className: e,
-  ...n
-}) => /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
-  d,
+  ...d
+}) => /* @__PURE__ */ t(
+  m,
   {
     className: e,
     isFullPage: o,
-    HeaderComponent: t,
+    HeaderComponent: r,
     FooterComponent: i,
-    children: /* @__PURE__ */ r(a, { ...n })
+    children: /* @__PURE__ */ t(n, { ...d })
   }
-) });
+);
 export {
-  c as WidgetWithdraw
+  f as WidgetWithdraw
 };
 //# sourceMappingURL=index.js.map

package/dist/widgets/WidgetWithdraw/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/widgets/WidgetWithdraw/index.tsx"],"sourcesContent":["import { BaseContainer } from '../../components/BaseContainer';\nimport {\n  WidgetContainer,\n  WidgetContainerProps,\n} from '../../components/WidgetContainer';\nimport { Props, WidgetWithdrawContent } from './WidgetWithdrawContent';\n\nexport type WidgetWithdrawProps = Props &\n  Omit<WidgetContainerProps, 'children'>;\n\nexport const WidgetWithdraw = ({\n  HeaderComponent,\n  FooterComponent,\n  isFullPage,\n  className,\n  ...widgetProps\n}: WidgetWithdrawProps) => (\n  <BaseContainer>\n    <WidgetContainer\n      className={className}\n      isFullPage={isFullPage}\n      HeaderComponent={HeaderComponent}\n      FooterComponent={FooterComponent}>\n      <WidgetWithdrawContent {...widgetProps} />\n    </WidgetContainer>\n  </BaseContainer>\n);\n"],"names":["WidgetWithdraw","HeaderComponent","FooterComponent","isFullPage","className","widgetProps","BaseContainer","jsx","WidgetContainer","WidgetWithdrawContent"],"mappings":";;;;AAUO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,wBACGC,GAAA,EACC,UAAA,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAAJ;AAAA,IACA,YAAAD;AAAA,IACA,iBAAAF;AAAA,IACA,iBAAAC;AAAA,IACA,UAAA,gBAAAK,EAACE,GAAA,EAAuB,GAAGJ,EAAA,CAAa;AAAA,EAAA;AAC1C,EAAA,CACF;"}
+{"version":3,"file":"index.js","sources":["../../../src/widgets/WidgetWithdraw/index.tsx"],"sourcesContent":["import {\n  WidgetContainer,\n  WidgetContainerProps,\n} from '../../components/WidgetContainer';\nimport { Props, WidgetWithdrawContent } from './WidgetWithdrawContent';\n\nexport type WidgetWithdrawProps = Props &\n  Omit<WidgetContainerProps, 'children'>;\n\nexport const WidgetWithdraw = ({\n  HeaderComponent,\n  FooterComponent,\n  isFullPage,\n  className,\n  ...widgetProps\n}: WidgetWithdrawProps) => (\n  <WidgetContainer\n    className={className}\n    isFullPage={isFullPage}\n    HeaderComponent={HeaderComponent}\n    FooterComponent={FooterComponent}>\n    <WidgetWithdrawContent {...widgetProps} />\n  </WidgetContainer>\n);\n"],"names":["WidgetWithdraw","HeaderComponent","FooterComponent","isFullPage","className","widgetProps","jsx","WidgetContainer","WidgetWithdrawContent"],"mappings":";;;AASO,MAAMA,IAAiB,CAAC;AAAA,EAC7B,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAAH;AAAA,IACA,YAAAD;AAAA,IACA,iBAAAF;AAAA,IACA,iBAAAC;AAAA,IACA,UAAA,gBAAAI,EAACE,GAAA,EAAuB,GAAGH,EAAA,CAAa;AAAA,EAAA;AAC1C;"}

package/dist/widgets/index.d.ts

@@ -1,3 +1,4 @@
+export { Widget } from './Widget';
 export { WidgetSwap } from './WidgetSwap';
 export { WidgetDeposit } from './WidgetDeposit';
 export { WidgetWithdraw } from './WidgetWithdraw';

package/dist/widgets/index.js

@@ -1,9 +1,11 @@
-import { WidgetSwap as o } from "./WidgetSwap/index.js";
-import { WidgetDeposit as i } from "./WidgetDeposit/index.js";
-import { WidgetWithdraw as d } from "./WidgetWithdraw/index.js";
+import { Widget as o } from "./Widget/index.js";
+import { WidgetSwap as i } from "./WidgetSwap/index.js";
+import { WidgetDeposit as d } from "./WidgetDeposit/index.js";
+import { WidgetWithdraw as f } from "./WidgetWithdraw/index.js";
 export {
-  i as WidgetDeposit,
-  o as WidgetSwap,
-  d as WidgetWithdraw
+  o as Widget,
+  d as WidgetDeposit,
+  i as WidgetSwap,
+  f as WidgetWithdraw
 };
 //# sourceMappingURL=index.js.map

package/dist/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-is-near/intents-swap-widget",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "description": "Provides components and hooks to build your own Intents swap widget",
   "author": "Maksim Vashchuk",
   "license": "MIT",

package/src/components/WidgetContainer.tsx

@@ -45,7 +45,17 @@ export const WidgetContainer = ({
   );
 
   if (!isFullPage) {
-    return jsx;
+    return (
+      <div
+        className={cn(
+          'relative w-auto mx-auto',
+          theme?.showContainer
+            ? 'max-w-[496px] sm:w-[496px] p-csw-2xl bg-sw-container rounded-sw-lg'
+            : 'max-w-[456px] sm:w-[456px]',
+        )}>
+        {jsx}
+      </div>
+    );
   }
 
   return (

package/src/components/WidgetTabs.tsx

@@ -0,0 +1,33 @@
+import { cn } from '../utils';
+
+const TABS = ['swap', 'deposit', 'withdraw'] as const;
+
+export type WidgetTab = (typeof TABS)[number];
+
+type Props = {
+  activeTab: WidgetTab;
+  onSelect: (tab: WidgetTab) => void;
+};
+
+export const WidgetTabs = ({ activeTab, onSelect }: Props) => {
+  return (
+    <nav className="space-x-[10px] mb-sw-2xl w-full">
+      {TABS.map((tab) => {
+        const isActive = activeTab === tab;
+
+        return (
+          <button
+            onClick={() => onSelect(tab)}
+            className={cn(
+              'rounded-sw-md text-sw-label-md cursor-pointer py-[10px] px-sw-lg',
+              isActive
+                ? 'bg-sw-gray-50 text-sw-gray-950'
+                : 'bg-transparent text-sw-gray-200',
+            )}>
+            {tab.charAt(0).toUpperCase() + tab.slice(1)}
+          </button>
+        );
+      })}
+    </nav>
+  );
+};

package/src/features/SwapDirectionSwitcher.tsx

@@ -1,18 +1,16 @@
+import { useConfig } from '../config';
 import { DirectionSwitcher } from '@/components/DirectionSwitcher';
 import { useUnsafeSnapshot } from '@/machine/snap';
 import { fireEvent } from '@/machine';
 
-type Props = {
-  disabled?: boolean;
-};
-
-export const SwapDirectionSwitcher = ({ disabled }: Props) => {
+export const SwapDirectionSwitcher = () => {
   const { ctx } = useUnsafeSnapshot();
+  const { lockSwapDirection } = useConfig();
 
   return (
     <DirectionSwitcher
       isLoading={ctx.quoteStatus === 'pending'}
-      isEnabled={!disabled && !!(ctx.sourceToken && ctx.targetToken)}
+      isEnabled={!lockSwapDirection && !!(ctx.sourceToken && ctx.targetToken)}
       onClick={() => fireEvent('tokenSelectRotate', null)}
     />
   );

package/src/types/config.ts

@@ -74,4 +74,5 @@ export type WidgetConfig = {
   hideSendAddress?: boolean;
   hideTokenInputHeadings?: boolean;
   themeParentElementSelector?: string;
+  lockSwapDirection?: boolean;
 };

package/src/widgets/Widget/WidgetContent.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState } from 'react';
+import { WidgetTab, WidgetTabs } from '../../components/WidgetTabs';
+import {
+  Msg as SwapMsg,
+  WidgetSwapContent,
+  Props as WidgetSwapProps,
+} from '../WidgetSwap/WidgetSwapContent';
+import {
+  Msg as DepositMsg,
+  WidgetDepositContent,
+  Props as WidgetDepositProps,
+} from '../WidgetDeposit/WidgetDepositContent';
+import {
+  WidgetWithdrawContent,
+  Props as WidgetWithdrawProps,
+  Msg as WithdrawMsg,
+} from '../WidgetWithdraw/WidgetWithdrawContent';
+
+type WidgetType = 'swap' | 'deposit' | 'withdraw';
+
+export type Props = Omit<
+  WidgetSwapProps | WidgetDepositProps | WidgetWithdrawProps,
+  'onMsg'
+> & {
+  onMsg?: (msg: Msg, widget: WidgetType) => void;
+};
+
+type Msg = SwapMsg | DepositMsg | WithdrawMsg;
+
+export const WidgetContent = ({ onMsg, ...restProps }: Props) => {
+  const [isTabsVisible, setIsTabsVisible] = useState(true);
+  const [activeTab, setActiveTab] = useState<WidgetTab>('swap');
+
+  const switchTab = (tab: WidgetTab) => {
+    setActiveTab(tab);
+  };
+
+  const handleMsg = <T extends Msg>(msg: T, widgetType: WidgetType) => {
+    if (msg.type === 'on_tokens_modal_toggled') {
+      setIsTabsVisible(!msg.isOpen);
+    }
+
+    if (msg.type === 'on_select_token') {
+      setIsTabsVisible(true);
+    }
+
+    onMsg?.(msg, widgetType);
+  };
+
+  return (
+    <>
+      {isTabsVisible && (
+        <WidgetTabs activeTab={activeTab} onSelect={switchTab} />
+      )}
+
+      {(() => {
+        switch (activeTab) {
+          case 'swap': {
+            return (
+              <WidgetSwapContent
+                {...restProps}
+                onMsg={(msg) => {
+                  handleMsg(msg, 'swap');
+                }}
+              />
+            );
+          }
+
+          case 'deposit': {
+            return (
+              <WidgetDepositContent
+                {...restProps}
+                onMsg={(msg) => {
+                  handleMsg(msg, 'deposit');
+                }}
+              />
+            );
+          }
+
+          case 'withdraw': {
+            return (
+              <WidgetWithdrawContent
+                {...restProps}
+                onMsg={(msg) => {
+                  handleMsg(msg, 'withdraw');
+                }}
+              />
+            );
+          }
+
+          default:
+            return null;
+        }
+      })()}
+    </>
+  );
+};

package/src/widgets/Widget/index.tsx

@@ -0,0 +1,23 @@
+import {
+  WidgetContainer,
+  WidgetContainerProps,
+} from '../../components/WidgetContainer';
+import { Props, WidgetContent } from './WidgetContent';
+
+export type WidgetProps = Props & Omit<WidgetContainerProps, 'children'>;
+
+export const Widget = ({
+  HeaderComponent,
+  FooterComponent,
+  isFullPage,
+  className,
+  ...widgetProps
+}: WidgetProps) => (
+  <WidgetContainer
+    className={className}
+    isFullPage={isFullPage}
+    HeaderComponent={HeaderComponent}
+    FooterComponent={FooterComponent}>
+    <WidgetContent {...widgetProps} />
+  </WidgetContainer>
+);

package/src/widgets/WidgetDeposit/WidgetDepositContent.tsx

@@ -32,7 +32,7 @@ import { isDebug, notReachable } from '@/utils';
 
 import type { Token, TransferResult } from '@/types';
 
-type Msg =
+export type Msg =
   | { type: 'on_select_token'; token: Token; variant: TokenInputType }
   | { type: 'on_change_deposit_type'; isExternal: boolean }
   | { type: 'on_transfer_success' }

package/src/widgets/WidgetDeposit/index.tsx

@@ -1,4 +1,3 @@
-import { BaseContainer } from '../../components/BaseContainer';
 import {
   WidgetContainer,
   WidgetContainerProps,
@@ -14,13 +13,11 @@ export const WidgetDeposit = ({
   className,
   ...widgetProps
 }: WidgetDepositProps) => (
-  <BaseContainer>
-    <WidgetContainer
-      className={className}
-      isFullPage={isFullPage}
-      HeaderComponent={HeaderComponent}
-      FooterComponent={FooterComponent}>
-      <WidgetDepositContent {...widgetProps} />
-    </WidgetContainer>
-  </BaseContainer>
+  <WidgetContainer
+    className={className}
+    isFullPage={isFullPage}
+    HeaderComponent={HeaderComponent}
+    FooterComponent={FooterComponent}>
+    <WidgetDepositContent {...widgetProps} />
+  </WidgetContainer>
 );

package/src/widgets/WidgetSwap/WidgetSwapContent.tsx

@@ -32,21 +32,18 @@ import { isDebug, notReachable } from '@/utils';
 
 import type { Token, TransferResult } from '@/types';
 
-type Msg =
+export type Msg =
   | { type: 'on_tokens_modal_toggled'; isOpen: boolean }
   | { type: 'on_select_token'; token: Token; variant: TokenInputType }
   | { type: 'on_transfer_success' };
 
-export type Props = CommonWidgetProps<Msg> & {
-  isOneWay?: boolean;
-};
+export type Props = CommonWidgetProps<Msg>;
 
 export const WidgetSwapContent = ({
   providers,
   makeTransfer,
   onMsg,
   isLoading,
-  isOneWay,
 }: Props) => {
   const { ctx } = useUnsafeSnapshot();
   const { isDirectNearTokenWithdrawal } = useComputedSnapshot();
@@ -217,7 +214,7 @@ export const WidgetSwapContent = ({
               }}
             />
 
-            <SwapDirectionSwitcher disabled={isOneWay} />
+            <SwapDirectionSwitcher />
 
             <TokenInput.Target
               heading={t('tokenInput.heading.target.swap', 'Buy')}

package/src/widgets/WidgetSwap/index.tsx

@@ -1,4 +1,3 @@
-import { BaseContainer } from '../../components/BaseContainer';
 import {
   WidgetContainer,
   WidgetContainerProps,
@@ -14,13 +13,11 @@ export const WidgetSwap = ({
   className,
   ...widgetProps
 }: WidgetSwapProps) => (
-  <BaseContainer>
-    <WidgetContainer
-      className={className}
-      isFullPage={isFullPage}
-      HeaderComponent={HeaderComponent}
-      FooterComponent={FooterComponent}>
-      <WidgetSwapContent {...widgetProps} />
-    </WidgetContainer>
-  </BaseContainer>
+  <WidgetContainer
+    className={className}
+    isFullPage={isFullPage}
+    HeaderComponent={HeaderComponent}
+    FooterComponent={FooterComponent}>
+    <WidgetSwapContent {...widgetProps} />
+  </WidgetContainer>
 );

package/src/widgets/WidgetWithdraw/WidgetWithdrawContent.tsx

@@ -31,7 +31,7 @@ import { isDebug, notReachable } from '@/utils';
 
 import type { Token, TransferResult } from '@/types';
 
-type Msg =
+export type Msg =
   | { type: 'on_select_token'; token: Token; variant: TokenInputType }
   | { type: 'on_transfer_success' }
   | { type: 'on_tokens_modal_toggled'; isOpen: boolean };

package/src/widgets/WidgetWithdraw/index.tsx

@@ -1,4 +1,3 @@
-import { BaseContainer } from '../../components/BaseContainer';
 import {
   WidgetContainer,
   WidgetContainerProps,
@@ -15,13 +14,11 @@ export const WidgetWithdraw = ({
   className,
   ...widgetProps
 }: WidgetWithdrawProps) => (
-  <BaseContainer>
-    <WidgetContainer
-      className={className}
-      isFullPage={isFullPage}
-      HeaderComponent={HeaderComponent}
-      FooterComponent={FooterComponent}>
-      <WidgetWithdrawContent {...widgetProps} />
-    </WidgetContainer>
-  </BaseContainer>
+  <WidgetContainer
+    className={className}
+    isFullPage={isFullPage}
+    HeaderComponent={HeaderComponent}
+    FooterComponent={FooterComponent}>
+    <WidgetWithdrawContent {...widgetProps} />
+  </WidgetContainer>
 );

package/src/widgets/index.ts

@@ -1,3 +1,4 @@
+export { Widget } from './Widget';
 export { WidgetSwap } from './WidgetSwap';
 export { WidgetDeposit } from './WidgetDeposit';
 export { WidgetWithdraw } from './WidgetWithdraw';

package/dist/components/BaseContainer.d.ts

@@ -1,2 +0,0 @@
-import { PropsWithChildren } from 'react';
-export declare const BaseContainer: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BaseContainer.js

@@ -1,23 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useTheme as t } from "../hooks/useTheme.js";
-import "../constants/chains.js";
-import "viem";
-import "ethers";
-import { cn as e } from "../utils/cn.js";
-const w = ({ children: o }) => {
-  const m = t();
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      className: e(
-        "relative w-auto mx-auto",
-        m?.showContainer ? "max-w-[496px] sm:w-[496px] p-csw-2xl bg-sw-container rounded-sw-lg" : "max-w-[456px] sm:w-[456px]"
-      ),
-      children: o
-    }
-  );
-};
-export {
-  w as BaseContainer
-};
-//# sourceMappingURL=BaseContainer.js.map

package/dist/components/BaseContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseContainer.js","sources":["../../src/components/BaseContainer.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\nimport { useTheme } from '../hooks/useTheme';\nimport { cn } from '../utils';\n\nexport const BaseContainer = ({ children }: PropsWithChildren) => {\n  const theme = useTheme();\n\n  return (\n    <div\n      className={cn(\n        'relative w-auto mx-auto',\n        theme?.showContainer\n          ? 'max-w-[496px] sm:w-[496px] p-csw-2xl bg-sw-container rounded-sw-lg'\n          : 'max-w-[456px] sm:w-[456px]',\n      )}>\n      {children}\n    </div>\n  );\n};\n"],"names":["BaseContainer","children","theme","useTheme","jsx","cn"],"mappings":";;;;;;AAIO,MAAMA,IAAgB,CAAC,EAAE,UAAAC,QAAkC;AAChE,QAAMC,IAAQC,EAAA;AAEd,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH,GAAO,gBACH,uEACA;AAAA,MAAA;AAAA,MAEL,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/src/components/BaseContainer.tsx

@@ -1,19 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { useTheme } from '../hooks/useTheme';
-import { cn } from '../utils';
-
-export const BaseContainer = ({ children }: PropsWithChildren) => {
-  const theme = useTheme();
-
-  return (
-    <div
-      className={cn(
-        'relative w-auto mx-auto',
-        theme?.showContainer
-          ? 'max-w-[496px] sm:w-[496px] p-csw-2xl bg-sw-container rounded-sw-lg'
-          : 'max-w-[456px] sm:w-[456px]',
-      )}>
-      {children}
-    </div>
-  );
-};