AlpsFinance · monstermario · Mar 3, 2022 · Mar 4, 2022 · Mar 4, 2022 · Mar 4, 2022
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+build/*
+public/*
+src/react-app-env.d.ts
+src/serviceWorker.ts
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,3 @@
+{
+  "extends": ["prettier"]
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "doubleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2
+}
diff --git a/example.env b/example.env
@@ -0,0 +1,4 @@
+REACT_APP_MORALIS_APP_ID=QT6crraMnABRgb5AqrKcurSLNiNRd2JT3HPLLTTm
+REACT_APP_MORALIS_SERVER_URL=https://hjuh3bynravd.usemoralis.com:2053/server
+REACT_APP_CHAIN_ID=0x13881
+# REACT_APP_CHAIN_ID=0xfa
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@alpsfinance/core": "^0.0.3",
     "@emotion/react": "^11.8.1",
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.4.2",
@@ -14,17 +15,23 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.53",
     "@types/react-dom": "^16.9.8",
+    "@walletconnect/web3-provider": "^1.7.3",
+    "@web3auth/web3auth": "^0.3.3",
     "bignumber.js": "^9.0.2",
     "lodash": "^4.17.21",
+    "magic-sdk": "7.0.0",
     "moralis": "^1.3.2",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
-    "react-moralis": "^1.3.1",
-    "react-scripts": "5.0.0",
+    "react-moralis": "^1.3.2",
+    "react-scripts": "4.0.3",
+    "react-spinners": "^0.11.0",
     "typescript": "^4.0.3",
+    "walletlink": "^2.5.0",
     "web-vitals": "^0.2.4",
+    "web3": "^1.7.1",
     "workbox-background-sync": "^5.1.3",
     "workbox-broadcast-update": "^5.1.3",
     "workbox-cacheable-response": "^5.1.3",
@@ -42,7 +49,10 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src --color",
+    "format": "prettier --write 'src/**/*.{ts,tsx,scss,css,json}'",
+    "isready": "npm run format && npm run lint && npm run build"
   },
   "eslintConfig": {
     "extends": [
@@ -64,6 +74,12 @@
   },
   "devDependencies": {
     "@types/lodash": "^4.14.179",
-    "@types/react-copy-to-clipboard": "^5.0.2"
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "prettier": "2.4.1",
+    "prettier-eslint": "13.0.0",
+    "prettier-eslint-cli": "5.0.1"
   }
 }
diff --git a/src/AlpsTokenPresale.tsx b/src/AlpsTokenPresale.tsx
@@ -3,23 +3,82 @@ import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import { Box } from "@mui/material";
 import { calculateTimeLeft } from "./utility/helper";
+import { useMoralis } from "react-moralis";
+import preSaleAbi from "@alpsfinance/core/build/contracts/Presale.json";
+import { CHAIN_SYMBOL, PRESALE_CONTRACT_ADDRESS } from "./constant";
+import { useApiContract } from "react-moralis";
 
 interface Props {
   isLargeScreen: Boolean;
 }
 
 const AlpsTokenPresale: FC<Props> = (props) => {
-  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(Date.now()));
+  const [currentRound, setCurrentRound] = useState<number>(1);
   const { isLargeScreen } = props;
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setTimeLeft(calculateTimeLeft());
-    }, 1000);
-    return () => clearTimeout(timer);
+  const { isAuthenticated } = useMoralis();
+  const getCurrentPresaleRoundFunction = useApiContract({
+    address: PRESALE_CONTRACT_ADDRESS,
+    functionName: "getCurrentPresaleRound",
+    chain: CHAIN_SYMBOL,
+    abi: preSaleAbi.abi,
+  });
+  const { data, runContractFunction } = useApiContract({
+    address: PRESALE_CONTRACT_ADDRESS,
+    functionName: "presaleDetailsMapping",
+    chain: CHAIN_SYMBOL,
+    abi: preSaleAbi.abi,
+    params: { "": (currentRound + 1).toString() },
   });
+  useEffect(() => {
+    if (isAuthenticated)
+      if (currentRound < 2) runContractFunction();
+      else setTimeLeft(calculateTimeLeft(Date.now()));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentRound, isAuthenticated]);
+
+  async function Fetch() {
+    try {
+      const res = await getCurrentPresaleRoundFunction.runContractFunction();
+      setCurrentRound(Number(res));
+      // const nextRound = await getNextRoundFunction.runContractFunction();
+      // console.log(res, nextRound)
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  useEffect(() => {
+    if (isAuthenticated) Fetch();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated]);
+
+  let timer: any;
+  useEffect(() => {
+    if (data) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      timer = setInterval(() => {
+        const leftTime = calculateTimeLeft(
+          1000 * Number((data as any).startingTime)
+        );
+        if (
+          leftTime.days === 0 &&
+          leftTime.hours === 0 &&
+          leftTime.minutes === 0 &&
+          leftTime.seconds === 0
+        ) {
+          Fetch();
+        }
+        setTimeLeft(leftTime);
+      }, 1000);
+    } else {
+      clearTimeout(timer);
+    }
+    return () => clearInterval(timer);
+  }, [data]);
 
   return (
-    <Grid container justifyContent='center' alignItems='start'>
+    <Grid container justifyContent="center" alignItems="start">
       <Box
         sx={{
           background:
@@ -34,8 +93,8 @@ const AlpsTokenPresale: FC<Props> = (props) => {
             background: "rgba(0, 36, 0, 0.5)",
           }}
         >
-          <Grid container justifyContent='center' alignItems='center' pt={1}>
-            TOKEN PRESALE STARTS IN:
+          <Grid container justifyContent="center" alignItems="center" pt={1}>
+            TOKEN PRESALE ROUND {currentRound + 1} STARTS IN:
           </Grid>
 
           <Grid container spacing={isLargeScreen ? 2 : 0}>
@@ -51,7 +110,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                 }}
               >
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,
@@ -62,7 +121,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                 </Box>
 
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,
@@ -73,7 +132,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                 </Box>
 
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,
@@ -83,7 +142,7 @@ const AlpsTokenPresale: FC<Props> = (props) => {
                   <Typography fontWeight={600}>minutes </Typography>
                 </Box>
                 <Box
-                  textAlign='center'
+                  textAlign="center"
                   sx={{
                     p: 1,
                     m: isLargeScreen ? 1 : 0,

diff --git a/src/App.tsx b/src/App.tsx
@@ -9,7 +9,7 @@ import "./App.css";
 import AppBar from "./AppBar";
 import AlpsTokenPresale from "./AlpsTokenPresale";
 import Footer from "./Footer";
-import Timeline from "./Timeline";
+import Timeline from "./timeline";
 import BuyContainer from "./BuyContainer";
 import WrongNetworkModal from "./WrongNetworkModal";
 
@@ -32,22 +32,22 @@ export default function App() {
         <Grid
           container
           spacing={0}
-          alignItems='center'
-          justifyContent='center'
+          alignItems="center"
+          justifyContent="center"
           pt={2}
           sx={{
             color: "white",
             pb: 5,
             mb: 5,
           }}
-          flexDirection='column'
+          flexDirection="column"
         >
           <Grid item xs={12}>
             <Grid
               container
-              direction='column'
-              justifyContent='center'
-              textAlign='center'
+              direction="column"
+              justifyContent="center"
+              textAlign="center"
               spacing={2}
               mb={2}
             >
@@ -63,15 +63,15 @@ export default function App() {
                 container
                 px={3}
                 mt={2}
-                direction='column'
-                justifyContent='center'
-                textAlign='center'
+                direction="column"
+                justifyContent="center"
+                textAlign="center"
               >
                 <Box>
                   <img
-                    src='placeholder.png'
-                    alt='Placeholder'
-                    loading='lazy'
+                    src="placeholder.png"
+                    alt="Placeholder"
+                    loading="lazy"
                     style={{
                       width: "100%",
                       maxWidth: "750px",
@@ -82,11 +82,11 @@ export default function App() {
             </Grid>
           </Grid>
           <BuyContainer isLargeScreen={isLargeScreen} />
-          <Grid item lg={4} textAlign='left' px={isLargeScreen ? 5 : 0}>
-            <Typography variant='h5' sx={{ mb: 2 }}>
+          <Grid item lg={4} textAlign="left" px={isLargeScreen ? 5 : 0}>
+            <Typography variant="h5" sx={{ mb: 2 }}>
               Token Info
             </Typography>
-            <Grid container direction='row' alignItems='center' spacing={1}>
+            <Grid container direction="row" alignItems="center" spacing={1}>
               <Grid item lg={6} sm={7}>
                 <Typography sx={{ display: "inline" }}>Symbol: </Typography>
                 <Typography fontWeight={600} sx={{ display: "inline" }}>
@@ -100,7 +100,7 @@ export default function App() {
                 </Typography>
               </Grid>
             </Grid>
-            <Grid container direction='row' alignItems='center' spacing={1}>
+            <Grid container direction="row" alignItems="center" spacing={1}>
               <Grid item lg={12}>
                 <Typography sx={{ display: "inline" }}>Contract: </Typography>
                 <Typography fontWeight={600} sx={{ display: "inline", mr: 1 }}>
@@ -113,10 +113,10 @@ export default function App() {
                 >
                   <Tooltip
                     title={copied ? "Copied!" : "Copy To Clipboard"}
-                    placement='top'
+                    placement="top"
                     onClose={() => setTimeout(() => setCopied(false), 200)}
                   >
-                    <img src='./copy-icon.svg' alt='Copy to Clipboard' />
+                    <img src="./copy-icon.svg" alt="Copy to Clipboard" />
                   </Tooltip>
                 </CopyToClipboard>
               </Grid>

diff --git a/src/AppBar.tsx b/src/AppBar.tsx
@@ -21,14 +21,24 @@ const CustomAppBar: FC = () => {
       const ethAddress = user?.get("ethAddress");
       setWalletAddress(ethAddress.replace(ethAddress.substring(6, 38), "****"));
     }
-    //eslint - disable - next - line;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAuthenticated]);
 
+  const onLoginW = async () => {
+    const user = await authenticate({ provider: "walletconnect" });
+    console.log(user);
+  };
+
+  const onLoginM = async () => {
+    const user = await authenticate();
+    console.log(user);
+  };
+
   const loginControl = (event: React.MouseEvent) => {
     event.preventDefault();
     event.stopPropagation();
     if (!isAuthenticated) {
-      authenticate();
+      onLoginM();
     } else {
       logout();
     }
@@ -67,7 +77,7 @@ const CustomAppBar: FC = () => {
   const list = (anchor: String) => (
     <Box
       sx={{ width: 250 }}
-      role='presentation'
+      role="presentation"
       onClick={toggleDrawer(anchor, false)}
       onKeyDown={toggleDrawer(anchor, false)}
     >
@@ -87,8 +97,8 @@ const CustomAppBar: FC = () => {
       </List>
       <List>
         <Button
-          color='inherit'
-          variant='contained'
+          color="inherit"
+          variant="contained"
           sx={{
             borderRadius: 30,
             color: "#0D7E06",
@@ -106,8 +116,8 @@ const CustomAppBar: FC = () => {
 
   return (
     <AppBar
-      position='sticky'
-      color='transparent'
+      position="sticky"
+      color="transparent"
       elevation={0}
       sx={{
         pt: 1.5,
@@ -143,8 +153,8 @@ const CustomAppBar: FC = () => {
             </Link>
           ))}
         <Button
-          color='inherit'
-          variant='contained'
+          color="inherit"
+          variant="contained"
           sx={{
             borderRadius: 30,
             color: "#0D7E06",
@@ -162,8 +172,8 @@ const CustomAppBar: FC = () => {
         </Button>
         <Grid
           container
-          justifyContent='right'
-          alignItems='right'
+          justifyContent="right"
+          alignItems="right"
           sx={{
             "@media (min-width: 780px)": {
               display: "none",