SOV-4267: zero redemptions (#958)

* feat: zero redemption dialog

* feat: redemption button

* fix: enforce zero route to 200 minimum

* chore: disabled redemption route

* chore: add about wiki link

Author: creed-victor

.changeset/healthy-pants-judge.md

@@ -0,0 +1,5 @@
+---
+'@sovryn/sdk': patch
+---
+
+fix: add minimum amount to zero smart swap route

apps/frontend/src/app/2_molecules/LOCStatus/LOCStatus.tsx

@@ -7,6 +7,7 @@ import CountUp from 'react-countup';
 import { Button, ButtonSize, ButtonStyle } from '@sovryn/ui';
 import { Decimal } from '@sovryn/utils';
 
+import { RedemptionDialogButton } from '../../5_pages/ZeroPage/components/RedemptionDialog/RedemptionDialogButton';
 import {
   BITCOIN,
   BTC_RENDER_PRECISION,
@@ -128,6 +129,8 @@ export const LOCStatus: FC<LOCStatusProps> = ({
             />
           </>
         )}
+
+        <RedemptionDialogButton size={ButtonSize.large} />
       </div>
     </div>
   );

apps/frontend/src/app/5_pages/ConvertPage/ConvertPage.constants.ts

@@ -16,7 +16,7 @@ export const SWAP_ROUTES = [
   smartRoutes.myntFixedRateRoute,
   smartRoutes.mocIntegrationSwapRoute,
   smartRoutes.ambientRoute,
-  smartRoutes.zeroRedemptionSwapRoute,
+  // smartRoutes.zeroRedemptionSwapRoute,
 ];
 
 export const SMART_ROUTER_RSK = new SmartRouter(

apps/frontend/src/app/5_pages/ZeroPage/ZeroPage.tsx

@@ -46,6 +46,8 @@ import { useMaintenance } from '../../../hooks/useMaintenance';
 import { translations } from '../../../locales/i18n';
 import { decimalic } from '../../../utils/math';
 import { OpenLocButton } from './components/OpenLocButton/OpenLocButton';
+import { RedemptionDialog } from './components/RedemptionDialog/RedemptionDialog';
+import { RedemptionDialogButton } from './components/RedemptionDialog/RedemptionDialogButton';
 import { useClaimCollateralSurplus } from './hooks/useClaimCollateralSurplus';
 import { useHandleTrove } from './hooks/useHandleTrove';
 import { useLiquityBaseParams } from './hooks/useLiquityBaseParams';
@@ -148,6 +150,8 @@ const ZeroPage: FC<ZeroPageProps> = ({ deferred: [price] }) => {
       </Helmet>
       <div className="px-0 container lg:mx-8 mb-7">
         <NetworkBanner requiredChainId={RSK_CHAIN_ID}>
+          <RedemptionDialog />
+
           {!account && <div className="mt-6 lg:mt-12"></div>}
           {account && !showWelcomeBanner && !isLoading && (
             <LOCStatus
@@ -163,8 +167,9 @@ const ZeroPage: FC<ZeroPageProps> = ({ deferred: [price] }) => {
             />
           )}
           {account && showWelcomeBanner && !isLoading && !openLocLocked && (
-            <div className="mt-6 lg:mt-12">
-              <OpenLocButton openLOC={toggle} className="mb-10 md:mb-4" />
+            <div className="mt-6 lg:mt-12 flex justify-end gap-x-4 mb-10 md:mb-4">
+              <OpenLocButton openLOC={toggle} />
+              <RedemptionDialogButton />
             </div>
           )}
 

apps/frontend/src/app/5_pages/ZeroPage/components/RedemptionDialog/RedemptionDialog.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { t } from 'i18next';
+
+import { Dialog, DialogBody, DialogHeader, DialogSize } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+import { RedemptionForm } from './RedemptionForm';
+import { useRedemptionDialog } from './useRedemptionDialog';
+
+export const RedemptionDialog = () => {
+  const { isOpen, setOpen } = useRedemptionDialog();
+
+  return (
+    <Dialog width={DialogSize.sm} isOpen={isOpen} disableFocusTrap>
+      <DialogHeader
+        title={t(translations.zeroPage.redeem.title)}
+        onClose={() => setOpen(false)}
+      />
+      <DialogBody>{isOpen && <RedemptionForm />}</DialogBody>
+    </Dialog>
+  );
+};

apps/frontend/src/app/5_pages/ZeroPage/components/RedemptionDialog/RedemptionDialogButton.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import classNames from 'classnames';
+import { t } from 'i18next';
+
+import { Button, ButtonSize, ButtonStyle } from '@sovryn/ui';
+
+import { translations } from '../../../../../locales/i18n';
+import { useRedemptionDialog } from './useRedemptionDialog';
+
+type RedemptionDialogButtonProps = {
+  size?: ButtonSize;
+};
+
+export const RedemptionDialogButton: FC<RedemptionDialogButtonProps> = ({
+  size,
+}) => {
+  const { setOpen } = useRedemptionDialog();
+  return (
+    <div className={classNames('flex justify-center md:justify-end mb-9')}>
+      <Button
+        className="flex-1 md:flex-initial max-w-[20.5rem] md:max-w-none"
+        onClick={() => setOpen(true)}
+        text={t(translations.zeroPage.redeem.cta)}
+        dataAttribute="zero-loc-open"
+        style={ButtonStyle.secondary}
+        size={size}
+      />
+    </div>
+  );
+};