@dhedge/trading-widget 5.0.0 → 5.1.0

package/README.md

@@ -157,10 +157,11 @@ UI configuration provider. Manages params to configure custom styling, component
 
 ##### actions
 
-> | name                 | type                     | default value                 | description                                                                                                                                                                                                                                                                   |
-> | -------------------- | ------------------------ | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-> | `onConnect`          | `() => void`             | `() => {}`                    | Widget has built-in `Connect Wallet` action button that triggers `onConnect` callback assuming starting of abstract wallet connection process. After all the only requirement is to get connected wallet inside wagmi's `useAccount` hook to make trading operations possible |
-> | `onAcceptTermsOfUse` | `() => Promise<boolean>` | `() => Promise.resolve(true)` | Callback is triggered after user's approval of Terms of Use statements assuming switching of external `config.termsOfUseAccepted` param to `true` state                                                                                                                       |
+> | name                          | type                     | default value                 | description                                                                                                                                                                                                                                                                   |
+> | ----------------------------- | ------------------------ | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+> | `onConnect`                   | `() => void`             | `() => {}`                    | Widget has built-in `Connect Wallet` action button that triggers `onConnect` callback assuming starting of abstract wallet connection process. After all the only requirement is to get connected wallet inside wagmi's `useAccount` hook to make trading operations possible |
+> | `onAcceptTermsOfUse`          | `() => Promise<boolean>` | `() => Promise.resolve(true)` | Callback is triggered after user's approval of Terms of Use statements assuming switching of external `config.termsOfUseAccepted` param to `true` state                                                                                                                       |
+> | `onOpenNotificationsSettings` | `() => void`             | `undefined`                   | Optional callback to open notifications settings modal.                                                                                                                                                                                                                       |
 
 ###### Source: `packages/trading-widget/src/trading-widget/providers/config-provider`
 
@@ -175,18 +176,19 @@ UI configuration provider. Manages params to configure custom styling, component
 <code>Custom components to be injected into widget layout</code>
 </summary>
 
-> | name                    | type                                | default value             | description                                                                                                                           |
-> | ----------------------- | ----------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-> | `GeoBlockAlert`         | ComponentType                       | `<GeoBlockAlert>`         | Component replaces deposit button while `isGeoBlocked` config param is set to `true`                                                  |
-> | `SanctionedAlert`       | ComponentType                       | `<SanctionedAlert>`       | Component replaces deposit button while `isSanctioned` config param is set to `true`                                                  |
-> | `MaxSupplyReachedAlert` | ComponentType                       | `<MaxSupplyReachedAlert>` | Component rendered in the deposit meta when the expected total supply exceeds the max cap; warns that the deposit will not go through |
-> | `DepositMetaInfo`       | ComponentType                       | `undefined`               | Component is injected into deposit meta part of widget layout nearby TransactionOverviewDisclosure                                    |
-> | `WithdrawMetaInfo`      | ComponentType                       | `undefined`               | Component is injected into withdraw meta part of widget layout nearby WithdrawTransactionOverviewDisclosure                           |
-> | `CustomDepositMeta`     | ComponentType                       | `undefined`               | Custom extra component injected above deposit meta section in the deposit tab panel (e.g., chart, info, etc.)                         |
-> | `Image`                 | ComponentType<ImageProps>           | `<img>`                   | Component optionally can be used to pass `nextjs` Image component to be used for assets rendering                                     |
-> | `LogoSpinner`           | ComponentType<SVGProps<SVGElement>> | `<Spinner>`               | Component is injected into widget pending transaction overlay. Assume using of spinning animation                                     |
-> | `DepositTermsOfUse`     | ComponentType                       | `undefined`               | Component is injected into `TermsOfUseOverlay` to extend default terms of use statement points                                        |
-> | `ActionButton`          | ComponentType                       | `<ActionButton>`          | Component overrides default `ActionButton` and has `ButtonProps` API                                                                  |
+> | name                    | type                                     | default value             | description                                                                                                                           |
+> | ----------------------- | ---------------------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+> | `GeoBlockAlert`         | ComponentType                            | `<GeoBlockAlert>`         | Component replaces deposit button while `isGeoBlocked` config param is set to `true`                                                  |
+> | `SanctionedAlert`       | ComponentType                            | `<SanctionedAlert>`       | Component replaces deposit button while `isSanctioned` config param is set to `true`                                                  |
+> | `MaxSupplyReachedAlert` | ComponentType                            | `<MaxSupplyReachedAlert>` | Component rendered in the deposit meta when the expected total supply exceeds the max cap; warns that the deposit will not go through |
+> | `DepositMetaInfo`       | ComponentType                            | `undefined`               | Component is injected into deposit meta part of widget layout nearby TransactionOverviewDisclosure                                    |
+> | `WithdrawMetaInfo`      | ComponentType                            | `undefined`               | Component is injected into withdraw meta part of widget layout nearby WithdrawTransactionOverviewDisclosure                           |
+> | `CustomDepositMeta`     | ComponentType                            | `undefined`               | Custom extra component injected above deposit meta section in the deposit tab panel (e.g., chart, info, etc.)                         |
+> | `Image`                 | ComponentType<ImageProps>                | `<img>`                   | Component optionally can be used to pass `nextjs` Image component to be used for assets rendering                                     |
+> | `LogoSpinner`           | ComponentType<SVGProps<SVGElement>>      | `<Spinner>`               | Component is injected into widget pending transaction overlay. Assume using of spinning animation                                     |
+> | `DepositTermsOfUse`     | ComponentType                            | `undefined`               | Component is injected into `TermsOfUseOverlay` to extend default terms of use statement points                                        |
+> | `ActionButton`          | ComponentType                            | `<ActionButton>`          | Component overrides default `ActionButton` and has `ButtonProps` API                                                                  |
+> | `BecomeReferrerButton`  | ComponentType<BecomeReferrerButtonProps> | `undefined`               | Component is rendered at the top of the action buttons in the success deposit overlay. Receives `vaultAddress` prop                   |
 
 ###### Source: `packages/trading-widget/src/trading-widget/providers/component-provider/component-provider.tsx`
 
@@ -292,6 +294,14 @@ path: `component.popup[name]`
 > | `color.colorBorder` | string | `config?.global?.color?.colorTextSecondary ?? #9DA2AD` | Popup bg color   |
 > | `size.fontSize`     | string | `config?.global?.size?.fontSizeXs ?? 12px`             | Popup font size  |
 
+###### overlay
+
+path: `component.overlay[name]`
+
+> | name            | type   | default value                                         | description      |
+> | --------------- | ------ | ----------------------------------------------------- | ---------------- |
+> | `color.colorBg` | string | `config?.component?.popup?.color?.colorBg ?? #2B313E` | Overlay bg color |
+
 ###### popupList
 
 path: `component.popupList[name]`
@@ -517,6 +527,7 @@ path: `component.meta[name]`
 > | `allAssets`                         | string | All Assets                                                                                                                                                                                                 |             |
 > | `all`                               | string | All                                                                                                                                                                                                        |             |
 > | `sell`                              | string | Sell                                                                                                                                                                                                       |             |
+> | `sellNow`                           | string | Sell now                                                                                                                                                                                                   |             |
 > | `receiveEstimated`                  | string | Receive (estimated)                                                                                                                                                                                        |             |
 > | `confirmInWallet`                   | string | Please confirm in wallet                                                                                                                                                                                   |             |
 > | `pending`                           | string | Pending...                                                                                                                                                                                                 |             |
@@ -568,11 +579,6 @@ path: `component.meta[name]`
 > | `claimLabel`                        | string | Claim Assets                                                                                                                                                                                               |             |
 > | `createLimitSellOrder`              | string | Stop order set                                                                                                                                                                                             |             |
 > | `swapAndClaimTo`                    | string | Swap and claim assets to                                                                                                                                                                                   |             |
-> | `initWithdrawDescription`           | string | Unroll                                                                                                                                                                                                     |             |
-> | `initWithdrawTooltip`               | string | Unroll prepares assets for single asset withdrawal                                                                                                                                                         |             |
-> | `completeWithdrawDescription`       | string | Claim                                                                                                                                                                                                      |             |
-> | `completeWithdrawTooltip`           | string | This final step swaps all assets to a single asset and sends it to your wallet                                                                                                                             |             |
-> | `unrollAndClaimDescription`         | string | Claim                                                                                                                                                                                                      |             |
 > | `limitOrderWithdrawDescription`     | string | You are about to create a withdrawal request. Your vault tokens will be withdrawn within a few minutes.                                                                                                    |             |
 > | `total`                             | string | Total:                                                                                                                                                                                                     |             |
 > | `showAll`                           | string | Show All                                                                                                                                                                                                   |             |
@@ -585,6 +591,8 @@ path: `component.meta[name]`
 > | `batchTransactionsSwitchLabel`      | string | Batch                                                                                                                                                                                                      |             |
 > | `batchTransactionsTooltip`          | string | Group approve and trade calls into a single batch transaction. Disable if you prefer separate prompts.                                                                                                     |             |
 > | `openLimitOrderAfterBuySwitchLabel` | string | Add Stop Order                                                                                                                                                                                             |             |
+> | `openNotificationsSettingsLabel`    | string | Enable alerts                                                                                                                                                                                              |             |
+> | `addToWallet`                       | string | add to wallet                                                                                                                                                                                              |             |
 > | `orderingLabel`                     | string | Ordering                                                                                                                                                                                                   |             |
 > | `paidLabel`                         | string | Paid                                                                                                                                                                                                       |             |
 > | `priceLabel`                        | string | Price                                                                                                                                                                                                      |             |

package/core-kit/const/storage.d.ts

@@ -3,6 +3,3 @@ export declare const LOCAL_STORAGE_KEYS: {
     readonly REFERRER: "referrer";
     readonly REF_POOL: "ref_pool";
 };
-export declare const SESSION_STORAGE_KEYS: {
-    readonly AUTO_COMPLETE_WITHDRAW: "auto-complete-withdraw";
-};

package/core-kit/const/trading.d.ts

@@ -1,3 +1,4 @@
+import type { TransactionAction } from '../types';
 export declare const EASY_SWAPPER_V2_DEPOSIT_METHODS: {
     DEPOSIT: "deposit";
     DEPOSIT_CUSTOM: "depositWithCustomCooldown";
@@ -8,3 +9,4 @@ export declare const EASY_SWAPPER_V2_DEPOSIT_METHODS: {
     ZAP_DEPOSIT: "zapDeposit";
     ZAP_DEPOSIT_CUSTOM: "zapDepositWithCustomCooldown";
 };
+export declare const COMPLETE_WITHDRAW_ACTIONS: TransactionAction[];

package/core-kit/hooks/state/index.d.ts

@@ -3,6 +3,7 @@ export { useTradingPanelPoolAddress, useTradingPanelPoolConfig, useTradingPanelP
 export { useSendTokenInput, useReceiveTokenInput, } from '../../hooks/state/input';
 export { useTradingPanelSettings, useCustomDepositTokensPerChain, } from '../../hooks/state/settings';
 export { useTradingPanelModal } from '../../hooks/state/modal';
+export { useTradingPanelStepper } from '../../hooks/state/stepper';
 export { useTradingPanelType, useIsDepositTradingPanelType, } from '../../hooks/state/type';
 export { useTradingPanelTransactions } from '../../hooks/state/transaction';
 export { useTradingPanelActions, useTradingPanelState, } from '../../hooks/state/context';

package/core-kit/hooks/state/stepper.d.ts

@@ -0,0 +1,5 @@
+import type { TradingPanelActionsState, TradingPanelState } from '../../types/state.types';
+export declare const useTradingPanelStepper: () => [
+    TradingPanelState['stepper'],
+    TradingPanelActionsState['updateStepper']
+];

package/core-kit/hooks/trading/allowance/use-approve.d.ts

@@ -1,9 +1,11 @@
 import type { TradingToken } from '@shared/types';
+import type { OnTradingSettleErrorCallback } from '../../../hooks/trading/trade-handlers/use-trading-settle-handler';
 import type { Address } from '../../../types/web3.types';
 interface UseApproveParams {
     token: TradingToken;
     rawTokenAmount: string;
     spenderAddress: Address;
+    onErrorCallback?: OnTradingSettleErrorCallback;
 }
-export declare const useApprove: ({ token, rawTokenAmount, spenderAddress, }: UseApproveParams) => () => Promise<void>;
+export declare const useApprove: ({ token, rawTokenAmount, spenderAddress, onErrorCallback, }: UseApproveParams) => () => Promise<void>;
 export {};

package/core-kit/hooks/trading/allowance/use-can-spend.d.ts

@@ -7,5 +7,8 @@ interface UseCanSpendParams {
     chainId: ChainId;
     skip?: boolean;
 }
-export declare const useCanSpend: ({ rawAmountToSpend, tokenAddress, ownerAddress, spenderAddress, chainId, skip, }: UseCanSpendParams) => boolean;
+export declare const useCanSpend: ({ rawAmountToSpend, tokenAddress, ownerAddress, spenderAddress, chainId, skip, }: UseCanSpendParams) => {
+    canSpend: boolean;
+    isFetching: boolean;
+};
 export {};

package/core-kit/hooks/trading/index.d.ts

@@ -1,5 +1,6 @@
 export { useTradingResultHandling } from '../../hooks/trading/trade-handlers/use-trading-result-handling';
 export { useTradingSettleHandler } from '../../hooks/trading/trade-handlers/use-trading-settle-handler';
+export type { OnTradingSettleErrorCallback } from '../../hooks/trading/trade-handlers/use-trading-settle-handler';
 export { useAssetPrice } from '../../hooks/trading/use-asset-price';
 export { useRawAssetPrice } from '../../hooks/trading/use-raw-asset-price';
 export { useIsTradingEnabled } from '../../hooks/trading/use-is-trading-enabled';

package/core-kit/hooks/trading/trade-handlers/use-handle-trade.d.ts

@@ -1,6 +1,11 @@
 import type { ContractActionFunc } from '../../../types/web3.types';
-export declare const useHandleTrade: (trade: ContractActionFunc) => {
+interface UseHandleTradeParams {
+    trade: ContractActionFunc;
+    onErrorCallback?: () => void;
+}
+export declare const useHandleTrade: ({ trade, onErrorCallback, }: UseHandleTradeParams) => {
     disabled: boolean;
     label: string;
     handleTrade: () => Promise<void>;
 };
+export {};

package/core-kit/hooks/trading/trade-handlers/use-trading-settle-handler.d.ts

@@ -1,3 +1,9 @@
 import type { PendingTransaction } from '../../../types/trading-panel.types';
 import type { UseWriteContractParameters } from '../../../types/web3.types';
-export declare const useTradingSettleHandler: (action: PendingTransaction['action']) => Required<Required<UseWriteContractParameters>['mutation']>['onSettled'];
+export type OnTradingSettleErrorCallback = (error: Error) => void;
+interface UseTradingSettleHandlerParams {
+    action: PendingTransaction['action'];
+    onErrorCallback?: OnTradingSettleErrorCallback;
+}
+export declare const useTradingSettleHandler: ({ action, onErrorCallback, }: UseTradingSettleHandlerParams) => Required<Required<UseWriteContractParameters>['mutation']>['onSettled'];
+export {};

package/core-kit/hooks/trading/withdraw-v2/complete-step/use-auto-send-complete-withdraw-transaction.d.ts

@@ -1 +1,6 @@
-export declare const useAutoSendCompleteWithdrawTransaction: (handleTrade: () => Promise<void>) => void;
+interface UseAutoSendCompleteWithdrawTransactionParams {
+    handleTrade: () => Promise<void>;
+    onError: () => void;
+}
+export declare const useAutoSendCompleteWithdrawTransaction: ({ handleTrade, onError, }: UseAutoSendCompleteWithdrawTransactionParams) => void;
+export {};

package/core-kit/hooks/trading/withdraw-v2/complete-step/use-complete-withdraw-transaction.d.ts

@@ -1,6 +1,8 @@
+import type { OnTradingSettleErrorCallback } from '../../../../hooks/trading';
 import type { ContractActionFunc } from '../../../../types/web3.types';
 interface UseWithdrawSwapTransactionProps {
     isClaim?: boolean;
+    onErrorCallback?: OnTradingSettleErrorCallback;
 }
-export declare const useCompleteWithdrawTransaction: ({ isClaim, }?: UseWithdrawSwapTransactionProps | undefined) => ContractActionFunc;
+export declare const useCompleteWithdrawTransaction: ({ isClaim, onErrorCallback, }?: UseWithdrawSwapTransactionProps | undefined) => ContractActionFunc;
 export {};

package/core-kit/hooks/trading/withdraw-v2/complete-step/use-handle-complete-withdraw.d.ts

@@ -2,8 +2,9 @@ import type { ContractActionFunc } from '../../../../types/web3.types';
 interface UseHandleWithdrawSwapProps {
     withdraw: ContractActionFunc;
     isClaim?: boolean;
+    onErrorCallback?: () => void;
 }
-export declare const useHandleCompleteWithdraw: ({ withdraw, isClaim, }: UseHandleWithdrawSwapProps) => {
+export declare const useHandleCompleteWithdraw: ({ withdraw, isClaim, onErrorCallback, }: UseHandleWithdrawSwapProps) => {
     disabled: boolean;
     label: string;
     handleTrade: () => Promise<void>;

package/core-kit/hooks/trading/withdraw-v2/init-step/use-init-withdraw-allowance.d.ts

@@ -1,4 +1,10 @@
-export declare const useInitWithdrawAllowance: () => {
+import type { OnTradingSettleErrorCallback } from '../../../../hooks/trading';
+interface UseInitWithdrawAllowanceParams {
+    onErrorCallback?: OnTradingSettleErrorCallback;
+}
+export declare const useInitWithdrawAllowance: ({ onErrorCallback, }?: UseInitWithdrawAllowanceParams | undefined) => {
     canSpend: boolean;
     approve: () => Promise<void>;
+    isCanSpendFetching: boolean;
 };
+export {};

package/core-kit/hooks/trading/withdraw-v2/init-step/use-init-withdraw-transaction.d.ts

@@ -1,6 +1,11 @@
+import { type OnTradingSettleErrorCallback } from '../../../../hooks/trading';
 import type { TransactionAction } from '../../../../types';
 import type { ContractActionFunc } from '../../../../types/web3.types';
-export declare const useInitWithdrawTransaction: () => {
+interface UseInitiateWithdrawTransactionParams {
+    onErrorCallback?: OnTradingSettleErrorCallback;
+}
+export declare const useInitWithdrawTransaction: ({ onErrorCallback, }?: UseInitiateWithdrawTransactionParams | undefined) => {
     withdraw: ContractActionFunc;
     action: TransactionAction;
 };
+export {};

package/core-kit/hooks/trading/withdraw-v2/init-step/use-is-unroll-and-claim-transaction.d.ts

@@ -1 +1,5 @@
-export declare const useIsUnrollAndClaimTransaction: () => boolean;
+export declare const useIsUnrollAndClaimTransaction: () => {
+    isUnrollAndClaimTransaction: boolean;
+    isFetching: boolean;
+    isFetched: boolean;
+};

package/core-kit/types/state.types.d.ts

@@ -1,7 +1,7 @@
 import type { SwapDataRequest, SwapDataResponse, TradingToken } from '@shared/types';
 import type { EstimationError } from '../models';
 import type { PoolConfig, PoolFallbackData } from '../types/config.types';
-import type { DynamicTradingToken, PendingTransaction, TokenSelectorPayload, TradingModalStatus, TradingPanelType, TransactionAction, UpdateTransactionsArguments } from '../types/trading-panel.types';
+import type { DynamicTradingToken, PendingTransaction, StepperState, TokenSelectorPayload, TradingModalStatus, TradingPanelType, TransactionAction, UpdateTransactionsArguments } from '../types/trading-panel.types';
 import type { Address, ChainId, SimulateTransactionParams, SimulateTransactionResponse, WaitForTransactionReceiptReturnType } from '../types/web3.types';
 export interface TradingPanelStateModal {
     isOpen: boolean;
@@ -32,6 +32,7 @@ export interface TradingPanelState {
         receiveToken: DynamicTradingToken;
     };
     modal: TradingPanelStateModal;
+    stepper: StepperState | null;
     poolAddress: PoolConfig['address'];
     poolConfigMap: Record<PoolConfig['address'], PoolConfig>;
     transactions: PendingTransaction[];
@@ -46,6 +47,7 @@ export interface TradingPanelSetters {
     updateTradingSettings: (payload: Partial<TradingPanelState['settings']>) => void;
     setTradingType: (payload: TradingPanelState['type']) => void;
     updateTradingModal: (payload: Partial<TradingPanelState['modal']>) => void;
+    updateStepper: (payload: TradingPanelState['stepper']) => void;
     updateTransactions: (payload: UpdateTransactionsArguments) => void;
     updatePoolFallbackData: (payload: PoolFallbackData) => void;
     updatePoolConfig: (payload: Record<PoolConfig['address'], Pick<PoolConfig, 'maintenance' | 'maintenanceDeposits' | 'maintenanceWithdrawals'>>) => void;
@@ -90,6 +92,9 @@ export type TradingPanelAction = {
 } | {
     type: 'UPDATE_TRADING_MODAL';
     payload: Partial<TradingPanelState['modal']>;
+} | {
+    type: 'UPDATE_STEPPER';
+    payload: TradingPanelState['stepper'];
 } | {
     type: 'UPDATE_TRADING_TRANSACTIONS';
     payload: UpdateTransactionsArguments;

package/core-kit/types/trading-panel.types.d.ts

@@ -24,6 +24,13 @@ type RemoveTransaction = {
 export type UpdateTransactionsArguments = AddTransaction | UpdateTransaction | RemoveTransaction;
 export type TradingPanelType = 'deposit' | 'withdraw';
 export type TransactionAction = 'deposit' | 'multi_withdraw' | 'single_withdraw' | 'approve' | 'swap' | 'claim' | 'single_withdraw_and_claim' | 'create_limit_sell_order' | 'limit_order_withdraw' | 'delete_limit_order_withdraw';
+export interface StepperState {
+    type: TradingPanelType;
+    sendTokenAmount?: string;
+    sendTokenSymbol: string;
+    receiveTokenAmount?: string;
+    receiveTokenSymbol: string;
+}
 export type SwapEntity = 'token' | 'pool';
 export interface TokenSelectorPayload {
     isOpen: boolean;

package/core-kit/utils/formatter.d.ts

@@ -12,3 +12,4 @@ export declare const formatTokenBalance: ({ balance, symbol, precision, truncate
     precision: number;
     truncateSymbol?: boolean | undefined;
 }) => string;
+export declare const getTxHashShort: (link: string | undefined) => string | undefined;