({
return (
|
{value === true ? (
-
+
) : (
value
)}
diff --git a/packages/ui/src/components/CurrencyAmount.tsx b/packages/ui/src/components/CurrencyAmount.tsx
index 17368d9fe..4854b3acc 100644
--- a/packages/ui/src/components/CurrencyAmount.tsx
+++ b/packages/ui/src/components/CurrencyAmount.tsx
@@ -26,6 +26,7 @@ type CurrencyAmountProps = {
includeEstimatedIndicator?: boolean;
fullPrecision?: boolean | undefined;
typography?: PartialSimpleTypographyProps;
+ centsPerBtc?: number;
};
export function CurrencyAmount({
@@ -38,10 +39,14 @@ export function CurrencyAmount({
id,
ml = 0,
typography,
+ centsPerBtc,
}: CurrencyAmountProps) {
const unit = displayUnit;
- const amountMap = isCurrencyMap(amount) ? amount : mapCurrencyAmount(amount);
+ const amountMap = isCurrencyMap(amount)
+ ? amount
+ : mapCurrencyAmount(amount, centsPerBtc);
+
const value = amountMap[unit];
const defaultFormattedNumber = amountMap.formatted[unit];
diff --git a/packages/ui/src/components/Flex.tsx b/packages/ui/src/components/Flex.tsx
index 985acee6f..d9afa76c6 100644
--- a/packages/ui/src/components/Flex.tsx
+++ b/packages/ui/src/components/Flex.tsx
@@ -3,28 +3,52 @@ import { type ElementType, type ReactNode } from "react";
type FlexProps = {
center?: boolean | undefined;
+ justify?: "center" | "flex-start" | "flex-end" | "space-between" | undefined;
+ align?: "center" | "flex-start" | "flex-end" | "space-between" | undefined;
children?: ReactNode;
as?: ElementType | undefined;
+ column?: boolean | undefined;
+ onClick?: (() => void) | undefined;
};
-export function Flex({ center = false, children, as = "div" }: FlexProps) {
+export function Flex({
+ center = false,
+ justify: justifyProp,
+ align: alignProp,
+ column = false,
+ children,
+ onClick,
+ as = "div",
+}: FlexProps) {
+ const justify = justifyProp ? justifyProp : center ? "center" : "flex-start";
+ const align = alignProp ? alignProp : center ? "center" : "flex-start";
+
return (
-
+
{children}
);
}
type StyledFlexProps = {
- center: boolean;
+ justify: NonNullable;
+ align: NonNullable;
+ column: boolean;
+ cursorProp: "pointer" | "initial" | "unset";
};
-const StyledFlex = styled.div`
+const StyledFlex = styled.div`
display: flex;
- ${({ center }: StyledFlexProps) =>
- center &&
- `
- justify-content: center;
- align-items: center;
- `}
+
+ ${({ column }) => column && `flex-direction: column;`}
+ ${({ justify }) => `justify-content: ${justify};`}
+ ${({ align }) => `align-items: ${align};`}
+ ${({ cursorProp }) => `cursor: ${cursorProp};`}
`;
diff --git a/packages/ui/src/components/IconWithCircleBackground.tsx b/packages/ui/src/components/IconWithCircleBackground.tsx
index f7bb58b26..ebcdf83c1 100644
--- a/packages/ui/src/components/IconWithCircleBackground.tsx
+++ b/packages/ui/src/components/IconWithCircleBackground.tsx
@@ -1,31 +1,55 @@
import styled from "@emotion/styled";
+import { Link } from "../router.js";
import { getColor } from "../styles/themes.js";
+import { type NewRoutesType } from "../types/index.js";
import { Flex } from "./Flex.js";
import { Icon } from "./Icon/Icon.js";
+import { type IconName } from "./Icon/types.js";
+
+type IconWidth = 40 | 16.5;
type IconWithCircleBackgroundProps = {
- iconName?:
- | "WarningSign"
- | "Envelope"
- | "Bank"
- | "ReceiptBill"
- | "ChevronLeft";
+ iconName?: IconName;
+ iconWidth?: IconWidth | undefined;
+ to?: NewRoutesType | undefined;
+ onClick?: () => void;
};
export function IconWithCircleBackground({
iconName = "WarningSign",
+ iconWidth = 40,
+ to,
+ onClick,
}: IconWithCircleBackgroundProps) {
- return (
-
-
-
+ const content = (
+
+
+
);
+ return to ? {content} : content;
}
-const StyledIconWithCircleBackground = styled.div`
+type StyledIconWithCircleBackgroundProps = {
+ size: IconWidth;
+};
+
+const StyledIconWithCircleBackground = styled.div`
background-color: ${({ theme }) => getColor(theme, "grayBlue94")};
border-radius: 50%;
- padding: 20px;
+ padding: ${({ size }) => getPadding(size)}px;
+ display: flex;
+ justify-content: center;
+ ${({ size }) =>
+ `width: ${size + getPadding(size) * 2}px; height: ${
+ size + getPadding(size) * 2
+ }px;`}
`;
+
+function getPadding(size: IconWidth) {
+ if (size === 40) {
+ return 20;
+ }
+ return 16;
+}
diff --git a/packages/ui/src/components/QRReaderButton.tsx b/packages/ui/src/components/QRReaderButton.tsx
index 9275d80b3..a7117e2e2 100644
--- a/packages/ui/src/components/QRReaderButton.tsx
+++ b/packages/ui/src/components/QRReaderButton.tsx
@@ -48,7 +48,7 @@ function QRReaderOverlay({
-
+
{captureModeTitle ? {captureModeTitle} : null}
diff --git a/packages/ui/src/components/TextButton.tsx b/packages/ui/src/components/TextButton.tsx
index 4980f6141..38839a9f7 100644
--- a/packages/ui/src/components/TextButton.tsx
+++ b/packages/ui/src/components/TextButton.tsx
@@ -51,7 +51,7 @@ export function TextButton({
let rightIconProp = rightIcon;
if (typeof rightIcon === "undefined" && typeof leftIcon === "undefined") {
rightIconProp = {
- name: "RightArrow",
+ name: "ArrowRight",
};
}
diff --git a/packages/ui/src/icons/LeftArrow.tsx b/packages/ui/src/icons/ArrowLeft.tsx
similarity index 93%
rename from packages/ui/src/icons/LeftArrow.tsx
rename to packages/ui/src/icons/ArrowLeft.tsx
index 374b18e74..e63dc23c9 100644
--- a/packages/ui/src/icons/LeftArrow.tsx
+++ b/packages/ui/src/icons/ArrowLeft.tsx
@@ -1,6 +1,6 @@
// Copyright ©, 2022, Lightspark Group, Inc. - All Rights Reserved
-export function LeftArrow() {
+export function ArrowLeft() {
return (
+ );
+}
diff --git a/packages/ui/src/icons/ArrowUpRightCircleFill.tsx b/packages/ui/src/icons/ArrowUpRightCircleFill.tsx
index 3b7cf538b..4dd47c0b5 100644
--- a/packages/ui/src/icons/ArrowUpRightCircleFill.tsx
+++ b/packages/ui/src/icons/ArrowUpRightCircleFill.tsx
@@ -13,7 +13,7 @@ export function ArrowUpRightCircleFill() {
fillRule="evenodd"
clipRule="evenodd"
d="M20 1.25C30.3553 1.25 38.75 9.64468 38.75 20C38.75 30.3553 30.3553 38.75 20 38.75C9.64468 38.75 1.25 30.3553 1.25 20C1.25 9.64468 9.64468 1.25 20 1.25ZM15.4392 12.4122C14.8869 12.4122 14.4392 12.8599 14.4392 13.4122C14.4392 13.9644 14.8869 14.4122 15.4392 14.4122H24.1736L12.7051 25.8807C12.3146 26.2713 12.3146 26.9044 12.7051 27.2949C13.0956 27.6855 13.7288 27.6855 14.1193 27.2949L25.5879 15.8263V24.5608C25.5879 25.1131 26.0356 25.5608 26.5879 25.5608C27.1402 25.5608 27.5879 25.1131 27.5879 24.5608V13.4122C27.5879 12.8599 27.1402 12.4122 26.5879 12.4122H15.4392Z"
- fill="black"
+ fill="currentColor"
/>
);
diff --git a/packages/ui/src/icons/TwoArrowsDown.tsx b/packages/ui/src/icons/ArrowsDown.tsx
similarity index 93%
rename from packages/ui/src/icons/TwoArrowsDown.tsx
rename to packages/ui/src/icons/ArrowsDown.tsx
index 737259a3d..e04cd5b0a 100644
--- a/packages/ui/src/icons/TwoArrowsDown.tsx
+++ b/packages/ui/src/icons/ArrowsDown.tsx
@@ -1,4 +1,4 @@
-export function TwoArrowsDown() {
+export function ArrowsDown() {
return (
|