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 { AiOutlinePlusCircle } from "react-icons/ai";
|
||||||
import OverlayContext from "../src/core/providers/OverlayProvider/context";
|
import OverlayContext from "../src/core/providers/OverlayProvider/context";
|
||||||
import { MODAL_TYPES } from "../src/core/providers/OverlayProvider/constants";
|
import { MODAL_TYPES } from "../src/core/providers/OverlayProvider/constants";
|
||||||
|
import Scrollable from "../src/components/Scrollable";
|
||||||
const Subscriptions = () => {
|
const Subscriptions = () => {
|
||||||
const { subscriptionsCache } = useSubscriptions();
|
const { subscriptionsCache } = useSubscriptions();
|
||||||
const modal = useContext(OverlayContext);
|
const modal = useContext(OverlayContext);
|
||||||
|
|
@ -37,64 +37,66 @@ const Subscriptions = () => {
|
||||||
modal.toggleModal({ type: MODAL_TYPES.NEW_SUBSCRIPTON });
|
modal.toggleModal({ type: MODAL_TYPES.NEW_SUBSCRIPTON });
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<Box w="100%" px="7%" pt={2}>
|
<Scrollable>
|
||||||
{subscriptionsCache.isLoading ? (
|
<Box w="100%" px="7%" pt={2}>
|
||||||
<Center>
|
{subscriptionsCache.isLoading ? (
|
||||||
<Spinner
|
<Center>
|
||||||
hidden={false}
|
<Spinner
|
||||||
my={8}
|
hidden={false}
|
||||||
size="lg"
|
my={8}
|
||||||
color="blue.500"
|
size="lg"
|
||||||
thickness="4px"
|
color="blue.500"
|
||||||
speed="1.5s"
|
thickness="4px"
|
||||||
/>
|
speed="1.5s"
|
||||||
</Center>
|
/>
|
||||||
) : (
|
</Center>
|
||||||
<ScaleFade in>
|
) : (
|
||||||
<Heading {...headingStyle}> My Subscriptions </Heading>
|
<ScaleFade in>
|
||||||
<Flex
|
<Heading {...headingStyle}> My Subscriptions </Heading>
|
||||||
mt={4}
|
|
||||||
overflow="initial"
|
|
||||||
maxH="unset"
|
|
||||||
height="100%"
|
|
||||||
direction="column"
|
|
||||||
>
|
|
||||||
<Flex
|
<Flex
|
||||||
h="3rem"
|
mt={4}
|
||||||
w="100%"
|
overflow="initial"
|
||||||
bgColor="blue.50"
|
maxH="unset"
|
||||||
borderTopRadius="xl"
|
height="100%"
|
||||||
justifyContent="flex-end"
|
direction="column"
|
||||||
alignItems="center"
|
|
||||||
>
|
>
|
||||||
{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
|
<Button
|
||||||
onClick={() => newSubscriptionClicked(true)}
|
onClick={() => newSubscriptionClicked(false)}
|
||||||
mr={8}
|
mr={8}
|
||||||
colorScheme="green"
|
colorScheme="blue"
|
||||||
variant="solid"
|
variant="solid"
|
||||||
size="sm"
|
size="sm"
|
||||||
rightIcon={<AiOutlinePlusCircle />}
|
rightIcon={<AiOutlinePlusCircle />}
|
||||||
>
|
>
|
||||||
Add for free
|
Add new
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
</Flex>
|
||||||
<Button
|
<SubscriptionsList data={subscriptionsCache.data} />
|
||||||
onClick={() => newSubscriptionClicked(false)}
|
|
||||||
mr={8}
|
|
||||||
colorScheme="blue"
|
|
||||||
variant="solid"
|
|
||||||
size="sm"
|
|
||||||
rightIcon={<AiOutlinePlusCircle />}
|
|
||||||
>
|
|
||||||
Add new
|
|
||||||
</Button>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
<SubscriptionsList data={subscriptionsCache.data} />
|
</ScaleFade>
|
||||||
</Flex>
|
)}
|
||||||
</ScaleFade>
|
</Box>
|
||||||
)}
|
</Scrollable>
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,10 @@ import {
|
||||||
import { BiCopy } from "react-icons/bi";
|
import { BiCopy } from "react-icons/bi";
|
||||||
|
|
||||||
const CopyButton = (props) => {
|
const CopyButton = (props) => {
|
||||||
|
console.log(props.copyString);
|
||||||
const children = props.children ? props.children : "";
|
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);
|
const { onCopy } = useClipboard(copyString);
|
||||||
|
|
||||||
|
|
@ -31,7 +33,7 @@ const CopyButton = (props) => {
|
||||||
icon={<BiCopy />}
|
icon={<BiCopy />}
|
||||||
colorScheme="orange"
|
colorScheme="orange"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size={props.size ?? "sm"}
|
||||||
/>
|
/>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
<PopoverContent
|
<PopoverContent
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,17 @@ import {
|
||||||
Image,
|
Image,
|
||||||
EditablePreview,
|
EditablePreview,
|
||||||
Button,
|
Button,
|
||||||
|
useMediaQuery,
|
||||||
|
Accordion,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionButton,
|
||||||
|
AccordionPanel,
|
||||||
|
AccordionIcon,
|
||||||
|
Box,
|
||||||
|
Flex,
|
||||||
|
Text,
|
||||||
|
Spacer,
|
||||||
|
Stack,
|
||||||
} from "@chakra-ui/react";
|
} from "@chakra-ui/react";
|
||||||
import { CheckIcon, DeleteIcon } from "@chakra-ui/icons";
|
import { CheckIcon, DeleteIcon } from "@chakra-ui/icons";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
|
|
@ -29,6 +40,7 @@ const mapper = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const SubscriptionsList = ({ emptyCTA }) => {
|
const SubscriptionsList = ({ emptyCTA }) => {
|
||||||
|
const [isLargerThan530px] = useMediaQuery(["(min-width: 530px)"]);
|
||||||
const overlay = useContext(OverlayContext);
|
const overlay = useContext(OverlayContext);
|
||||||
const {
|
const {
|
||||||
subscriptionsCache,
|
subscriptionsCache,
|
||||||
|
|
@ -44,121 +56,289 @@ const SubscriptionsList = ({ emptyCTA }) => {
|
||||||
updateSubscription.mutate(data);
|
updateSubscription.mutate(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const cellProps = {
|
||||||
|
px: ["16px", "8px", "16px"],
|
||||||
|
};
|
||||||
|
|
||||||
if (
|
if (
|
||||||
subscriptionsCache.data &&
|
subscriptionsCache.data &&
|
||||||
subscriptionsCache.data.subscriptions.length > 0
|
subscriptionsCache.data.subscriptions.length > 0
|
||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<Table
|
<>
|
||||||
borderColor="gray.200"
|
{isLargerThan530px && (
|
||||||
borderWidth="1px"
|
<Table
|
||||||
variant="simple"
|
borderColor="gray.200"
|
||||||
colorScheme="blue"
|
borderWidth="1px"
|
||||||
justifyContent="center"
|
variant="simple"
|
||||||
borderBottomRadius="xl"
|
colorScheme="blue"
|
||||||
alignItems="baseline"
|
justifyContent="center"
|
||||||
h="auto"
|
borderBottomRadius="xl"
|
||||||
size="sm"
|
alignItems="baseline"
|
||||||
mt={0}
|
h="auto"
|
||||||
>
|
size="sm"
|
||||||
<Thead>
|
mt={0}
|
||||||
<Tr>
|
>
|
||||||
<Th>Token</Th>
|
<Thead>
|
||||||
<Th>Label</Th>
|
<Tr>
|
||||||
<Th>Address</Th>
|
<Th {...cellProps}>Token</Th>
|
||||||
<Th>abi</Th>
|
<Th {...cellProps}>Label</Th>
|
||||||
<Th>Color</Th>
|
<Th {...cellProps}>Address</Th>
|
||||||
<Th>Date Created</Th>
|
<Th {...cellProps}>abi</Th>
|
||||||
<Th>Actions</Th>
|
<Th {...cellProps}>Color</Th>
|
||||||
</Tr>
|
<Th {...cellProps}>Date Created</Th>
|
||||||
</Thead>
|
<Th {...cellProps}>Actions</Th>
|
||||||
<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>
|
|
||||||
</Tr>
|
</Tr>
|
||||||
);
|
</Thead>
|
||||||
})}
|
<Tbody>
|
||||||
</Tbody>
|
{subscriptionsCache.data.subscriptions.map((subscription) => {
|
||||||
</Table>
|
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 (
|
} else if (
|
||||||
subscriptionsCache.data &&
|
subscriptionsCache.data &&
|
||||||
|
|
|
||||||
Ładowanie…
Reference in New Issue