re-structure to monorepo.

packages/webapp/src/containers/TransactionsLocking/TransactionsLockingHeader.tsx

@@ -0,0 +1,107 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Intent } from '@blueprintjs/core';
+
+import { useTransactionsLockingContext } from './TransactionsLockingProvider';
+import {
+  ButtonLink,
+  AppToaster,
+  Join,
+  FormattedMessage as T,
+  Alert,
+  AlertDesc,
+} from '@/components';
+import {
+  validateMoveToFullLocking,
+  validateMoveToPartialLocking,
+} from './utils';
+
+/**
+ * Transactions locking header.
+ * @returns
+ */
+export function TransactionsLockingHeader() {
+  const {
+    transactionsLocking,
+    transactionLockingType,
+    setTransactionLockingType,
+  } = useTransactionsLockingContext();
+
+  // Handle all lock link click.
+  const handleAllLockClick = () => {
+    const activeModules = validateMoveToFullLocking(
+      transactionsLocking.modules,
+    );
+    const modulesStrong = activeModules.map((module) => (
+      <strong>{module.formatted_module}</strong>
+    ));
+    if (activeModules.length > 0) {
+      AppToaster.show({
+        message: (
+          <span>
+            You should unlock <Join items={modulesStrong} sep={', '} /> modules
+            first, than you can lock all transactions at once.
+          </span>
+        ),
+        intent: Intent.DANGER,
+      });
+    } else {
+      setTransactionLockingType('all');
+    }
+  };
+
+  const handleUndividualLockClick = () => {
+    const isAllLockingActive = validateMoveToPartialLocking(
+      transactionsLocking.all,
+    );
+
+    if (isAllLockingActive) {
+      AppToaster.show({
+        message: intl.get(
+          'transactions_locking.you_should_unlock_all_transactions_at_once_before',
+        ),
+        intent: Intent.DANGER,
+      });
+    } else {
+      setTransactionLockingType('partial');
+    }
+  };
+
+  return transactionLockingType !== 'all' ? (
+    <LockAllAlert
+      title={<T id={'transactions_locking_lock_all_transactions_at_once'} />}
+      intent={Intent.PRIMARY}
+    >
+      <p>
+        <T id={'transactions_locking.callout.lock_all_at_once.desc'} />
+      </p>
+      <ButtonLink onClick={handleAllLockClick}>
+        <T id={'transactions_locking.lock_all_transactions_at_once'} />
+      </ButtonLink>
+    </LockAllAlert>
+  ) : (
+    <LockAllAlert
+      title={<T id={'transactions_locking.lock_individual_modules'} />}
+      intent={Intent.PRIMARY}
+    >
+      <p>
+        <T id={'transactions_locking.callout.lock_individual.desc'} />
+      </p>
+      <ButtonLink onClick={handleUndividualLockClick}>
+        <T id={'transactions_locking.lock_modules_individually'} />
+      </ButtonLink>
+    </LockAllAlert>
+  );
+}
+
+const LockAllAlert = styled(Alert)`
+  margin-bottom: 0;
+  margin-top: 20px;
+  background: transparent;
+
+  ${AlertDesc} {
+    color: #1f3255;
+  }
+`;