Skip to content

Commit

Permalink
Merge remote-tracking branch 'upstream/master' into weblate-getalby-l…
Browse files Browse the repository at this point in the history 
…ightning-browser-extension-getalby-lightning-browser-extension
  • Loading branch information
@pavanjoshi914
pavanjoshi914 committed Jan 24, 2025
2 parents 6f441ac + c109f45 commit 24571c1
Show file tree
Hide file tree
Showing 33 changed files with 340 additions and 193 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
},
"dependencies": {
"@bitcoinerlab/secp256k1": "^1.1.1",
"@getalby/sdk": "^3.6.0",
"@getalby/sdk": "^3.9.0",
"@headlessui/react": "^1.7.18",
"@lightninglabs/lnc-web": "^0.3.1-alpha",
"@noble/ciphers": "^0.5.1",
Expand Down
41 changes: 35 additions & 6 deletions src/app/components/Alert/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,51 @@
import { PopiconsXLine } from "@popicons/react";
import { useState } from "react";
import { classNames } from "~/app/utils";

type Props = {
type: "warn" | "info";
children: React.ReactNode;
showClose?: boolean;
onClose?: () => void;
};

export default function Alert({ type, children }: Props) {
export default function Alert({
type,
children,
showClose = false,
onClose,
}: Props) {
const [isVisible, setIsVisible] = useState(true);

const handleClose = () => {
setIsVisible(false);
if (onClose) {
onClose();
}
};

if (!isVisible) return null;

return (
<div
className={classNames(
"border rounded-md p-3",
type == "warn" &&
"text-orange-700 dark:text-orange-300 bg-orange-50 dark:bg-orange-900 border-orange-100 dark:border-orange-900",
type == "info" &&
"border rounded-md p-3 flex justify-between relative",
type === "warn" &&
"text-orange-700 dark:text-orange-300 bg-orange-50 dark:bg-orange-900 border-orange-100 dark:border-orange-900",
type === "info" &&
"text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-900 border-blue-100 dark:border-blue-900"
)}
>
{children}
{showClose && (
<button
onClick={handleClose}
className="absolute right-2 top-2 text-gray-600 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-300"
aria-label="Close alert"
>
<PopiconsXLine className="w-5 h-5" />
</button>
)}
<div className="pr-8">{children}</div>
</div>
);
}
41 changes: 35 additions & 6 deletions src/app/components/TransactionsTable/TransactionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
PopiconsArrowUpSolid,
PopiconsChevronBottomLine,
PopiconsChevronTopLine,
PopiconsXSolid,
} from "@popicons/react";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -56,17 +57,43 @@ export default function TransactionModal({
<div>
<div className="flex items-center justify-center">
{getTransactionType(transaction) == "outgoing" ? (
<div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full p-3">
<PopiconsArrowUpSolid className="w-10 h-10 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
</div>
transaction.state === "pending" ? (
<div className="flex justify-center items-center bg-blue-100 dark:bg-sky-950 rounded-full p-3 animate-pulse">
<PopiconsArrowUpSolid className="w-10 h-10 rotate-45 text-blue-500 dark:text-sky-500 stroke-[1px] stroke-blue-500 dark:stroke-sky-500" />
</div>
) : transaction.state === "failed" ? (
<div className="flex justify-center items-center bg-red-100 dark:bg-rose-950 rounded-full p-3">
<PopiconsXSolid className="w-10 h-10 text-red-500 dark:text-rose-500 stroke-[1px] stroke-red-500 dark:stroke-rose-500" />
</div>
) : (
<div className="flex justify-center items-center bg-orange-100 dark:bg-amber-950 rounded-full p-3">
<PopiconsArrowUpSolid className="w-10 h-10 text-orange-500 dark:text-amber-500 stroke-[1px] stroke-orange-500 dark:stroke-amber-500" />
</div>
)
) : (
<div className="flex justify-center items-center bg-green-100 dark:bg-emerald-950 rounded-full p-3">
<PopiconsArrowDownSolid className="w-10 h-10 text-green-500 dark:text-emerald-500 stroke-[1px] stroke-green-400 dark:stroke-emerald-500" />
<PopiconsArrowDownSolid className="w-10 h-10 text-green-500 dark:text-teal-500 stroke-[1px] stroke-green-500 dark:stroke-teal-500" />
</div>
)}
</div>
<h2 className="mt-4 text-md text-gray-900 font-bold dark:text-white text-center">
{transaction.type == "received" ? t("received") : t("sent")}

<h2
className={classNames(
"mt-4 text-md text-gray-900 font-bold dark:text-white text-center",
transaction.state == "pending" && "animate-pulse text-gray-400"
)}
>
{transaction.type == "received"
? t("received")
: t(
transaction.state === "settled"
? "sent"
: transaction.state === "pending"
? "sending"
: transaction.state === "failed"
? "failed"
: "sent"
)}
</h2>
</div>
<div className="flex items-center text-center justify-center dark:text-white">
Expand All @@ -76,6 +103,8 @@ export default function TransactionModal({
"text-3xl font-medium",
transaction.type == "received"
? "text-green-600 dark:text-emerald-500"
: transaction.state == "failed"
? "text-red-400 dark:text-rose-600"
: "text-orange-600 dark:text-amber-600"
)}
>
Expand Down
10 changes: 5 additions & 5 deletions src/app/components/TransactionsTable/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const transactions: Props = {
{
timestamp: 1656573909064,
createdAt: "1656573909064",
date: "5 days ago",
timeAgo: "5 days ago",
description: "Polar Invoice for bob",
host: "https://openai.com/dall-e-2/",
id: "1",
Expand All @@ -49,7 +49,7 @@ const invoices: Props = {
totalAmountFiat: "$13.02",
preimage: "",
title: "lambo lambo",
date: "4 days ago",
timeAgo: "4 days ago",
},
{
id: "lnbcrt6543210n1p3tadjepp5rv6ufq4vumg66l9gcyxqhy89n6w90mx0mh6gcj0sawrf6xuep5ssdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5f9yzxeqjw33ule4rffuh0py32gjjsx8z48cd4xjl8ej3rn7zdtdq9qyyssqe6qvkfe260myc9ypgs5n63xzwcx82fderg8p5ysh6c2fvpz5xu4ksvhs5av0wwestk5pmucmhk8lpjhmy7wqyq9c29xgm9na2q5xv5spy5kukj",
Expand All @@ -59,7 +59,7 @@ const invoices: Props = {
totalAmountFiat: "$127.80",
preimage: "",
title: "Alby invoice",
date: "6 days ago",
timeAgo: "6 days ago",
},
],
};
Expand All @@ -74,7 +74,7 @@ const invoicesWithBoostagram: Props = {
totalAmountFiat: "$13.02",
preimage: "",
title: "lambo lambo",
date: "4 days ago",
timeAgo: "4 days ago",
},
{
id: "lnbcrt888880n1p3tad30pp56j6g34wctydrfx4wwdwj3schell8uqug6jnlehlkpw02mdfd9wlqdq0v36k6urvd9hxwuccqzpgxqyz5vqsp5995q4egstsvnyetwvpax6jw8q0fnn4tyz3gp35k3yex29emhsylq9qyyssq0yxpx6peyn4vsepwj3l68w9sc5dqnkt07zff6aw4kqvcfs0fpu4jpfh929w6vqrgtjfkmrlwghq4s9t4mnwrh4dlkm6wjem5uq8eu4gpwqln0j",
Expand All @@ -84,7 +84,7 @@ const invoicesWithBoostagram: Props = {
totalAmountFiat: "$17.36",
preimage: "",
title: "dumplings",
date: "5 days ago",
timeAgo: "5 days ago",
boostagram: {
app_name: "Fountain",
name: "Friedemann",
Expand Down
47 changes: 39 additions & 8 deletions src/app/components/TransactionsTable/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import Loading from "@components/Loading";
import { PopiconsArrowDownSolid, PopiconsArrowUpSolid } from "@popicons/react";
import {
PopiconsArrowDownSolid,
PopiconsArrowUpSolid,
PopiconsXSolid,
} from "@popicons/react";

import { useState } from "react";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -60,25 +64,50 @@ export default function TransactionsTable({
<div className="flex gap-3">
<div className="flex items-center">
{type == "outgoing" ? (
<div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full w-8 h-8">
<PopiconsArrowUpSolid className="w-5 h-5 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
</div>
tx.state === "pending" ? (
<div className="flex justify-center items-center bg-blue-100 dark:bg-sky-950 rounded-full w-8 h-8 animate-pulse">
<PopiconsArrowUpSolid className="w-5 h-5 rotate-45 text-blue-500 dark:text-sky-500 stroke-[1px] stroke-blue-500 dark:stroke-sky-500" />
</div>
) : tx.state === "failed" ? (
<div className="flex justify-center items-center bg-red-100 dark:bg-rose-950 rounded-full w-8 h-8">
<PopiconsXSolid className="w-5 h-5 text-red-500 dark:text-rose-500 stroke-[1px] stroke-red-500 dark:stroke-rose-500" />
</div>
) : (
<div className="flex justify-center items-center bg-orange-100 dark:bg-amber-950 rounded-full w-8 h-8">
<PopiconsArrowUpSolid className="w-5 h-5 text-orange-500 dark:text-amber-500 stroke-[1px] stroke-orange-500 dark:stroke-amber-500" />
</div>
)
) : (
<div className="flex justify-center items-center bg-green-100 dark:bg-emerald-950 rounded-full w-8 h-8">
<PopiconsArrowDownSolid className="w-5 h-5 text-green-500 dark:text-emerald-500 stroke-[1px] stroke-green-400 dark:stroke-emerald-500" />
<PopiconsArrowDownSolid className="w-5 h-5 text-green-500 dark:text-teal-500 stroke-[1px] stroke-green-500 dark:stroke-teal-500" />
</div>
)}
</div>
<div className="overflow-hidden mr-3">
<div className="text-sm font-medium text-black truncate dark:text-white">
<p className="truncate">
<p
className={classNames(
"truncate",
tx.state == "pending" && "animate-pulse"
)}
>
{tx.title ||
tx.boostagram?.message ||
(type == "incoming" ? t("received") : t("sent"))}
(type == "incoming"
? t("received")
: t(
tx.state === "settled"
? "sent"
: tx.state === "pending"
? "sending"
: tx.state === "failed"
? "failed"
: "sent"
))}
</p>
</div>
<p className="text-xs text-gray-400 dark:text-neutral-500">
{tx.date}
{tx.timeAgo}
</p>
</div>
<div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
Expand All @@ -88,6 +117,8 @@ export default function TransactionsTable({
"text-sm",
type == "incoming"
? "text-green-600 dark:text-emerald-500"
: tx.state == "failed"
? "text-red-600 dark:text-rose-500"
: "text-orange-600 dark:text-amber-600"
)}
>
Expand Down
7 changes: 4 additions & 3 deletions src/app/hooks/useTransactions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,14 @@ export const useTransactions = () => {
const getTransactionsResponse = await api.getTransactions({
limit,
});

const transactions = getTransactionsResponse.transactions.map(
(transaction) => ({
...transaction,
title: transaction.memo,
date: dayjs(transaction.settleDate).fromNow(),
timestamp: transaction.settleDate,
timeAgo: dayjs(
transaction.settleDate || transaction.creationDate
).fromNow(),
timestamp: transaction.settleDate || transaction.creationDate,
})
);

Expand Down
80 changes: 18 additions & 62 deletions src/app/screens/Home/DefaultView/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ const DefaultView: FC<Props> = (props) => {
const [isBlockedUrl, setIsBlockedUrl] = useState<boolean>(false);
const [currentAccount, setCurrentAccount] = useState<GetAccountRes>();
const [nostrPublicKey, setNostrPublicKey] = useState("");
const [hasSeenInfoBanner, setHasSeenInfoBanner] = useState<boolean>(true);

const { transactions, isLoadingTransactions, loadTransactions } =
useTransactions();
Expand Down Expand Up @@ -85,6 +86,8 @@ const DefaultView: FC<Props> = (props) => {
const userAccount = await api.getAccount();
const nostrPrivateKey = await api.nostr.getPrivateKey(userAccount.id);

setHasSeenInfoBanner(userAccount.hasSeenInfoBanner);

setNostrPublicKey(
nostrPrivateKey ? await nostr.derivePublicKey(nostrPrivateKey) : ""
);
Expand Down Expand Up @@ -176,41 +179,26 @@ const DefaultView: FC<Props> = (props) => {
</Alert>
)}

{account?.sharedNode && (
<Alert type="info">
<div className="flex items-center gap-2">
<div className="shrink-0">
<PopiconsCircleExclamationLine className="w-5 h-5" />
</div>
<span className="text-sm">
<Trans
i18nKey={"default_view.using_shared_node"}
t={t}
components={[
// eslint-disable-next-line react/jsx-key
<Hyperlink
className="underline"
href="https://getalby.com/node/embrace_albyhub"
target="_blank"
rel="noopener nofollow"
/>,
]}
/>
</span>
</div>
</Alert>
)}

{account?.usingFeeCredits && (
<Alert type="info">
{(account?.usingFeeCredits || account?.nodeRequired) &&
!hasSeenInfoBanner ? (
<Alert
type="info"
showClose
onClose={async () => {
await api.editAccount(account.id, {
hasSeenInfoBanner: true,
});
setHasSeenInfoBanner(true);
}}
>
<div className="flex items-center gap-2">
<div className="shrink-0">
<PopiconsCircleExclamationLine className="w-5 h-5" />
</div>
<span className="text-sm">
<Trans
i18nKey={"default_view.using_fee_credits"}
t={t}
i18nKey={"setup_wallet"}
t={tCommon}
values={{
max_account_balance: getFormattedSats(
account?.limits?.max_account_balance || 0
Expand All @@ -220,39 +208,7 @@ const DefaultView: FC<Props> = (props) => {
// eslint-disable-next-line react/jsx-key
<Hyperlink
className="underline"
href="https://getalby.com/onboarding/node/new"
target="_blank"
rel="noopener nofollow"
/>,
// eslint-disable-next-line react/jsx-key
<Hyperlink
className="underline"
href="https://guides.getalby.com/user-guide/alby-account-and-browser-extension/alby-account/faqs-alby-account/what-are-fee-credits-in-my-alby-account"
target="_blank"
rel="noopener nofollow"
/>,
]}
/>
</span>
</div>
</Alert>
)}

{account?.nodeRequired ? (
<Alert type="info">
<div className="flex items-center gap-2">
<div className="shrink-0">
<PopiconsCircleExclamationLine className="w-5 h-5" />
</div>
<span className="text-sm">
<Trans
i18nKey={"node_required"}
t={tCommon}
components={[
// eslint-disable-next-line react/jsx-key
<Hyperlink
className="underline"
href="https://getalby.com/onboarding/node/new"
href="https://getalby.com/node/embrace_albyhub"
target="_blank"
rel="noopener nofollow"
/>,
Expand Down
Loading

0 comments on commit 24571c1

Please sign in to comment.