Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: move onboarding prompt to enable screen #2737

Merged
merged 20 commits into from
Sep 18, 2023
Merged

feat: move onboarding prompt to enable screen #2737

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
58e2c33
feat: sketch
reneaaron Sep 7, 2023
3538d85
Merge remote-tracking branch 'upstream/master' into feat/onboarding-p…
pavanjoshi914 Sep 9, 2023
8d565e2
feat: onboard in enable
pavanjoshi914 Sep 11, 2023
a60e8d9
chore: add comment
pavanjoshi914 Sep 11, 2023
e8d30b9
feat: onboarding shall work even after allowance is set by some other…
pavanjoshi914 Sep 13, 2023
b575a93
refactor: refactor providers
pavanjoshi914 Sep 14, 2023
73b4eed
Merge remote-tracking branch 'upstream/master' into feat/onboarding-p…
pavanjoshi914 Sep 14, 2023
d2a32c2
feat: cleanup screens
pavanjoshi914 Sep 14, 2023
49b6933
refactor: move onboarding to components
pavanjoshi914 Sep 14, 2023
552d1a0
refactor: background prompts and screens for the providers
pavanjoshi914 Sep 14, 2023
77d1472
chore: remove onboarding from content script
pavanjoshi914 Sep 14, 2023
6d2785c
chore: remove comments
pavanjoshi914 Sep 14, 2023
c39c773
feat: redesign component rendering for provider screens
pavanjoshi914 Sep 14, 2023
9f018d6
chore: remove existing lnurl-auth onboard from webln
pavanjoshi914 Sep 18, 2023
6780075
chore: remove onboard routes as no longer required
pavanjoshi914 Sep 18, 2023
ca8189c
refactor: separate translations for each provider
pavanjoshi914 Sep 18, 2023
bb39069
feat: correct confirm or cancel button position
pavanjoshi914 Sep 18, 2023
56b6278
feat: restructure translations
pavanjoshi914 Sep 18, 2023
ad07912
chore: make nostr enable text fit on one line
rolznz Sep 18, 2023
8aa5748
Merge branch 'master' into feat/onboarding-prompt
rolznz Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 10 additions & 31 deletions src/app/components/Enable/AlbyEnable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
import ConfirmOrCancel from "@components/ConfirmOrCancel";
import Container from "@components/Container";
import PublisherCard from "@components/PublisherCard";
import { useCallback, useEffect, useRef, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import ScreenHeader from "~/app/components/ScreenHeader";
import toast from "~/app/components/Toast";
Expand All @@ -14,14 +14,13 @@ type Props = {
origin: OriginData;
};
function AlbyEnableComponent(props: Props) {
const hasFetchedData = useRef(false);
const [loading, setLoading] = useState(false);
const { t } = useTranslation("translation", {
keyPrefix: "enable",
keyPrefix: "alby_enable",
});
const { t: tCommon } = useTranslation("common");

const enable = useCallback(() => {
const enable = () => {
try {
setLoading(true);
msg.reply({
Expand All @@ -34,7 +33,7 @@ function AlbyEnableComponent(props: Props) {
} finally {
setLoading(false);
}
}, [tCommon]);
};

function reject(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
Expand All @@ -47,32 +46,10 @@ function AlbyEnableComponent(props: Props) {
domain: props.origin.domain,
host: props.origin.host,
});
alert(t("block_added", { host: props.origin.host }));
alert(tCommon("block_added", { host: props.origin.host }));
msg.error(USER_REJECTED_ERROR);
}

useEffect(() => {
async function getAllowance() {
try {
const allowance = await msg.request("getAllowance", {
domain: props.origin.domain,
host: props.origin.host,
});
if (allowance && allowance.enabled) {
enable();
}
} catch (e) {
if (e instanceof Error) console.error(e.message);
}
}

// Run once.
if (!hasFetchedData.current) {
getAllowance();
hasFetchedData.current = true;
}
}, [enable, props.origin.domain, props.origin.host]);

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
Expand All @@ -86,11 +63,13 @@ function AlbyEnableComponent(props: Props) {
/>

<div className="dark:text-white pt-6">
<p className="mb-2">{t("allow")}</p>
<p className="mb-2">{tCommon("allow")}</p>

<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">{t("request1")}</p>
<p className="dark:text-white">
{tCommon("request_transaction_approval")}
</p>
</div>
<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
Expand All @@ -111,7 +90,7 @@ function AlbyEnableComponent(props: Props) {
href="#"
onClick={block}
>
{t("block_and_ignore", { host: props.origin.host })}
{tCommon("actions.block_and_ignore", { host: props.origin.host })}
</a>
</div>
</Container>
Expand Down
41 changes: 10 additions & 31 deletions src/app/components/Enable/LiquidEnable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
import ConfirmOrCancel from "@components/ConfirmOrCancel";
import Container from "@components/Container";
import PublisherCard from "@components/PublisherCard";
import { useCallback, useEffect, useRef, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import ScreenHeader from "~/app/components/ScreenHeader";
import toast from "~/app/components/Toast";
Expand All @@ -14,14 +14,13 @@ type Props = {
origin: OriginData;
};
function LiquidEnableComponent(props: Props) {
const hasFetchedData = useRef(false);
const [loading, setLoading] = useState(false);
const { t } = useTranslation("translation", {
keyPrefix: "enable",
keyPrefix: "liquid_enable",
});
const { t: tCommon } = useTranslation("common");

const enable = useCallback(() => {
const enable = () => {
try {
setLoading(true);
msg.reply({
Expand All @@ -34,7 +33,7 @@ function LiquidEnableComponent(props: Props) {
} finally {
setLoading(false);
}
}, [tCommon]);
};

function reject(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
Expand All @@ -47,32 +46,10 @@ function LiquidEnableComponent(props: Props) {
domain: props.origin.domain,
host: props.origin.host,
});
alert(t("block_added", { host: props.origin.host }));
alert(tCommon("block_added", { host: props.origin.host }));
msg.error(USER_REJECTED_ERROR);
}

useEffect(() => {
async function getAllowance() {
try {
const allowance = await msg.request("getAllowance", {
domain: props.origin.domain,
host: props.origin.host,
});
if (allowance && allowance.enabled) {
enable();
}
} catch (e) {
if (e instanceof Error) console.error(e.message);
}
}

// Run once.
if (!hasFetchedData.current) {
getAllowance();
hasFetchedData.current = true;
}
}, [enable, props.origin.domain, props.origin.host]);

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
Expand All @@ -86,11 +63,13 @@ function LiquidEnableComponent(props: Props) {
/>

<div className="dark:text-white pt-6">
<p className="mb-2">{t("allow")}</p>
<p className="mb-2">{tCommon("allow")}</p>

<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">{t("request1")}</p>
<p className="dark:text-white">
{tCommon("request_transaction_approval")}
</p>
</div>
<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
Expand All @@ -111,7 +90,7 @@ function LiquidEnableComponent(props: Props) {
href="#"
onClick={block}
>
{t("block_and_ignore", { host: props.origin.host })}
{tCommon("actions.block_and_ignore", { host: props.origin.host })}
</a>
</div>
</Container>
Expand Down
37 changes: 7 additions & 30 deletions src/app/components/Enable/NostrEnable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
import ConfirmOrCancel from "@components/ConfirmOrCancel";
import Container from "@components/Container";
import PublisherCard from "@components/PublisherCard";
import { useCallback, useEffect, useRef, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import ScreenHeader from "~/app/components/ScreenHeader";
import toast from "~/app/components/Toast";
Expand All @@ -14,14 +14,13 @@ type Props = {
origin: OriginData;
};
function NostrEnableComponent(props: Props) {
const hasFetchedData = useRef(false);
const [loading, setLoading] = useState(false);
const { t } = useTranslation("translation", {
keyPrefix: "enable",
keyPrefix: "nostr_enable",
});
const { t: tCommon } = useTranslation("common");

const enable = useCallback(() => {
const enable = () => {
try {
setLoading(true);
msg.reply({
Expand All @@ -34,7 +33,7 @@ function NostrEnableComponent(props: Props) {
} finally {
setLoading(false);
}
}, [tCommon]);
};

function reject(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
Expand All @@ -47,32 +46,10 @@ function NostrEnableComponent(props: Props) {
domain: props.origin.domain,
host: props.origin.host,
});
alert(t("block_added", { host: props.origin.host }));
alert(tCommon("block_added", { host: props.origin.host }));
msg.error(USER_REJECTED_ERROR);
}

useEffect(() => {
async function getAllowance() {
try {
const allowance = await msg.request("getAllowance", {
domain: props.origin.domain,
host: props.origin.host,
});
if (allowance && allowance.enabled) {
enable();
}
} catch (e) {
if (e instanceof Error) console.error(e.message);
}
}

// Run once.
if (!hasFetchedData.current) {
getAllowance();
hasFetchedData.current = true;
}
}, [enable, props.origin.domain, props.origin.host]);

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
Expand All @@ -86,7 +63,7 @@ function NostrEnableComponent(props: Props) {
/>

<div className="dark:text-white pt-6">
<p className="mb-2">{t("allow")}</p>
<p className="mb-2">{tCommon("allow")}</p>

<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
Expand All @@ -111,7 +88,7 @@ function NostrEnableComponent(props: Props) {
href="#"
onClick={block}
>
{t("block_and_ignore", { host: props.origin.host })}
{tCommon("actions.block_and_ignore", { host: props.origin.host })}
</a>
</div>
</Container>
Expand Down
41 changes: 10 additions & 31 deletions src/app/components/Enable/WebbtcEnable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
import ConfirmOrCancel from "@components/ConfirmOrCancel";
import Container from "@components/Container";
import PublisherCard from "@components/PublisherCard";
import { useCallback, useEffect, useRef, useState } from "react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import ScreenHeader from "~/app/components/ScreenHeader";
import toast from "~/app/components/Toast";
Expand All @@ -14,14 +14,13 @@ type Props = {
origin: OriginData;
};
function WebbtcEnableComponent(props: Props) {
const hasFetchedData = useRef(false);
const [loading, setLoading] = useState(false);
const { t } = useTranslation("translation", {
keyPrefix: "enable",
keyPrefix: "webbtc_enable",
});
const { t: tCommon } = useTranslation("common");

const enable = useCallback(() => {
const enable = () => {
try {
setLoading(true);
msg.reply({
Expand All @@ -34,7 +33,7 @@ function WebbtcEnableComponent(props: Props) {
} finally {
setLoading(false);
}
}, [tCommon]);
};

function reject(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
Expand All @@ -47,32 +46,10 @@ function WebbtcEnableComponent(props: Props) {
domain: props.origin.domain,
host: props.origin.host,
});
alert(t("block_added", { host: props.origin.host }));
alert(tCommon("block_added", { host: props.origin.host }));
msg.error(USER_REJECTED_ERROR);
}

useEffect(() => {
async function getAllowance() {
try {
const allowance = await msg.request("getAllowance", {
domain: props.origin.domain,
host: props.origin.host,
});
if (allowance && allowance.enabled) {
enable();
}
} catch (e) {
if (e instanceof Error) console.error(e.message);
}
}

// Run once.
if (!hasFetchedData.current) {
getAllowance();
hasFetchedData.current = true;
}
}, [enable, props.origin.domain, props.origin.host]);

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
Expand All @@ -86,11 +63,13 @@ function WebbtcEnableComponent(props: Props) {
/>

<div className="dark:text-white pt-6">
<p className="mb-2">{t("allow")}</p>
<p className="mb-2">{tCommon("allow")}</p>

<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">{t("request1")}</p>
<p className="dark:text-white">
{tCommon("request_transaction_approval")}
</p>
</div>
<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
Expand All @@ -111,7 +90,7 @@ function WebbtcEnableComponent(props: Props) {
href="#"
onClick={block}
>
{t("block_and_ignore", { host: props.origin.host })}
{tCommon("actions.block_and_ignore", { host: props.origin.host })}
</a>
</div>
</Container>
Expand Down
Loading
Loading