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

MutinyWallet · Apr 12, 2024 · ba062d5 · ba062d5
1 parent 67340ef
commit ba062d5
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 22 deletions.
diff --git a/public/i18n/en.json b/public/i18n/en.json
@@ -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",

diff --git a/src/components/FederationInviteShower.tsx b/src/components/FederationInviteShower.tsx
@@ -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>
+        </>
+    );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -57,3 +57,4 @@ export * from "./HomeBalance";
 export * from "./EditProfileForm";
 export * from "./ImportNsecForm";
 export * from "./LightningAddressShower";
+export * from "./FederationInviteShower";
diff --git a/src/routes/settings/ManageFederations.tsx b/src/routes/settings/ManageFederations.tsx
@@ -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>