Update BandBindex 2.0

Update BandBindex 2.0

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+key.json
+key2.json

BandB.sol

@@ -0,0 +1,28 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.0;
+
+contract BandB {
+    string public name = "BandB";
+    string public symbol = "INDEX";
+    uint8 public decimals = 18;
+    uint256 public totalSupply = 21 * 10**6 * 10**uint256(decimals);
+
+    mapping(address => uint256) public balanceOf;
+
+    constructor() {
+        balanceOf[msg.sender] = totalSupply;
+    }
+
+    event Transfer(address indexed from, address indexed to, uint256 value);
+
+    function transfer(address to, uint256 value) external returns (bool) {
+        require(to != address(0), "Invalid recipient");
+        require(value > 0, "Invalid value");
+        require(balanceOf[msg.sender] >= value, "Insufficient balance");
+
+        balanceOf[msg.sender] -= value;
+        balanceOf[to] += value;
+        emit Transfer(msg.sender, to, value);
+        return true;
+    }
+}

Components/BackToTopButton.jsx

@@ -0,0 +1,39 @@
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import { useState, useEffect } from 'react';
+
+const BackToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleScroll = () => {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    setIsVisible(scrollTop > 300);
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <button
+      className={`back-to-top ${isVisible ? 'visible' : ''}`}
+      onClick={scrollToTop}
+    >
+          <ArrowUpwardIcon
+      color='white'
+      style={{ fontSize: 25, color: "#FFFFFF", cursor: "pointer" }}
+    />
+    </button>
+  );
+};
+
+export default BackToTopButton;

Components/Box.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import Checkmark from "./Checkmark";
+
+const bg =
+  "rounded mr-3 mb-2 scale-70 flex flex-col items-center justify-center space-y-3 w-20 h-20 border-2 border-Gold";
+
+const Box = ({ sticks, day }) => {
+  const dailyClaim = useSelector((state) => state.App.dailyClaim);
+  // console.log(dailyClaim);
+
+  const bg1 = dailyClaim <= sticks ? null : "bg-gray-950";
+
+  return (
+    <div className={`${bg} + ${bg1}`}>
+      {dailyClaim > sticks ? (
+        <Checkmark />
+      ) : (
+        <strong className='text-2xl text-Gold'>+{sticks}</strong>
+      )}
+      <p className='text-Gold'>Day {day}</p>
+    </div>
+  );
+};
+
+export default Box;

Components/Charts.jsx

@@ -0,0 +1,167 @@
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler,
+} from "chart.js";
+import { Line } from "react-chartjs-2";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  Filler
+);
+
+const daysOfWeek = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+];
+
+const Charts = ({ chartData, height }) => {
+  const limitedChartData2 = chartData.slice(-7); // Limit the chartData array to the desired number of data points
+
+  const options = {
+    plugins: {
+      legend: { display: true },
+      elements: {
+        line: {
+          tension: 0,
+          borderWidth: 2,
+          borderColor: "rgba(47,97,68,1)",
+          fill: "start",
+          backgroundColor: "rgba(47,97,68,1)",
+        },
+        point: { radius: 0, hitRadius: 0 },
+      },
+      scales: { xAxis: { display: true }, yAxis: { display: true } },
+      tooltip: {
+        callbacks: {
+          title: function (tooltipItem) {
+            // Format the tooltip title as the full date
+            const index = tooltipItem[0].dataIndex;
+            const item = limitedChartData2[index];
+            return item.Date;
+          },
+        },
+      },
+    },
+  };
+  const day =
+    limitedChartData2 &&
+    limitedChartData2.map((item, index) => {
+      const date = new Date(item.Date);
+      const dayOfWeek = daysOfWeek[date.getDay()];
+
+      //   return { x: item.Date, y: item.RSI };
+      return item.RSI;
+    });
+  const dayMSA =
+    limitedChartData2 &&
+    limitedChartData2.map((item, index) => {
+      const date = new Date(item.Date);
+      const dayOfWeek = daysOfWeek[date.getDay()];
+
+      //   return { x: item.Date, y: item.RSI };
+      return item.MSA;
+    });
+  const daySAS =
+    limitedChartData2 &&
+    limitedChartData2.map((item, index) => {
+      const date = new Date(item.Date);
+      const dayOfWeek = daysOfWeek[date.getDay()];
+
+      //   return { x: item.Date, y: item.RSI };
+      return item.SAS;
+    });
+
+  const data = {
+    datasets: [
+      {
+        label: "MSA",
+        data: dayMSA,
+
+        tension: 0,
+        borderWidth: 1,
+        borderColor: "rgba(47,97,68,.3)",
+        fill: "start",
+        backgroundColor: "rgba(83,62,31,.5)",
+        pointBorderColor: "rgba(75,192,192,1)",
+        pointBackgroundColor: "#fff",
+        pointBorderWidth: 1,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "rgba(75,192,192,1)",
+        pointHoverBorderColor: "rgba(220,220,220,1)",
+        pointHoverBorderWidth: 2,
+        pointRadius: 1,
+        pointHitRadius: 10,
+      },
+      {
+        label: "SAS",
+        data: daySAS,
+
+        tension: 0,
+        borderWidth: 1,
+        borderColor: "rgba(47,97,68,.3)",
+        fill: "start",
+        backgroundColor: "rgba(29,153,153,.4)",
+        pointBorderColor: "rgba(75,192,192,1)",
+        pointBackgroundColor: "#fff",
+        pointBorderWidth: 1,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "rgba(75,192,192,1)",
+        pointHoverBorderColor: "rgba(220,220,220,1)",
+        pointHoverBorderWidth: 2,
+        pointRadius: 1,
+        pointHitRadius: 10,
+      },
+      {
+        label: "RSI",
+        data: day,
+
+        tension: 0,
+        borderWidth: 1,
+        borderColor: "rgba(47,97,68,.3)",
+        fill: "start",
+        backgroundColor: "rgba(241,178,91,.3)",
+        pointBorderColor: "rgba(75,192,192,1)",
+        pointBackgroundColor: "#fff",
+        pointBorderWidth: 1,
+        pointHoverRadius: 5,
+        pointHoverBackgroundColor: "rgba(75,192,192,1)",
+        pointHoverBorderColor: "rgba(220,220,220,1)",
+        pointHoverBorderWidth: 2,
+        pointRadius: 1,
+        pointHitRadius: 10,
+      },
+    ],
+    labels:
+      limitedChartData2 &&
+      limitedChartData2.map((item) => {
+        const date = new Date(item.Date);
+        return daysOfWeek[date.getDay()].slice(0, 3);
+      }),
+  };
+
+  return (
+    <div className='max-w-full'>
+      <Line data={data} width={400} height={height} options={options} />
+    </div>
+  );
+};
+
+export default Charts;

Components/Checkmark.jsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+function Checkmark() {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='25'
+      height='25'
+      version='1.1'
+      viewBox='0 0 6.479 6.479'
+    >
+      <g
+        scale={1}
+        fill='#fff'
+        fillOpacity='1'
+        stroke='#050501'
+        strokeWidth='0.5'
+        display='inline'
+        transform='translate(-.73 -.62)'
+      >
+        <motion.circle
+          initial={{ pathLength: 0, pathOffset: 0 }}
+          animate={{ pathLength: 1.2, pathOffset: 0 }}
+          transition={{ duration: 0.5, ease: "easeInOut" }}
+          cx='3.969'
+          cy='3.86'
+          r='3.107'
+          stroke={"#f5900c"}
+          strokeWidth={0.3}
+        ></motion.circle>
+        <motion.path
+          initial={{ pathLength: 0, pathOffset: 0 }}
+          animate={{ pathLength: 1, pathOffset: 0 }}
+          transition={{ delay: 0.5, duration: 0.5, ease: "easeInOut" }}
+          d='M 2.9075169,3.7713922 3.7787342,4.6203372 5.4728912,3.011185'
+        ></motion.path>
+      </g>
+    </svg>
+  );
+}
+
+export default Checkmark;