Merge pull request #85 from factchain/add_final_rating

[extension] use note final rating
factchain · Mar 2, 2024 · 30e0973 · 30e0973
2 parents c82cf3b + 2f375a8
commit 30e0973
Show file tree

Hide file tree

Showing 8 changed files with 795 additions and 84 deletions.
diff --git a/fc-community-extension/public/logos/eth-symbol-virgil.png b/fc-community-extension/public/logos/eth-symbol-virgil.png
diff --git a/fc-community-extension/public/logos/eth.png b/fc-community-extension/public/logos/eth.png
diff --git a/fc-community-extension/public/logos/warpcast.png b/fc-community-extension/public/logos/warpcast.png
diff --git a/fc-community-extension/public/logos/x.png b/fc-community-extension/public/logos/x.png
diff --git a/fc-community-extension/public/logos/youtube.png b/fc-community-extension/public/logos/youtube.png
diff --git a/fc-community-extension/src/pages/components/FCNote.js b/fc-community-extension/src/pages/components/FCNote.js
@@ -11,7 +11,10 @@ const FCNote = (props) => {
       className="bg-fcGrey/70 rounded-md p-2 text-xs space-y-2 shadow block hover:bg-fcGrey/90"
     >
       <div className="flex items-center gap-2">
-        <div className="shrink-0 w-[24px] h-[24px] rounded-full bg-pink-400/30"></div>
+        <img
+          src="/logos/x.png"
+          className="rounded-full w-[24px] h-[24px] object-cover shadow"
+        />
         <div className="truncate">
           <strong>{elipseText(props.creator, 10)}</strong>
           <span className="opacity-70">{' - '}</span>
@@ -20,12 +23,15 @@ const FCNote = (props) => {
       </div>
       <div className="flex items-start gap-2">
         <div className="opacity-90 line-clamp-4 flex-grow">{props.content}</div>
-        {!props.hideMetas && (
+        {!props.hideMetas && props.finalRating && (
           <div className="shrink-0 flex flex-col gap-1 items-center">
-            <div className="w-[32px] h-[32px] bg-pink-400/30 rounded"></div>
+            <img
+              src="/icons/icon_32.png"
+              className="rounded-full w-[32px] h-[32px] object-cover shadow"
+            />
             <div className="flex items-center gap-1">
               {/* TODO proper note + dynamic image based on note */}
-              <strong>{'4.9'}</strong>
+              <strong>{props.finalRating}</strong>
               <span>
                 <img
                   className="w-[16px] h-[16px]"

diff --git a/fc-community-extension/src/pages/popup.js b/fc-community-extension/src/pages/popup.js
@@ -6,7 +6,7 @@ import FCNote from './components/FCNote';
 import FCEmptyState from './components/FCEmptyState';
 import { getNotes } from '../utils/backend';
 import { ethers } from 'ethers';
-import { cutText, elipseText } from '../utils/constants';
+import { elipseText } from '../utils/constants';
 
 import './style.css';
 
@@ -19,9 +19,9 @@ const FCNetworks = () => (
       src="/logos/warpcast.png"
     />
     <img
-      title="Lens protocol"
+      title="Youtube"
       className="w-[80px] h-[80px]"
-      src="/logos/lens.png"
+      src="/logos/youtube.png"
     />
     <div className="-mt-2 col-span-2 col-start-2 text-fcAccent text-center text-sm">
       {'Coming soon!'}
@@ -44,18 +44,22 @@ function FCProfile(props) {
       <div className="space-y-4 min-h-full flex flex-col">
         <div className="flex-grow space-y-4">
           <div className="flex items-center w-5/6 mx-auto bg-neutral-950/30 py-2 px-4 rounded gap-4 shadow-md border border-neutral-950/40">
-            <div className="rounded-full w-[40px] h-[40px] bg-neutral-400/30 shadow"></div>
+            <img
+              src="/logos/eth.png"
+              alt="Profile Picture"
+              className="rounded-full w-[40px] h-[40px] object-cover shadow"
+            />
             <div className="flex-grow">
               <div className="font-semibold text-xl">Account</div>
               <div className="opacity-70">
                 {props.loggedIn ? elipseText(props.address, 20) : '0x?'}
               </div>
             </div>
           </div>
-          <div className="flex items-center justify-between bg-neutral-400/10 rounded-2xl px-10 py-6 shadow">
+          <div className="flex items-center justify-between rounded-2xl px-10 py-6">
             <StatCard name="Notes" value={props.numberNotes} />
             <StatCard name="Ratings" value={props.numberRatings} />
-            <StatCard name="Earnings" value={props.earnings} />
+            <StatCard name="Earnings" value={`${props.earnings.slice(0, 7)}`} />
           </div>
           {props.loggedIn && <FCNetworks />}
         </div>
@@ -94,6 +98,7 @@ function FCNotes(props) {
                       postUrl={note.postUrl}
                       creator={note.creatorAddress}
                       content={note.content}
+                      finalRating={note.finalRating}
                     />
                   )}
                 </For>
@@ -178,14 +183,14 @@ function FCPopup({ provider }) {
       return {
         notes: `${stats[0]}`,
         ratings: `${stats[1]}`,
-        earnings: `${ethers.formatEther(earnings)} ETH`,
+        earnings: `${ethers.formatEther(earnings)} ⧫`,
       };
     } else {
       console.log(`Default data for user stats`);
       return {
         notes: '?',
         ratings: '?',
-        earnings: '? ETH',
+        earnings: '? ⧫',
       };
     }
   };
@@ -195,7 +200,7 @@ function FCPopup({ provider }) {
   const numberRatings = () =>
     userStats.loading || !userStats() ? '?' : userStats().ratings;
   const earnings = () =>
-    userStats.loading || !userStats() ? '? ETH' : userStats().earnings;
+    userStats.loading || !userStats() ? '?' : userStats().earnings;
   provider.getAddress().then(setAddress);
 
   return (