holders

rosticom · Jul 31, 2024 · 2444166 · 2444166
1 parent e258815
commit 2444166
Show file tree

Hide file tree

Showing 20 changed files with 453 additions and 232 deletions.
diff --git a/assets/pep.png b/assets/pep.png
diff --git a/assets/rost.jpg b/assets/rost.jpg
diff --git a/assets/theclash.jpg b/assets/theclash.jpg
diff --git a/assets/veronika.jpg b/assets/veronika.jpg
diff --git a/assets/yula_g.jpg b/assets/yula_g.jpg
diff --git a/docs/assets/index-CfoHkv1i.css b/docs/assets/index-CfoHkv1i.css
diff --git a/docs/assets/index-CFHbMKh7.js → docs/assets/index-Chq_XTR8.js b/docs/assets/index-CFHbMKh7.js → docs/assets/index-Chq_XTR8.js
diff --git a/docs/assets/index-Erui8dy_.css b/docs/assets/index-Erui8dy_.css
diff --git a/docs/index.html b/docs/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Coobot</title>
     <script src="https://telegram.org/js/telegram-web-app.js"></script>
-    <script type="module" crossorigin src="./assets/index-CFHbMKh7.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CfoHkv1i.css">
+    <script type="module" crossorigin src="./assets/index-Chq_XTR8.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Erui8dy_.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "coobot-merkaba",
   "private": true,
-  "version": "0.0.5",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/App.tsx b/src/App.tsx
@@ -11,6 +11,7 @@ import viteLogo from './assets/coobot_23.jpg'
 import './App.css'
 import TonUsdChart from "./components/TonusdChart/TonusdChart";
 import MarketCap from "./components/MarketCap/MarketCap";
+import HoldersList from "./components/HoldersList/HoldersList";
 
 function App() {
   // const [count, setCount] = useState(0)
@@ -74,23 +75,24 @@ function App() {
           </a> */}
         </div>
         <MarketCap />
+        <HoldersList />
         <div className="card">
           {/* <button onClick={() => setCount((count) => count + 1)}>
-            earn coins for your wallet: {count}
+            earn coins for your wallet: {count} money transfer
           </button> */}
-          <p>
+          <p> 
             <a href="https://t.me/gasPump_bot/app?startapp=eyJyZWZfdXNlcl9pZCI6NTY1ODY0MzE4LCJ0b2tlbl9hZGRyZXNzIjoiRVFEZGlyd3l5YXNST2tvUnc5bUJCekJkUUhjYUFjOUV5OFpoak1TdXRkdHJmU2M1In0">
-              Buy $COO and chill out. Dividend payout August 1st, 2024.
+              Buy $COO and chill out. Dividend payout on September 1st, 2024.
               {/* Please, buy some $COO to be rich */}
               {/* Transfer coobots to your wallet */}
               {/* <code>coobot coins</code>  */}
             </a>
           </p>
         </div>
-        <p className="read-the-docs">
+        {/* <p className="read-the-docs"> */}
             {/* dividend payout August 1st, 2024 */}
             {/* buying or selling on the crypto market? doesn't matter with quantum technology! */}
-        </p>
+        {/* </p> */}
         <TonUsdChart />
         <Footer />
       </div>

diff --git a/src/assets/pep.png b/src/assets/pep.png
diff --git a/src/assets/rost.jpg b/src/assets/rost.jpg
diff --git a/src/assets/theclash.jpg b/src/assets/theclash.jpg
diff --git a/src/assets/veronika.jpg b/src/assets/veronika.jpg
diff --git a/src/assets/yula_g.jpg b/src/assets/yula_g.jpg
diff --git a/src/components/HoldersList/Holders.scss b/src/components/HoldersList/Holders.scss
@@ -0,0 +1,110 @@
+
+  .holders-list {
+    list-style: none;
+    padding: 0;
+    margin: 0; 
+  }
+
+  .avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    margin-right: 10px;
+  }
+
+  .info {
+    flex: 1;
+  }
+
+  .first_row, .second_row {
+    justify-content: space-between;
+    display: flex;
+  }
+
+  .profit {
+    font-size: 12px;
+    color: rgb(26, 100, 70);
+  }
+
+  .gravity {
+    font-size: 12px;
+    color: #333;
+  }
+
+  .volume {
+    font-size: 14px;
+    // color: #333;
+    color: black
+  }
+
+  .username {
+    font-size: 14px;
+    font-weight: bold;
+    text-decoration: none;
+    // color: #333;
+    color: black;
+  }
+
+  .holders-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    padding-top: 8px;
+    // border-bottom: 1px solid #ccc;
+    background-color: #f0f0f0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: relative;
+  }
+
+  .holders-item:first-child {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
+
+  .holders-item:last-child {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    border-bottom: none; 
+  }
+
+  .holders-list-container {
+    // background-color: #f0f0f0;
+    background-color: transparent;
+    padding: 20px;
+    // border-radius: 10px;
+  }
+
+  .holders-list-container h2 { // HOLDERS CAPTION
+    text-transform: uppercase;
+    font-size: 12px;
+    // font-weight: thin;
+    // color: #333;
+    color: #f0f0f0;
+    // background-color: black;
+    margin-bottom: 8px;
+    margin-left: 12px;
+    text-align: left;
+  }
+
+  // .divider {
+  //   // margin-left: 20px; /* Отступ слева */
+  //   // border-bottom: 1px solid #ccc
+  //   width: 100%;
+  //   height: 1px;
+  //   color: black;
+  // }
+
+  .holders-item::before {
+    content: "";
+    position: absolute;
+    top: 56px; /* Позиционируем псевдоэлемент по центру высоты элемента */
+    left: 56px; /* Отступ слева */
+    width: calc(100% - 56px);
+    height: 0.5px;
+    background-color: #ccc; 
+  }
+
+  /* Для последнего элемента убираем линию */
+  .holders-item:last-child::before {
+    display: none;
+  }
diff --git a/src/components/HoldersList/Holders.tsx b/src/components/HoldersList/Holders.tsx
@@ -0,0 +1,32 @@
+import './Holders.scss';
+
+function Holders({ // THIS ITEM IS DEFAULT (ITEMS LIST IN HOLDERSLIST.TSX)
+  avatar = './../../../../src/assets/coobot_23.jpg',
+  username = 'Coobot fund', 
+  gravity = 0, 
+  profit = '-', 
+  volume = 0,
+}) {
+  return (
+    <div className="holders-item">
+      <img src={avatar} alt={username} className="avatar" />
+      <div className="info">
+        {/* <a href={`/${username}`} className="username">{username}</a> */}
+        <div className="first_row">
+          <div className="username">{username}</div>
+          <div className="volume">{volume}M $COO</div>
+        </div>
+        <div className="second_row">
+          <div className="profit">{profit} USDT</div>
+          <div className="gravity">{gravity} %</div>
+        </div>
+        {/* <div className="divider"></div> */}
+        {/* <span>{amount} TON</span> */}
+        {/* <span>{type} {term}</span>
+        <span>{price} $COO</span> */}
+      </div>
+    </div>
+  );
+}
+
+export default Holders;
diff --git a/src/components/HoldersList/HoldersList.tsx b/src/components/HoldersList/HoldersList.tsx
@@ -0,0 +1,77 @@
+import Holders from './Holders';
+import './Holders.scss'; 
+
+const holdersData = [
+  {
+    avatar: './../../../../src/assets/coobot_23.jpg',
+    username: 'Coobot fund',
+    gravity: 1.00,
+    profit: '+23.78',
+    volume: 66.6,
+    price: 2000000
+  },
+  {
+    avatar: './../../../../src/assets/yula_g.jpg',
+    username: 'Юлия Geraldina',
+    gravity: 1.00,
+    profit: '+2.85',
+    volume: 8,
+    price: 2000000
+  },
+  {
+    avatar: './../../../../src/assets/veronika.jpg',
+    username: 'Veronika Alex',
+    gravity: 1.00,
+    profit: '+2.49',
+    volume: 7,
+    price: 2000000
+  },
+  {
+    avatar: './../../../../src/assets/theclash.jpg',
+    username: 'Pavel | theclash',
+    gravity: 1.00,
+    profit: '+2.46',
+    volume: 6.9,
+    price: 2000000
+  },
+  {
+    avatar: './../../../../src/assets/rost.jpg',
+    username: 'Rost G.',
+    gravity: 1.00,
+    profit: '+1.71',
+    volume: 4.8,
+    price: 2000000
+  },
+  {
+    avatar: './../../../../src/assets/pep.png',
+    username: 'fOgTgc',
+    gravity: 1.00,
+    profit: '+1.68',
+    volume: 4.7,
+    price: 2000000
+  }
+];
+
+function HoldersList() {
+  let overallVolume = 0;
+  for (let i = 0; i < holdersData.length; i++) { // OVERALL VOLUME
+    overallVolume = overallVolume + holdersData[i].volume;
+  }
+  console.log("overallVolume: ", overallVolume);
+  for (let i = 0; i < holdersData.length; i++) { // GRAVITY
+    holdersData[i].gravity = parseFloat((holdersData[i].volume / overallVolume * 100).toFixed(2));
+    console.log("gravity: ", holdersData[i].gravity);
+  }
+  return (
+    <div className="holders-list-container">
+      <h2>Holders</h2>
+      <div className="holders-list">
+        {holdersData.map((holdersMap, index) => (
+          <Holders key={index} {...holdersMap} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default HoldersList;
diff --git a/src/components/MarketCap/MarketCap.tsx b/src/components/MarketCap/MarketCap.tsx
@@ -1,24 +1,23 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useState, useEffect } from 'react';
-import axios from 'axios';
+// import { useState, useEffect } from 'react';
+// import axios from 'axios';
 
 const MarketCap = () => {
-  const [data, setData] = useState(null);
-  const botToken = import.meta.env.VITE_API_KEY;
-  console.log("botToken: ", botToken);
+  // const [data, setData] = useState(null);
+  // const botToken = import.meta.env.VITE_API_KEY;
 
-  useEffect(() => {
-    fetchData();
-  }, []);
+  // useEffect(() => {
+  //   fetchData();
+  // }, []);
 
-  const fetchData = async () => {
-    try {
-      const response = await axios.get(`https://api.telegram.org/bot${botToken}/getMyCommands`);
-      setData(JSON.parse(response.data.result[0]?.description || '{}'));
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
-  };
+  // const fetchData = async () => {
+    // try {
+      // const response = await axios.get(`https://api.telegram.org/bot${botToken}/getMyCommands`);
+      // setData(JSON.parse(response.data.result[0]?.description || '{}'));
+  //   } catch (error) {
+  //     console.error('Error fetching data:', error);
+  //   }
+  // };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   // const saveData = async (newData: any) => {
@@ -34,7 +33,8 @@ const MarketCap = () => {
 
   return (
     <div>
-      <h2>Max ⋅ {data ? JSON.stringify(data): '$3,666.69'}</h2>
+      {/* <h2>{data ? 'Capital ⋅ ' + JSON.stringify(data): 'Capital ⋅ $COO'}</h2> */}
+      <h2>{'$COO ⋅ 98M'}</h2>
       {/* {data ? <p>Saved data: {JSON.stringify(data)}</p> : <p>Loading...</p>} */}
       {/* <button onClick={() => saveData({ market_cap: '$3,666.69' })}>Save New Data</button> */}
     </div>