style: style improvment and some bug fixes

Ho3einWave · Ho3einWave · commit c1a2286f0794 · 2024-10-20T13:35:12.000+03:30
diff --git a/lib/components/Header/Header.scss b/lib/components/Header/Header.scss
@@ -4,6 +4,7 @@
         align-items: center;
         justify-content: space-between;
         padding: 0 0.5rem;
+        font-size: var(--font-size-base);
     }
     .header-setting {
         display: flex;
@@ -15,7 +16,7 @@
                 transform: rotate(90deg);
                 transition: transform 0.15s ease-in-out;
             }
-            font-size: 1rem;
+            font-size: var(--font-size-xl);
             opacity: 0.5;
         }
     }
diff --git a/lib/components/Header/SlippageSetting.tsx b/lib/components/Header/SlippageSetting.tsx
@@ -43,10 +43,7 @@ const SlippageSetting = () => {
         setUserInput("");
         setSlippage("auto");
     };
-    // write a function to handle the slippage change
-    // write a function to handle the auto click
-    // write a function to handle the plus click
-    // write a function to handle the minus click
+
     const handleOnPlusClick = () => {
         if (slippage === "auto") {
             setSlippage(1);
diff --git a/lib/components/Header/Wallet.tsx b/lib/components/Header/Wallet.tsx
@@ -35,7 +35,9 @@ const Wallet = () => {
     };
     const { colors } = useThemeStore();
     const TON_BALANCE = formatNumber(
-        +fromNano(balance.get(TON_ADDR)?.balance || 0n)
+        +fromNano(balance.get(TON_ADDR)?.balance || 0n),
+        4,
+        false
     );
 
     return (
diff --git a/lib/components/Swap/Swap.scss b/lib/components/Swap/Swap.scss
@@ -11,14 +11,31 @@
     --text-fade-color: #9caacb;
     --skeleton-shine-color: #9c9c9c;
     --price-impact-color: #e64646;
+    --font-size-xxs: 0.625rem;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1.125rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.875rem;
+    --font-size-4xl: 2.25rem;
+    --font-size-5xl: 3rem;
+    --font-size-6xl: 4rem;
+    --font-size-7xl: 5rem;
+    --font-size-8xl: 6rem;
+    --font-size-9xl: 7rem;
+    --font-size-10xl: 8rem;
 }
 
 .mytonswap-app {
-    font-family: sans-serif;
+    font-family: Inter, sans-serif;
+
     button {
         border: none;
-        background: none;
+        background-color: transparent;
         cursor: pointer;
+        font-family: Inter, sans-serif;
     }
     input {
         border: none;
diff --git a/lib/components/Swap/Swap.stories.tsx b/lib/components/Swap/Swap.stories.tsx
@@ -136,3 +136,21 @@ export const CyberPunk: Story = {
         },
     },
 };
+
+export const TonJiggle: Story = {
+    args: {
+        theme: {
+            border: "#004A6533",
+            primary: "#177594",
+            background: "#181F34",
+            input_card: "#27272A",
+            input_token: "#1D2939",
+            light_shade: "#193349",
+            slippage_box: "#D1D1E0",
+            text_black: "#FFFFFF",
+            text_white: "#FFFFFF",
+            text_fade: "#6B7280",
+            skeleton_shine: "#585959",
+        },
+    },
+};
diff --git a/lib/components/Swap/Swap.tsx b/lib/components/Swap/Swap.tsx
@@ -15,6 +15,17 @@ type SwapProps = {
     options?: SwapOptions;
 };
 
+// declare telegram in window
+declare global {
+    interface Window {
+        Telegram: {
+            WebApp: {
+                initData: string;
+            };
+        };
+    }
+}
+
 export const Swap: FC<SwapProps> = ({ theme, options }) => {
     const { colors, setTheme } = useThemeStore();
     const { setOptions } = useOptionsStore();
@@ -49,6 +60,21 @@ export const Swap: FC<SwapProps> = ({ theme, options }) => {
             }
         }, 10000);
         initializeApp();
+        if (window?.Telegram?.WebApp?.initData?.length !== 0) {
+            ensureDocumentIsScrollable();
+        }
+        function ensureDocumentIsScrollable() {
+            const isScrollable =
+                document.documentElement.scrollHeight > window.innerHeight;
+
+            if (!isScrollable) {
+                document.documentElement.style.setProperty(
+                    "height",
+                    "calc(100vh + 1px)",
+                    "important"
+                );
+            }
+        }
         return () => {
             clearInterval(refetchInterval);
         };
diff --git a/lib/components/SwapButton/SwapButton.scss b/lib/components/SwapButton/SwapButton.scss
@@ -5,7 +5,7 @@
         position: absolute;
         left: 0;
         top: 0;
-        z-index: 10;
+        z-index: 9999999999999999999999999;
         background-color: rgba(0, 0, 0, 0.1);
         .modal-container-inner {
             position: fixed;
diff --git a/lib/components/SwapCard/Card.scss b/lib/components/SwapCard/Card.scss
@@ -4,13 +4,14 @@
         display: flex;
         flex-direction: column;
         gap: 0.25rem;
-        font-size: 0.75rem;
+        font-size: var(--font-size-sm);
         .card-head {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding-left: 0.25rem;
             padding-right: 0.25rem;
+
             .max-button {
                 cursor: pointer;
             }
@@ -24,22 +25,24 @@
             padding-right: 0.5rem;
             padding-top: 0.5rem;
             padding-bottom: 0.5rem;
-
+            margin-top: 0.5rem;
             .card-inputs {
                 display: flex;
                 flex-direction: column;
+                justify-content: center;
                 .card-input {
                     outline: none;
                     background: transparent;
+                    font-size: var(--font-size-lg);
+                    font-weight: 900;
                 }
                 .card-input-loading {
                     height: 1rem;
                     width: 6rem;
                     border-radius: 0.375rem;
                 }
                 .card-rate {
-                    font-size: 0.7rem;
-                    margin-top: 0.25rem;
+                    font-size: var(--font-size-xs);
                 }
                 .card-rate-loading {
                     height: 0.75rem;
@@ -51,9 +54,10 @@
             .card-button {
                 display: flex;
                 align-items: center;
+
                 .selection-box {
-                    height: 1.5rem;
-                    width: 1.5rem;
+                    height: 2rem;
+                    width: 2rem;
                     border-radius: 9999px;
                     background-size: contain !important;
                 }
diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
@@ -147,7 +147,8 @@ const Card: FC<CardProps> = ({ type }) => {
 
         let payAmount = BigInt(balanceToken.balance);
         if (pay_token.address === TON_ADDR) {
-            payAmount = payAmount - toNano(0.4);
+            if (payAmount <= toNano(0.2)) return;
+            payAmount = payAmount - toNano(0.2);
         }
         if (payAmount === pay_amount) return;
 
@@ -185,7 +186,8 @@ const Card: FC<CardProps> = ({ type }) => {
                                     balanceToken.balance,
                                     pay_token!.decimal
                                 ),
-                                2
+                                2,
+                                false
                             )}{" "}
                             {pay_token?.symbol}
                         </span>
@@ -238,7 +240,7 @@ const Card: FC<CardProps> = ({ type }) => {
                                     opacity: 0.5,
                                 }}
                             >
-                                {calculatedRate}$
+                                ${calculatedRate}
                             </span>
                         )}
                         {type === "receive" && isFindingBestRoute && (
diff --git a/lib/components/SwapCard/CardButton.scss b/lib/components/SwapCard/CardButton.scss
@@ -1,16 +1,19 @@
 .mytonswap-app {
     .selection-box-container {
         display: flex;
+        height: 2.5rem;
         align-items: center;
         column-gap: 2px;
         padding-left: 0.25rem;
         padding-right: 0.25rem;
         padding-top: 0.25rem;
         padding-bottom: 0.25rem;
         border-radius: 9999px;
+        font-size: var(--font-size-lg);
+        font-weight: 700;
         &.loading {
             width: 5rem;
-            height: 2rem;
+            height: 2.5rem;
         }
         &.pay-loading {
             pointer-events: none;
diff --git a/lib/components/SwapCard/CardDialog.scss b/lib/components/SwapCard/CardDialog.scss
@@ -5,7 +5,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        z-index: 10;
+        z-index: 9999999999999999999999999;
         overflow: hidden;
 
         .card-dialog {
@@ -15,7 +15,7 @@
             width: 100%;
             height: 80%;
             max-height: 380px;
-            padding: 1rem 0.75rem;
+            padding: 1rem;
             display: flex;
             flex-direction: column;
             background-color: #fff;
@@ -44,8 +44,9 @@
             }
 
             .dialog-search {
-                height: 2.5rem;
+                height: 3rem;
                 margin-top: 0.5rem;
+                margin-bottom: 0.5rem;
                 border-radius: 0.75rem;
                 width: 100%;
                 border: 1px solid #e4e4e7;
diff --git a/lib/components/SwapCard/CardDialog.tsx b/lib/components/SwapCard/CardDialog.tsx
@@ -5,6 +5,7 @@ import {
     FC,
     SetStateAction,
     useEffect,
+    useRef,
     useState,
 } from "react";
 import { IoClose } from "react-icons/io5";
@@ -20,6 +21,7 @@ import { CgSpinnerTwo } from "react-icons/cg";
 import { address } from "@ton/ton";
 import { TiWarning } from "react-icons/ti";
 import "./CardDialog.scss";
+import { useOnClickOutside } from "usehooks-ts";
 type CardDialogProps = {
     isSelectVisible: boolean;
     setIsSelectVisible: Dispatch<SetStateAction<boolean>>;
@@ -180,6 +182,14 @@ const CardDialog: FC<CardDialogProps> = ({
         }
     }, [searchInput]);
 
+    const ref = useRef(null);
+
+    const handleClickOutside = () => {
+        handleOnClose();
+    };
+
+    useOnClickOutside(ref, handleClickOutside);
+
     return (
         <>
             <AnimatePresence>
@@ -190,6 +200,10 @@ const CardDialog: FC<CardDialogProps> = ({
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
                             className={clsx("card-dialog")}
+                            ref={ref}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                            }}
                             style={{ background: colors.background }}
                         >
                             <div
diff --git a/lib/components/SwapCard/SwapCard.scss b/lib/components/SwapCard/SwapCard.scss
@@ -8,11 +8,11 @@
         gap: 0.5rem;
         margin-top: 0.5rem;
         .change-direction-button {
-            padding: 0.5rem 2.5rem;
+            padding: 0.6rem 3rem;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1rem;
+            font-size: var(--font-size-xl);
             border-radius: 99999px;
             .rotate-90 {
                 transform: rotate(90deg);
diff --git a/lib/components/SwapCard/Token.scss b/lib/components/SwapCard/Token.scss
@@ -16,8 +16,8 @@
         flex-grow: 1;
         gap: 0.25rem;
         .token-image {
-            width: 2rem;
-            height: 2rem;
+            width: 2.14rem;
+            height: 2.14rem;
             border-radius: 9999px;
             background-size: contain !important;
         }
@@ -33,6 +33,9 @@
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            .symbol {
+                font-size: var(--font-size-sm);
+            }
         }
         .token-details-name-rate {
             font-size: 10px;
diff --git a/lib/components/SwapCard/Token.tsx b/lib/components/SwapCard/Token.tsx
@@ -31,7 +31,7 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect }) => {
                         className="token-details-symbol-balance"
                         style={{ color: colors.text_black }}
                     >
-                        <div>{asset.symbol}</div>
+                        <div className="symbol">{asset.symbol}</div>
                         <div>{tokenBalance}</div>
                     </div>
                     <div
diff --git a/lib/components/SwapDetails/SwapDetails.scss b/lib/components/SwapDetails/SwapDetails.scss
@@ -20,6 +20,7 @@
             justify-content: space-between;
             width: 100%;
             min-height: 3rem;
+
             .finding {
                 display: flex;
                 align-items: center;
@@ -38,6 +39,7 @@
             display: flex;
             flex-direction: column;
             gap: 0.25rem;
+
             .slippage-box {
                 border-radius: 0.375rem;
                 padding: 0.1rem 0.25rem;
diff --git a/lib/components/SwapDetails/SwapKeyValue.scss b/lib/components/SwapDetails/SwapKeyValue.scss
@@ -3,5 +3,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
+        font-family: Inter, sans-serif;
+        font-size: var(--font-size-xs);
     }
 }
diff --git a/lib/tailwind.css b/lib/tailwind.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
diff --git a/lib/utils/formatNum.ts b/lib/utils/formatNum.ts

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`4`	`4`	`align-items: center;`
`5`	`5`	`justify-content: space-between;`
`6`	`6`	`padding: 0 0.5rem;`
	`7`	`+ font-size: var(--font-size-base);`
`7`	`8`	`}`
`8`	`9`	`.header-setting {`
`9`	`10`	`display: flex;`
`@@ -15,7 +16,7 @@`
`15`	`16`	`transform: rotate(90deg);`
`16`	`17`	`transition: transform 0.15s ease-in-out;`
`17`	`18`	`}`
`18`		`- font-size: 1rem;`
	`19`	`+ font-size: var(--font-size-xl);`
`19`	`20`	`opacity: 0.5;`
`20`	`21`	`}`
`21`	`22`	`}`