aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2026-02-10 00:34:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

invite codes and list federations even if you're in one

Browse Source
This commit is contained in:
Paul Miller
2024-04-12 11:42:30 -05:00
parent 67340ef731
commit ba062d5cd2
4 changed files with 89 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/i18n/en.json
View File

@@ -558,7 +558,8 @@
"created_at": "Created At",
"recommended_by": "Recommended By",
"already_in_fed": "You're already in a federation!",
"descriptionpart2": "Each one is ran by a group of different inviduals or companies. Discover one that you or your friends might trust below."
"descriptionpart2": "Each one is ran by a group of different inviduals or companies. Discover one that you or your friends might trust below.",
"join_me": "Join me"
},
"gift": {
"give_sats_link": "Give sats as a gift",

55
src/components/FederationInviteShower.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { Copy, QrCode } from "lucide-solid";
import { createSignal, Show } from "solid-js";
import { QRCodeSVG } from "solid-qr-code";
import { SimpleDialog } from "~/components";
import { useI18n } from "~/i18n/context";
import { useCopy } from "~/utils";
export function FederationInviteShower(props: {
name?: string;
inviteCode: string;
}) {
const i18n = useI18n();
const [showQr, setShowQr] = createSignal(false);
const [copy, copied] = useCopy({ copiedTimeout: 1000 });
return (
<>
<div class="flex w-full justify-center gap-8">
<button onClick={() => setShowQr(true)}>
<QrCode class="inline-block h-4 w-4" />
</button>
<button
class="p-1"
classList={{
"bg-m-red rounded": copied()
}}
onClick={() => copy(props.inviteCode)}
>
<Copy class="inline-block h-4 w-4" />
</button>
</div>{" "}
<SimpleDialog
open={showQr()}
setOpen={(open) => {
setShowQr(open);
}}
title={i18n.t("settings.manage_federations.join_me")}
>
<Show when={props.name}>
<p class="break-all text-center font-system-mono text-base ">
{props.name}
</p>
</Show>
<div class="w-[15rem] self-center rounded bg-white p-[1rem]">
<QRCodeSVG
value={props.inviteCode || ""}
class="h-full max-h-[500px] w-full"
/>
</div>
</SimpleDialog>
</>
);
}

1
src/components/index.ts
View File

@@ -57,3 +57,4 @@ export * from "./HomeBalance";
export * from "./EditProfileForm";
export * from "./ImportNsecForm";
export * from "./LightningAddressShower";
export * from "./FederationInviteShower";

52
src/routes/settings/ManageFederations.tsx
View File

@@ -18,7 +18,6 @@ import {
Suspense,
Switch
} from "solid-js";
import { QRCodeSVG } from "solid-qr-code";
import {
AmountSats,
@@ -28,6 +27,7 @@ import {
DefaultMain,
ExternalLink,
FancyCard,
FederationInviteShower,
InfoBox,
KeyValue,
LabelCircle,
@@ -85,6 +85,7 @@ type RefetchType = (
export function AddFederationForm(props: {
refetch?: RefetchType;
setup?: boolean;
browseOnly?: boolean;
}) {
const i18n = useI18n();
const [state, actions] = useMegaStore();
@@ -179,7 +180,7 @@ export function AddFederationForm(props: {
return (
<>
<Show when={!props.setup}>
<Show when={!props.setup && !props.browseOnly}>
<MediumHeader>
{i18n.t("settings.manage_federations.manual")}
</MediumHeader>
@@ -223,6 +224,8 @@ export function AddFederationForm(props: {
</Show>
</VStack>
</Form>
</Show>
<Show when={!props.setup}>
<MediumHeader>
{i18n.t("settings.manage_federations.discover")}
</MediumHeader>
@@ -314,19 +317,21 @@ export function AddFederationForm(props: {
</div>
</KeyValue>
</Show>
<Button
intent="blue"
onClick={() =>
onSelect(fed.invite_codes)
}
loading={fed.invite_codes.includes(
loadingFederation()
)}
>
{i18n.t(
"settings.manage_federations.add"
)}
</Button>
<Show when={!props.browseOnly}>
<Button
intent="blue"
onClick={() =>
onSelect(fed.invite_codes)
}
loading={fed.invite_codes.includes(
loadingFederation()
)}
>
{i18n.t(
"settings.manage_federations.add"
)}
</Button>
</Show>
</VStack>
</FancyCard>
)}
@@ -460,15 +465,15 @@ function FederationListItem(props: {
>
<MiniStringShower text={props.fed.federation_id} />
</KeyValue>
<KeyValue key={"Invite code"}>
<FederationInviteShower
name={props.fed.federation_name}
inviteCode={props.fed.invite_code}
/>
</KeyValue>
<Suspense>
<RecommendButton fed={props.fed} />
</Suspense>
<div class="w-full rounded-xl bg-white">
<QRCodeSVG
value={props.fed.invite_code}
class="h-full max-h-[256px] w-full p-8"
/>
</div>
<Button intent="red" onClick={confirmRemove}>
{i18n.t("settings.manage_federations.remove")}
</Button>
@@ -580,6 +585,11 @@ export function ManageFederations() {
</Switch>
</Suspense>
</VStack>
<Suspense>
<Show when={state.federations?.length}>
<AddFederationForm refetch={refetch} browseOnly />
</Show>
</Suspense>
</DefaultMain>
<NavBar activeTab="settings" />
</MutinyWalletGuard>