refactor: twitter share feature

packages/app/cypress/e2e/App.cy.ts

@@ -80,9 +80,6 @@ describe('End-to-end Test: 😁 Happy Path', () => {
         cy.getByAriaLabel('Swap button').click();
         cy.contains('Swap made successfully!');
 
-        // Dismiss twitter popup
-        cy.contains('button', 'No thanks').click();
-
         // validate remove liquidity
         cy.contains('button', 'Pool').click();
         cy.contains('button', 'Remove liquidity').click();

packages/app/src/styles/components/faucet-widget.css → packages/app/src/styles/components/actions-widget.css

@@ -1,17 +1,33 @@
 @layer components {
-  .faucetWidget {
-    @apply fixed bottom-0 p-4 pt-0;
+  .actionsWidget {
+    @apply flex items-center gap-1 p-4;
 
-    & > button {
-      @apply bg-gray-800 rounded-full;
+    @media (min-width: 834px) {
+      @apply p-6 fixed bottom-0 left-0;
     }
   }
 
-  .faucetWidget--tour {
-    @apply fixed bottom-5 left-5 outline-none;
+  .actionsWidget--btn {
+    @apply px-4 bg-gray-800 rounded-full h-10;
   }
 
-  .faucetWidget--dialog {
+  .actionsWidget--shareBtn {
+    @apply px-3 gap-0 transition-all ease-linear;
+
+    & .content {
+      @apply w-0 opacity-0;
+    }
+
+    &:hover {
+      @apply px-4 gap-2;
+    }
+
+    &:hover .content {
+      @apply w-[auto] opacity-100;
+    }
+  }
+
+  .faucetDialog {
     @apply min-w-[auto];
 
     & .card {
@@ -23,14 +39,6 @@
     }
   }
 
-  .faucetWidget--formRow {
-    @apply mt-3;
-  }
-
-  .faucetWidget--label {
-    @apply mb-2 flex text-sm;
-  }
-
   .faucetCaptcha {
     @apply mt-4 mx-6 flex items-center justify-center;
   }

packages/app/src/styles/components/header.css

@@ -22,6 +22,7 @@
     grid-area: 1 / 1 / 2 / 2;
   }
   .header--wallet {
+    @apply flex items-center gap-1;
     place-self: end;
     grid-area: 1 / 1 / 2 / 3;
   }

packages/app/src/styles/components/main-layout.css

@@ -2,11 +2,8 @@
   .mainLayout {
     @apply flex flex-col;
     @apply h-screen text-gray-100 overflow-hidden;
-
-    @media (min-width: 600px) {
-      @apply grid;
-      grid-template-rows: auto 1fr;
-    }
+    @apply grid;
+    grid-template-rows: auto 1fr auto;
   }
   .mainLayout--wrapper {
     @apply flex justify-center items-start p-4 pb-16 sm:pt-14 overflow-y-auto;

packages/app/src/styles/index.css

@@ -5,18 +5,19 @@
 @import "./components/accordion.css";
 @import "./components/button.css";
 @import "./components/card.css";
-@import "./components/coin-input.css";
-@import "./components/coin-selector.css";
 @import "./components/dialog.css";
-@import "./components/faucet-widget.css";
-@import "./components/header.css";
 @import "./components/input.css";
-@import "./components/main-layout.css";
 @import "./components/popover.css";
 @import "./components/tooltip.css";
 @import "./components/toast.css";
+
+@import "./components/header.css";
+@import "./components/coin-input.css";
+@import "./components/coin-selector.css";
+@import "./components/main-layout.css";
 @import "./components/welcome-page.css";
 @import "./components/home-page.css";
+@import "./components/actions-widget.css";
 
 @import "tailwindcss/utilities";
 @import "./utilities.css";

packages/app/src/systems/Core/components/ActionsWidget.tsx

@@ -0,0 +1,36 @@
+import { BsTwitter } from "react-icons/bs";
+import { FaFaucet } from "react-icons/fa";
+
+import { FaucetDialog, useFaucetDialog } from "~/systems/Faucet";
+import { TwitterDialog, useTwitterDialog } from "~/systems/Tweet";
+import { Button } from "~/systems/UI";
+
+export function ActionsWidget() {
+  const twitterDialog = useTwitterDialog();
+  const faucetDialog = useFaucetDialog();
+
+  return (
+    <div className="actionsWidget">
+      <Button
+        {...faucetDialog.openButtonProps}
+        size="md"
+        className="actionsWidget--btn "
+        onPress={faucetDialog.open}
+      >
+        <FaFaucet />
+        <span className="content">Faucet</span>
+      </Button>
+      <Button
+        {...twitterDialog.openButtonProps}
+        size="md"
+        className="actionsWidget--btn actionsWidget--shareBtn"
+        onPress={twitterDialog.open}
+      >
+        <BsTwitter />
+        <span className="content">Share</span>
+      </Button>
+      <TwitterDialog />
+      <FaucetDialog />
+    </div>
+  );
+}

packages/app/src/systems/Core/components/CoinInput.tsx

@@ -10,7 +10,6 @@ import {
   parseUnits,
   toBigInt,
   MAX_U64_VALUE,
-  parseToFormattedNumber,
   ZERO,
 } from "../utils";
 
@@ -166,19 +165,11 @@ export function useCoinInput({
   };
 }
 
-function getRightValue(value: string, displayType: string) {
-  if (displayType === "text") return parseToFormattedNumber(value);
-
-  switch (value) {
-    case "0.0":
-      return "0";
-
-    case ".":
-      return "0.";
-
-    default:
-      return value;
-  }
+function getRightValue(value: string) {
+  if (process.env.NODE_ENV === "test" && !value) return null;
+  if (value === "0.0") return "0";
+  if (value === ".") return "0.";
+  return value;
 }
 
 type CoinInputProps = Omit<UseCoinParams, "onChange"> &
@@ -232,14 +223,14 @@ export const CoinInput = forwardRef<HTMLInputElement, CoinInputProps>(
               getInputRef={ref}
               allowNegative={false}
               defaultValue={initialValue}
-              value={getRightValue(value || "", displayType)}
+              value={getRightValue(value || "")}
               displayType={displayType}
               isAllowed={isAllowed}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                 onChange?.(e.target.value);
                 setValue(e.target.value);
               }}
-              decimalScale={DECIMAL_UNITS}
+              decimalScale={displayType === "text" ? 4 : DECIMAL_UNITS}
               placeholder="0"
               className="coinInput--input"
               thousandSeparator={false}

packages/app/src/systems/Core/components/Header.tsx

@@ -61,11 +61,6 @@ export const Header = () => {
         height={40}
         width={40}
       />
-      {wallet && (
-        <div className="header--wallet">
-          <WalletWidget />
-        </div>
-      )}
       {wallet && (
         <div className="header--nav">
           <div className="header--navContainer">
@@ -88,6 +83,11 @@ export const Header = () => {
           </div>
         </div>
       )}
+      {wallet && (
+        <div className="header--wallet">
+          <WalletWidget />
+        </div>
+      )}
     </div>
   );
 };

packages/app/src/systems/Core/components/MainLayout.tsx

@@ -8,7 +8,7 @@ import { useWallet } from "../hooks";
 import { ErrorBoundary } from "./ErrorBoundary";
 import { Header } from "./Header";
 
-import { FaucetWidget } from "~/systems/Faucet";
+import { ActionsWidget } from "~/systems/Core";
 import { Skeleton } from "~/systems/UI";
 
 type MainLayoutProps = {
@@ -33,8 +33,8 @@ export function MainLayout({ children }: MainLayoutProps) {
             )}
           </ErrorBoundary>
         </div>
+        {wallet && !ctx?.justContent && <ActionsWidget />}
       </main>
-      {wallet && !ctx?.justContent && <FaucetWidget />}
     </>
   );
 }

packages/app/src/systems/Core/components/index.tsx

@@ -1,3 +1,4 @@
+export * from "./ActionsWidget";
 export * from "./AnimatedPage";
 export * from "./AssetItem";
 export * from "./CoinInput";

packages/app/src/systems/Core/utils/math.ts

@@ -58,9 +58,6 @@ export function parseToFormattedNumber(
   precision: number = DECIMAL_UNITS
 ) {
   let val = value;
-  if (typeof value === 'string') {
-    return parseFloat(val as string).toFixed(FIXED_UNITS);
-  }
   if (typeof value === 'number') {
     val = BigInt(Math.trunc(value));
   }

packages/app/src/systems/Faucet/components/FaucetDialog.tsx

@@ -0,0 +1,36 @@
+import toast from "react-hot-toast";
+import { FaFaucet } from "react-icons/fa";
+
+import { useFaucetDialog } from "../hooks";
+import { useFaucet } from "../hooks/useFaucet";
+
+import { FaucetApp } from "./FaucetApp";
+
+import { Card, Dialog } from "~/systems/UI";
+
+export function FaucetDialog() {
+  const faucet = useFaucet();
+  const dialog = useFaucetDialog();
+  return (
+    <Dialog {...dialog.dialogProps}>
+      <Dialog.Content className="faucetDialog">
+        <Card>
+          <Card.Title>
+            <FaFaucet className="text-primary-500" /> Faucet
+          </Card.Title>
+          <div>
+            Click the button below to receive {faucet.faucetAmount} test ETH to
+            your wallet.
+          </div>
+          <FaucetApp
+            isButtonFull
+            onSuccess={() => {
+              toast.success("Test ETH successfully fauceted!");
+              dialog.close();
+            }}
+          />
+        </Card>
+      </Dialog.Content>
+    </Dialog>
+  );
+}

packages/app/src/systems/Faucet/components/index.tsx

@@ -1,2 +1,2 @@
 export * from "./FaucetApp";
-export * from "./FaucetWidget";
+export * from "./FaucetDialog";

packages/app/src/systems/Faucet/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useCaptcha';
 export * from './useFaucet';
+export * from './useFaucetDialog';

packages/app/src/systems/Faucet/hooks/useFaucetDialog.tsx

@@ -0,0 +1,13 @@
+import { atom, useAtom } from "jotai";
+
+import { useDialog } from "~/systems/UI";
+
+const dialogAtom = atom(false);
+
+export function useFaucetDialog() {
+  const [opened, setOpened] = useAtom(dialogAtom);
+  return useDialog({
+    isOpen: opened,
+    onOpenChange: setOpened,
+  });
+}

packages/app/src/systems/Swap/pages/SwapPage.tsx

@@ -29,7 +29,6 @@ import {
 import { useTransactionCost } from "~/systems/Core/hooks/useTransactionCost";
 import { txFeedback } from "~/systems/Core/utils/feedback";
 import { usePoolInfo, useUserPositions } from "~/systems/Pool";
-import { TwitterDialog, useTwitterDialog } from "~/systems/Tweet";
 import { Button, Card } from "~/systems/UI";
 import type { PreviewInfo } from "~/types/contracts/ExchangeContractAbi";
 
@@ -56,7 +55,6 @@ export function SwapPage() {
   const balances = useBalances();
   const setHasSwapped = useSetAtom(swapHasSwappedAtom);
   const { poolRatio } = useUserPositions();
-  const { open: openTwitterDialog } = useTwitterDialog();
 
   const { isLoading } = useQuery(
     [
@@ -127,13 +125,11 @@ export function SwapPage() {
 
   async function handleSuccess() {
     setHasSwapped(true);
-    openTwitterDialog();
     await balances.refetch();
   }
 
   return (
     <MainLayout>
-      <TwitterDialog />
       <Card className="sm:min-w-[450px]">
         <Card.Title>
           <MdSwapCalls className="text-primary-500" />