wallet-porfolio

src/common/api/hive-engine.ts

@@ -188,3 +188,35 @@ export const getMarketData = async (symbol: any) => {
   });
   return history;
 };
+
+export async function getTransactions(symbol: string, account: string, limit: number, offset?: number): Promise<any> {
+  const url: any = engine.mainTransactionUrl;
+  return axios({
+    url: url,
+    method: "GET",
+    params: {
+      account,
+      token: symbol,
+      limit,
+      offset
+    }
+  }).then((response) => {
+    return response.data;
+  });
+};
+
+export async function getOtherTransactions(account: string, limit: number, symbol: string, offset: number = 0) {
+  const url: any = engine.otherTransactionsUrl;
+  const response = await axios({
+    url: url,
+    method: "GET",
+    params: {
+      account,
+      limit,
+      offset,
+      type: "user",
+      symbol
+    }
+  });
+  return response.data;
+}

src/common/api/misc.ts

@@ -71,3 +71,19 @@ export const fetchGif = async (query: string | null, limit: string, offset: stri
   }
   return gifs;
 };
+
+export const marketInfo = async (): Promise<number> => {
+
+  const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=hive%2C%20hive_dollar&order=market_cap_desc&per_page=100&page=1&sparkline=false`;
+  const data = await axios.get(url)
+  .then((r: any) => r.data)  
+  return data;
+};
+
+export const marketChart = async (token: string): Promise<number> => {
+
+  const url = `https://api.coingecko.com/api/v3/coins/${token}/market_chart?vs_currency=usd&days=30`;
+  const data = await axios.get(url)
+  .then((r: any) => r.data)
+  return data;
+};

src/common/app.tsx

@@ -23,6 +23,7 @@ import { pageMapDispatchToProps, pageMapStateToProps } from "./pages/common";
 import { connect } from "react-redux";
 import loadable from "@loadable/component";
 import Announcement from "./components/announcement";
+import TokenDetails from "./components/token-details";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -132,6 +133,12 @@ const App = (props: any) => {
           path={routes.PROPOSAL_DETAIL}
           component={ProposalDetailContainer}
         />
+        <Route
+          exact={true}
+          strict={true}
+          path={routes.TOKEN_DETAIL}
+          component={ProfilePage}
+        />
         <Route exact={true} strict={true} path={routes.ABOUT} component={AboutPage} />
         <Route exact={true} strict={true} path={routes.GUESTS} component={GuestPostPage} />
         <Route exact={true} strict={true} path={routes.CONTRIBUTE} component={ContributePage} />

src/common/components/engine-tokens-estimated/index.tsx

@@ -4,6 +4,7 @@ import { getMetrics } from "../../api/hive-engine";
 
 export const EngineTokensEstimated = (props: any) => {
   const { tokens: userTokens, dynamicProps } = props;
+  // console.log(userTokens)
   const [estimated, setEstimated] = useState(`${_t("wallet.calculating")}...`);
 
   useEffect(() => {

src/common/components/hive-engine-chart/index.tsx

@@ -30,8 +30,8 @@ export const HiveEngineChart = (props: any) => {
       enabled: false
     },
     chart: {
-      height: "70",
-      width: "600",
+      height: "40",
+      width: "100",
       zoomType: "x",
       backgroundColor: "transparent",
       border: "none",
@@ -55,7 +55,7 @@ export const HiveEngineChart = (props: any) => {
       area: {
         fillColor: theme === Theme.night ? "#2e3d51" : "#f3f7fb",
         lineColor: "transparent",
-        lineWidth: 399
+        lineWidth: 150
       },
       series: {
         marker: {
@@ -119,14 +119,14 @@ export const HiveEngineChart = (props: any) => {
     series: [
       {
         name: "tokens",
-        data: prices.length === 0 ? [0, 0] : prices,
+        data: prices?.length === 0 ? [0, 0] : prices,
         type: "line",
         enableMouseTracking: true
       }
     ]
   };
   return (
-    <div className="market-graph d-flex justify-items-center ml-5">
+    <div className="market-graph d-flex justify-items-center">
       <div className="graph">
         <ReactHighcharts config={config} />
       </div>

src/common/components/hive-engine-transactions/index.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from 'react'
+import { Button, FormControl } from 'react-bootstrap'
+import { _t } from '../../i18n'
+import { cashCoinSvg } from "../../img/svg";
+import TwoUserAvatar from "../two-user-avatar";
+
+import {
+    getTransactions,
+    getOtherTransactions    
+  } from "../../api/hive-engine";
+import LinearProgress from '../linear-progress';
+
+export const EngineTransactionList = (props: any) => {
+
+    const { global, account, params } = props
+
+    const [transactions, setTransactions] = useState([])
+    const [otherTransactions, setOtherTransactions] = useState([])
+    const [loading, setLoading] = useState(false);
+    const [loadLimit, setLoadLimit] = useState(10)
+
+    useEffect(() => {
+        otherTokenTransactions();
+        getMainTransactions()
+    }, [])
+
+    const getMainTransactions = async () => {
+        const transactions = await getTransactions(params, account.name, 200);
+        console.log(transactions)
+
+    };
+
+    const otherTokenTransactions = async () => {
+        setLoading(true)
+        const otherTransactions = await getOtherTransactions(account.name, 200, params.toUpperCase());
+        console.log(otherTransactions)
+        setOtherTransactions(otherTransactions);
+        setLoading(false)
+    }
+
+    const getTransactionTime = (timestamp: number) => {
+        let date: any = new Date(timestamp * 1000)
+        return date.toDateString();
+    }
+
+    const loadMore = () => {  
+        const moreItems = loadLimit + 10;
+        setLoadLimit(moreItems);
+      };
+
+      const optionChanged = (e: React.ChangeEvent<typeof FormControl & HTMLInputElement>) => {
+        console.log(e.target)
+      }
+
+  return (
+    <div className="transaction-list">
+      <div className="transaction-list-header">
+        <h2>{_t("transactions.title")} </h2>
+        <FormControl as="select" value="group" onChange={optionChanged} >
+          <option value="">{_t("transactions.group-all")}</option>
+          {["transfers", "market-orders", "interests", "stake-operations", "rewards"].map((x) => (
+            <option key={x} value={x}>
+              {_t(`transactions.group-${x}`)}
+            </option>
+          ))}
+        </FormControl>
+      </div>
+      {loading && <LinearProgress />}
+      {otherTransactions?.slice(0, loadLimit).map((t: any) => {
+        return ( 
+          otherTransactions?.length === 0 ? <p key={t?.id} className="text-muted empty-list">{_t("g.empty-list")}</p> :
+        <div className="transaction-list-item" key={t?.id}>
+          <div className="transaction-icon">
+            {t?.operation === "tokens_transfer" || t?.operation === "tokens_stake" || t?.operation === "tokens_delegate" ? 
+            TwoUserAvatar({ global: global, from: t?.from, to: t?.to, size: "small" }) :
+             cashCoinSvg }
+          </div>
+          <div className="transaction-title">
+            <div className="transaction-name">{t?.operation.replace("_", " ")}</div>
+            <div className="transaction-date">{getTransactionTime(t?.timestamp)}</div>
+          </div>
+          <div className="transaction-numbers">{`${t?.quantity} ${t?.symbol}`}</div>
+          <div className="transaction-details">
+            {t?.memo}
+            <p>
+            {t?.operation === "tokens_transfer" ? 
+            <span>                
+                <strong>@{t.from}</strong> -&gt; <strong>@{t.to}</strong> 
+            </span> : 
+            <span>
+                <strong>{`Txn Id: ${t.transactionId}`}</strong>
+                <p className='mt-2'>
+                <strong>{`Block Id: ${t.blockNumber}`}</strong>
+                </p>
+            </span>
+            }
+            </p>
+          </div>
+        </div>
+        )
+      })}
+          {!loading && otherTransactions.length > loadLimit && 
+          <Button disabled={false} block={true} onClick={loadMore} className="mt-2">
+            {_t("g.load-more")}
+          </Button>}
+    </div>
+  )
+}