const accountId = props.accountId ?? context.accountId; if (!accountId) { return "Please connect your NEAR account :)"; } const allAccounts = Social.keys(`*/graph/follow/*`, "final", { return_type: "BlockHeight", values_only: true, }); if (allAccounts === null) { return ""; } for (const account of Object.keys(allAccounts)) { const followers = allAccounts[account]?.graph?.follow; const mutualFollowers = []; for (const account of Object.keys(allAccounts)) { const followers = allAccounts[account]?.graph?.follow; if (followers) { for (const follower of Object.keys(followers)) { if (allAccounts[follower]?.graph?.follow?.[account]) { if (!mutualFollowers[account]) { mutualFollowers[account] = []; } mutualFollowers[account].push(follower); } } } } const Wrapper = styled.div` max-width: 100%; @media (max-width: 576px) { .content { flex-direction: column; } } `; const FollowButtonWrapper = styled.div` width: 100%; padding: 2px; display: flex; justify-content: space-between; div, button { flex-grow: 1; padding: 8px; margin: 4px; } @media (max-width: 1200px) { width: auto; div, button { width: auto; } } `; return ( <Wrapper> <div className="d-flex border-bottom justify-content-between"> <Widget src="mob.near/widget/Profile" props={{ accountId: "build.sputnik-dao.near" }} /> </div> {mutualFollowers.map((accountId, i) => ( <div key={i} className="d-flex border-bottom justify-content-between"> <div className="d-flex align-items-center"> <div className="p-3"> <h5>{i + 1}</h5> </div> <div className="p-2"> <Widget src="mob.near/widget/Profile" props={{ accountId }} /> </div> </div> <div className="p-1 m-3"> <Widget src="mob.near/widget/FollowButton" props={{ accountId }} /> </div> </div> ))}; </Wrapper> );