feature(website): recipients selection page (#563)

recipients_selection/draws/10-aurora-2023-10-31.txt

@@ -1 +1 @@
-{"time":1698779251122,"name":"","total":567,"round":3444941,"hashedInput":"753eb631c9aa540310eb7314d9b4c137bdf053c026faefe0014f189d75612092","winners":["651cb050678d54b000df571ccd78bc0fa89b2c43782414de66df104535457424","40a62f179c7440140225c6950bb364e6fffe5c7e36ca6cf276a7eedc90f87207","c45031211e6edbcc616bf3d2a73cdc31076b325ecc8c7bd940db2492eb8c1e31","5eca1cd5f4f403ac9819c378e3985199c50d2404ae7a896cd9800c1453acffd6","9d82ee01c6d50cf12e24c877646153210e90a1f3f71a14898a2e75ca8f845bb4","09b403c75ad8e1fe3efe4c3870a91ec7daf8221e2c47f076fc585948b8573be4","b16cf5bd32d3bed96dda82a23d35556f6ec436ee7ba4640c46e7248668a479ad","5b418305ba948acc1de234f82916dc247ffa4811c0ac10735d211e0c1a30e16c","2f12c10e1ab50ac952828f1e177c63565383fe2161ef2dbcbdc9d5e81db69815","6055cc0c460460f23f81ede9849cc5ca8131b991deaa8fde0e1ba6a424f48f08"],"randomness":"69db1f1d13ea50e52814746f59ab9753144942528321bbc3768e543324ffb9dc"}
+{"time":1698779251122,"totalCount":567,"round":3444941,"winners":["651cb050678d54b000df571ccd78bc0fa89b2c43782414de66df104535457424","40a62f179c7440140225c6950bb364e6fffe5c7e36ca6cf276a7eedc90f87207","c45031211e6edbcc616bf3d2a73cdc31076b325ecc8c7bd940db2492eb8c1e31","5eca1cd5f4f403ac9819c378e3985199c50d2404ae7a896cd9800c1453acffd6","9d82ee01c6d50cf12e24c877646153210e90a1f3f71a14898a2e75ca8f845bb4","09b403c75ad8e1fe3efe4c3870a91ec7daf8221e2c47f076fc585948b8573be4","b16cf5bd32d3bed96dda82a23d35556f6ec436ee7ba4640c46e7248668a479ad","5b418305ba948acc1de234f82916dc247ffa4811c0ac10735d211e0c1a30e16c","2f12c10e1ab50ac952828f1e177c63565383fe2161ef2dbcbdc9d5e81db69815","6055cc0c460460f23f81ede9849cc5ca8131b991deaa8fde0e1ba6a424f48f08"],"randomness":"69db1f1d13ea50e52814746f59ab9753144942528321bbc3768e543324ffb9dc"}

shared/locales/de/website-recipient-selection.json

@@ -0,0 +1,55 @@
+{
+	"title": "Selektion der Empfänger:innen",
+	"introduction": "Social Income, wie jedes UBI-Projekt, verfügt über begrenzte finanzielle Ressourcen. Die Auswahl, wer Unterstützung erhält und wer nicht, ist schwierig. Wir möchten, dass jeder versteht, wie wir unsere Empfänger:innen auswählen. Seit November 2023 setzen wir eine neue Methode ein, um zufällig Menschen aus armen Gemeinschaften auszuwählen, dank unserer Partnerschaft mit <a href='https://drand.love' target='_blank' class='underline'>drand</a>.",
+	"selection-process": {
+		"title": "Unser Auswahlprozess in 3 Schritten",
+		"step-1": {
+			"title": "Schritt 1: Ermittlung potenzieller Empfänger:innen",
+			"text": "Wir arbeiten mit einer Vielzahl internationaler und lokaler NGOs zusammen, die marginalisierte Gemeinschaften unterstützen und mit Armut auf lokaler Ebene vertraut sind. Nach dem Besuch und der positiven Bewertung dieser NGOs - sowie der Gebiete und Gemeinschaften, die sie unterstützen - können wir sie bitten, uns eine Liste aller potenziellen Empfänger:innen zur Verfügung zu stellen. Potenzielle Empfänger:innen sind Menschen in Armut, mit denen sie direkten Kontakt pflegen. Abhängig von den unterstützten Gemeinschaften können diese Listen 100 bis 1000 Namen enthalten."
+		},
+		"step-2": {
+			"title": "Schritt 2: Zufällige Auswahl und größtmögliche Transparenz",
+			"text": "Die Listen, mit denen wir während der Auswahl arbeiten, enthalten minimale Informationen über potenzielle Empfänger:innen. Sie werden anschließend anonymisiert (gehasht) und in unser Open-Source-Repository hochgeladen. Mithilfe einer zufällig generierten und von drand veröffentlichten Nummer wird ein Mechanismus eingerichtet, um eine vorbestimmte Anzahl von Personen aus der Liste auszuwählen. Dieser Prozess kann mathematisch zurückverfolgt und überprüft werden, ohne die Daten der Empfänger:innen zu gefährden.",
+			"card": "\uD83D\uDD0E Bald verfügbar: Jeder kann leicht überprüfen, ob er auf einer der Listen der NGOs steht oder ob er ausgewählt wurde."
+		},
+		"step-3": {
+			"title": "Schritt 3: Transparente Kommunikation",
+			"text": "Nach einer Auslosung informieren wir sowohl die NGO als auch die Gemeinschaft direkt über die Ergebnisse. Die ausgewählten Begünstigten - nach Bestätigung ihrer Teilnahme - geben dann zusätzliche Informationen an und werden für unser 3-jähriges Programm aufgenommen."
+		}
+	},
+	"faq": {
+		"title": "Häufig gestellte Fragen",
+		"questions": [
+			{
+				"question": "Warum wählen wir zufällig aus einem Pool qualifizierter Empfänger:innen aus?",
+				"answer": "Der Zweck der Anwendung dieser Zufallsauswahlmethode besteht darin, mehrere Ziele zu erreichen. Erstens hilft es, Voreingenommenheit bei der Auswahl der Empfänger:innen zu verhindern und sicherzustellen, dass Angehörige oder Bekannte von Personen, die am Prozess beteiligt sind, keine bevorzugte Behandlung erhalten. Zweitens zielt es darauf ab, Spannungen zwischen Empfänger:innenn und Nicht-Empfänger:innenn sowie potenzielle Konflikte zwischen Empfänger:innenn und unserer Organisation zu vermeiden. Schließlich streben wir danach, Technologie dort einzubeziehen, wo dies sinnvoll und vorteilhaft für den Prozess ist."
+			},
+			{
+				"question": "Wer kann den Auswahlprozess beeinflussen?",
+				"answer": "Indem wir uns auf einen unvorhersehbaren Zufallswert von drand verlassen, der in der Zukunft erzeugt wird, ist es für niemanden möglich, die Ergebnisse des Auswahlprozesses zu beeinflussen. Diese inhärente Zufälligkeit kann genutzt werden, um die Integrität der Auswahl zu bestätigen. Um für Social Income zu qualifizieren, muss eine Person zunächst auf einer Liste einer NGO stehen. Obwohl dies eine vorläufige Bedingung darstellt, steht es im Einklang mit unserem grundlegenden Prinzip: sicherzustellen, dass Social Income diejenigen erreicht, die es am dringendsten benötigen."
+			},
+			{
+				"question": "Wie vermeiden wir Voreingenommenheit und Spannungen?",
+				"answer": "Um sicherzustellen, dass wir nicht unbeabsichtigt eine bestimmte ethnische Gruppe, Geschlecht oder Berufsgruppe priorisieren, arbeiten wir mit vielfältigen NGOs zusammen, die unterschiedliche Missionen haben. Im Einklang mit unserer 'keinem Schaden zufügen'-Politik streben wir danach, Spannungen zwischen Empfänger:innenn, Nicht-Empfänger:innenn, Gemeinschaften und den NGOs zu verhindern. Unsere zufällige Auswahl spielt dabei eine entscheidende Rolle. Sie stellt sicher, dass Personen, die mit Personen im Prozess verwandt oder bekannt sind, keine Bevorzugung erfahren, die zu Konflikten führen könnte."
+			},
+			{
+				"question": "Was passiert während des Auswahlprozesses?",
+				"answer": "Wir nutzen die von drand bereitgestellte Zufallszahl, die öffentlich zugänglich ist, um eine bestimmte Anzahl von Personen aus unserer Liste auszuwählen. So wird es gemacht: Wir ordnen zunächst die gehashte Liste der Empfänger:innen. Dann verwenden wir das Zufallselement von drand, um es mithilfe einer <a href='https://de.wikipedia.org/wiki/Schl%C3%BCsselableitung' target='_blank' class='underline'>Schlüsselableitung</a> in eine Position auf der Liste umzuwandeln. Für diejenigen, die an den technischen Details interessiert sind, sind die Funktion und ihre zugehörigen Prozesse in unserem <a href='https://github.com/drand/draw-action' target='_blank' class='underline'>GitHub-Repository</a> dokumentiert."
+			},
+			{
+				"question": "Was ist drand und wer steckt dahinter?",
+				"answer": "Das drand-Projekt generiert Zufallszahlen, denen jeder vertrauen kann. Es kann angewendet werden, um wirklich zufällige und überprüfbare Auslosungen zu erstellen. Das Projekt wurde 2017 am EPFL von Nicolas Gailly initiiert und erhielt Unterstützung von Philipp Jovanovic. Es wurde von Bryan Ford geleitet.<br></br> Es ist seitdem unabhängig verwaltet worden und betreibt ein Netzwerk namens <a href='https://www.cloudflare.com/leagueofentropy/' target='_blank' class='underline'>League of Entropy</a> mit EPFL, UCL, Cloudflare, Kudelski Security, der Universität von Chile und Protocol Labs. Aktuelle Kernbetreuer des Open-Source-Projekts sind der CEO, CSO und CTO von Randamu, <a href='https://www.linkedin.com/in/erick-watson/' target='_blank' class='underline'>Erick Watson</a>, <a href='https://www.linkedin.com/in/anomalroil/' target='_blank' class='underline'>Yolan Romailler</a> und <a href='https://www.linkedin.com/in/patrickmcclurg/' target='_blank' class='underline'>Patrick McClurg</a>."
+			}
+		]
+	},
+	"past-draws": "Vergangene Auslosungen",
+	"past-draws-description": "Die folgende Liste zeigt die vergangenen Auslosungen, die stattgefunden haben, um Empfänger:innen für Social Income auszuwählen.",
+	"draw-card": {
+		"summary": "{{ count }} von {{ total }} ausgewählt",
+		"random-number": "Zufallszahl",
+		"confirm-drand": "Bestätigen auf drand",
+		"confirm-github": "Bestätigen auf Github",
+		"long-list": "{{ total }} Personen auf der langen Liste, {{ count }} ausgewählt",
+		"people": "Personen"
+	}
+}

shared/locales/en/website-recipient-selection.json

@@ -0,0 +1,55 @@
+{
+	"title": "Recipients Selection",
+	"introduction": "Social Income, like any UBI project, has limited financial resources. Choosing who gets help and who doesn't is tough. We want everyone to understand how we select our recipients. Since November 2023, we’ve employed a new way to randomly select people from poor communities, thanks to our partnership with <a href='https://drand.love' target='_blank' class='underline'>drand</a>.",
+	"selection-process": {
+		"title": "Our selection process in 3 steps",
+		"step-1": {
+			"title": "Step 1: Finding potential recipients",
+			"text": "We team up with a variety of international and local NGOs who support marginalized communities and are familiar with poverty at the local level. After visiting and positively assessing these NGOs – as well as the areas and communities they support – we may request that they provide us with a list of all potential recipients. Potential recipients are people living in poverty with whom they maintain direct contact. Depending on the communities supported, those lists can include anything from 100 to 1000 names."
+		},
+		"step-2": {
+			"title": "Step 2: Selecting at random and with utmost transparency",
+			"text": "The lists we are working with during selection contain minimal information about potential recipients. They are subsequently anonymized (hashed) and uploaded to our open-source repository. With the help of a random number generated and published by drand, a mechanism is set in place to select a predetermined number of individuals from the list. This process can be mathematically traced back and verified without compromising recipients’ data.",
+			"card": "\uD83D\uDD0E Upcoming: allowing everyone to easily verify for themselves whether or not they're on one of the NGOs' lists or whether they have been chosen."
+		},
+		"step-3": {
+			"title": "Step 3: Communicating transparently",
+			"text": "After a draw, we reach out to both the NGO and the community directly to share the results. The beneficiaries who were selected – upon confirming their participation – then provide additional information and are onboarded for our 3-year program"
+		}
+	},
+	"faq": {
+		"title": "Frequently asked questions",
+		"questions": [
+			{
+				"question": "Why do we select randomly out of a pool of qualified recipients?",
+				"answer": "The purpose of employing this random selection method is to achieve several objectives. Firstly, it helps prevent bias in our recipient selection, ensuring that relatives or acquaintances of individuals involved in the process are not given preferential treatment. Secondly, it aims to avoid tensions between recipients and non-recipients, as well as any potential conflicts between recipients and our organization. Lastly, we strive to incorporate technology where it is feasible and beneficial to the process."
+			},
+			{
+				"question": "Who can influence the draft?",
+				"answer": "By relying on an unpredictable random value from drand, set to be emitted in the future, it's not possible for anyone to sway the results of the selection process. This inherent randomness can be utilized to confirm the integrity of the selection. To qualify for Social Income, an individual must first be on a list provided by an NGO. While this does present a preliminary condition, it aligns with our foundational principle: ensuring that Social Income reaches those most in need."
+			},
+			{
+				"question": "How do we avoid bias and tensions?",
+				"answer": "To ensure we don't inadvertently prioritize a specific ethnic group, gender, or occupation, we collaborate with diverse NGOs that have varied missions. In line with our 'do no harm' policy, we strive to prevent tensions among recipients, non-recipients, communities, and the NGOs. Our random selection plays a pivotal role in achieving this. It ensures that those related to or acquainted with individuals in the process aren't shown favoritism, which could lead to conflicts."
+			},
+			{
+				"question": "What is happening during the selection process?",
+				"answer": "We utilize the random number provided by drand, which is publicly accessible, to pick a set number of individuals from our list. Here's how it's done: we first organize the hashed list of recipients. Then, using the randomness element from drand, we convert it into a position on the list through a <a href='https://en.wikipedia.org/wiki/Key_derivation_function' target='_blank' class='underline'>key derivation function</a>. For those keen on the technical details, the function and its associated processes are documented in our <a href='https://github.com/drand/draw-action' target='_blank' class='underline'>GitHub repository</a>."
+			},
+			{
+				"question": "What is drand and who is behind it?",
+				"answer": "The drand project generates random numbers that everyone can trust. It can be applied to create truly random and verifiable drafts. Initiated in 2017 at EPFL by Nicolas Gailly, drand received support from Philipp Jovanovic and was guided by Bryan Ford.<br></br> It has since become independently managed and maintains a network called the <a href='https://www.cloudflare.com/leagueofentropy/' target='_blank' class='underline'>League of Entropy</a> with EPFL, UCL, Cloudflare, Kudelski Security, the University of Chile, and Protocol Labs. Current core maintainers of the open source project are the CEO, CSO and CTO of Randamu, respectively <a href='https://www.linkedin.com/in/erick-watson/' target='_blank' class='underline'>Erick Watson</a>, <a href='https://www.linkedin.com/in/anomalroil/' target='_blank' class='underline'>Yolan Romailler</a>, and <a href='https://www.linkedin.com/in/patrickmcclurg/' target='_blank' class='underline'>Patrick McClurg</a>."
+			}
+		]
+	},
+	"past-draws": "Past Draws",
+	"past-draws-description": "The following list shows the past draws that have taken place to select recipients for Social Income.",
+	"draw-card": {
+		"summary": "{{ count }} out of {{ total }} selected",
+		"random-number": "Random number",
+		"confirm-drand": "Confirm on drand",
+		"confirm-github": "Confirm on Github",
+		"long-list": "{{ total }} people on the long list, {{ count }} selected",
+		"people": "People"
+	}
+}

website/src/app/[lang]/[region]/(website)/transparency/recipient-selection/draw-card.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { CompletedDraw } from '@/app/[lang]/[region]/(website)/transparency/recipient-selection/state';
+import { WebsiteLanguage } from '@/i18n';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { Card, Collapsible, CollapsibleContent, CollapsibleTrigger, Typography } from '@socialincome/ui';
+import Link from 'next/link';
+import { useState } from 'react';
+
+type DrawCardProps = {
+	lang: WebsiteLanguage;
+	draw: CompletedDraw;
+	translations: {
+		randomNumber: string;
+		confirmDrand: string;
+		people: string;
+		longlist: string;
+		confirmGithub: string;
+		summary: string;
+	};
+};
+
+export function DrawCard({ lang, draw, translations }: DrawCardProps) {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<Card className="p-8">
+			<Collapsible onOpenChange={(open) => setOpen(open)}>
+				<CollapsibleTrigger asChild>
+					<div className="grid cursor-pointer grid-cols-1 gap-2 md:grid-cols-4">
+						<Typography>{new Intl.DateTimeFormat(lang).format(draw.time)}</Typography>
+						<Typography>{draw.name}</Typography>
+						<Typography className="truncate">{translations.summary}</Typography>
+						{open ? (
+							<ChevronUpIcon className="h-4 w-4 justify-self-end" />
+						) : (
+							<ChevronDownIcon className="h-4 w-4 justify-self-end" />
+						)}
+					</div>
+				</CollapsibleTrigger>
+				<CollapsibleContent className="py-8">
+					<div className="space-y-4">
+						<div className="grid grid-cols-3 items-center gap-4">
+							<div className="col-span-2">
+								<Typography weight="bold">{translations.randomNumber}:</Typography>
+								<Typography className="break-all">{draw.drandRandomness}</Typography>
+							</div>
+							<div className="justify-self-end">
+								<Link href={`https://api.drand.sh/public/${draw.drandRound}`} target="_blank" className="underline">
+									{translations.confirmDrand}
+								</Link>
+							</div>
+						</div>
+						<div className="grid grid-cols-3 items-center gap-4">
+							<div className="col-span-2">
+								<Typography weight="bold">{translations.people}:</Typography>
+								<Typography>{translations.longlist}</Typography>
+							</div>
+							<div className="justify-self-end">
+								<Link
+									href={`https://github.com/socialincome-san/public/blob/main/recipients_selection/lists/${draw.filename}`}
+									target="_blank"
+									className="underline"
+								>
+									{translations.confirmGithub}
+								</Link>
+							</div>
+						</div>
+					</div>
+				</CollapsibleContent>
+			</Collapsible>
+		</Card>
+	);
+}