MutinyWallet · TonyGiorgio · Oct 3, 2023 · Aug 3, 2023 · Sep 22, 2023 · Oct 3, 2023
diff --git a/src/assets/icons/gift.svg b/src/assets/icons/gift.svg
diff --git a/src/assets/treasure-closed.png b/src/assets/treasure-closed.png
diff --git a/src/assets/treasure.gif b/src/assets/treasure.gif
diff --git a/src/components/AmountCard.tsx b/src/components/AmountCard.tsx
@@ -76,7 +76,7 @@ export function AmountCard(props: {
     initialOpen?: boolean;
     isAmountEditable?: boolean;
     setAmountSats?: (amount: bigint) => void;
-    skipWarnings?: boolean;
+    showWarnings?: boolean;
     exitRoute?: string;
     maxAmountSats?: bigint;
 }) {
@@ -116,7 +116,9 @@ export function AmountCard(props: {
                                                 ? props.setAmountSats
                                                 : noop
                                         }
-                                        skipWarnings={props.skipWarnings}
+                                        showWarnings={
+                                            props.showWarnings ?? false
+                                        }
                                         exitRoute={props.exitRoute}
                                         maxAmountSats={props.maxAmountSats}
                                         fee={props.fee}
@@ -185,7 +187,9 @@ export function AmountCard(props: {
                                                 ? props.setAmountSats
                                                 : noop
                                         }
-                                        skipWarnings={props.skipWarnings}
+                                        showWarnings={
+                                            props.showWarnings ?? false
+                                        }
                                         exitRoute={props.exitRoute}
                                         maxAmountSats={props.maxAmountSats}
                                         fee={props.fee}

diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx
@@ -262,7 +262,7 @@ export const AmountEditable: ParentComponent<{
     initialAmountSats: string;
     initialOpen: boolean;
     setAmountSats: (s: bigint) => void;
-    skipWarnings?: boolean;
+    showWarnings: boolean;
     exitRoute?: string;
     maxAmountSats?: bigint;
     fee?: string;
@@ -564,7 +564,8 @@ export const AmountEditable: ParentComponent<{
         }
     }
 
-    function handleClose() {
+    function handleClose(e: SubmitEvent | MouseEvent | KeyboardEvent) {
+        e.preventDefault();
         props.setAmountSats(BigInt(props.initialAmountSats));
         setIsOpen(false);
         setLocalSats(props.initialAmountSats);
@@ -576,6 +577,7 @@ export const AmountEditable: ParentComponent<{
             )
         );
         props.exitRoute && navigate(props.exitRoute);
+        return false;
     }
 
     // What we're all here for in the first place: returning a value
@@ -586,6 +588,7 @@ export const AmountEditable: ParentComponent<{
             satsToFiat(state.price, Number(localSats()) || 0, state.fiat)
         );
         setIsOpen(false);
+        return false;
     }
 
     function handleSatsInput(e: InputEvent) {
@@ -706,6 +709,7 @@ export const AmountEditable: ParentComponent<{
                         <div class="flex w-full justify-end">
                             <button
                                 onClick={handleClose}
+                                type="button"
                                 class="h-8 w-8 rounded-lg hover:bg-white/10 active:bg-m-blue"
                             >
                                 <img src={close} alt="Close" />
@@ -777,7 +781,7 @@ export const AmountEditable: ParentComponent<{
                                     </InfoBox>
                                 </Match>
                                 <Match
-                                    when={warningText() && !props.skipWarnings}
+                                    when={warningText() && props.showWarnings}
                                 >
                                     <InfoBox accent="blue">
                                         {warningText()} <FeesModal />

diff --git a/src/components/CopyableQR.tsx b/src/components/CopyableQR.tsx
diff --git a/src/components/DetailsModal.tsx b/src/components/DetailsModal.tsx
@@ -65,7 +65,7 @@ export const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm";
 export const DIALOG_POSITIONER =
     "fixed inset-0 z-50 flex items-center justify-center";
 export const DIALOG_CONTENT =
-    "max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-neutral-800/80 backdrop-blur-md shadow-xl rounded-xl border border-white/10";
+    "max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-m-grey-800/75 backdrop-blur-md shadow-xl rounded-xl border border-white/10";
 
 function LightningHeader(props: {
     info: MutinyInvoice;

diff --git a/src/components/GiftLink.tsx b/src/components/GiftLink.tsx
@@ -0,0 +1,22 @@
+import { A, useLocation } from "solid-start";
+
+import gift from "~/assets/icons/gift.svg";
+import { useI18n } from "~/i18n/context";
+
+export function GiftLink() {
+    const i18n = useI18n();
+    const location = useLocation();
+
+    return (
+        <A
+            class="flex items-center gap-2 font-semibold text-m-red no-underline"
+            href="/settings/gift"
+            state={{
+                previous: location.pathname
+            }}
+        >
+            {i18n.t("settings.gift.give_sats_link")}
+            <img src={gift} class="h-5 w-5" alt="Gift" />
+        </A>
+    );
+}
diff --git a/src/components/IntegratedQR.tsx b/src/components/IntegratedQR.tsx
@@ -10,7 +10,7 @@ import { useI18n } from "~/i18n/context";
 import { ReceiveFlavor } from "~/routes/Receive";
 import { useCopy } from "~/utils";
 
-function KindIndicator(props: { kind: ReceiveFlavor }) {
+function KindIndicator(props: { kind: ReceiveFlavor | "gift" }) {
     const i18n = useI18n();
     return (
         <div class="flex flex-col items-end text-black">
@@ -29,6 +29,13 @@ function KindIndicator(props: { kind: ReceiveFlavor }) {
                     <img src={boltBlack} alt="bolt" />
                 </Match>
 
+                <Match when={props.kind === "gift"}>
+                    <h3 class="font-semibold">
+                        {i18n.t("receive.integrated_qr.gift")}
+                    </h3>
+                    <img src={boltBlack} alt="bolt" />
+                </Match>
+
                 <Match when={props.kind === "unified"}>
                     <h3 class="font-semibold">
                         {i18n.t("receive.integrated_qr.unified")}
@@ -62,7 +69,7 @@ async function share(receiveString: string) {
 export function IntegratedQr(props: {
     value: string;
     amountSats: string;
-    kind: ReceiveFlavor;
+    kind: ReceiveFlavor | "gift";
 }) {
     const i18n = useI18n();
     const [copy, copied] = useCopy({ copiedTimeout: 1000 });

diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -0,0 +1,29 @@
+import { Match, Switch } from "solid-js";
+
+import pixelLogo from "~/assets/mutiny-pixel-logo.png";
+import plusLogo from "~/assets/mutiny-plus-logo.png";
+import { useMegaStore } from "~/state/megaStore";
+
+export function Logo() {
+    const [state, _actions] = useMegaStore();
+    return (
+        <Switch>
+            <Match when={state.mutiny_plus}>
+                <img
+                    id="mutiny-logo"
+                    src={plusLogo}
+                    class="h-[25px] w-[86px]"
+                    alt="Mutiny Plus logo"
+                />
+            </Match>
+            <Match when={true}>
+                <img
+                    id="mutiny-logo"
+                    src={pixelLogo}
+                    class="h-[25px] w-[75px]"
+                    alt="Mutiny logo"
+                />
+            </Match>
+        </Switch>
+    );
+}
diff --git a/src/components/MutinyPlusCta.tsx b/src/components/MutinyPlusCta.tsx
@@ -0,0 +1,40 @@
+import { ParentComponent } from "solid-js";
+import { A } from "solid-start";
+
+import forward from "~/assets/icons/forward.svg";
+import { useI18n } from "~/i18n/context";
+
+export const CtaCard: ParentComponent = (props) => {
+    return (
+        <div class="w-full">
+            <div class="relative">
+                <div class="to-bg-m-grey-900/50 absolute inset-0 h-full w-full scale-[0.60] transform rounded-full bg-m-red/50 bg-gradient-to-r from-m-red/50 blur-2xl" />
+                <div class="relative flex-col gap-2 rounded-xl border border-m-red bg-m-grey-800 py-4">
+                    {props.children}{" "}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export function MutinyPlusCta() {
+    const i18n = useI18n();
+    return (
+        <CtaCard>
+            <A
+                href={"/settings/plus"}
+                class="flex w-full flex-col gap-1 px-4 py-2 no-underline hover:bg-m-grey-750 active:bg-m-grey-900"
+            >
+                <div class="flex justify-between">
+                    <span>
+                        Mutiny<span class="text-m-red">+</span>
+                    </span>
+                    <img src={forward} alt="go" />
+                </div>
+                <div class="text-sm text-m-grey-400">
+                    {i18n.t("settings.plus.cta_description")}
+                </div>
+            </A>
+        </CtaCard>
+    );
+}
diff --git a/src/components/NWCBudgetEditor.tsx b/src/components/NWCBudgetEditor.tsx
@@ -104,16 +104,16 @@ export function NWCBudgetEditor(props: {
                         <TinyText>
                             {i18n.t("settings.connections.careful")}
                         </TinyText>
-                        <KeyValue key={"Budget"}>
+                        <KeyValue key={i18n.t("settings.connections.budget")}>
                             <Field name="budget_amount">
                                 {(field, _fieldProps) => (
                                     <div class="flex flex-col items-end gap-2">
                                         <AmountEditable
-                                            skipWarnings={true}
                                             initialOpen={false}
                                             initialAmountSats={
                                                 field.value || "0"
                                             }
+                                            showWarnings={false}
                                             setAmountSats={(a) => {
                                                 setValue(
                                                     budgetForm,
@@ -129,7 +129,9 @@ export function NWCBudgetEditor(props: {
                                 )}
                             </Field>
                         </KeyValue>
-                        <KeyValue key={"Resets every"}>
+                        <KeyValue
+                            key={i18n.t("settings.connections.resets_every")}
+                        >
                             <Field name="interval">
                                 {(field, fieldProps) => (
                                     <select

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -4,6 +4,7 @@ import airplane from "~/assets/icons/airplane.svg";
 import receive from "~/assets/icons/big-receive.svg";
 import mutiny_m from "~/assets/icons/m.svg";
 import redshift from "~/assets/icons/rs.svg";
+import scan from "~/assets/icons/scan.svg";
 import settings from "~/assets/icons/settings.svg";
 import userClock from "~/assets/icons/user-clock.svg";
 
@@ -67,6 +68,12 @@ export function NavBar(props: { activeTab: ActiveTab }) {
                     active={props.activeTab === "activity"}
                     alt="activity"
                 />
+                <NavBarItem
+                    href="/scanner"
+                    icon={scan}
+                    active={false}
+                    alt="scan"
+                />
                 <NavBarItem
                     href="/redshift"
                     icon={redshift}

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -12,7 +12,6 @@ export * from "./ChooseCurrency";
 export * from "./ContactEditor";
 export * from "./ContactForm";
 export * from "./ContactViewer";
-export * from "./CopyableQR";
 export * from "./DecryptDialog";
 export * from "./DeleteEverything";
 export * from "./DetailsModal";
@@ -25,6 +24,7 @@ export * from "./IntegratedQR";
 export * from "./JsonModal";
 export * from "./KitchenSink";
 export * from "./LoadingIndicator";
+export * from "./Logo";
 export * from "./Logs";
 export * from "./MoreInfoModal";
 export * from "./NavBar";
@@ -42,3 +42,5 @@ export * from "./TagEditor";
 export * from "./Toaster";
 export * from "./NostrActivity";
 export * from "./SyncContactsForm";
+export * from "./GiftLink";
+export * from "./MutinyPlusCta";
diff --git a/src/components/layout/BackPop.tsx b/src/components/layout/BackPop.tsx
@@ -14,7 +14,10 @@ export function BackPop() {
 
     const state = location.state as StateWithPrevious;
 
-    const backPath = () => (state?.previous ? state?.previous : "/");
+    // If there's no previous state want to just go back one level, basically ../
+    const newBackPath = location.pathname.split("/").slice(0, -1).join("/");
+
+    const backPath = () => (state?.previous ? state?.previous : newBackPath);
 
     return (
         <BackButton