Better present time remaining for lockups (#275)

* Better present time remaining for lockups * Sort lockups by lockup end
OriginProtocol · Jul 25, 2022 · 57409a5 · 57409a5
1 parent 36c9bc7
commit 57409a5
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 14 deletions.
diff --git a/client/components/TimeToDate.tsx b/client/components/TimeToDate.tsx
@@ -0,0 +1,37 @@
+import { FunctionComponent, ReactNode } from "react";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import { useStore } from "utils/store";
+import { SECONDS_IN_A_MONTH } from "../constants/index";
+
+dayjs.extend(relativeTime);
+
+interface TimeToDateProps {
+  epoch: number;
+}
+
+const TimeToDate: FunctionComponent<TimeToDateProps> = ({ epoch }) => {
+  const { blockTimestamp } = useStore();
+
+  const monthsRemaining = Math.floor(
+    (epoch - blockTimestamp) / SECONDS_IN_A_MONTH
+  );
+
+  return (
+    <span>
+      {monthsRemaining > 1 ? (
+        <>{monthsRemaining} months</>
+      ) : (
+        <>
+          {monthsRemaining === 1 ? (
+            <>{monthsRemaining} month</>
+          ) : (
+            <>{dayjs.unix(epoch).fromNow(true)}</>
+          )}
+        </>
+      )}
+    </span>
+  );
+};
+
+export default TimeToDate;
diff --git a/client/components/vote-escrow/LockupTable.tsx b/client/components/vote-escrow/LockupTable.tsx
@@ -3,16 +3,13 @@ import moment from "moment";
 import Card from "components/Card";
 import TokenAmount from "components/TokenAmount";
 import { Loading } from "components/Loading";
-import { useStore } from "utils/store";
-import { SECONDS_IN_A_MONTH } from "constants/index";
+import TimeToDate from "components/TimeToDate";
 
 interface LockupTableProps {
   lockup: Object;
 }
 
 const LockupTable: FunctionComponent<LockupTableProps> = ({ lockup }) => {
-  const { blockTimestamp } = useStore();
-
   if (!lockup) {
     return (
       <Card>
@@ -26,7 +23,7 @@ const LockupTable: FunctionComponent<LockupTableProps> = ({ lockup }) => {
       <thead>
         <tr>
           <th>OGV</th>
-          <th>Duration</th>
+          <th>Time remaining</th>
           <th>Lockup ends</th>
           <th>veOGV</th>
         </tr>
@@ -37,8 +34,7 @@ const LockupTable: FunctionComponent<LockupTableProps> = ({ lockup }) => {
             <TokenAmount amount={lockup.amount} />
           </td>
           <td>
-            {Math.floor((lockup.end - blockTimestamp) / SECONDS_IN_A_MONTH)}{" "}
-            months
+            <TimeToDate epoch={lockup.end} />
           </td>
           <td>{moment.unix(lockup.end).format("MMM D, YYYY")}</td>
           <td>

diff --git a/client/components/vote-escrow/YourLockups.tsx b/client/components/vote-escrow/YourLockups.tsx
@@ -13,8 +13,8 @@ import useTotalBalances from "utils/useTotalBalances";
 import useLockups from "utils/useLockups";
 import useClaim from "utils/useClaim";
 import { getRewardsApy } from "utils/apy";
-import { SECONDS_IN_A_MONTH } from "../../constants/index";
 import Image from "next/image";
+import TimeToDate from "components/TimeToDate";
 
 interface YourLockupsProps {}
 
@@ -153,7 +153,7 @@ const YourLockups: FunctionComponent<YourLockupsProps> = () => {
           <thead>
             <tr>
               <th>OGV</th>
-              <th>Duration remaining</th>
+              <th>Time remaining</th>
               <th>Stake ends</th>
               <th>veOGV</th>
               <th>&nbsp;</th>
@@ -167,10 +167,7 @@ const YourLockups: FunctionComponent<YourLockupsProps> = () => {
                   <TokenAmount amount={lockup.amount} />
                 </td>
                 <td>
-                  {Math.floor(
-                    (lockup.end - blockTimestamp) / SECONDS_IN_A_MONTH
-                  )}{" "}
-                  months
+                  <TimeToDate epoch={lockup.end} />
                 </td>
                 <td>{moment.unix(lockup.end).format("MMM D, YYYY")}</td>
                 <td>

diff --git a/client/package.json b/client/package.json
@@ -33,6 +33,7 @@
     "chart.js": "^3.7.1",
     "classnames": "^2.3.1",
     "daisyui": "^2.0.9",
+    "dayjs": "^1.11.4",
     "dotenv": "^16.0.0",
     "eslint": "8.9.0",
     "eslint-config-next": "12.1.0",

diff --git a/client/utils/useLockups.tsx b/client/utils/useLockups.tsx
@@ -3,6 +3,7 @@ import { useStore } from "utils/store";
 import { useNetworkInfo, claimIsOpen } from "utils/index";
 import { fetcher } from "utils/index";
 import useSWR, { mutate } from "swr";
+import { sortBy } from "lodash";
 
 const useLockups = () => {
   const [reloadLockups, setReloadLockups] = useState(0);
@@ -34,8 +35,10 @@ const useLockups = () => {
           });
         })
       ).then((enrichedLockups) => {
+        const sortedLockups = sortBy(enrichedLockups, (lockup) => lockup.end);
+
         useStore.setState({
-          lockups: enrichedLockups,
+          lockups: sortedLockups,
         });
       });
     };

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -2421,6 +2421,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.11.4:
+  version "1.11.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"
+  integrity sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"