Merge pull request #338 from ergolabs/feature/aneta-swap-lock

add aneta lock strategy

src/components/common/ActionForm/ActionButton/ActionButton.tsx

@@ -1,7 +1,10 @@
 import './ActionButton.less';
 
+import { DateTime } from 'luxon';
 import React, { FC, ReactNode } from 'react';
+import { interval, map } from 'rxjs';
 
+import { useObservable } from '../../../../common/hooks/useObservable';
 import { Button, ButtonProps } from '../../../../ergodex-cdk';
 import { ConnectWalletButton } from '../../ConnectWalletButton/ConnectWalletButton';
 
@@ -13,9 +16,15 @@ export enum ActionButtonState {
   INSUFFICIENT_LIQUIDITY,
   LOADING,
   CHECK_INTERNET_CONNECTION,
+  ANETA_SWAP_LOCK,
   ACTION,
 }
 
+export const END_TIMER_DATE = DateTime.utc(2022, 1, 28, 18, 0, 0);
+
+export const LOCKED_TOKEN_ID =
+  '472c3d4ecaa08fb7392ff041ee2e6af75f4a558810a74b28600549d5392810e8';
+
 const selectTokenState = (): ButtonProps => ({
   children: 'Select a token',
   type: 'primary',
@@ -99,7 +108,39 @@ export interface ActionButtonProps {
   readonly children: ReactNode;
 }
 
+const getDiff = () =>
+  END_TIMER_DATE.diffNow(['hour', 'minute', 'second', 'millisecond']);
+
+// const renderTimer = () =>
+
+const timer$ = interval(1000).pipe(map(() => getDiff()));
+
 export const ActionButton: FC<ActionButtonProps> = (props) => {
+  const [timer] = useObservable(timer$, [], getDiff());
+
+  if (props.state === ActionButtonState.ANETA_SWAP_LOCK) {
+    return (
+      <Button
+        htmlType="submit"
+        disabled={DateTime.now().toMillis() < END_TIMER_DATE.toMillis()}
+        onClick={() => {
+          if (DateTime.now().toMillis() < END_TIMER_DATE.toMillis()) {
+            return;
+          }
+          window.location.reload();
+        }}
+        style={{ fontSize: '20px', lineHeight: '28px' }}
+        size="extra-large"
+        block
+        type="primary"
+      >
+        {DateTime.now().toMillis() < END_TIMER_DATE.toMillis()
+          ? `Swapping is available in ${timer.toFormat('hh:mm:ss')}`
+          : `Refresh page`}
+      </Button>
+    );
+  }
+
   const { children, ...other } = getButtonPropsByState(
     props.state,
     props.token,

src/components/common/ActionForm/ActionForm.tsx

@@ -15,6 +15,7 @@ export interface ActionFormProps<T> {
   readonly isTokensNotSelected?: (form: T) => boolean;
   readonly isAmountNotEntered?: (form: T) => boolean;
   readonly isLiquidityInsufficient?: (form: T) => boolean;
+  readonly isSwapLocked?: (form: T) => boolean;
   readonly getInsufficientTokenNameForTx?: (form: T) => undefined | string;
   readonly getInsufficientTokenNameForFee?: (form: T) => undefined | string;
   readonly action?: (form: T) => Promise<any> | Observable<any> | void;
@@ -29,6 +30,7 @@ export const ActionForm: FC<ActionFormProps<any>> = ({
   isAmountNotEntered,
   isTokensNotSelected,
   getInsufficientTokenNameForFee,
+  isSwapLocked,
   getInsufficientTokenNameForTx,
   children,
 }) => {
@@ -53,6 +55,8 @@ export const ActionForm: FC<ActionFormProps<any>> = ({
       setButtonData({ state: ActionButtonState.LOADING });
     } else if (isTokensNotSelected && isTokensNotSelected(value)) {
       setButtonData({ state: ActionButtonState.SELECT_TOKEN });
+    } else if (isSwapLocked && isSwapLocked(value)) {
+      setButtonData({ state: ActionButtonState.ANETA_SWAP_LOCK });
     } else if (isAmountNotEntered && isAmountNotEntered(value)) {
       setButtonData({ state: ActionButtonState.ENTER_AMOUNT });
     } else if (

src/pages/Swap/Swap.tsx

@@ -1,6 +1,7 @@
 import './Swap.less';
 
 import { maxBy } from 'lodash';
+import { DateTime } from 'luxon';
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -18,6 +19,10 @@ import {
 
 import { useSubscription } from '../../common/hooks/useObservable';
 import { AmmPool } from '../../common/models/AmmPool';
+import {
+  END_TIMER_DATE,
+  LOCKED_TOKEN_ID,
+} from '../../components/common/ActionForm/ActionButton/ActionButton';
 import { ActionForm } from '../../components/common/ActionForm/ActionForm';
 import { TokenControlFormItem } from '../../components/common/TokenControl/TokenControl';
 import {
@@ -100,6 +105,10 @@ export const Swap = (): JSX.Element => {
   const isTokensNotSelected = ({ toAsset, fromAsset }: SwapFormModel) =>
     !toAsset || !fromAsset;
 
+  const isSwapLocked = ({ toAsset, fromAsset }: SwapFormModel) =>
+    (toAsset?.id === LOCKED_TOKEN_ID || fromAsset?.id === LOCKED_TOKEN_ID) &&
+    DateTime.now().toMillis() < END_TIMER_DATE.toMillis();
+
   const submitSwap = (value: Required<SwapFormModel>) => {
     openConfirmationModal(
       (next) => {
@@ -210,6 +219,7 @@ export const Swap = (): JSX.Element => {
         isAmountNotEntered={isAmountNotEntered}
         isTokensNotSelected={isTokensNotSelected}
         isLiquidityInsufficient={isLiquidityInsufficient}
+        isSwapLocked={isSwapLocked}
         action={submitSwap}
       >
         <Flex col>