feat: add dates to resources in RH (#375)

* feat: add dates to resources in RH * fix: update date format to ISO 8601 * feat: display date in RH * Sort resource hub by date * fix: Minor fixes * fix: update the font for date --------- Co-authored-by: Tanay Pant <tanaypantprotonmail.com> Co-authored-by: louis-md <[email protected]>
safe-global · Feb 23, 2024 · f18a049 · f18a049
1 parent ccb2f28
commit f18a049
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 27 deletions.
diff --git a/components/ResourceHub/Card.tsx b/components/ResourceHub/Card.tsx
@@ -1,12 +1,25 @@
 import { Typography, Chip, Box } from '@mui/material'
 
 import css from './styles.module.css'
-// import { ECOSYSTEM_DATA_URL } from '@/config/constants'
 import { type KnowledgeResource } from './Resources'
 import YouTubeEmbed from '../YouTube'
-// import clsx from 'clsx'
 
 export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December'
+  ]
+
   const CardContent = (
     <div style={{ width: '100%' }}>
       {resource.type === 'Video' && (
@@ -21,14 +34,27 @@ export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
         {resource.name}
       </Typography>
 
+      <Typography
+        variant='body2'
+        color='text.secondary'
+        className={css.description}
+        mb={0.5}
+      >
+        {months[new Date(resource.date).getMonth()] +
+          ', ' +
+          new Date(resource.date).getFullYear()}
+      </Typography>
+
       {resource.type === 'Blog Post' && (
-        <Typography
-          variant='body2'
-          color='text.secondary'
-          className={css.description}
-        >
-          {resource.abstract}
-        </Typography>
+        <>
+          <Typography
+            variant='body2'
+            color='text.secondary'
+            className={css.description}
+          >
+            {resource.abstract}
+          </Typography>
+        </>
       )}
 
       <div className={css.categories}>
@@ -72,7 +98,12 @@ export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
       }}
       className={css.card}
     >
-      <a href={resource.url} target='_blank' rel='noreferrer' style={{ width: '100%' }}>
+      <a
+        href={resource.url}
+        target='_blank'
+        rel='noreferrer'
+        style={{ width: '100%' }}
+      >
         {CardContent}
       </a>
     </Box>

diff --git a/components/ResourceHub/Resources.tsx b/components/ResourceHub/Resources.tsx
@@ -46,6 +46,7 @@ export interface KnowledgeResource {
   url: string
   name: string
   type: string
+  date: string
   origin: string
   abstract?: string
   tags: string[]
@@ -221,9 +222,7 @@ export const Resources = (): ReactElement => {
     <>
       <NextLink href={uploadResourceUrl} target='_blank' rel='noreferrer'>
         <Button
-          endIcon={
-            <AddIcon sx={{ mr: [1.5, 1] }} />
-          }
+          endIcon={<AddIcon sx={{ mr: [1.5, 1] }} />}
           sx={{
             alignItems: 'space-between',
             border: ['none', 'solid 1px rgba(161, 163, 167, 1)'],

diff --git a/components/ResourceHub/community-resources.json b/components/ResourceHub/community-resources.json
@@ -3,6 +3,7 @@
     "name": "How To Deploy a Smart Contract From a Web3 Multi-Sig Wallet",
     "url": "https://www.youtube.com/watch?v=zn6omKzm3BI",
     "type": "Video",
+    "date": "2022-11-30",
     "tags": [
       "Introduction",
       "Safe Smart Account"
@@ -12,6 +13,7 @@
     "name": "Safe transaction service installation guide",
     "url": "https://www.youtube.com/watch?v=FUytj_xStDI",
     "type": "Video",
+    "date": "2023-04-16",
     "tags": [
       "Introduction",
       "Safe Transaction Service"
@@ -21,6 +23,7 @@
     "name": "How do you add a custom network to the Safe UI?",
     "url": "https://www.youtube.com/watch?v=E3v6p87bsYg",
     "type": "Video",
+    "date": "2022-11-21",
     "tags": [
       "Introduction",
       "Safe Wallet"
@@ -30,42 +33,47 @@
     "name": "Safe Wallet Tutorial | Multisig Wallet for DeFi",
     "url": "https://www.youtube.com/watch?v=GHyxe32Z814",
     "type": "Video",
+    "date": "2022-05-02",
     "tags": [
       "Tutorial",
       "Safe Wallet"
     ]
   },
   {
-    "name": "Safe 🛠 Build a Group Wallet to Buy things with Frens using Safe {Core} Account Abstraction SDK",
+    "name": "Build a Group Wallet to Buy things with Frens using Safe {Core} Account Abstraction SDK",
     "url": "https://www.youtube.com/watch?v=czGf5YgWs7M",
     "type": "Video",
+    "date": "2023-05-05",
     "tags": [
       "Tutorial",
       "Safe Core SDK"
     ]
   },
   {
-    "name": "How to Create a MultiSig Wallet Using Gnosis SAFE",
+    "name": "How to Create a MultiSig Wallet Using Safe",
     "url": "https://www.youtube.com/watch?v=JoFYldw6hVE",
     "type": "Video",
+    "date": "2022-11-05",
     "tags": [
       "Tutorial",
       "Safe Wallet"
     ]
   },
   {
-    "name": "Step-by-Step Guide to SAFE: The Ultimate Multisig Wallet for DeFi",
+    "name": "Step-by-Step Guide to Safe: The Ultimate Multisig Wallet for DeFi",
     "url": "https://www.youtube.com/watch?v=3edvkNc7Es0",
     "type": "Video",
+    "date": "2023-05-31",
     "tags": [
       "Tutorial",
       "Safe Wallet"
     ]
   },
   {
-    "name": "SAFE Smart Contract Multi-Sig Storage 🔒 (Better than Hardware Wallet!⭐️) Step-by-Step Setup Guide ✅",
+    "name": "Safe Smart Contract Multi-Sig Storage. Step-by-Step Setup Guide",
     "url": "https://www.youtube.com/watch?v=EPa9I3LDplA",
     "type": "Video",
+    "date": "2023-05-20",
     "tags": [
       "Tutorial",
       "Safe Wallet"
@@ -75,6 +83,7 @@
     "name": "Safe MultiSig Contract Deep Dive",
     "url": "https://www.youtube.com/watch?v=_2ZJ5HBEfUk",
     "type": "Video",
+    "date": "2022-02-25",
     "tags": [
       "Deep Dive",
       "Safe Smart Account"
@@ -84,15 +93,17 @@
     "name": "Ethereum: differences between createTransaction and createTransactionBatch (@safe-global/protocol...",
     "url": "https://www.youtube.com/watch?v=fbZBVpBgq_4",
     "type": "Video",
+    "date": "2023-11-10",
     "tags": [
       "Deep Dive",
       "Safe Smart Account"
     ]
   },
   {
-    "name": "Ethereum: Can a SAFE be deployed using a paymaster / gasless transaction?",
+    "name": "Ethereum: Can a Safe be deployed using a paymaster / gasless transaction?",
     "url": "https://www.youtube.com/watch?v=VL2EkErsWaM",
     "type": "Video",
+    "date": "2023-10-17",
     "tags": [
       "Tutorial",
       "Safe Smart Account",
@@ -103,6 +114,7 @@
     "name": "Ethereum: How to deploy a Safe on Hardhat",
     "url": "https://www.youtube.com/watch?v=GFkNdPAzEwI",
     "type": "Video",
+    "date": "2023-11-13",
     "tags": [
       "Tutorial",
       "Safe Smart Account",
@@ -113,6 +125,7 @@
     "name": "ERC-4337 Account Abstraction",
     "url": "https://www.youtube.com/watch?v=v_V4Wqcn7vE",
     "type": "Video",
+    "date": "2024-01-22",
     "tags": [
       "Tutorial",
       "Safe Smart Account",
@@ -123,6 +136,7 @@
     "name": "How to create and use a Safe account with permissionless.js",
     "url": "https://docs.pimlico.io/permissionless/how-to/accounts/use-safe-account",
     "type": "Blog Post",
+    "date": "2024-02-12",
     "abstract": "This guide will walk you through how to create and use a Safe account with permissionless.js.",
     "tags": [
       "Tutorial",
@@ -134,6 +148,7 @@
     "name": "Migrate an EOA to a Safe Smart Account using Aarc",
     "url": "https://docs.aarc.xyz/developer-docs/tutorials/safe-smart-wallet",
     "type": "Blog Post",
+    "date": "2024-02-06",
     "abstract": "A tutorial on integrating Safe Smart Account for an EOA with Aarc SDK.",
     "tags": [
       "Tutorial",
@@ -144,6 +159,7 @@
     "name": "Safe Study (Japanese)",
     "url": "https://zenn.dev/kozayupapa/articles/877ca3c93fc4a9",
     "type": "Blog Post",
+    "date": "2023-05-09",
     "abstract": "ERC-4337(AccountAbstraction) 等のライブラリを提供しているSafeについて理解を深めるため、下記のドキュメントを要約していきたいとおもいます。",
     "tags": [
       "Tutorial",
@@ -154,6 +170,7 @@
     "name": "How to Multi-Distribute ERC-20 tokens via Safe Core SDK",
     "url": "https://mirror.xyz/0xa1AC2cC82249A44892802a99CA84c4ed1072B29C/lL8AYV_b4VzTbojuZEprrxD7-RTTap2IMIS8qIObfl8",
     "type": "Blog Post",
+    "date": "2021-11-15",
     "abstract": "As part of the Atem.green project I'm helping to build, we want to incentivize early contributors by handing out (pre-launch) ERC-20 tokens. We use Coordinape to determine the impact every contributor has in a given month. From that we can calculate how many (pre-launch) token each contributor earned. Now the question is: How do we distribute these tokens?",
     "tags": [
       "Tutorial",
@@ -164,6 +181,7 @@
     "name": "Build a treasury wallet with multisignature Safe",
     "url": "https://blog.logrocket.com/build-treasury-wallet-multisignature-gnosis-safe/",
     "type": "Blog Post",
+    "date": "2022-03-15",
     "abstract": "Imagine you and your friends are building an NFT marketplace. You are the CEO and your friend works as a Solidity engineer who writes the smart contract. The NFT marketplace becomes popular, and your revenue builds from the market fee of every NFT sale transaction. You store your profit inside a smart contract, and boast to the media about your company that has enough money to buy a private island. Then, the Solidity engineer disappears and withdraws all the funds from the treasury. You watch in horror.",
     "tags": [
       "Tutorial",
@@ -174,6 +192,7 @@
     "name": "How to Deploy Safe Contracts",
     "url": "https://www.zlog.in/post/deploy-safe-contracts/",
     "type": "Blog Post",
+    "date": "2023-10-09",
     "abstract": "A tutorial that explains how to deploy Safe contracts on a blockchain.",
     "tags": [
       "Tutorial",