Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 23x 307x 307x 307x 1145x 307x 153x 307x 307x 1081x 2x 69x | import React from "react";
import { useSuspenseQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { suspendedFallback } from "~app/components/suspense-wrapper";
import { useLocale } from "~app/hooks/use-locale";
import { getCurrencySymbol } from "~app/utils/currency";
import type { CurrencyCode } from "~app/utils/currency";
import { useTRPC } from "~app/utils/trpc";
import { Button, ButtonGroup } from "~components/button";
import { Skeleton } from "~components/skeleton";
import type { PeerId } from "~db/ids";
type Props = {
selectedCurrencyCode?: CurrencyCode;
onSelectOther: () => void;
peerId: PeerId;
setSelectedCurrencyCode: (currencyCode: CurrencyCode) => void;
};
export const CurrenciesGroup = suspendedFallback<Props>(
({
selectedCurrencyCode,
setSelectedCurrencyCode,
onSelectOther,
peerId,
}) => {
const { t } = useTranslation("debts");
const trpc = useTRPC();
const { data: debts } = useSuspenseQuery(
trpc.debts.getAllPeer.queryOptions({ peerId }),
);
const nonResolvedDebts = debts.items.filter((element) => element.sum !== 0);
const isSelectedOther =
selectedCurrencyCode !== undefined &&
!nonResolvedDebts.some(
(debt) => debt.currencyCode === selectedCurrencyCode,
);
const locale = useLocale();
return (
<ButtonGroup
color="primary"
className="flex-wrap"
testID="currencies-group"
>
{nonResolvedDebts.map((debt) => (
<Button
key={debt.currencyCode}
variant={
selectedCurrencyCode === debt.currencyCode ? undefined : "ghost"
}
onPress={() => setSelectedCurrencyCode(debt.currencyCode)}
testID="currency-button"
>
{getCurrencySymbol(locale, debt.currencyCode)}
</Button>
))}
<Button
variant={isSelectedOther ? undefined : "ghost"}
onPress={onSelectOther}
testID="currency-button"
>
{isSelectedOther
? getCurrencySymbol(locale, selectedCurrencyCode)
: t("exchange.otherButton")}
</Button>
</ButtonGroup>
);
},
<ButtonGroup
color="primary"
className="flex-wrap"
testID="currencies-group-skeleton"
>
{Array.from({ length: 3 }).map((_, index) => (
// oxlint-disable-next-line react/no-array-index-key
<Button key={index} variant="ghost">
<Skeleton className="h-6 w-12 rounded-md" />
</Button>
))}
</ButtonGroup>,
);
|