Skip to content

Commit

Permalink
Merge branch 'master' into path-change
Browse files Browse the repository at this point in the history
  • Loading branch information
volfiros authored Sep 18, 2023
2 parents 656a9aa + 487e9e7 commit 77b2ccf
Show file tree
Hide file tree
Showing 99 changed files with 1,824 additions and 709 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@
"puppeteer": "^21.0.3",
"stream-browserify": "^3.0.0",
"swc-loader": "^0.2.3",
"tailwindcss-3d": "^1.0.0",
"terser-webpack-plugin": "^5.3.9",
"tsconfig-paths-webpack-plugin": "^4.1.0",
"typescript": "^5.2.2",
Expand Down
2 changes: 1 addition & 1 deletion scripts/check-changed-translations.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function compareObjects(obj1, obj2, parentPath = "") {
obj2[key],
parentPath ? `${parentPath}.${key}` : key
);
} else if (obj1[key] !== obj2[key]) {
} else if (obj1[key] !== obj2[key] && obj2[key] !== undefined) {
const title = `Translation source ${parentPath}.${key} has changed`;
const message = `Consider running \`node scripts/remove-outdated-translations.js ${parentPath}.${key}\` to reset existing translations.`;
console.log(
Expand Down
12 changes: 7 additions & 5 deletions src/app/components/Avatar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { useEffect, useRef } from "react";
import { generateSvgGAvatar } from "~/app/components/Avatar/generator";
import { classNames } from "~/app/utils";

type Props = {
name: string;
size: number;
url?: string;
className?: string;
};

const Avatar = (props: Props) => {
Expand All @@ -20,6 +22,7 @@ const Avatar = (props: Props) => {
const AvatarImage = (props: Props) => {
return (
<div
className={classNames("translate-z-0 bg-white", props.className ?? "")}
style={{
width: `${props.size}px`,
height: `${props.size}px`,
Expand Down Expand Up @@ -48,11 +51,10 @@ const AvatarSVG = (props: Omit<Props, "url">) => {

return (
<svg
className="rounded-full overflow-hidden"
style={{
transform:
"translateZ(0)" /* Forced GPU render to avoid ugly borders when switching accounts */,
}}
className={classNames(
"rounded-full overflow-hidden translate-z-0",
props.className ?? ""
)}
ref={svgRef}
width={props.size}
height={props.size}
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/BalanceBox/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ function BalanceBox({ className }: Props) {
</div>

{accountLoading ? (
<SkeletonLoader containerClassName="mt-2" className="w-16" />
<SkeletonLoader containerClassName="mt-1" className="w-16" />
) : (
<div className="text-gray-500 mt-2">
<div className="text-gray-500 mt-1">
{balancesDecorated.fiatBalance && (
<>~{balancesDecorated.fiatBalance}</>
)}
Expand Down
5 changes: 4 additions & 1 deletion src/app/components/BudgetControl/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ type Props = {
budget: string;
onBudgetChange: ChangeEventHandler<HTMLInputElement>;
fiatAmount: string;
disabled?: boolean;
};

function BudgetControl({
Expand All @@ -18,6 +19,7 @@ function BudgetControl({
budget,
onBudgetChange,
fiatAmount,
disabled = false,
}: Props) {
const { t } = useTranslation("components", {
keyPrefix: "budget_control",
Expand All @@ -27,12 +29,13 @@ function BudgetControl({

return (
<div className="mb-4">
<div className="flex items-center">
<div className={`flex items-center`}>
<Checkbox
id="remember_me"
name="remember_me"
checked={remember}
onChange={onRememberChange}
disabled={disabled}
/>
<label
htmlFor="remember_me"
Expand Down
99 changes: 99 additions & 0 deletions src/app/components/Enable/AlbyEnable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
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 { useState } from "react";
import { useTranslation } from "react-i18next";
import ScreenHeader from "~/app/components/ScreenHeader";
import toast from "~/app/components/Toast";
import { USER_REJECTED_ERROR } from "~/common/constants";
import msg from "~/common/lib/msg";
import type { OriginData } from "~/types";

type Props = {
origin: OriginData;
};
function AlbyEnableComponent(props: Props) {
const [loading, setLoading] = useState(false);
const { t } = useTranslation("translation", {
keyPrefix: "alby_enable",
});
const { t: tCommon } = useTranslation("common");

const enable = () => {
try {
setLoading(true);
msg.reply({
enabled: true,
remember: true,
});
} catch (e) {
console.error(e);
if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
} finally {
setLoading(false);
}
};

function reject(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
msg.error(USER_REJECTED_ERROR);
}

async function block(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
await msg.request("addBlocklist", {
domain: props.origin.domain,
host: props.origin.host,
});
alert(tCommon("enable.block_added", { host: props.origin.host }));
msg.error(USER_REJECTED_ERROR);
}

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
<Container justifyBetween maxWidth="sm">
<div>
<PublisherCard
title={props.origin.name}
image={props.origin.icon}
url={props.origin.host}
isSmall={false}
/>

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

<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">{tCommon("enable.request1")}</p>
</div>
<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">{t("request2")}</p>
</div>
</div>
</div>
<div className="text-center flex flex-col">
<ConfirmOrCancel
disabled={loading}
loading={loading}
label={tCommon("actions.connect")}
onConfirm={enable}
onCancel={reject}
/>
<a
className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
href="#"
onClick={block}
>
{tCommon("enable.block_and_ignore", { host: props.origin.host })}
</a>
</div>
</Container>
</div>
);
}

export default AlbyEnableComponent;
99 changes: 99 additions & 0 deletions src/app/components/Enable/LiquidEnable.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
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 { useState } from "react";
import { useTranslation } from "react-i18next";
import ScreenHeader from "~/app/components/ScreenHeader";
import toast from "~/app/components/Toast";
import { USER_REJECTED_ERROR } from "~/common/constants";
import msg from "~/common/lib/msg";
import type { OriginData } from "~/types";

type Props = {
origin: OriginData;
};
function LiquidEnableComponent(props: Props) {
const [loading, setLoading] = useState(false);
const { t } = useTranslation("translation", {
keyPrefix: "liquid_enable",
});
const { t: tCommon } = useTranslation("common");

const enable = () => {
try {
setLoading(true);
msg.reply({
enabled: true,
remember: true,
});
} catch (e) {
console.error(e);
if (e instanceof Error) toast.error(`${tCommon("error")}: ${e.message}`);
} finally {
setLoading(false);
}
};

function reject(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
msg.error(USER_REJECTED_ERROR);
}

async function block(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
await msg.request("addBlocklist", {
domain: props.origin.domain,
host: props.origin.host,
});
alert(tCommon("enable.block_added", { host: props.origin.host }));
msg.error(USER_REJECTED_ERROR);
}

return (
<div className="h-full flex flex-col overflow-y-auto no-scrollbar">
<ScreenHeader title={t("title")} />
<Container justifyBetween maxWidth="sm">
<div>
<PublisherCard
title={props.origin.name}
image={props.origin.icon}
url={props.origin.host}
isSmall={false}
/>

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

<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">{tCommon("enable.request1")}</p>
</div>
<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
<p className="dark:text-white">{t("request2")}</p>
</div>
</div>
</div>
<div className="text-center flex flex-col">
<ConfirmOrCancel
disabled={loading}
loading={loading}
label={tCommon("actions.connect")}
onConfirm={enable}
onCancel={reject}
/>
<a
className="mt-4 underline text-sm text-gray-400 overflow-hidden text-ellipsis whitespace-nowrap"
href="#"
onClick={block}
>
{tCommon("enable.block_and_ignore", { host: props.origin.host })}
</a>
</div>
</Container>
</div>
);
}

export default LiquidEnableComponent;
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 @@ -13,16 +13,14 @@ import type { OriginData } from "~/types";
type Props = {
origin: OriginData;
};

function Enable(props: Props) {
const hasFetchedData = useRef(false);
function NostrEnableComponent(props: Props) {
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 @@ -35,7 +33,7 @@ function Enable(props: Props) {
} finally {
setLoading(false);
}
}, [tCommon]);
};

function reject(event: React.MouseEvent<HTMLAnchorElement>) {
event.preventDefault();
Expand All @@ -48,32 +46,10 @@ function Enable(props: Props) {
domain: props.origin.domain,
host: props.origin.host,
});
alert(t("block_added", { host: props.origin.host }));
alert(tCommon("enable.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 @@ -87,7 +63,7 @@ function Enable(props: Props) {
/>

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

<div className="mb-2 flex items-center">
<CheckIcon className="w-5 h-5 mr-2" />
Expand All @@ -112,12 +88,12 @@ function Enable(props: Props) {
href="#"
onClick={block}
>
{t("block_and_ignore", { host: props.origin.host })}
{tCommon("enable.block_and_ignore", { host: props.origin.host })}
</a>
</div>
</Container>
</div>
);
}

export default Enable;
export default NostrEnableComponent;
Loading

0 comments on commit 77b2ccf

Please sign in to comment.