shadcn.io is not affiliated with official shadcn/ui
Social Graph Web3 Block for Svelte
Following, followers and mutual follows for an on-chain account in Tabs with live counts, a Follow toggle per person, and suggestions of people followed by at least two of the accounts you follow, with their names.
Installation
Overview
Show who you follow and who follows you, and who you may know, with this social graph panel for Svelte with Ark UI. It's the follow list of Threadfold, an on-chain social protocol, for the fictional account mara.wick. Tabs show Following, Followers and Mutual with live counts over rows of people: initials, name, short address, two shared-interest chips and a Toggle that reads Follow or Following. The people and who follows whom are a typed adjacency list of fourteen accounts, so the counts, the mutual list and the Suggested for you band work out again when you follow or unfollow. A suggestion is someone you don't follow who is followed by at least two of the people you do, ranked by how many and named, for example Followed by Ines and Tobi. Nothing is drawn as a hairball. For social apps, profiles and community directories.
FAQ
How are suggestions chosen?
Every account you don't follow is counted by how many of the accounts you follow follow it. Those with at least two are kept, the most-followed first, up to three. Following someone can bring new ones in, because their follows now count, and unfollowing someone can take some out.
Why doesn't a row disappear when I unfollow in the Following tab?
So the list never moves under your pointer or your keyboard focus. A list is rebuilt from the follows when you switch tabs, the counts in the tab labels update at once, and the status line says so. Following a suggestion removes it from the band and returns focus to its heading.
What counts as a mutual follow?
An account that follows you and that you follow back. The followers are fixed in the typed data, so Mutual grows when you follow a follower, for example from the Followers tab.
What stays local, and how do I wire it?
All of it. The accounts, addresses, interests and follow edges (PEOPLE, FOLLOWERS) are typed, and a follow only changes local state. In your app read the graph from your indexer or protocol contract, send a follow as a signed transaction or message, and rank suggestions on the server so a large graph never reaches the browser.