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

package/src/widgets/Widget/WidgetContent.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { useEffect, 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';
+import { useConfig } from '../../config';
+
+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 { enableAccountAbstraction } = useConfig();
+
+  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);
+  };
+
+  useEffect(() => {
+    if (!enableAccountAbstraction) {
+      setActiveTab('swap');
+    }
+  }, [enableAccountAbstraction]);
+
+  return (
+    <>
+      {enableAccountAbstraction && 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/WidgetDeposit.test.tsx

@@ -39,10 +39,6 @@ const WidgetDepositSetup = () => {
     alchemyApiKey: 'test-alchemy-api-key',
     connectedWallets: { default: mockConnectedWalletAddress('evm') },
     walletSupportedChains: EVM_CHAINS,
-    chainsFilter: {
-      target: { intents: 'all', external: 'all' },
-      source: { intents: 'all', external: 'all' },
-    },
   };
 
   return (

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' }
@@ -50,7 +50,6 @@ export const WidgetDepositContent = ({
   const { t } = useTypedTranslation();
   const { isDirectNearTokenWithdrawal } = useComputedSnapshot();
   const {
-    chainsFilter,
     alchemyApiKey,
     refetchQuoteInterval,
     intentsAccountType,
@@ -188,8 +187,13 @@ export const WidgetDepositContent = ({
             groupTokens={tokenModalOpen === 'source'}
             chainsFilter={
               tokenModalOpen === 'source'
-                ? chainsFilter.source
-                : chainsFilter.target
+                ? {
+                    intents: 'none',
+                    external: ctx.isDepositFromExternalWallet
+                      ? 'all'
+                      : 'wallet-supported',
+                  }
+                : { intents: 'all', external: 'none' }
             }
             onMsg={(msg) => {
               switch (msg.type) {

package/src/widgets/WidgetSwap/WidgetSwapContent.tsx

@@ -30,15 +30,25 @@ import { useConfig } from '@/config';
 
 import { isDebug, notReachable } from '@/utils';
 
-import type { Token, TransferResult } from '@/types';
+import type { ChainsFilter, 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>;
+
+const getSourceTokens = (
+  enableAccountAbstraction: boolean,
+  walletAddress?: string,
+): ChainsFilter => {
+  const enabledIntentsFilter = walletAddress ? 'with-balance' : 'all';
+
+  return {
+    intents: enableAccountAbstraction ? enabledIntentsFilter : 'none',
+    external: walletAddress ? 'wallet-supported' : 'all',
+  };
 };
 
 export const WidgetSwapContent = ({
@@ -46,12 +56,11 @@ export const WidgetSwapContent = ({
   makeTransfer,
   onMsg,
   isLoading,
-  isOneWay,
 }: Props) => {
   const { ctx } = useUnsafeSnapshot();
   const { isDirectNearTokenWithdrawal } = useComputedSnapshot();
   const {
-    chainsFilter,
+    enableAccountAbstraction,
     alchemyApiKey,
     refetchQuoteInterval,
     intentsAccountType,
@@ -169,8 +178,11 @@ export const WidgetSwapContent = ({
             groupTokens={tokenModalOpen === 'source'}
             chainsFilter={
               tokenModalOpen === 'source'
-                ? chainsFilter.source
-                : chainsFilter.target
+                ? getSourceTokens(!!enableAccountAbstraction, ctx.walletAddress)
+                : {
+                    intents: enableAccountAbstraction ? 'with-balance' : 'all',
+                    external: 'all',
+                  }
             }
             onMsg={(msg) => {
               switch (msg.type) {
@@ -217,7 +229,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 };
@@ -48,7 +48,6 @@ export const WidgetWithdrawContent = ({
   const { ctx } = useUnsafeSnapshot();
   const { isDirectNearTokenWithdrawal } = useComputedSnapshot();
   const {
-    chainsFilter,
     alchemyApiKey,
     refetchQuoteInterval,
     intentsAccountType,
@@ -166,8 +165,11 @@ export const WidgetWithdrawContent = ({
             groupTokens={false}
             chainsFilter={
               tokenModalOpen === 'source'
-                ? chainsFilter.source
-                : chainsFilter.target
+                ? {
+                    intents: 'with-balance',
+                    external: 'none',
+                  }
+                : { intents: 'none', external: 'all' }
             }
             onMsg={(msg) => {
               switch (msg.type) {

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';