Untitled

import React, { useEffect, useState, useRef } from "react";
import { Link, useHistory } from "react-router-dom";
import loadable from "@loadable/component";
import pMinDelay from "p-min-delay";
import { Dropdown } from "react-bootstrap";
import pic1 from "./../../../images/profile/pic1.jpg";
import WalletTab from "../Boltz/MyWallet/WalletTab";
import { Sparklines, SparklinesLine } from "react-sparklines";
import { useMoralisQuery, useMoralis, useMoralisWeb3Api } from "react-moralis";

const sampleData1 = [
  2, 2, 2, 4, 4, 5, 4, 6, 5, 7, 6, 8, 7, 9, 8, 4, 7, 6, 8, 7,
];
const sampleData2 = [
  2, 3, 4, 5, 6, 5, 4, 6, 5, 7, 2, 3, 4, 5, 3, 2, 5, 4, 5, 7,
];
const sampleData3 = [
  2, 2, 4, 3, 2, 4, 3, 3, 4, 2, 1, 3, 2, 4, 2, 3, 5, 4, 3, 2,
];
const sampleData4 = [6, 2, 3, 2, 3, 5, 3, 3, 7, 2, 4, 7, 5, 1, 3, 6, 5, 9];
const sampleData5 = [
  6, 2, 3, 2, 3, 5, 4, 3, 2, 2, 4, 5, 2, 5, 5, 4, 3, 1, 3, 4, 5, 6,
];
const sampleData6 = [
  1, 2, 3, 1, 4, 2, 4, 2, 2, 1, 2, 5, 1, 4, 1, 1, 5, 4, 3, 2, 4, 2,
];
const sampleData7 = [
  2, 3, 4, 5, 6, 5, 4, 6, 5, 7, 2, 3, 4, 5, 3, 2, 5, 4, 5, 7,
];
const sampleData8 = [
  2, 2, 2, 4, 4, 5, 4, 6, 5, 7, 6, 8, 7, 9, 8, 4, 7, 6, 8, 7,
];
const sampleData9 = [
  1, 2, 3, 1, 4, 2, 4, 2, 2, 1, 2, 5, 1, 4, 1, 1, 5, 4, 3, 2, 4, 2,
];

const SummarApexBar = loadable(() =>
  pMinDelay(import("../Boltz/Portfolio/SummarApexBar"), 1000)
);
const CurrentApexBar = loadable(() =>
  pMinDelay(import("../Boltz/Portfolio/CurrentApexBar"), 1000)
);
const CurrentApexDonut = loadable(() =>
  pMinDelay(import("../Boltz/Portfolio/CurrentApexDonut"), 1000)
);

const CoinChart = loadable(() =>
  pMinDelay(import("../Boltz/MyWallet/CoinChart"), 1000)
);

const DropdownBlog = () => {
  return (
    <>
      <Dropdown className="dropdown custom-dropdown mb-0">
        <Dropdown.Toggle
          variant=""
          as="div"
          className="btn sharp tp-btn dark-btn i-false"
        >
          <svg
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13Z"
              stroke="#342E59"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12 6C12.5523 6 13 5.55228 13 5C13 4.44772 12.5523 4 12 4C11.4477 4 11 4.44772 11 5C11 5.55228 11.4477 6 12 6Z"
              stroke="#342E59"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M12 20C12.5523 20 13 19.5523 13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20Z"
              stroke="#342E59"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </Dropdown.Toggle>
        <Dropdown.Menu className="dropdown-menu dropdown-menu-right">
          <Dropdown.Item>Details </Dropdown.Item>
          <Dropdown.Item className="text-danger">Cancel </Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </>
  );
};

const Portofolio = () => {
  // state
  const [data, setData] = useState(
    document.querySelectorAll("#marketCapital tbody tr")
  );
  const sort = 9;
  const activePag = useRef(0);
  const [test, settest] = useState(0);
  const [tokenBalances, setTokenBalances] = useState([]);
  const [tokenNames, setTokenNames] = useState([]);
  const [tokenAmounts, setTokenAmounts] = useState([]);
  const [tokenPrices, setTokenPrices] = useState([]);
  const [tokenTotals, setTokenTotals] = useState([]);
  const [chain, setChain] = useState("bsc");

  // Active data
  const chageData = (frist, sec) => {
    for (var i = 0; i < data.length; ++i) {
      if (i >= frist && i < sec) {
        data[i].classList.remove("d-none");
      } else {
        data[i].classList.add("d-none");
      }
    }
  };
  // Active pagginarion
  activePag.current === 0 && chageData(0, sort);
  // paggination
  let paggination = Array(Math.ceil(data.length / sort))
    .fill()
    .map((_, i) => i + 1);

  // Active paggination & chage data
  const onClick = (i) => {
    activePag.current = i;
    chageData(activePag.current * sort, (activePag.current + 1) * sort);
    settest(i);
  };

  //moralis
  const { user } = useMoralis();
  const Web3Api = useMoralisWeb3Api();

  const fetchData = async () => {
    let amounts = [];
    let prices = [];
    let name = [];
    let totals = [];
    if (user) {
      let balances = await Web3Api.account.getTokenBalances({
        chain: "bsc",
        address: user.get("ethAddress"),
      });
      //setTokenBalances(balances);
      for (let i = 0; i < balances.length; i++) {
        // get the amount
        let amount = balances[i].balance / 10 ** balances[i].decimals;
        amounts.push(amount);

        //price
        let price = await Web3Api.token.getTokenPrice({
          address: balances[i].token_address,
        });
        prices.push(price.usdPrice);

        //Name
        let token = balances[i].symbol;
        name.push(token);

        // total
        totals = prices.map((item, index) => item * amounts[index]);
      }
      //update the this.state
      setTokenAmounts(amounts);
      setTokenNames(name);
      setTokenPrices(prices);
      setTokenTotals(totals);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const [country1, setCountry1] = useState("Medan, IDN");
  const [crrency1, setCrrency1] = useState("Monthly (2021)");

  //token lineca
  const tokenItem = (props) => {
    return (
      <tr role="row" className="odd market-trbg">
        <td className="sorting_1">coming</td>
        <td className="wspace-no">{props.name}</td>
        <td>{props.Amount}</td>
        <td>{props.price}</td>
        <td>{props.total}</td>
        <td>
          <svg className="peity-line" width="280" height="50">
            <Sparklines data={sampleData1}>
              <SparklinesLine
                style={{ strokeWidth: 4, stroke: "#2258bf", fill: "none" }}
              />
            </Sparklines>
          </svg>
        </td>
      </tr>
    );
  };

  return (
    <>
      <div className="mb-sm-5 mb-3 text-head">
        <div className=" d-flex flex-wrap align-items-center">
          <h2 className="font-w600 mb-2 me-auto">Portofolio</h2>
          <Dropdown className=" weather-btn mb-2">
            <span className="fs-22 font-w600 d-flex">
              <i className="fa fa-cloud me-3 ms-3"></i>21
            </span>
            <Dropdown.Toggle
              variant=""
              as="div"
              className="form-control style-3 default-select"
            >
              {country1}{" "}
            </Dropdown.Toggle>
            <Dropdown.Menu>
              <Dropdown.Item onClick={() => setCountry1("Medan, IDN")}>
                Medan, IDN
              </Dropdown.Item>
              <Dropdown.Item onClick={() => setCountry1("Jakarta, IDN")}>
                Jakarta, IDN
              </Dropdown.Item>
              <Dropdown.Item onClick={() => setCountry1("Surabaya, IDN")}>
                Surabaya, IDN
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
          <Link to={"#"} className="btn btn-primary mb-2 rounded">
            <i className="las la-calendar scale5 me-3"></i>Filter Periode
          </Link>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="table-responsive table-hover fs-14 ">
              <div
                id="example6_wrapper"
                className="dataTables_wrapper no-footer"
              >
                <table
                  className="table display mb-4 dataTablesCard font-w600  market-tbl border-no text-black dataTable no-footer border-0"
                  id="marketCapital"
                  role="grid"
                  aria-describedby="example6_info"
                >
                  <thead>
                    <tr role="row">
                      <th
                        className="sorting"
                        tabIndex={0}
                        rowSpan={1}
                        colSpan={1}
                      >
                        Logo
                      </th>
                      <th
                        className="sorting"
                        tabIndex={0}
                        rowSpan={1}
                        colSpan={1}
                      >
                        Name
                      </th>
                      <th
                        className="sorting"
                        tabIndex={0}
                        rowSpan={1}
                        colSpan={1}
                      >
                        Amount
                      </th>
                      <th
                        className="sorting"
                        tabIndex={0}
                        rowSpan={1}
                        colSpan={1}
                      >
                        Price
                      </th>
                      <th
                        className="sorting"
                        tabIndex={0}
                        rowSpan={1}
                        colSpan={1}
                      >
                        Total
                      </th>
                      <th
                        className="sorting"
                        tabIndex={0}
                        rowSpan={1}
                        colSpan={1}
                      >
                        P/L
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {tokenBalances.map((token, i) => (
                      <tokenItem
                        name={tokenNames[i]}
                        amount={tokenAmounts[i]}
                        price={tokenPrices[i]}
                        total={tokenTotals[i]}
                      />
                    ))}
                  </tbody>
                </table>
                <div className="d-sm-flex text-center justify-content-between align-items-center mt-3">
                  <div className="dataTables_info">
                    Showing {activePag.current * sort + 1} to{" "}
                    {data.length > (activePag.current + 1) * sort
                      ? (activePag.current + 1) * sort
                      : data.length}{" "}
                    of {data.length} entries
                  </div>
                  <div
                    className="dataTables_paginate paging_simple_numbers"
                    id="example5_paginate"
                  >
                    <Link
                      className="paginate_button previous disabled"
                      to="/market-capital"
                      onClick={() =>
                        activePag.current > 0 && onClick(activePag.current - 1)
                      }
                    >
                      Previous
                    </Link>
                    <span>
                      {paggination.map((number, i) => (
                        <Link
                          key={i}
                          to="/market-capital"
                          className={`paginate_button  ${
                            activePag.current === i ? "current" : ""
                          } `}
                          onClick={() => onClick(i)}
                          style={{ display: "inline-block" }}
                        >
                          {number}
                        </Link>
                      ))}
                    </span>
                    <Link
                      className="paginate_button next"
                      to="/market-capital"
                      onClick={() =>
                        activePag.current + 1 < paggination.length &&
                        onClick(activePag.current + 1)
                      }
                    >
                      Next
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col-xxl-12">
          <div className="row">
            <div class="col-12 col-md-8">
              <div className="card">
                <div className="card-header d-block d-sm-flex border-0 pb-sm-0 pb-0 align-items-center">
                  <div className="me-auto mb-sm-0 mb-3">
                    <h4 className="fs-20 text-black">Overview Balance</h4>
                    <p className=" fs-12">
                      Lorem ipsum dolor sit amet, consectetur
                    </p>
                  </div>
                  <Dropdown>
                    <Dropdown.Toggle
                      variant=""
                      className="form-control style-1 default-select"
                    >
                      {crrency1}
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                      <Dropdown.Item
                        onClick={() => setCrrency1("Monthly (2021)")}
                      >
                        Monthly (2021)
                      </Dropdown.Item>
                      <Dropdown.Item
                        onClick={() => setCrrency1("Daily (2021)")}
                      >
                        Daily (2021)
                      </Dropdown.Item>
                      <Dropdown.Item
                        onClick={() => setCrrency1("Weekly (2021)")}
                      >
                        Weekly (2021)
                      </Dropdown.Item>
                    </Dropdown.Menu>
                  </Dropdown>
                </div>
                <div className="card-body pt-3">
                  <div className="flex-wrap mb-sm-4 mb-2 align-items-center">
                    <div className="d-flex align-items-center">
                      <span className="fs-32 text-black font-w600 pe-3">
                        $557,235.31
                      </span>
                      <span className="fs-22 text-success">
                        7%{" "}
                        <i
                          className="fa fa-caret-up scale5 ms-2 text-success"
                          aria-hidden="true"
                        ></i>
                      </span>
                    </div>
                    <p className="mb-0 text-black me-auto">
                      Last Week <span className="text-success">$563,443</span>
                    </p>
                  </div>
                  <div
                    id="chartTimeline"
                    className="timeline-chart market-line"
                  >
                    <CoinChart />
                  </div>
                </div>
              </div>
            </div>
            <div className="col-12 col-md-4">
              <div className="card">
                <div className="card-header pb-0 border-0">
                  <h4 className="mb-0 fs-20 text-black">Current Graph</h4>
                  <DropdownBlog />
                </div>
                <div className="card-body py-2 text-center">
                  <div id="pieChart" className="d-inline-block">
                    <CurrentApexDonut />
                  </div>
                  <div className="chart-items">
                    <div className=" col-xl-12 col-sm-12">
                      <div className="row text-black text-start fs-13 mt-4">
                        <span className="mb-3 col-6">
                          <svg
                            className="me-2"
                            width="19"
                            height="19"
                            viewBox="0 0 19 19"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <rect
                              width="19"
                              height="19"
                              rx="9.5"
                              fill="#00ADA3"
                            />
                          </svg>
                          Ethereum
                        </span>
                        <span className="mb-3 col-6">
                          <svg
                            className="me-2"
                            width="19"
                            height="19"
                            viewBox="0 0 19 19"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <rect
                              width="19"
                              height="19"
                              rx="9.5"
                              fill="#374B96"
                            />
                          </svg>
                          Litecoin
                        </span>
                        <span className="mb-3 col-6">
                          <svg
                            className="me-2"
                            width="19"
                            height="19"
                            viewBox="0 0 19 19"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <rect
                              width="19"
                              height="19"
                              rx="9.5"
                              fill="#FF782C"
                            />
                          </svg>
                          Monero
                        </span>
                        <span className="mb-3 col-6">
                          <svg
                            className="me-2"
                            width="19"
                            height="19"
                            viewBox="0 0 19 19"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <rect
                              width="19"
                              height="19"
                              rx="9.5"
                              fill="#F7A62C"
                            />
                          </svg>
                          Bitcoin
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default Portofolio;