feat: add textarea field to ui lib

DistributedCollective · Dec 15, 2023 · 459bc35 · 459bc35
1 parent 69239d0
commit 459bc35
Show file tree

Hide file tree

Showing 20 changed files with 619 additions and 73 deletions.
diff --git a/.changeset/brown-cameras-study.md b/.changeset/brown-cameras-study.md
@@ -0,0 +1,5 @@
+---
+'@sovryn/ui': patch
+---
+
+feat: add textarea component
diff --git a/.changeset/old-hats-cry.md b/.changeset/old-hats-cry.md
@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+feat: add lighthing to fastbtc
diff --git a/apps/frontend/src/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/BoltzSendFlow.tsx b/apps/frontend/src/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/BoltzSendFlow.tsx
@@ -1,31 +1,33 @@
 import React, { useCallback } from 'react';
 
-import { WithdrawStep } from '../../contexts/withdraw-context';
-import { useWithdrawBridgeConfig } from '../../hooks/useWithdrawBridgeConfig';
 import { GoBackButton } from '../GoBackButton';
 import { MobileCloseButton } from '../MobileCloseButton';
-import { AddressForm } from './components/AddressForm';
+import { InvoiceForm } from './components/InvoiceForm';
 import { AmountForm } from './components/AmountForm';
 import { ConfirmationScreens } from './components/ConfirmationScreens';
 import { MainScreen } from './components/MainScreen';
-import { WithdrawBoltzContext } from '../../contexts/withdraw-boltz-context';
+import {
+  WithdrawBoltzContext,
+  WithdrawBoltzStep,
+} from '../../contexts/withdraw-boltz-context';
+import { useWithdrawBoltzConfig } from '../../hooks/useWithdrawBoltzConfig';
 
 const allowedStepsToGoBackFrom = [
-  WithdrawStep.AMOUNT,
-  WithdrawStep.ADDRESS,
-  WithdrawStep.REVIEW,
+  WithdrawBoltzStep.AMOUNT,
+  WithdrawBoltzStep.INVOICE,
+  WithdrawBoltzStep.REVIEW,
 ];
 
-const getBackStep = (step: WithdrawStep) => {
+const getBackStep = (step: WithdrawBoltzStep) => {
   switch (step) {
-    case WithdrawStep.AMOUNT:
-      return WithdrawStep.MAIN;
-    case WithdrawStep.ADDRESS:
-      return WithdrawStep.AMOUNT;
-    case WithdrawStep.REVIEW:
-      return WithdrawStep.ADDRESS;
+    case WithdrawBoltzStep.AMOUNT:
+      return WithdrawBoltzStep.MAIN;
+    case WithdrawBoltzStep.INVOICE:
+      return WithdrawBoltzStep.AMOUNT;
+    case WithdrawBoltzStep.REVIEW:
+      return WithdrawBoltzStep.INVOICE;
     default:
-      return WithdrawStep.AMOUNT;
+      return WithdrawBoltzStep.AMOUNT;
   }
 };
 
@@ -34,7 +36,7 @@ type SendFlowProps = {
 };
 
 export const BoltzSendFlow: React.FC<SendFlowProps> = ({ onClose }) => {
-  const value = useWithdrawBridgeConfig();
+  const value = useWithdrawBoltzConfig();
   const { step, set } = value;
 
   const onBackClick = useCallback(() => {
@@ -48,14 +50,14 @@ export const BoltzSendFlow: React.FC<SendFlowProps> = ({ onClose }) => {
       )}
 
       <div className="mt-0 md:mt-12">
-        {step === WithdrawStep.MAIN && <MainScreen />}
-        {step === WithdrawStep.AMOUNT && <AmountForm />}
-        {step === WithdrawStep.ADDRESS && <AddressForm />}
+        {step === WithdrawBoltzStep.MAIN && <MainScreen />}
+        {step === WithdrawBoltzStep.AMOUNT && <AmountForm />}
+        {step === WithdrawBoltzStep.INVOICE && <InvoiceForm />}
         {[
-          WithdrawStep.REVIEW,
-          WithdrawStep.CONFIRM,
-          WithdrawStep.PROCESSING,
-          WithdrawStep.COMPLETED,
+          WithdrawBoltzStep.REVIEW,
+          WithdrawBoltzStep.CONFIRM,
+          WithdrawBoltzStep.PROCESSING,
+          WithdrawBoltzStep.COMPLETED,
         ].includes(step) && <ConfirmationScreens onClose={onClose} />}
       </div>
 

diff --git a/...tend/src/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/AmountForm.tsx b/...tend/src/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/AmountForm.tsx
@@ -30,14 +30,14 @@ import { useMaxAssetBalance } from '../../../../../../hooks/useMaxAssetBalance';
 import { translations } from '../../../../../../locales/i18n';
 import { fromWei, toWei } from '../../../../../../utils/math';
 import { GAS_LIMIT_FAST_BTC_WITHDRAW } from '../../../constants';
-import {
-  WithdrawContext,
-  WithdrawStep,
-} from '../../../contexts/withdraw-context';
 import { TransferPolicies } from './TransferPolicies';
+import {
+  WithdrawBoltzContext,
+  WithdrawBoltzStep,
+} from '../../../contexts/withdraw-boltz-context';
 
 export const AmountForm: React.FC = () => {
-  const { amount, limits, set } = useContext(WithdrawContext);
+  const { amount, limits, set } = useContext(WithdrawBoltzContext);
 
   const { checkMaintenance, States } = useMaintenance();
   const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND);
@@ -79,7 +79,7 @@ export const AmountForm: React.FC = () => {
       set(prevState => ({
         ...prevState,
         amount: Number(value).toFixed(8),
-        step: WithdrawStep.ADDRESS,
+        step: WithdrawBoltzStep.INVOICE,
       })),
     [set, value],
   );

diff --git a/...app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/ConfirmationScreens.tsx b/...app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/ConfirmationScreens.tsx
@@ -18,12 +18,12 @@ import { translations } from '../../../../../../locales/i18n';
 import { fromWei, toWei } from '../../../../../../utils/math';
 import { TransactionType } from '../../../../TransactionStepDialog/TransactionStepDialog.types';
 import { GAS_LIMIT_FAST_BTC_WITHDRAW } from '../../../constants';
-import {
-  WithdrawContext,
-  WithdrawStep,
-} from '../../../contexts/withdraw-context';
 import { ReviewScreen } from './ReviewScreen';
 import { StatusScreen } from './StatusScreen';
+import {
+  WithdrawBoltzContext,
+  WithdrawBoltzStep,
+} from '../../../contexts/withdraw-boltz-context';
 
 type ConfirmationScreensProps = {
   onClose: () => void;
@@ -33,7 +33,7 @@ export const ConfirmationScreens: React.FC<ConfirmationScreensProps> = ({
   onClose,
 }) => {
   const { account } = useAccount();
-  const { step, address, amount, set } = useContext(WithdrawContext);
+  const { step, invoice, amount, set } = useContext(WithdrawBoltzContext);
 
   const { setTransactions, setTitle, setIsOpen } = useTransactionContext();
 
@@ -84,13 +84,16 @@ export const ConfirmationScreens: React.FC<ConfirmationScreensProps> = ({
             type: TransactionType.signTransaction,
             contract: fastBtcBridgeContract,
             fnName: 'transferToBtc',
-            args: [address],
+            args: [invoice],
             value: toWei(amount),
             gasLimit: GAS_LIMIT_FAST_BTC_WITHDRAW,
           },
           onStart: hash => {
             setTxHash(hash);
-            set(prevState => ({ ...prevState, step: WithdrawStep.CONFIRM }));
+            set(prevState => ({
+              ...prevState,
+              step: WithdrawBoltzStep.CONFIRM,
+            }));
             setIsOpen(false);
           },
           onChangeStatus: setTxStatus,
@@ -101,7 +104,7 @@ export const ConfirmationScreens: React.FC<ConfirmationScreensProps> = ({
       setIsOpen(true);
     }
   }, [
-    address,
+    invoice,
     amount,
     fastBtcBridgeContract,
     set,
@@ -111,18 +114,18 @@ export const ConfirmationScreens: React.FC<ConfirmationScreensProps> = ({
   ]);
 
   const handleRetry = useCallback(() => {
-    set(prevState => ({ ...prevState, step: WithdrawStep.REVIEW }));
+    set(prevState => ({ ...prevState, step: WithdrawBoltzStep.REVIEW }));
     handleConfirm();
   }, [handleConfirm, set]);
 
-  if (step === WithdrawStep.REVIEW) {
+  if (step === WithdrawBoltzStep.REVIEW) {
     return (
       <ReviewScreen
         onConfirm={handleConfirm}
         feesPaid={feesPaid}
         receiveAmount={receiveAmount}
         from={account}
-        to={address}
+        to={invoice}
         amount={amount}
       />
     );
@@ -136,7 +139,7 @@ export const ConfirmationScreens: React.FC<ConfirmationScreensProps> = ({
       feesPaid={feesPaid}
       receiveAmount={receiveAmount}
       from={account}
-      to={address}
+      to={invoice}
       amount={amount}
       onRetry={handleRetry}
     />

diff --git a/.../BoltzSendFlow/components/AddressForm.tsx → .../BoltzSendFlow/components/InvoiceForm.tsx b/.../BoltzSendFlow/components/AddressForm.tsx → .../BoltzSendFlow/components/InvoiceForm.tsx
@@ -14,13 +14,14 @@ import {
 import { t } from 'i18next';
 
 import {
+  AmountInput,
   Button,
   ButtonStyle,
   ErrorBadge,
   ErrorLevel,
   Heading,
   HeadingType,
-  Input,
+  TextArea,
   Paragraph,
   ParagraphSize,
 } from '@sovryn/ui';
@@ -30,9 +31,13 @@ import { useMaintenance } from '../../../../../../hooks/useMaintenance';
 import { translations } from '../../../../../../locales/i18n';
 import { currentNetwork } from '../../../../../../utils/helpers';
 import {
-  WithdrawContext,
-  WithdrawStep,
-} from '../../../contexts/withdraw-context';
+  WithdrawBoltzContext,
+  WithdrawBoltzStep,
+} from '../../../contexts/withdraw-boltz-context';
+import {
+  BITCOIN,
+  BTC_RENDER_PRECISION,
+} from '../../../../../../constants/currencies';
 
 enum AddressValidationState {
   NONE = 'NONE',
@@ -41,8 +46,8 @@ enum AddressValidationState {
   INVALID = 'INVALID',
 }
 
-export const AddressForm: React.FC = () => {
-  const { address, set } = useContext(WithdrawContext);
+export const InvoiceForm: React.FC = () => {
+  const { amount, invoice, set } = useContext(WithdrawBoltzContext);
 
   const fastBtcBridgeContract = useGetProtocolContract('fastBtcBridge');
 
@@ -52,9 +57,9 @@ export const AddressForm: React.FC = () => {
   const [addressValidationState, setAddressValidationState] = useState(
     AddressValidationState.NONE,
   );
-  const [value, setValue] = useState(address);
+  const [value, setValue] = useState(invoice);
 
-  const invalidAddress = useMemo(
+  const invalidInvoice = useMemo(
     () => addressValidationState === AddressValidationState.INVALID,
     [addressValidationState],
   );
@@ -63,8 +68,8 @@ export const AddressForm: React.FC = () => {
     () =>
       set(prevState => ({
         ...prevState,
-        address: value,
-        step: WithdrawStep.REVIEW,
+        invoice: value,
+        step: WithdrawBoltzStep.REVIEW,
       })),
     [set, value],
   );
@@ -108,30 +113,46 @@ export const AddressForm: React.FC = () => {
   }, [value, validateAddress]);
 
   const isSubmitDisabled = useMemo(
-    () => invalidAddress || fastBtcLocked || !value || value === '',
-    [fastBtcLocked, invalidAddress, value],
+    () => invalidInvoice || fastBtcLocked || !value || value === '',
+    [fastBtcLocked, invalidInvoice, value],
   );
 
   return (
     <div className="text-center">
       <Heading type={HeadingType.h2} className="font-medium mb-8">
-        {t(translations.fastBtc.send.addressForm.title)}
+        {t(translations.boltz.send.invoice.title)}
       </Heading>
 
-      <div className="text-left">
+      <Paragraph
+        size={ParagraphSize.small}
+        className="font-medium mb-3 text-left"
+      >
+        {t(translations.boltz.send.invoice.description)}
+      </Paragraph>
+      <AmountInput
+        label={t(translations.common.amount)}
+        readOnly
+        unit={BITCOIN}
+        value={amount}
+        decimalPrecision={BTC_RENDER_PRECISION}
+        className="max-w-none"
+      />
+
+      <div className="mt-4 text-left">
         <Paragraph size={ParagraphSize.base} className="font-medium mb-3">
-          {t(translations.fastBtc.send.addressForm.addressLabel)}
+          {t(translations.boltz.send.invoice.invoiceLabel)}
         </Paragraph>
-        <Input
+        <TextArea
           onChangeText={setValue}
           value={value}
-          invalid={invalidAddress}
+          invalid={invalidInvoice}
           className="max-w-none"
+          rows={9}
         />
-        {invalidAddress && (
+        {invalidInvoice && (
           <ErrorBadge
             level={ErrorLevel.Critical}
-            message={t(translations.fastBtc.send.addressForm.invalidAddress)}
+            message={t(translations.boltz.send.invoice.invalidInvoice)}
           />
         )}
       </div>

diff --git a/...tend/src/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/MainScreen.tsx b/...tend/src/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/MainScreen.tsx
@@ -7,8 +7,10 @@ import { Button, ButtonStyle, ErrorBadge, ErrorLevel } from '@sovryn/ui';
 import { useAccount } from '../../../../../../hooks/useAccount';
 import { useMaintenance } from '../../../../../../hooks/useMaintenance';
 import { translations } from '../../../../../../locales/i18n';
-import { WithdrawStep } from '../../../contexts/withdraw-context';
-import { WithdrawBoltzContext } from '../../../contexts/withdraw-boltz-context';
+import {
+  WithdrawBoltzContext,
+  WithdrawBoltzStep,
+} from '../../../contexts/withdraw-boltz-context';
 import { Instructions } from './Instructions';
 
 export const MainScreen: React.FC = () => {
@@ -19,7 +21,7 @@ export const MainScreen: React.FC = () => {
   const fastBtcLocked = checkMaintenance(States.FASTBTC_SEND);
 
   const onContinueClick = useCallback(
-    () => set(prevState => ({ ...prevState, step: WithdrawStep.AMOUNT })),
+    () => set(prevState => ({ ...prevState, step: WithdrawBoltzStep.AMOUNT })),
     [set],
   );
 

diff --git a/...rc/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/TransferPolicies.tsx b/...rc/app/3_organisms/FastBtcDialog/components/BoltzSendFlow/components/TransferPolicies.tsx
@@ -4,11 +4,11 @@ import { BITCOIN } from '../../../../../../constants/currencies';
 import { BTC_IN_SATOSHIS } from '../../../../../../constants/general';
 import { formatValue } from '../../../../../../utils/math';
 import { DYNAMIC_FEE_DIVISOR } from '../../../constants';
-import { WithdrawContext } from '../../../contexts/withdraw-context';
 import { Limits } from '../../Limits';
+import { WithdrawBoltzContext } from '../../../contexts/withdraw-boltz-context';
 
 export const TransferPolicies: React.FC = () => {
-  const { limits } = useContext(WithdrawContext);
+  const { limits } = useContext(WithdrawBoltzContext);
 
   const minimumAmount = useMemo(() => {
     const minimum = limits.min / BTC_IN_SATOSHIS;