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

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/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/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/index.ts

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