chore(git): merge pull request #121 from wot into staging

Reviewed-on: #121
Reviewed-by: enes <enes@noreply.git.nostrdev.com>

.env.example

@@ -7,6 +7,9 @@ VITE_ADMIN_NPUBS= <A comma separated list of npubs>
 # A dedicated npub used for reporting mods, blogs, profile and etc.
 VITE_REPORTING_NPUB= <npub1...>
 
+# A dedicated npub used for site WOT.
+VITE_SITE_WOT_NPUB= <npub1...>
+
 # if there's no featured image, or if the image breaks somewhere down the line, then it should default to this image
 VITE_FALLBACK_MOD_IMAGE=https://image.nostr.build/1fa7afd3489302c2da8957993ac0fd6c4308eedd4b1b95b24ecfabe3651b2183.png
 

.gitea/workflows/release-production.yaml

@@ -25,6 +25,7 @@ jobs:
           echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
           echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
           echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .env
+          echo "VITE_SITE_WOT_NPUB"=${{ vars.VITE_SITE_WOT_NPUB }}" >> .env
           echo "VITE_FALLBACK_MOD_IMAGE=${{ vars.VITE_FALLBACK_MOD_IMAGE }}" >> .env
           echo "VITE_FALLBACK_GAME_IMAGE=${{ vars.VITE_FALLBACK_GAME_IMAGE }}" >> .env
           echo "VITE_BLOG_NPUBS=${{ vars.VITE_BLOG_NPUBS }}" >> .env

.gitea/workflows/release-staging.yaml

@@ -25,6 +25,7 @@ jobs:
           echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
           echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
           echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .env
+          echo "VITE_SITE_WOT_NPUB"=${{ vars.VITE_SITE_WOT_NPUB }}" >> .env
           echo "VITE_FALLBACK_MOD_IMAGE=${{ vars.VITE_FALLBACK_MOD_IMAGE }}" >> .env
           echo "VITE_FALLBACK_GAME_IMAGE=${{ vars.VITE_FALLBACK_GAME_IMAGE }}" >> .env
           echo "VITE_BLOG_NPUBS=${{ vars.VITE_BLOG_NPUBS }}" >> .env

.github/workflows/release-pages-production.yaml

@@ -32,6 +32,7 @@ jobs:
         run: |
           echo "VITE_APP_RELAY=${{ vars.VITE_APP_RELAY }}" >> .env
           echo "VITE_ADMIN_NPUBS=${{ vars.VITE_ADMIN_NPUBS }}" >> .env
+          echo "VITE_SITE_WOT_NPUB"=${{ vars.VITE_SITE_WOT_NPUB }}" >> .env
           echo "VITE_FALLBACK_GAME_IMAGE=${{ vars.VITE_FALLBACK_GAME_IMAGE }}" >> .env
           echo "VITE_FALLBACK_MOD_IMAGE=${{ vars.VITE_FALLBACK_MOD_IMAGE }}" >> .env
           echo "VITE_REPORTING_NPUB=${{ vars.VITE_REPORTING_NPUB }}" >> .env

src/components/ModsFilter.tsx

@@ -1,6 +1,12 @@
 import { useAppSelector, useLocalStorage } from 'hooks'
 import React from 'react'
-import { FilterOptions, ModeratedFilter, NSFWFilter, SortBy } from 'types'
+import {
+  FilterOptions,
+  ModeratedFilter,
+  NSFWFilter,
+  SortBy,
+  WOTFilterOptions
+} from 'types'
 import { DEFAULT_FILTER_OPTIONS } from 'utils'
 
 type Props = {
@@ -19,6 +25,7 @@ export const ModFilter = React.memo(
     return (
       <div className='IBMSecMain'>
         <div className='FiltersMain'>
+          {/* sort filter options */}
           <div className='FiltersMainElement'>
             <div className='dropdown dropdownMain'>
               <button
@@ -48,6 +55,8 @@ export const ModFilter = React.memo(
               </div>
             </div>
           </div>
+
+          {/* moderation filter options */}
           <div className='FiltersMainElement'>
             <div className='dropdown dropdownMain'>
               <button
@@ -91,6 +100,63 @@ export const ModFilter = React.memo(
               </div>
             </div>
           </div>
+
+          {/* wot filter options */}
+          <div className='FiltersMainElement'>
+            <div className='dropdown dropdownMain'>
+              <button
+                className='btn dropdown-toggle btnMain btnMainDropdown'
+                aria-expanded='false'
+                data-bs-toggle='dropdown'
+                type='button'
+              >
+                {filterOptions.wot}
+              </button>
+              <div className='dropdown-menu dropdownMainMenu'>
+                {Object.values(WOTFilterOptions).map((item, index) => {
+                  // when user is not logged in
+                  if (
+                    (item === WOTFilterOptions.Site_And_Mine ||
+                      item === WOTFilterOptions.Mine_Only) &&
+                    !userState.auth
+                  ) {
+                    return null
+                  }
+
+                  // when logged in user not admin
+                  if (item === WOTFilterOptions.None) {
+                    const isAdmin =
+                      userState.user?.npub ===
+                      import.meta.env.VITE_REPORTING_NPUB
+
+                    const isOwnProfile =
+                      author &&
+                      userState.auth &&
+                      userState.user?.pubkey === author
+
+                    if (!(isAdmin || isOwnProfile)) return null
+                  }
+
+                  return (
+                    <div
+                      key={`wotFilterOption-${index}`}
+                      className='dropdown-item dropdownMainMenuItem'
+                      onClick={() =>
+                        setFilterOptions((prev) => ({
+                          ...prev,
+                          wot: item
+                        }))
+                      }
+                    >
+                      {item}
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* nsfw filter options */}
           <div className='FiltersMainElement'>
             <div className='dropdown dropdownMain'>
               <button
@@ -119,6 +185,8 @@ export const ModFilter = React.memo(
               </div>
             </div>
           </div>
+
+          {/* source filter options */}
           <div className='FiltersMainElement'>
             <div className='dropdown dropdownMain'>
               <button

src/contexts/NDKContext.tsx

@@ -369,7 +369,7 @@ export const NDKContextProvider = ({ children }: { children: ReactNode }) => {
     if (!event.sig) throw new Error('Before publishing first sign the event!')
 
     return event
-      .publish(undefined, 30000)
+      .publish(undefined, 10000)
       .then((res) => {
         const relaysPublishedOn = Array.from(res)
         return relaysPublishedOn.map((relay) => relay.url)

src/hooks/useFilteredMods.ts

@@ -6,9 +6,11 @@ import {
   ModeratedFilter,
   MuteLists,
   NSFWFilter,
-  SortBy
+  SortBy,
+  WOTFilterOptions
 } from 'types'
 import { npubToHex } from 'utils'
+import { useAppSelector } from './redux'
 
 export const useFilteredMods = (
   mods: ModDetails[],
@@ -21,6 +23,8 @@ export const useFilteredMods = (
   },
   author?: string | undefined
 ) => {
+  const { siteWot, userWot } = useAppSelector((state) => state.wot)
+
   return useMemo(() => {
     const nsfwFilter = (mods: ModDetails[]) => {
       // Add nsfw tag to mods included in nsfwList
@@ -46,8 +50,27 @@ export const useFilteredMods = (
       }
     }
 
+    const wotFilter = (mods: ModDetails[]) => {
+      // Determine the filtering logic based on the WOT filter option
+      switch (filterOptions.wot) {
+        case WOTFilterOptions.None:
+          return mods
+        case WOTFilterOptions.Site_Only:
+          return mods.filter((mod) => siteWot.includes(mod.author))
+        case WOTFilterOptions.Mine_Only:
+          return mods.filter((mod) => userWot.includes(mod.author))
+        case WOTFilterOptions.Site_And_Mine:
+          return mods.filter(
+            (mod) =>
+              siteWot.includes(mod.author) || userWot.includes(mod.author)
+          )
+      }
+    }
+
     let filtered = nsfwFilter(mods)
 
+    filtered = wotFilter(filtered)
+
     const isAdmin = userState.user?.npub === import.meta.env.VITE_REPORTING_NPUB
     const isOwner =
       userState.user?.npub &&
@@ -84,10 +107,13 @@ export const useFilteredMods = (
     userState.user?.npub,
     filterOptions.sort,
     filterOptions.moderated,
+    filterOptions.wot,
     filterOptions.nsfw,
     author,
     mods,
     muteLists,
-    nsfwList
+    nsfwList,
+    siteWot,
+    userWot
   ])
 }

src/layout/header.tsx

@@ -21,6 +21,7 @@ import '../styles/popup.css'
 import { npubToHex } from '../utils'
 import logo from '../assets/img/DEG Mods Logo With Text.svg'
 import placeholder from '../assets/img/DEG Mods Default PP.png'
+import { setUserWot } from 'store/reducers/wot'
 
 export const Header = () => {
   const dispatch = useAppDispatch()
@@ -48,6 +49,7 @@ export const Header = () => {
         if (opts.type === 'logout') {
           dispatch(setAuth(null))
           dispatch(setUser(null))
+          dispatch(setUserWot([]))
         } else {
           dispatch(
             setAuth({

src/layout/index.tsx

@@ -3,13 +3,123 @@ import { Footer } from './footer'
 import { Header } from './header'
 import { SocialNav } from './socialNav'
 import { Head } from './head'
+import { useAppDispatch, useAppSelector, useNDKContext } from 'hooks'
+import { useEffect } from 'react'
+import { npubToHex } from 'utils'
+import { calculateWot } from 'utils/wot'
+import {
+  setSiteWot,
+  setSiteWotLevel,
+  setSiteWotStatus,
+  setUserWot,
+  setUserWotLevel,
+  WOTStatus
+} from 'store/reducers/wot'
+import { toast } from 'react-toastify'
+import { LoadingSpinner } from 'components/LoadingSpinner'
+import { NDKKind } from '@nostr-dev-kit/ndk'
+import { UserRelaysType } from 'types'
 
 export const Layout = () => {
+  const dispatch = useAppDispatch()
+  const { ndk, fetchEventFromUserRelays } = useNDKContext()
+  const userState = useAppSelector((state) => state.user)
+  const { siteWotStatus, siteWotLevel, userWotLevel } = useAppSelector(
+    (state) => state.wot
+  )
+
+  // calculate site's wot
+  useEffect(() => {
+    if (ndk) {
+      const SITE_WOT_NPUB = import.meta.env.VITE_SITE_WOT_NPUB
+      const hexPubkey = npubToHex(SITE_WOT_NPUB)
+      if (hexPubkey) {
+        dispatch(setSiteWotStatus(WOTStatus.LOADING))
+        calculateWot(hexPubkey, ndk, siteWotLevel)
+          .then((wot) => {
+            dispatch(setSiteWot(Array.from(wot)))
+            dispatch(setSiteWotStatus(WOTStatus.LOADED))
+          })
+          .catch((err) => {
+            console.trace('An error occurred in calculating site WOT', err)
+            toast.error('An error occurred in calculating site web-of-trust!')
+            dispatch(setSiteWotStatus(WOTStatus.FAILED))
+          })
+      }
+    }
+  }, [ndk, siteWotLevel, dispatch])
+
+  // calculate user's wot
+  useEffect(() => {
+    if (ndk && userState.user?.pubkey) {
+      const hexPubkey = npubToHex(userState.user.pubkey as string)
+      if (hexPubkey)
+        calculateWot(hexPubkey, ndk, userWotLevel)
+          .then((wot) => {
+            dispatch(setUserWot(Array.from(wot)))
+          })
+          .catch((err) => {
+            console.trace('An error occurred in calculating user WOT', err)
+            toast.error('An error occurred in calculating user web-of-trust!')
+          })
+    }
+  }, [ndk, userState.user, userWotLevel, dispatch])
+
+  // get site's wot level
+  useEffect(() => {
+    const SITE_WOT_NPUB = import.meta.env.VITE_SITE_WOT_NPUB
+    const hexPubkey = npubToHex(SITE_WOT_NPUB)
+    if (hexPubkey) {
+      fetchEventFromUserRelays(
+        {
+          kinds: [NDKKind.AppSpecificData],
+          '#d': ['degmods']
+        },
+        hexPubkey,
+        UserRelaysType.Both
+      ).then((event) => {
+        if (event) {
+          const wot = event.tagValue('wot')
+          if (wot) dispatch(setSiteWotLevel(parseInt(wot)))
+        }
+      })
+    }
+  }, [dispatch, fetchEventFromUserRelays])
+
+  // get user's wot level
+  useEffect(() => {
+    if (userState.user?.pubkey) {
+      const hexPubkey = npubToHex(userState.user.pubkey as string)
+
+      if (hexPubkey) {
+        fetchEventFromUserRelays(
+          {
+            kinds: [NDKKind.AppSpecificData],
+            '#d': ['degmods']
+          },
+          hexPubkey,
+          UserRelaysType.Both
+        ).then((event) => {
+          if (event) {
+            const wot = event.tagValue('wot')
+            if (wot) dispatch(setUserWotLevel(parseInt(wot)))
+          }
+        })
+      }
+    }
+  }, [userState.user, dispatch, fetchEventFromUserRelays])
+
   return (
     <>
       <Head />
       <Header />
-      <Outlet />
+      {siteWotStatus === WOTStatus.LOADED && <Outlet />}
+      {siteWotStatus === WOTStatus.LOADING && (
+        <LoadingSpinner desc="Loading site's web-of-trust" />
+      )}
+      {siteWotStatus === WOTStatus.FAILED && (
+        <h3>Failed to load site's web-of-trust</h3>
+      )}
       <Footer />
       <SocialNav />
       <ScrollRestoration />

src/pages/home.tsx

@@ -8,6 +8,7 @@ import { GameCard } from '../components/GameCard'
 import { ModCard } from '../components/ModCard'
 import { LANDING_PAGE_DATA, PROFILE_BLOG_FILTER_LIMIT } from '../constants'
 import {
+  useAppSelector,
   useDidMount,
   useGames,
   useLocalStorage,
@@ -247,6 +248,7 @@ const DisplayMod = ({ naddr }: DisplayModProps) => {
 const DisplayLatestMods = () => {
   const navigate = useNavigate()
   const { fetchMods } = useNDKContext()
+  const { siteWot, userWot } = useAppSelector((state) => state.wot)
   const [isFetchingLatestMods, setIsFetchingLatestMods] = useState(true)
   const [latestMods, setLatestMods] = useState<ModDetails[]>([])
 
@@ -258,7 +260,10 @@ const DisplayLatestMods = () => {
       .then((mods) => {
         // Sort by the latest (published_at descending)
         mods.sort((a, b) => b.published_at - a.published_at)
-        setLatestMods(mods)
+        const wotFilteredMods = mods.filter(
+          (mod) => siteWot.includes(mod.author) || userWot.includes(mod.author)
+        )
+        setLatestMods(wotFilteredMods)
       })
       .finally(() => {
         setIsFetchingLatestMods(false)

src/pages/settings/preference.tsx

@@ -1,124 +1,217 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk'
+import { LoadingSpinner } from 'components/LoadingSpinner'
+import { useAppDispatch, useAppSelector, useNDKContext } from 'hooks'
+import { kinds, UnsignedEvent, Event } from 'nostr-tools'
+import { useEffect, useState } from 'react'
+import { toast } from 'react-toastify'
+import { setUserWotLevel } from 'store/reducers/wot'
+import { UserRelaysType } from 'types'
+import { log, LogType, now } from 'utils'
+
 // todo: use components from Input.tsx
 export const PreferencesSetting = () => {
+  const dispatch = useAppDispatch()
+
+  const [wotLevel, setWotLevel] = useState(3)
+  const [isSaving, setIsSaving] = useState(false)
+  const { ndk, fetchEventFromUserRelays, publish } = useNDKContext()
+  const user = useAppSelector((state) => state.user.user)
+
+  useEffect(() => {
+    if (user?.pubkey) {
+      fetchEventFromUserRelays(
+        {
+          kinds: [NDKKind.AppSpecificData],
+          '#d': ['degmods']
+        },
+        user.pubkey as string,
+        UserRelaysType.Both
+      ).then((event) => {
+        if (event) {
+          console.log('event :>> ', event)
+          const wot = event.tagValue('wot')
+          if (wot) setWotLevel(parseInt(wot))
+        }
+      })
+    }
+  }, [user, fetchEventFromUserRelays])
+
+  const handleSave = async () => {
+    setIsSaving(true)
+
+    let hexPubkey: string
+
+    if (user?.pubkey) {
+      hexPubkey = user.pubkey as string
+    } else {
+      hexPubkey = (await window.nostr?.getPublicKey()) as string
+    }
+
+    if (!hexPubkey) {
+      toast.error('Could not get pubkey')
+      setIsSaving(false)
+      return
+    }
+
+    const unsignedEvent: UnsignedEvent = {
+      kind: kinds.Application,
+      created_at: now(),
+      pubkey: hexPubkey,
+      content: '',
+      tags: [
+        ['d', 'degmods'],
+        ['wot', wotLevel.toString()]
+      ]
+    }
+
+    const signedEvent = await window.nostr
+      ?.signEvent(unsignedEvent)
+      .then((event) => event as Event)
+      .catch((err) => {
+        toast.error('Failed to sign the event!')
+        log(true, LogType.Error, 'Failed to sign the event!', err)
+        return null
+      })
+
+    if (!signedEvent) {
+      setIsSaving(false)
+      return
+    }
+
+    const ndkEvent = new NDKEvent(ndk, signedEvent)
+    await publish(ndkEvent)
+    dispatch(setUserWotLevel(wotLevel))
+
+    setIsSaving(false)
+  }
+
   return (
-    <div className='IBMSMSplitMainFullSideFWMid'>
+    <>
-      <div className='IBMSMSplitMainFullSideSec'>
+      {isSaving && <LoadingSpinner desc='Saving preferences to relays' />}
-        <div className='IBMSMSMBS_Write'>
+      <div className='IBMSMSplitMainFullSideFWMid'>
-          <div className='inputLabelWrapperMain'>
+        <div className='IBMSMSplitMainFullSideSec'>
-            <div className='labelWrapperMain'>
+          <div className='IBMSMSMBS_Write'>
-              <p className='labelMain'>Notifications</p>
+            <div className='inputLabelWrapperMain'>
+              <div className='labelWrapperMain'>
+                <p className='labelMain'>Notifications</p>
+              </div>
+              <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+                <label className='form-label labelMain'>
+                  When someone follows you
+                </label>
+                <input
+                  type='checkbox'
+                  className='CheckboxMain'
+                  name='notificationsSettings'
+                  checked
+                />
+              </div>
+              <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+                <label className='form-label labelMain'>
+                  When someone mentions you
+                </label>
+                <input
+                  type='checkbox'
+                  className='CheckboxMain'
+                  name='notificationsSettings'
+                  checked
+                />
+              </div>
+              <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+                <label className='form-label labelMain'>
+                  When someone sends a reaction to your post
+                </label>
+                <input
+                  type='checkbox'
+                  className='CheckboxMain'
+                  name='notificationsSettings'
+                  checked
+                />
+              </div>
+              <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+                <label className='form-label labelMain'>
+                  When someone Tips/Zaps you
+                </label>
+                <input
+                  type='checkbox'
+                  className='CheckboxMain'
+                  name='notificationsSettings'
+                  checked
+                />
+              </div>
+              <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+                <label className='form-label labelMain'>
+                  When someone re-posts your post
+                </label>
+                <input
+                  type='checkbox'
+                  className='CheckboxMain'
+                  name='notificationsSettings'
+                  checked
+                />
+              </div>
             </div>
-            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+            <div className='inputLabelWrapperMain'>
-              <label className='form-label labelMain'>
+              <div className='labelWrapperMain'>
-                When someone follows you
+                <p className='labelMain'>Not Safe For Work (NSFW)</p>
-              </label>
+              </div>
-              <input
+              <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-                type='checkbox'
+                <label className='form-label labelMain'>
-                className='CheckboxMain'
+                  Show all NSFW posts
-                name='notificationsSettings'
+                </label>
-                checked
+                <input
-              />
+                  type='checkbox'
+                  className='CheckboxMain'
+                  name='NSFWPreference'
+                />
+              </div>
             </div>
-            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+            <div className='inputLabelWrapperMain'>
-              <label className='form-label labelMain'>
+              <div className='labelWrapperMain'>
-                When someone mentions you
+                <p className='labelMain'>Web of Trust (WoT) level</p>
-              </label>
+              </div>
-              <input
+              <p className='labelDescriptionMain'>
-                type='checkbox'
+                This affects what posts you see, reactions, DMs, and
-                className='CheckboxMain'
+                notifications. Learn more:&nbsp;Link
-                name='notificationsSettings'
+              </p>
-                checked
+              <div className='inputLabelWrapperMainSliderWrapper'>
-              />
+                <input
+                  className='form-range inputRangeMain inputRangeMainZap'
+                  type='range'
+                  max='100'
+                  min='0'
+                  value={wotLevel}
+                  onChange={(e) => setWotLevel(parseInt(e.target.value))}
+                  step='1'
+                  required
+                  name='WoTLevel'
+                />
+                <p className='ZapSplitUserBoxRangeText'>{wotLevel}</p>
+              </div>
+              <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+                <label className='form-label labelMain'>
+                  Consider those who zap/tip, regardless of WoT level
+                </label>
+                <input
+                  type='checkbox'
+                  className='CheckboxMain'
+                  name='WoTZap'
+                  checked
+                />
+              </div>
             </div>
-            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
+            <div className='IBMSMSMBS_WriteAction'>
-              <label className='form-label labelMain'>
+              <button
-                When someone sends a reaction to your post
+                className='btn btnMain'
-              </label>
+                type='button'
-              <input
+                onClick={handleSave}
-                type='checkbox'
+              >
-                className='CheckboxMain'
+                Save
-                name='notificationsSettings'
+              </button>
-                checked
-              />
             </div>
-            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-              <label className='form-label labelMain'>
-                When someone Tips/Zaps you
-              </label>
-              <input
-                type='checkbox'
-                className='CheckboxMain'
-                name='notificationsSettings'
-                checked
-              />
-            </div>
-            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-              <label className='form-label labelMain'>
-                When someone re-posts your post
-              </label>
-              <input
-                type='checkbox'
-                className='CheckboxMain'
-                name='notificationsSettings'
-                checked
-              />
-            </div>
-          </div>
-          <div className='inputLabelWrapperMain'>
-            <div className='labelWrapperMain'>
-              <p className='labelMain'>Not Safe For Work (NSFW)</p>
-            </div>
-            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-              <label className='form-label labelMain'>
-                Show all NSFW posts
-              </label>
-              <input
-                type='checkbox'
-                className='CheckboxMain'
-                name='NSFWPreference'
-              />
-            </div>
-          </div>
-          <div className='inputLabelWrapperMain'>
-            <div className='labelWrapperMain'>
-              <p className='labelMain'>Web of Trust (WoT) level</p>
-            </div>
-            <p className='labelDescriptionMain'>
-              This affects what posts you see, reactions, DMs, and
-              notifications. Learn more:&nbsp;Link
-            </p>
-            <div className='inputLabelWrapperMainSliderWrapper'>
-              <input
-                className='form-range inputRangeMain inputRangeMainZap'
-                type='range'
-                max='100'
-                min='0'
-                value='10'
-                step='1'
-                required
-                name='WoTLevel'
-              />
-              <p className='ZapSplitUserBoxRangeText'>10</p>
-            </div>
-            <div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
-              <label className='form-label labelMain'>
-                Consider those who zap/tip, regardless of WoT level
-              </label>
-              <input
-                type='checkbox'
-                className='CheckboxMain'
-                name='WoTZap'
-                checked
-              />
-            </div>
-          </div>
-          <div className='IBMSMSMBS_WriteAction'>
-            <button className='btn btnMain' type='button'>
-              Save
-            </button>
           </div>
         </div>
       </div>
-    </div>
+    </>
   )
 }

src/store/index.ts

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit'
 import userReducer from './reducers/user'
+import wotReducer from './reducers/wot'
 
 export const store = configureStore({
   reducer: {
-    user: userReducer
+    user: userReducer,
+    wot: wotReducer
   }
 })
 

src/store/reducers/wot.ts

@@ -0,0 +1,84 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+export enum WOTStatus {
+  IDLE, // Not started
+  LOADING, // Currently loading
+  LOADED, // Successfully loaded
+  FAILED // Failed to load
+}
+
+export interface IWOT {
+  siteWot: string[]
+  siteWotStatus: WOTStatus
+  siteWotLevel: number
+  userWot: string[]
+  userWotStatus: WOTStatus
+  userWotLevel: number
+}
+
+const initialState: IWOT = {
+  siteWot: [],
+  siteWotStatus: WOTStatus.IDLE,
+  siteWotLevel: 3,
+  userWot: [],
+  userWotStatus: WOTStatus.IDLE,
+  userWotLevel: 3
+}
+
+export const wotSlice = createSlice({
+  name: 'wot',
+  initialState,
+  reducers: {
+    setSiteWot(state, action: PayloadAction<string[]>) {
+      state = {
+        ...state,
+        siteWot: action.payload,
+        siteWotStatus: WOTStatus.LOADED
+      }
+      return state
+    },
+    setUserWot(state, action: PayloadAction<string[]>) {
+      state = {
+        ...state,
+        userWot: action.payload,
+        userWotStatus: WOTStatus.LOADED
+      }
+      return state
+    },
+    setSiteWotStatus(state, action: PayloadAction<WOTStatus>) {
+      return {
+        ...state,
+        siteWotStatus: action.payload
+      }
+    },
+    setUserWotStatus(state, action: PayloadAction<WOTStatus>) {
+      return {
+        ...state,
+        userWotStatus: action.payload
+      }
+    },
+    setSiteWotLevel(state, action: PayloadAction<number>) {
+      return {
+        ...state,
+        siteWotLevel: action.payload
+      }
+    },
+    setUserWotLevel(state, action: PayloadAction<number>) {
+      return {
+        ...state,
+        userWotLevel: action.payload
+      }
+    }
+  }
+})
+
+export const {
+  setSiteWot,
+  setUserWot,
+  setSiteWotStatus,
+  setUserWotStatus,
+  setSiteWotLevel,
+  setUserWotLevel
+} = wotSlice.actions
+
+export default wotSlice.reducer

src/types/modsFilter.ts

@@ -17,9 +17,17 @@ export enum ModeratedFilter {
   Unmoderated_Fully = 'Unmoderated Fully'
 }
 
+export enum WOTFilterOptions {
+  Site_And_Mine = 'Site & Mine',
+  Site_Only = 'Site Only',
+  Mine_Only = 'Mine Only',
+  None = 'None'
+}
+
 export interface FilterOptions {
   sort: SortBy
   nsfw: NSFWFilter
   source: string
   moderated: ModeratedFilter
+  wot: WOTFilterOptions
 }

src/utils/consts.ts

@@ -1,8 +1,15 @@
-import { FilterOptions, SortBy, NSFWFilter, ModeratedFilter } from 'types'
+import {
+  FilterOptions,
+  SortBy,
+  NSFWFilter,
+  ModeratedFilter,
+  WOTFilterOptions
+} from 'types'
 
 export const DEFAULT_FILTER_OPTIONS: FilterOptions = {
   sort: SortBy.Latest,
   nsfw: NSFWFilter.Hide_NSFW,
   source: window.location.host,
-  moderated: ModeratedFilter.Moderated
+  moderated: ModeratedFilter.Moderated,
+  wot: WOTFilterOptions.Site_Only
 }

src/utils/wot.ts

@@ -0,0 +1,147 @@
+import NDK, {
+  Hexpubkey,
+  NDKFilter,
+  NDKKind,
+  NDKSubscriptionCacheUsage,
+  NDKTag
+} from '@nostr-dev-kit/ndk'
+import { nip19 } from 'nostr-tools'
+
+interface UserRelations {
+  follows: Set<Hexpubkey>
+  muted: Set<Hexpubkey>
+}
+
+type Network = Map<Hexpubkey, UserRelations>
+
+export const calculateWot = async (
+  pubkey: Hexpubkey,
+  ndk: NDK,
+  targetWOTScore: number
+) => {
+  const network: Network = new Map()
+  const WOT = new Set<Hexpubkey>()
+
+  const userRelations = await findFollowsAndMuteUsers(pubkey, ndk)
+  network.set(pubkey, userRelations)
+
+  // find the userRelations of every user in follow list
+  const follows = Array.from(userRelations.follows)
+  const promises = follows.map((user) =>
+    findFollowsAndMuteUsers(user, ndk).then((userRelations) => {
+      network.set(user, userRelations)
+    })
+  )
+  await Promise.all(promises)
+
+  // add all the following users to WOT
+  follows.forEach((f) => {
+    WOT.add(f)
+  })
+
+  // construct a list of users not being followed directly
+  const indirectFollows = new Set<Hexpubkey>()
+  follows.forEach((hexpubkey) => {
+    const relations = network.get(hexpubkey)
+    if (relations) {
+      relations.follows.forEach((f) => {
+        indirectFollows.add(f)
+      })
+    }
+  })
+
+  indirectFollows.forEach((targetHexPubkey) => {
+    // if any of the indirect followed user is in direct mute list
+    // we'll not include it in WOT
+    if (userRelations.muted.has(targetHexPubkey)) return
+
+    const wotScore = calculateWoTScore(pubkey, targetHexPubkey, network)
+    if (wotScore >= targetWOTScore) {
+      WOT.add(targetHexPubkey)
+    }
+  })
+
+  return WOT
+}
+
+export const calculateWoTScore = (
+  user: Hexpubkey,
+  targetUser: Hexpubkey,
+  network: Network
+): number => {
+  const userRelations = network.get(user)
+  if (!userRelations) return 0
+
+  let wotScore = 0
+
+  // Check each user followed
+  for (const followedUser of userRelations.follows) {
+    const followedUserRelations = network.get(followedUser)
+    if (!followedUserRelations) continue
+
+    // Positive Score: +1 if followedUser also follows targetId
+    if (followedUserRelations.follows.has(targetUser)) {
+      wotScore += 1
+    }
+
+    // Negative Score: -1 if followedUser has muted targetId
+    if (followedUserRelations.muted.has(targetUser)) {
+      wotScore -= 1
+    }
+  }
+
+  return wotScore
+}
+
+export const findFollowsAndMuteUsers = async (
+  pubkey: string,
+  ndk: NDK
+): Promise<UserRelations> => {
+  const follows = new Set<Hexpubkey>()
+  const muted = new Set<Hexpubkey>()
+
+  const filter: NDKFilter = {
+    kinds: [NDKKind.Contacts, NDKKind.MuteList],
+    authors: [pubkey]
+  }
+
+  const events = await ndk.fetchEvents(filter, {
+    groupable: false,
+    closeOnEose: true,
+    cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
+  })
+
+  events.forEach((event) => {
+    if (event.kind === NDKKind.Contacts) {
+      filterValidPTags(event.tags).forEach((f) => {
+        follows.add(f)
+      })
+    }
+  })
+
+  events.forEach((event) => {
+    if (event.kind === NDKKind.MuteList) {
+      filterValidPTags(event.tags).forEach((f) => {
+        muted.add(f)
+      })
+    }
+  })
+
+  return {
+    follows,
+    muted
+  }
+}
+
+export const filterValidPTags = (tags: NDKTag[]) =>
+  tags
+    .filter((t: NDKTag) => t[0] === 'p')
+    .map((t: NDKTag) => t[1])
+    .filter((f: Hexpubkey) => {
+      try {
+        nip19.npubEncode(f)
+        return true
+      } catch {
+        return false
+      }
+    })

src/vite-env.d.ts

@@ -4,6 +4,7 @@ interface ImportMetaEnv {
   readonly VITE_APP_RELAY: string
   readonly VITE_ADMIN_NPUBS: string
   readonly VITE_REPORTING_NPUB: string
+  readonly VITE_SITE_WOT_NPUB: string
   readonly VITE_FALLBACK_MOD_IMAGE: string
   readonly VITE_FALLBACK_GAME_IMAGE: string
   readonly VITE_BLOG_NPUBS: string