Feat/referral screen (#9)

* feat: referral screen with mocks

* feat: api connected

* fix: api function renamed

* feat: added referrals tracker using start_params

* fix: props fixed

* fix: Menu screen padding-bottom added

* feat: added WebView exapand feature

* update: referral API DTO

* wip: referrals layout

* feat: points API added

* fix: route naming fixed

* feat: cleaned-up the mocks, connecetd transactions API, added util date function

* fix: totalreferrals check

* fix: removed '-' value from points display

* fix: pointsData check

* fix: aliases added to the router.tsx

* fix: width resolution updated

* feat: adjusted the referral DTO as TG TMA API

* Updated /api/referral/track DTO Interface

---------

Co-authored-by: Jeongyeon Yang <[email protected]>

Author: Sterioboy

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "ngrok": "ngrok http --domain=badger-cuddly-personally.ngrok-free.app 5173",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
@@ -17,7 +18,6 @@
     "@hookform/resolvers": "^3.3.4",
     "@mui/material": "^5.14.1",
     "@orbs-network/ton-access": "^2.3.3",
-    "@supabase/supabase-js": "^2.39.8",
     "@ton/core": "^0.56.1",
     "@ton/crypto": "^3.2.0",
     "@ton/ton": "^13.11.1",
@@ -27,6 +27,7 @@
     "axios": "^1.5.0",
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "framer-motion": "^10.16.4",
+    "ngrok": "^5.0.0-beta.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",

src/assets/icons/Landing/ic_landing_referral.svg

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { styled } from "styled-components";
 
+import IcReferral from "@/assets/icons/Landing/ic_landing_referral.svg";
 import IcWalletConnect from "@/assets/icons/Landing/ic_landing_wallet.svg";
 import IcWalletDisconnect from "@/assets/icons/Landing/ic_landing_wallet_disconnect.svg";
 import useTonConnect from "@/hooks/contract/useTonConnect";
@@ -39,6 +40,9 @@ const Header = (props: HeaderProps) => {
       <HeaderWrapper $isOpen={isOpen} $backgroundType={backgroundType}>
         <HeaderTitle onClick={() => navigate("/")}>{text}</HeaderTitle>
         <HeaderRightBox>
+          <ReferralButton onClick={() => navigate("/referral")}>
+            <img src={IcReferral} alt="referral" />
+          </ReferralButton>
           {pathname === "/" && (
             <DisconnectButton $connect={connected}>
               {connected ? (
@@ -81,6 +85,22 @@ const HeaderRightBox = styled.div`
   gap: 1rem;
 `;
 
+const ReferralButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 4.4rem;
+  height: 4.4rem;
+  padding: 1.2rem;
+
+  border: none;
+  border-radius: 1.8rem;
+  background: linear-gradient(96deg, #c078f9 5.73%, #6047f4 100%);
+
+  cursor: pointer;
+`;
+
 const DisconnectButton = styled.button<{ $connect: boolean }>`
   display: flex;
   justify-content: center;
@@ -139,6 +159,7 @@ const MenuButton = styled.button<{ $isOpen: boolean }>`
 
   cursor: pointer;
 `;
+
 const HeaderTitle = styled.div`
   display: flex;
   align-items: center;

src/assets/icons/Referral/ic_question.svg

@@ -0,0 +1,18 @@
+import { TailSpin } from "react-loader-spinner";
+
+const Loader = () => {
+  return (
+    <TailSpin
+      visible={true}
+      height="30"
+      width="30"
+      color="#007aff"
+      ariaLabel="tail-spin-loading"
+      radius="4"
+      wrapperStyle={{}}
+      wrapperClass=""
+    />
+  );
+};
+
+export default Loader;