batman

.github/workflows/main.yml

@@ -0,0 +1,20 @@
+name: Merge to Main
+on:
+    push:
+        branches: [main]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        name: Run build on push main
+        steps:
+            - uses: actions/checkout@v3
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20.x"
+            - name: Install pnpm
+              run: npm install -g pnpm
+            - run: pnpm install
+            - run: pnpm run build

.github/workflows/pr.yml

@@ -0,0 +1,21 @@
+name: Pull Request
+
+on:
+    pull_request:
+        branches: [main]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        name: Run build on pr
+        steps:
+            - uses: actions/checkout@v3
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20.x"
+            - name: Install pnpm
+              run: npm install -g pnpm
+            - run: pnpm install
+            - run: pnpm run build

.github/workflows/release.yml

@@ -0,0 +1,25 @@
+name: Publish Package to npmjs
+on:
+    release:
+        types: [created]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+            id-token: write
+        steps:
+            - uses: actions/checkout@v3
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20.x"
+                  registry-url: "https://registry.npmjs.org"
+            - name: Install pnpm
+              run: npm install -g pnpm
+            - run: pnpm install
+            - run: pnpm run build
+            - run: pnpm publish --provenance --access --no-git-checks public
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.tsbuildinfo

.npmignore

@@ -0,0 +1,18 @@
+.storybook
+lib
+node_modules
+public
+src
+.gitignore
+eslint.config.js
+.npmignore
+index.html
+pnpm-lock.yaml
+postcss.config.js
+tailwind.config.js
+tsconfig.app.json
+tsconfig.node.json
+tsconfig.json
+tsconfig.app.tsbuildinfo
+tsconfig.node.tsbuildinfo
+vite.config.ts

.npmrc

@@ -0,0 +1 @@
+git-checks=false

.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+    stories: ["../lib/**/*.mdx", "../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-onboarding",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+import "../lib/tailwind.css";
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

README.md

@@ -0,0 +1 @@
+# MyTonSwap Widget

eslint.config.js

@@ -0,0 +1,30 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-namespace": "off",
+      "react-hooks/exhaustive-deps":"off",
+    },
+  },
+)

lib/components/Header/Header.tsx

@@ -0,0 +1,29 @@
+import { IoSettingsOutline } from "react-icons/io5";
+import SettingPopover from "./SettingPopover";
+import { useThemeStore } from "../../store/theme.store";
+
+const Header = () => {
+    const { colors } = useThemeStore();
+
+    return (
+        <div
+            className="flex items-center justify-between px-3"
+            style={{ color: colors.text_black }}
+        >
+            <div>Swap</div>
+            <div className="flex gap-x-2 items-center">
+                <SettingPopover>
+                    <IoSettingsOutline
+                        className="hover:rotate-90 transition-transform duration-150 text-lg text-black/50"
+                        style={{
+                            color: colors.text_black,
+                            opacity: 0.5,
+                        }}
+                    />
+                </SettingPopover>
+            </div>
+        </div>
+    );
+};
+
+export default Header;

lib/components/Header/SettingPopover.tsx

@@ -0,0 +1,53 @@
+import { FC, PropsWithChildren, useRef, useState } from "react";
+import SlippageSetting from "./SlippageSetting";
+import { useOnClickOutside } from "usehooks-ts";
+import TokensSettings from "./TokensSettings";
+import { AnimatePresence, motion } from "framer-motion";
+import { useThemeStore } from "../../store/theme.store";
+export type SettingPopoverProps = PropsWithChildren & {};
+
+const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
+    const { colors } = useThemeStore();
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useRef(null);
+    const onClickOutSite = () => {
+        setTimeout(() => {
+            setIsOpen(false);
+        }, 100);
+    };
+    useOnClickOutside(ref, onClickOutSite);
+    const handleButtonClick = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        setIsOpen((prev) => !prev);
+    };
+    return (
+        <div className="relative flex ">
+            <button onClick={handleButtonClick}>{children}</button>
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{
+                            opacity: 0,
+                            scale: 0.95,
+                            transformOrigin: "top right",
+                        }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        animate={{ opacity: 1, scale: 1 }}
+                        transition={{ ease: "easeOut", duration: 0.15 }}
+                        ref={ref}
+                        className="min-w-[250px] absolute top-[105%]  border-[1px] border-zinc-100 bg-white shadow-sm/50 rounded-xl  right-0 p-2 flex gap-y-1 flex-col"
+                        style={{
+                            borderColor: colors.border,
+                            background: colors.background,
+                        }}
+                    >
+                        <SlippageSetting />
+                        <TokensSettings />
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+};
+
+export default SettingPopover;

lib/components/Header/SlippageSetting.tsx

@@ -0,0 +1,125 @@
+import { ChangeEvent, useState } from "react";
+import { MdOutlineKeyboardArrowDown } from "react-icons/md";
+import { AnimatePresence, motion } from "framer-motion";
+import { useThemeStore } from "../../store/theme.store";
+import { useSwapStore } from "../../store/swap.store";
+import { FaCircleCheck } from "react-icons/fa6";
+
+const SlippageSetting = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { slippage, setSlippage } = useSwapStore();
+    const { colors } = useThemeStore();
+    const [userInput, setUserInput] = useState("");
+
+    const handleSlippageChange = (e: ChangeEvent<HTMLInputElement>) => {
+        e.preventDefault();
+        const decimalRegexp = /^\d*(?:\.\d)?$/;
+
+        const userInput = e.target.value.replace(/,/g, ".");
+        let clearedInput = "";
+        if (userInput === "") {
+            clearedInput = "".replace(/^0+$/, "0");
+        } else if (userInput === "." || userInput === "0.") {
+            clearedInput = "0.".replace(/^0+$/, "0");
+        } else if (decimalRegexp.test(userInput)) {
+            clearedInput = userInput.replace(/^0+$/, "0");
+        } else {
+            return;
+        }
+        if (clearedInput.includes(".") || userInput === "0") {
+            setUserInput(clearedInput.replace(/0(?=[1-9])/g, ""));
+        }
+        if (Number(clearedInput) > 0 && Number(clearedInput) < 50) {
+            setUserInput(clearedInput.replace(/0(?=[1-9])/g, ""));
+            setSlippage(+clearedInput);
+        } else if (clearedInput === "") {
+            setUserInput("");
+            setSlippage("auto");
+        }
+    };
+
+    const handleOnAutoClick = () => {
+        setUserInput("");
+        setSlippage("auto");
+    };
+    return (
+        <motion.div
+            initial={{ height: 20 }}
+            animate={{ height: isOpen ? 56 : 20 }}
+            className="text-sm flex flex-col gap-y-1"
+        >
+            <button
+                className="flex justify-between w-full"
+                onClick={() => setIsOpen((prev) => !prev)}
+                style={{ color: colors.text_black }}
+            >
+                <div>Max Slippage</div>
+                <div className="flex items-center justify-center">
+                    {slippage === "auto" ? "Auto" : `${slippage}%`}{" "}
+                    <MdOutlineKeyboardArrowDown
+                        className="transition-transform text-base"
+                        style={{
+                            transform: isOpen ? "rotate(180deg)" : "none",
+                        }}
+                    />
+                </div>
+            </button>
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="flex w-full justify-around"
+                    >
+                        <div
+                            onClick={handleOnAutoClick}
+                            style={{
+                                background: colors.input_card,
+                            }}
+                            className="h-8 relative w-full mx-1 flex items-center justify-center rounded-xl cursor-pointer"
+                        >
+                            <FaCircleCheck
+                                className="absolute -top-1 -left-1 text-lg transition-colors duration-300"
+                                style={{
+                                    color:
+                                        slippage === "auto"
+                                            ? colors.primary
+                                            : colors.text_fade,
+                                }}
+                            />
+                            Auto
+                        </div>
+                        <div
+                            style={{
+                                background: colors.input_card,
+                            }}
+                            className="h-8 relative w-full mx-1 flex items-center justify-center rounded-xl cursor-pointer"
+                        >
+                            <FaCircleCheck
+                                className="absolute -top-1 -left-1 text-lg transition-colors duration-300"
+                                style={{
+                                    color:
+                                        slippage !== "auto"
+                                            ? colors.primary
+                                            : colors.text_fade,
+                                }}
+                            />
+                            <input
+                                value={userInput}
+                                onChange={handleSlippageChange}
+                                type="text"
+                                dir="rtl"
+                                className="bg-transparent w-full outline-none"
+                                placeholder="1"
+                            />
+                            <span className="pr-2">%</span>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </motion.div>
+    );
+};
+
+export default SlippageSetting;