kopia lustrzana https://github.com/bugout-dev/moonstream
improved responsivness of the screen
Tim Pechersky
rodzic
0f3f4886e6
commit
c37132ab81
|
|
@ -14,7 +14,7 @@ import {
|
|||
import { AiOutlinePlusCircle } from "react-icons/ai";
|
||||
import OverlayContext from "../src/core/providers/OverlayProvider/context";
|
||||
import { MODAL_TYPES } from "../src/core/providers/OverlayProvider/constants";
|
||||
|
||||
import Scrollable from "../src/components/Scrollable";
|
||||
const Subscriptions = () => {
|
||||
const { subscriptionsCache } = useSubscriptions();
|
||||
const modal = useContext(OverlayContext);
|
||||
|
|
@ -37,64 +37,66 @@ const Subscriptions = () => {
|
|||
modal.toggleModal({ type: MODAL_TYPES.NEW_SUBSCRIPTON });
|
||||
};
|
||||
return (
|
||||
<Box w="100%" px="7%" pt={2}>
|
||||
{subscriptionsCache.isLoading ? (
|
||||
<Center>
|
||||
<Spinner
|
||||
hidden={false}
|
||||
my={8}
|
||||
size="lg"
|
||||
color="blue.500"
|
||||
thickness="4px"
|
||||
speed="1.5s"
|
||||
/>
|
||||
</Center>
|
||||
) : (
|
||||
<ScaleFade in>
|
||||
<Heading {...headingStyle}> My Subscriptions </Heading>
|
||||
<Flex
|
||||
mt={4}
|
||||
overflow="initial"
|
||||
maxH="unset"
|
||||
height="100%"
|
||||
direction="column"
|
||||
>
|
||||
<Scrollable>
|
||||
<Box w="100%" px="7%" pt={2}>
|
||||
{subscriptionsCache.isLoading ? (
|
||||
<Center>
|
||||
<Spinner
|
||||
hidden={false}
|
||||
my={8}
|
||||
size="lg"
|
||||
color="blue.500"
|
||||
thickness="4px"
|
||||
speed="1.5s"
|
||||
/>
|
||||
</Center>
|
||||
) : (
|
||||
<ScaleFade in>
|
||||
<Heading {...headingStyle}> My Subscriptions </Heading>
|
||||
<Flex
|
||||
h="3rem"
|
||||
w="100%"
|
||||
bgColor="blue.50"
|
||||
borderTopRadius="xl"
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
mt={4}
|
||||
overflow="initial"
|
||||
maxH="unset"
|
||||
height="100%"
|
||||
direction="column"
|
||||
>
|
||||
{subscriptionsCache.data?.is_free_subscription_availible && (
|
||||
<Flex
|
||||
h="3rem"
|
||||
w="100%"
|
||||
bgColor="blue.50"
|
||||
borderTopRadius="xl"
|
||||
justifyContent="flex-end"
|
||||
alignItems="center"
|
||||
>
|
||||
{subscriptionsCache.data?.is_free_subscription_availible && (
|
||||
<Button
|
||||
onClick={() => newSubscriptionClicked(true)}
|
||||
mr={8}
|
||||
colorScheme="green"
|
||||
variant="solid"
|
||||
size="sm"
|
||||
rightIcon={<AiOutlinePlusCircle />}
|
||||
>
|
||||
Add for free
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => newSubscriptionClicked(true)}
|
||||
onClick={() => newSubscriptionClicked(false)}
|
||||
mr={8}
|
||||
colorScheme="green"
|
||||
colorScheme="blue"
|
||||
variant="solid"
|
||||
size="sm"
|
||||
rightIcon={<AiOutlinePlusCircle />}
|
||||
>
|
||||
Add for free
|
||||
Add new
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
onClick={() => newSubscriptionClicked(false)}
|
||||
mr={8}
|
||||
colorScheme="blue"
|
||||
variant="solid"
|
||||
size="sm"
|
||||
rightIcon={<AiOutlinePlusCircle />}
|
||||
>
|
||||
Add new
|
||||
</Button>
|
||||
</Flex>
|
||||
<SubscriptionsList data={subscriptionsCache.data} />
|
||||
</Flex>
|
||||
<SubscriptionsList data={subscriptionsCache.data} />
|
||||
</Flex>
|
||||
</ScaleFade>
|
||||
)}
|
||||
</Box>
|
||||
</ScaleFade>
|
||||
)}
|
||||
</Box>
|
||||
</Scrollable>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@ import {
|
|||
import { BiCopy } from "react-icons/bi";
|
||||
|
||||
const CopyButton = (props) => {
|
||||
console.log(props.copyString);
|
||||
const children = props.children ? props.children : "";
|
||||
const copyString = props.prefix ? props.prefix + children : children;
|
||||
const copyString =
|
||||
props.copyString ?? (props.prefix ? props.prefix + children : children);
|
||||
|
||||
const { onCopy } = useClipboard(copyString);
|
||||
|
||||
|
|
@ -31,7 +33,7 @@ const CopyButton = (props) => {
|
|||
icon={<BiCopy />}
|
||||
colorScheme="orange"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
size={props.size ?? "sm"}
|
||||
/>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
|
|
|
|||
|
|
@ -13,6 +13,17 @@ import {
|
|||
Image,
|
||||
EditablePreview,
|
||||
Button,
|
||||
useMediaQuery,
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionButton,
|
||||
AccordionPanel,
|
||||
AccordionIcon,
|
||||
Box,
|
||||
Flex,
|
||||
Text,
|
||||
Spacer,
|
||||
Stack,
|
||||
} from "@chakra-ui/react";
|
||||
import { CheckIcon, DeleteIcon } from "@chakra-ui/icons";
|
||||
import moment from "moment";
|
||||
|
|
@ -29,6 +40,7 @@ const mapper = {
|
|||
};
|
||||
|
||||
const SubscriptionsList = ({ emptyCTA }) => {
|
||||
const [isLargerThan530px] = useMediaQuery(["(min-width: 530px)"]);
|
||||
const overlay = useContext(OverlayContext);
|
||||
const {
|
||||
subscriptionsCache,
|
||||
|
|
@ -44,121 +56,289 @@ const SubscriptionsList = ({ emptyCTA }) => {
|
|||
updateSubscription.mutate(data);
|
||||
};
|
||||
|
||||
const cellProps = {
|
||||
px: ["16px", "8px", "16px"],
|
||||
};
|
||||
|
||||
if (
|
||||
subscriptionsCache.data &&
|
||||
subscriptionsCache.data.subscriptions.length > 0
|
||||
) {
|
||||
return (
|
||||
<Table
|
||||
borderColor="gray.200"
|
||||
borderWidth="1px"
|
||||
variant="simple"
|
||||
colorScheme="blue"
|
||||
justifyContent="center"
|
||||
borderBottomRadius="xl"
|
||||
alignItems="baseline"
|
||||
h="auto"
|
||||
size="sm"
|
||||
mt={0}
|
||||
>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>Token</Th>
|
||||
<Th>Label</Th>
|
||||
<Th>Address</Th>
|
||||
<Th>abi</Th>
|
||||
<Th>Color</Th>
|
||||
<Th>Date Created</Th>
|
||||
<Th>Actions</Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{subscriptionsCache.data.subscriptions.map((subscription) => {
|
||||
const iconLink =
|
||||
subscriptionTypeIcons[subscription.subscription_type_id];
|
||||
return (
|
||||
<Tr key={`token-row-${subscription.id}`}>
|
||||
<Td>
|
||||
<Tooltip label="Ethereum blockchain" fontSize="md">
|
||||
<Image h="32px" src={iconLink} alt="pool icon" />
|
||||
</Tooltip>
|
||||
</Td>
|
||||
<Td py={0}>
|
||||
<Editable
|
||||
colorScheme="blue"
|
||||
placeholder="enter note here"
|
||||
defaultValue={subscription.label}
|
||||
onSubmit={(nextValue) =>
|
||||
updateCallback({
|
||||
id: subscription.id,
|
||||
label: nextValue,
|
||||
})
|
||||
}
|
||||
>
|
||||
<EditablePreview
|
||||
maxW="40rem"
|
||||
_placeholder={{ color: "black" }}
|
||||
/>
|
||||
<EditableInput maxW="40rem" />
|
||||
</Editable>
|
||||
</Td>
|
||||
<Td mr={4} p={0}>
|
||||
{subscription.address?.startsWith("tag") ? (
|
||||
<CopyButton>{mapper[subscription.address]}</CopyButton>
|
||||
) : (
|
||||
<CopyButton>{subscription.address}</CopyButton>
|
||||
)}
|
||||
</Td>
|
||||
<Td mr={4} p={0}>
|
||||
{subscription.abi ? (
|
||||
<CheckIcon />
|
||||
) : (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
size="xs"
|
||||
py={2}
|
||||
disabled={!subscription.address}
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.UPLOAD_ABI,
|
||||
props: { id: subscription.id },
|
||||
})
|
||||
}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
<ColorSelector
|
||||
// subscriptionId={subscription.id}
|
||||
initialColor={subscription.color}
|
||||
callback={(color) =>
|
||||
updateCallback({ id: subscription.id, color: color })
|
||||
}
|
||||
/>
|
||||
</Td>
|
||||
<Td py={0}>{moment(subscription.created_at).format("L")}</Td>
|
||||
|
||||
<Td py={0}>
|
||||
<ConfirmationRequest
|
||||
bodyMessage={"please confirm"}
|
||||
header={"Delete subscription"}
|
||||
onConfirm={() => deleteSubscription.mutate(subscription.id)}
|
||||
>
|
||||
<IconButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
colorScheme="blue"
|
||||
icon={<DeleteIcon />}
|
||||
/>
|
||||
</ConfirmationRequest>
|
||||
</Td>
|
||||
<>
|
||||
{isLargerThan530px && (
|
||||
<Table
|
||||
borderColor="gray.200"
|
||||
borderWidth="1px"
|
||||
variant="simple"
|
||||
colorScheme="blue"
|
||||
justifyContent="center"
|
||||
borderBottomRadius="xl"
|
||||
alignItems="baseline"
|
||||
h="auto"
|
||||
size="sm"
|
||||
mt={0}
|
||||
>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th {...cellProps}>Token</Th>
|
||||
<Th {...cellProps}>Label</Th>
|
||||
<Th {...cellProps}>Address</Th>
|
||||
<Th {...cellProps}>abi</Th>
|
||||
<Th {...cellProps}>Color</Th>
|
||||
<Th {...cellProps}>Date Created</Th>
|
||||
<Th {...cellProps}>Actions</Th>
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{subscriptionsCache.data.subscriptions.map((subscription) => {
|
||||
const iconLink =
|
||||
subscriptionTypeIcons[subscription.subscription_type_id];
|
||||
return (
|
||||
<Tr key={`token-row-${subscription.id}`}>
|
||||
<Td {...cellProps}>
|
||||
<Tooltip label="Ethereum blockchain" fontSize="md">
|
||||
<Image
|
||||
h={["32px", "16px", "32px", null]}
|
||||
src={iconLink}
|
||||
alt="pool icon"
|
||||
/>
|
||||
</Tooltip>
|
||||
</Td>
|
||||
<Td py={0} {...cellProps} wordBreak="break-word">
|
||||
<Editable
|
||||
colorScheme="blue"
|
||||
placeholder="enter note here"
|
||||
defaultValue={subscription.label}
|
||||
onSubmit={(nextValue) =>
|
||||
updateCallback({
|
||||
id: subscription.id,
|
||||
label: nextValue,
|
||||
})
|
||||
}
|
||||
>
|
||||
<EditablePreview
|
||||
maxW="40rem"
|
||||
_placeholder={{ color: "black" }}
|
||||
/>
|
||||
<EditableInput maxW="40rem" />
|
||||
</Editable>
|
||||
</Td>
|
||||
<Td mr={4} p={0} wordBreak="break-word" {...cellProps}>
|
||||
{subscription.address?.startsWith("tag") ? (
|
||||
<CopyButton>{mapper[subscription.address]}</CopyButton>
|
||||
) : (
|
||||
<CopyButton>{subscription.address}</CopyButton>
|
||||
)}
|
||||
</Td>
|
||||
<Td mr={4} p={0} {...cellProps}>
|
||||
{subscription.abi ? (
|
||||
<CheckIcon />
|
||||
) : (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
size="xs"
|
||||
py={2}
|
||||
disabled={!subscription.address}
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.UPLOAD_ABI,
|
||||
props: { id: subscription.id },
|
||||
})
|
||||
}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</Td>
|
||||
<Td {...cellProps}>
|
||||
<ColorSelector
|
||||
// subscriptionId={subscription.id}
|
||||
initialColor={subscription.color}
|
||||
callback={(color) =>
|
||||
updateCallback({ id: subscription.id, color: color })
|
||||
}
|
||||
/>
|
||||
</Td>
|
||||
<Td py={0} {...cellProps} wordBreak="break-word">
|
||||
{moment(subscription.created_at).format("L")}
|
||||
</Td>
|
||||
|
||||
<Td py={0} {...cellProps}>
|
||||
<ConfirmationRequest
|
||||
bodyMessage={"please confirm"}
|
||||
header={"Delete subscription"}
|
||||
onConfirm={() =>
|
||||
deleteSubscription.mutate(subscription.id)
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
colorScheme="blue"
|
||||
icon={<DeleteIcon />}
|
||||
/>
|
||||
</ConfirmationRequest>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</Tbody>
|
||||
</Table>
|
||||
)}
|
||||
{!isLargerThan530px && (
|
||||
<Accordion>
|
||||
{subscriptionsCache.data.subscriptions.map((subscription) => {
|
||||
const iconLink =
|
||||
subscriptionTypeIcons[subscription.subscription_type_id];
|
||||
return (
|
||||
<AccordionItem key={`token-row-${subscription.id}`}>
|
||||
<h2>
|
||||
<AccordionButton>
|
||||
<Stack
|
||||
direction="row"
|
||||
textAlign="left"
|
||||
alignItems="center"
|
||||
>
|
||||
<Tooltip label="Ethereum blockchain" fontSize="md">
|
||||
<Image
|
||||
h={["32px", "16px", "32px", null]}
|
||||
src={iconLink}
|
||||
alt="pool icon"
|
||||
/>
|
||||
</Tooltip>
|
||||
<Editable
|
||||
colorScheme="blue"
|
||||
placeholder="enter note here"
|
||||
defaultValue={subscription.label}
|
||||
onSubmit={(nextValue) =>
|
||||
updateCallback({
|
||||
id: subscription.id,
|
||||
label: nextValue,
|
||||
})
|
||||
}
|
||||
>
|
||||
<EditablePreview
|
||||
maxW="40rem"
|
||||
_placeholder={{ color: "black" }}
|
||||
/>
|
||||
<EditableInput maxW="40rem" />
|
||||
</Editable>
|
||||
</Stack>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
<AccordionPanel pb={4}>
|
||||
<Stack>
|
||||
<Flex
|
||||
fontSize="sm"
|
||||
placeContent="center"
|
||||
h="min-content"
|
||||
alignItems="center"
|
||||
pr={8}
|
||||
>
|
||||
<Text>Address:</Text>
|
||||
<Spacer />
|
||||
{subscription.address?.startsWith("tag") ? (
|
||||
<CopyButton
|
||||
size="xs"
|
||||
copyString={subscription.address}
|
||||
>
|
||||
{mapper[subscription.address]}
|
||||
</CopyButton>
|
||||
) : (
|
||||
<CopyButton
|
||||
size="xs"
|
||||
copyString={subscription.address}
|
||||
>
|
||||
<Text isTruncated>{subscription.address}</Text>
|
||||
</CopyButton>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex
|
||||
fontSize="sm"
|
||||
placeContent="center"
|
||||
h="min-content"
|
||||
alignItems="center"
|
||||
pr={8}
|
||||
>
|
||||
<Text>Abi:</Text>
|
||||
<Spacer />
|
||||
{subscription.abi ? (
|
||||
<CheckIcon />
|
||||
) : (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
size="xs"
|
||||
py={2}
|
||||
disabled={!subscription.address}
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.UPLOAD_ABI,
|
||||
props: { id: subscription.id },
|
||||
})
|
||||
}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
<Flex
|
||||
fontSize="sm"
|
||||
placeContent="center"
|
||||
h="min-content"
|
||||
pr={8}
|
||||
>
|
||||
<Spacer />
|
||||
<ConfirmationRequest
|
||||
bodyMessage={"please confirm"}
|
||||
header={"Delete subscription"}
|
||||
onConfirm={() =>
|
||||
deleteSubscription.mutate(subscription.id)
|
||||
}
|
||||
>
|
||||
<Button
|
||||
colorScheme="red"
|
||||
size="xs"
|
||||
py={2}
|
||||
disabled={!subscription.address}
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.UPLOAD_ABI,
|
||||
props: { id: subscription.id },
|
||||
})
|
||||
}
|
||||
leftIcon={<DeleteIcon />}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</ConfirmationRequest>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
);
|
||||
})}
|
||||
|
||||
<AccordionItem>
|
||||
<h2>
|
||||
<AccordionButton>
|
||||
<Box flex="1" textAlign="left">
|
||||
Section 2 title
|
||||
</Box>
|
||||
<AccordionIcon />
|
||||
</AccordionButton>
|
||||
</h2>
|
||||
<AccordionPanel pb={4}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
|
||||
enim ad minim veniam, quis nostrud exercitation ullamco laboris
|
||||
nisi ut aliquip ex ea commodo consequat.
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
} else if (
|
||||
subscriptionsCache.data &&
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue