mirror of
https://github.com/haveno-dex/haveno-ui.git
synced 2025-07-01 17:36:46 -04:00
250d742d48
- wired node settings to daemon and storage - updated tests and storybook - refactored for simplicity and code quality --- Reviewed-by: localredhead
85 lines
2.3 KiB
TypeScript
85 lines
2.3 KiB
TypeScript
// =============================================================================
|
|
// Copyright 2022 Haveno
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
// =============================================================================
|
|
|
|
import { useMemo } from "react";
|
|
import {
|
|
Box,
|
|
createStyles,
|
|
Group,
|
|
Stack,
|
|
Text,
|
|
UnstyledButton,
|
|
} from "@mantine/core";
|
|
import type { PaymentAccount } from "haveno-ts";
|
|
import { ReactComponent as MenuIcon } from "@assets/ellipsis.svg";
|
|
import { HEIGHT, WIDTH } from "./_constants";
|
|
import { BodyText } from "@atoms/Typography";
|
|
import {
|
|
getPaymentAccountLogo,
|
|
getPaymentAccountName,
|
|
getPaymentAccountNumber,
|
|
} from "@src/utils/paymentAccount";
|
|
|
|
interface PaymentMethodCardProps {
|
|
data: PaymentAccount;
|
|
}
|
|
|
|
export function PaymentMethodCard(props: PaymentMethodCardProps) {
|
|
const { data } = props;
|
|
const { classes } = useStyles();
|
|
|
|
const Logo = useMemo(() => getPaymentAccountLogo(data), [data]);
|
|
|
|
return (
|
|
<Box className={classes.card}>
|
|
<Stack>
|
|
<Group position="apart">
|
|
<Group>
|
|
<Logo />
|
|
<Text className={classes.name}>{getPaymentAccountName(data)}</Text>
|
|
</Group>
|
|
<UnstyledButton>
|
|
<MenuIcon className={classes.menuIcon} />
|
|
</UnstyledButton>
|
|
</Group>
|
|
<BodyText heavy sx={{ wordBreak: "break-word" }}>
|
|
{getPaymentAccountNumber(data)}
|
|
</BodyText>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
card: {
|
|
background: theme.colors.white[0],
|
|
border: `solid 1px ${theme.colors.gray[2]}`,
|
|
borderRadius: "0.625rem",
|
|
height: HEIGHT,
|
|
padding: "1.25rem",
|
|
width: WIDTH,
|
|
},
|
|
logo: {
|
|
height: "1.75rem",
|
|
width: "1.75rem",
|
|
},
|
|
name: {
|
|
color: theme.colors.gray[6],
|
|
},
|
|
menuIcon: {
|
|
width: "1rem",
|
|
},
|
|
}));
|