feat(app): home page

package.json

@@ -13,12 +13,38 @@
     "deploy": "gh-pages -d build"
   },
   "dependencies": {
+    "@near-wallet-selector/bitte-wallet": "^8.10.0",
+    "@near-wallet-selector/coin98-wallet": "^8.10.0",
+    "@near-wallet-selector/core": "^8.10.0",
+    "@near-wallet-selector/ethereum-wallets": "^8.10.0",
+    "@near-wallet-selector/here-wallet": "^8.10.0",
+    "@near-wallet-selector/ledger": "^8.10.0",
+    "@near-wallet-selector/meteor-wallet": "^8.10.0",
+    "@near-wallet-selector/mintbase-wallet": "^8.10.0",
+    "@near-wallet-selector/modal-ui": "^8.10.0",
+    "@near-wallet-selector/my-near-wallet": "^8.10.0",
+    "@near-wallet-selector/near-mobile-wallet": "^8.10.0",
+    "@near-wallet-selector/nearfi": "^8.10.0",
+    "@near-wallet-selector/neth": "^8.10.0",
+    "@reach/combobox": "^0.18.0",
+    "@reown/appkit": "^1.6.9",
+    "@reown/appkit-adapter-wagmi": "^1.6.9",
+    "@wagmi/connectors": "^5.7.8",
+    "big.js": "^6.2.2",
+    "borsh": "^2.0.0",
+    "lodash": "^4.17.21",
+    "near-api-js": "^5.0.1",
     "next": "^15.2.0",
+    "next-runtime-env": "^3.2.2",
     "next-themes": "^0.4.4",
+    "next-translate": "^2.6.2",
+    "nextjs-toploader": "^3.7.15",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-toastify": "^11.0.5"
   },
   "devDependencies": {
+    "@types/big.js": "^6.2.2",
     "@types/gh-pages": "^6",
     "@types/node": "^22.13.7",
     "@types/react": "^19.0.10",

src/components/ActiveLink.tsx

@@ -0,0 +1,42 @@
+import Link, { LinkProps } from 'next/link';
+import { useRouter } from 'next/router';
+import React, { Children, ReactElement, ReactNode } from 'react';
+import { UrlObject } from 'url';
+
+interface ActiveLinkProps extends LinkProps {
+  children: ReactNode;
+  activeClassName?: string;
+  inActiveClassName?: string;
+  href: string | UrlObject;
+}
+
+const ActiveLink = ({
+  children,
+  activeClassName,
+  inActiveClassName,
+  href,
+  ...props
+}: ActiveLinkProps) => {
+  const { asPath } = useRouter();
+
+  const child = Children.only(children) as ReactElement<any>;
+  const childClassName = child?.props?.className || ' ';
+
+  const hrefString = typeof href === 'string' ? href : href.pathname || '';
+
+  const className = (
+    href === '/' ? asPath === href : asPath.startsWith(hrefString)
+  )
+    ? `${childClassName} ${activeClassName}`
+    : `${childClassName} ${inActiveClassName}`;
+
+  return (
+    <Link href={href} {...props} legacyBehavior>
+      {React.cloneElement(child, {
+        className: className || null,
+      })}
+    </Link>
+  );
+};
+
+export default ActiveLink;

src/components/Collapse.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode, useState } from 'react';
+
+interface CollapseProps {
+  children: ReactNode;
+  trigger: ({
+    show,
+    onClick,
+  }: {
+    show: boolean;
+    onClick: React.MouseEventHandler<HTMLAnchorElement>;
+  }) => React.ReactNode;
+}
+
+const Collapse = ({ children, trigger }: CollapseProps) => {
+  const [show, setShow] = useState(false);
+
+  const onClick = () => {
+    setShow((s) => !s);
+  };
+
+  return (
+    <>
+      {trigger({ show, onClick })}
+      <div
+        className={`transition-all overflow-hidden ${
+          show ? 'block' : 'hidden'
+        }`}
+      >
+        {children}
+      </div>
+    </>
+  );
+};
+
+export default Collapse;

src/components/Icons/Arrow.tsx

@@ -0,0 +1,21 @@
+import React, { SVGProps } from 'react';
+
+const Arrow = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width={20}
+      height={20}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        fill="currentColor"
+        d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
+      />
+    </svg>
+  );
+};
+
+export default Arrow;

src/components/Icons/ArrowDown.tsx

@@ -0,0 +1,21 @@
+import React, { SVGProps } from 'react';
+
+const ArrowDown = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path
+        fill="currentColor"
+        d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"
+      />
+    </svg>
+  );
+};
+
+export default ArrowDown;

src/components/Icons/ArrowDownDouble.tsx

@@ -0,0 +1,20 @@
+import React, { SVGProps } from 'react';
+
+const ArrowDownDouble = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M12 19.1642L18.2071 12.9571L16.7929 11.5429L12 16.3358L7.20712 11.5429L5.79291 12.9571L12 19.1642ZM12 13.5143L18.2071 7.30722L16.7929 5.89301L12 10.6859L7.20712 5.89301L5.79291 7.30722L12 13.5143Z"
+      ></path>
+    </svg>
+  );
+};
+
+export default ArrowDownDouble;

src/components/Icons/ArrowRight.tsx

@@ -0,0 +1,26 @@
+/**
+ * @interface Props
+ * @param {string} [className] - The CSS class name(s) for styling purposes.
+ */
+
+interface Props {
+  className?: string;
+}
+const ArrowRight = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      width={20}
+      height={20}
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRight;

src/components/Icons/ArrowUp.tsx

@@ -0,0 +1,19 @@
+interface Props {
+  className: string;
+}
+const ArrowUp = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z" />
+    </svg>
+  );
+};
+
+export default ArrowUp;

src/components/Icons/ArrowUpRightSquare.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface Props {
+  className: string;
+}
+
+const ArrowUpRightSquare = (props: Props) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={36}
+      height={36}
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path>
+    </svg>
+  );
+};
+
+export default ArrowUpRightSquare;

src/components/Icons/Bolt.tsx

@@ -0,0 +1,34 @@
+/**
+ * @interface Props
+ * @param {string} [className] - The CSS class name(s) for styling purposes.
+ */
+
+interface Props {
+  className: string;
+}
+
+const Bolt = (props: Props) => {
+  return (
+    <svg
+      fill="#033f40"
+      height={16}
+      stroke="#033f40"
+      viewBox="0 0 56 56"
+      width={16}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
+      <g
+        id="SVGRepo_tracerCarrier"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></g>
+      <g id="SVGRepo_iconCarrier">
+        <path d="M 22.6211 53.2187 L 43.9023 25.8203 C 44.3008 25.3282 44.5117 24.8594 44.5117 24.3203 C 44.5117 23.4297 43.8320 22.7500 42.8477 22.7500 L 29.5820 22.7500 L 36.5899 4.5156 C 37.5039 2.1016 34.9492 .7891 33.4023 2.8047 L 12.1211 30.1797 C 11.6992 30.6953 11.4883 31.1641 11.4883 31.6797 C 11.4883 32.5938 12.1914 33.2734 13.1758 33.2734 L 26.4180 33.2734 L 19.4336 51.4844 C 18.4961 53.8984 21.0742 55.2109 22.6211 53.2187 Z M 31.8320 29.7813 L 17.3477 29.7813 L 30.5664 12.2266 L 24.1680 26.2422 L 38.6289 26.2422 L 25.4101 43.7969 Z"></path>
+      </g>
+    </svg>
+  );
+};
+
+export default Bolt;

src/components/Icons/Check.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react';
+
+const Check = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M10 15.17l9.192-9.191 1.414 1.414L10 17.999l-6.364-6.364 1.414-1.414 4.95 4.95z" />
+  </svg>
+);
+
+export default Check;

src/components/Icons/Clock.tsx

@@ -0,0 +1,26 @@
+/**
+ * @interface Props
+ * @param {string} [className] - The CSS class name(s) for styling purposes.
+ */
+
+interface Props {
+  className: string;
+}
+
+const Clock = (props: Props) => (
+  <svg
+    viewBox="64 64 896 896"
+    focusable="false"
+    data-icon="clock-circle"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
+    <path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path>
+  </svg>
+);
+
+export default Clock;

src/components/Icons/CloseCircle.tsx

@@ -0,0 +1,26 @@
+interface Props {
+  className?: string;
+  onClick?: (name: string) => void;
+}
+const CloseCircle = (props: Props) => {
+  const handleClick = () => {
+    if (props.onClick) {
+      props.onClick('All');
+    }
+  };
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={24}
+      height={24}
+      className={props.className}
+      onClick={handleClick}
+    >
+      <path fill="none" d="M0 0h24v24H0z" />
+      <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 100-16 8 8 0 000 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z" />
+    </svg>
+  );
+};
+
+export default CloseCircle;