diff --git a/apps/web/src/components/AccountTile/AccountTileIcon.tsx b/apps/web/src/components/AccountTile/AccountTileIcon.tsx
index 375ec9b084..3d4114d342 100644
--- a/apps/web/src/components/AccountTile/AccountTileIcon.tsx
+++ b/apps/web/src/components/AccountTile/AccountTileIcon.tsx
@@ -13,7 +13,13 @@ import {
} from "../../assets/icons";
import { useColor } from "../../styles/useColor";
-export const AccountTileIcon = ({ account }: { account: ImplicitAccount }) => {
+export const AccountTileIcon = ({
+ size = 30,
+ account,
+}: {
+ size: number;
+ account: ImplicitAccount;
+}) => {
const color = useColor();
switch (account.type) {
@@ -22,7 +28,7 @@ export const AccountTileIcon = ({ account }: { account: ImplicitAccount }) => {
case "mnemonic":
return (
-
+
);
case "social": {
diff --git a/apps/web/src/components/AccountTile/AccountTileWrapper.tsx b/apps/web/src/components/AccountTile/AccountTileWrapper.tsx
index 9fee443faa..c734263ab5 100644
--- a/apps/web/src/components/AccountTile/AccountTileWrapper.tsx
+++ b/apps/web/src/components/AccountTile/AccountTileWrapper.tsx
@@ -3,15 +3,25 @@ import { type PropsWithChildren } from "react";
import { useColor } from "../../styles/useColor";
-export const AccountTileWrapper = ({ children, ...props }: PropsWithChildren) => {
+export const AccountTileWrapper = ({
+ size = "sm",
+ children,
+ ...props
+}: PropsWithChildren> & {
+ size: "xs" | "sm";
+}) => {
const color = useColor();
+ const sizes = {
+ xs: "30px",
+ sm: "48px",
+ };
return (
{children}
diff --git a/apps/web/src/components/AddressAutocomplete/AddressAutocomplete.tsx b/apps/web/src/components/AddressAutocomplete/AddressAutocomplete.tsx
index 4d3eabe990..a79039e52d 100644
--- a/apps/web/src/components/AddressAutocomplete/AddressAutocomplete.tsx
+++ b/apps/web/src/components/AddressAutocomplete/AddressAutocomplete.tsx
@@ -130,14 +130,16 @@ export const AddressAutocomplete = >({
>
{keepValid ? (
) : (
-
+
)}
diff --git a/apps/web/src/components/AddressAutocomplete/Suggestions.tsx b/apps/web/src/components/AddressAutocomplete/Suggestions.tsx
index 6ee92a1516..32f1a4953a 100644
--- a/apps/web/src/components/AddressAutocomplete/Suggestions.tsx
+++ b/apps/web/src/components/AddressAutocomplete/Suggestions.tsx
@@ -26,10 +26,11 @@ export const Suggestions = ({
maxHeight="300px"
marginTop="8px"
marginLeft={0}
- background={color("300")}
+ background={color("white")}
border="1px solid"
borderColor={color("400")}
borderRadius="8px"
+ transform={{ base: "translateY(calc(-100% - 66px))", lg: "unset" }}
data-testid="suggestions-list"
listStyleType="none"
>
@@ -37,7 +38,6 @@ export const Suggestions = ({
{
// onMouseDown is the only way for this to fire before the onBlur callback of the Input
@@ -46,15 +46,14 @@ export const Suggestions = ({
}}
>
diff --git a/apps/web/src/components/AddressTile/AddressTile.tsx b/apps/web/src/components/AddressTile/AddressTile.tsx
index 7a475ec499..fef21881bb 100644
--- a/apps/web/src/components/AddressTile/AddressTile.tsx
+++ b/apps/web/src/components/AddressTile/AddressTile.tsx
@@ -18,11 +18,18 @@ import { CopyAddressButton } from "../CopyAddressButton";
* @param flexProps - Defines component style.
* @param hideBalance - If true, balance will not be displayed.
*/
-export const AddressTile = ({ address, ...flexProps }: { address: Address } & FlexProps) => {
+export const AddressTile = ({
+ size = "sm",
+ address,
+ ...flexProps
+}: { address: Address; size?: "xs" | "sm" } & FlexProps) => {
const addressKind = useAddressKind(address);
const color = useColor();
const balance = useGetAccountBalance()(address.pkh);
+ const isSmall = size === "xs";
+
+ console.log(isSmall);
return (
-
-
-
+
+
+
-
- {addressKind.label}
+
+
+
+ {addressKind.label}
+
+
-
+
{balance !== undefined && prettyTezAmount(balance)}
diff --git a/apps/web/src/components/AddressTile/AddressTileIcon.tsx b/apps/web/src/components/AddressTile/AddressTileIcon.tsx
index 62225ac4d0..fa9535ab71 100644
--- a/apps/web/src/components/AddressTile/AddressTileIcon.tsx
+++ b/apps/web/src/components/AddressTile/AddressTileIcon.tsx
@@ -23,18 +23,32 @@ export const AddressTileIcon = memo(
const account = getAccount(addressKind.pkh);
const color = useColor();
+ const sizes = {
+ xs: 20,
+ sm: 30,
+ };
+
const baseIconProps = {
borderRadius: "4px",
color: color("500"),
};
if (account) {
- return ;
+ return (
+ ]}
+ />
+ );
}
let sizeInPx;
let padding;
switch (size) {
+ case "xs":
+ sizeInPx = "20px";
+ padding = "4px";
+ break;
case "sm":
sizeInPx = "30px";
padding = "5px";
diff --git a/apps/web/src/components/AddressTile/AddressTileIconSize.ts b/apps/web/src/components/AddressTile/AddressTileIconSize.ts
index 7116371bbf..398dcc37db 100644
--- a/apps/web/src/components/AddressTile/AddressTileIconSize.ts
+++ b/apps/web/src/components/AddressTile/AddressTileIconSize.ts
@@ -1 +1 @@
-export type AddressTileIconSize = "sm" | "lg";
+export type AddressTileIconSize = "xs" | "sm" | "lg";
diff --git a/apps/web/src/components/CopyAddressButton/CopyAddressButton.tsx b/apps/web/src/components/CopyAddressButton/CopyAddressButton.tsx
index bebee4c23c..fe831ab7f0 100644
--- a/apps/web/src/components/CopyAddressButton/CopyAddressButton.tsx
+++ b/apps/web/src/components/CopyAddressButton/CopyAddressButton.tsx
@@ -7,7 +7,13 @@ import { useColor } from "../../styles/useColor";
import { CopyButton } from "../CopyButton/CopyButton";
export const CopyAddressButton = memo(
- ({ address, isLong = false, ...props }: { address: RawPkh; isLong?: boolean } & ButtonProps) => {
+ ({
+ address,
+ fontSize = "14px",
+ isLong = false,
+ isCopyDisabled = false,
+ ...props
+ }: { address: RawPkh; isLong?: boolean; isCopyDisabled?: boolean } & ButtonProps) => {
const color = useColor();
return (
@@ -15,15 +21,17 @@ export const CopyAddressButton = memo(
left="-8px"
height="auto"
padding="4px 8px"
+ fontSize={fontSize}
aria-label="Copy Address"
+ isCopyDisabled={isCopyDisabled}
variant="ghost"
{...props}
value={address}
>
-
+
{isLong ? address : formatPkh(address)}
-
+ {isCopyDisabled || }
);
}
diff --git a/apps/web/src/components/CopyButton/CopyButton.tsx b/apps/web/src/components/CopyButton/CopyButton.tsx
index 79f09902b8..98063e2d26 100644
--- a/apps/web/src/components/CopyButton/CopyButton.tsx
+++ b/apps/web/src/components/CopyButton/CopyButton.tsx
@@ -16,20 +16,25 @@ import { useColor } from "../../styles/useColor";
export const CopyButton = ({
value,
children,
+ isCopyDisabled,
...props
-}: PropsWithChildren<{ value: string } & ButtonProps>) => {
+}: PropsWithChildren<{ value: string; isCopyDisabled: boolean } & ButtonProps>) => {
const color = useColor();
const { isOpen, onOpen, onClose } = useDisclosure();
const onClick = (event: MouseEvent) => {
+ if (isCopyDisabled) {
+ return;
+ }
+
event.stopPropagation();
setTimeout(onClose, 1000);
return navigator.clipboard.writeText(value);
};
return (
-
+