kopia lustrzana https://github.com/bugout-dev/moonstream
add key change to frontend
Tim Pechersky
rodzic
5404541b8c
commit
13a8e7d11e
|
|
@ -36,7 +36,7 @@ const NewDashboard = (props) => {
|
|||
"new_dashboard",
|
||||
{
|
||||
name: "",
|
||||
subscriptions: [
|
||||
subscription_settings: [
|
||||
{
|
||||
label: "",
|
||||
abi: false,
|
||||
|
|
@ -62,11 +62,11 @@ const NewDashboard = (props) => {
|
|||
const subscriptions = useSubscriptions();
|
||||
|
||||
const [pickerItems, setPickerItems] = React.useState(
|
||||
subscriptions.subscriptionsCache.data?.subscriptions
|
||||
subscriptions.subscriptionsCache?.data?.subscriptions
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
newDashboardForm.subscriptions.forEach((element, idx) => {
|
||||
newDashboardForm.subscription_settings.forEach((element, idx) => {
|
||||
const subscription =
|
||||
subscriptions.subscriptionsCache.data?.subscriptions.find(
|
||||
(subscription_item) =>
|
||||
|
|
@ -76,10 +76,10 @@ const NewDashboard = (props) => {
|
|||
if (
|
||||
element.subscription_id &&
|
||||
subscription &&
|
||||
newDashboardForm.subscriptions[idx].abi !== subscription?.abi
|
||||
newDashboardForm.subscription_settings[idx].abi !== subscription?.abi
|
||||
) {
|
||||
const newestDashboardForm = { ...newDashboardForm };
|
||||
newestDashboardForm.subscriptions[idx].abi = subscription.abi;
|
||||
newestDashboardForm.subscription_settings[idx].abi = subscription.abi;
|
||||
setNewDashboardForm(newestDashboardForm);
|
||||
}
|
||||
});
|
||||
|
|
@ -110,6 +110,8 @@ const NewDashboard = (props) => {
|
|||
item.address.toUpperCase().includes(inputValue.toUpperCase()) ||
|
||||
item.label.toUpperCase().includes(inputValue.toUpperCase()));
|
||||
|
||||
console.log("dbg", newDashboardForm);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack spacing="24px">
|
||||
|
|
@ -187,379 +189,400 @@ const NewDashboard = (props) => {
|
|||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{newDashboardForm?.subscriptions.map((subscibedItem, idx) => {
|
||||
return (
|
||||
<Tr key={`form-address-row-${idx}`}>
|
||||
<Td>
|
||||
{!subscriptions.subscriptionsCache.isLoading &&
|
||||
subscriptions.subscriptionsCache.data &&
|
||||
pickerItems && (
|
||||
<>
|
||||
<Downshift
|
||||
onSelect={(selectedItem) => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx] = {
|
||||
label: selectedItem.label,
|
||||
address: selectedItem.address,
|
||||
subscription_id: selectedItem.id,
|
||||
abi: selectedItem.abi,
|
||||
isMethods: false,
|
||||
isEvents: false,
|
||||
generic: {
|
||||
transactions: {
|
||||
in: false,
|
||||
out: false,
|
||||
{newDashboardForm?.subscription_settings.map(
|
||||
(subscibedItem, idx) => {
|
||||
return (
|
||||
<Tr key={`form-address-row-${idx}`}>
|
||||
<Td>
|
||||
{!subscriptions.subscriptionsCache.isLoading &&
|
||||
subscriptions.subscriptionsCache.data &&
|
||||
pickerItems && (
|
||||
<>
|
||||
<Downshift
|
||||
onSelect={(selectedItem) => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[idx] = {
|
||||
label: selectedItem.label,
|
||||
address: selectedItem.address,
|
||||
subscription_id: selectedItem.id,
|
||||
abi: selectedItem.abi,
|
||||
isMethods: false,
|
||||
isEvents: false,
|
||||
generic: {
|
||||
transactions: {
|
||||
in: false,
|
||||
out: false,
|
||||
},
|
||||
value: {
|
||||
in: false,
|
||||
out: false,
|
||||
balance: false,
|
||||
},
|
||||
},
|
||||
value: {
|
||||
in: false,
|
||||
out: false,
|
||||
balance: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
itemToString={(item) => (item ? item.label : "")}
|
||||
initialSelectedItem={subscibedItem ?? undefined}
|
||||
>
|
||||
{({
|
||||
getInputProps,
|
||||
getItemProps,
|
||||
getLabelProps,
|
||||
getMenuProps,
|
||||
getToggleButtonProps,
|
||||
isOpen,
|
||||
inputValue,
|
||||
highlightedIndex,
|
||||
getRootProps,
|
||||
}) => {
|
||||
const labelColor =
|
||||
subscibedItem.color &&
|
||||
color(`${subscibedItem.color}`);
|
||||
return (
|
||||
<Box pos="relative">
|
||||
<Box
|
||||
{...getRootProps(
|
||||
{},
|
||||
{ suppressRefError: true }
|
||||
)}
|
||||
>
|
||||
<InputGroup>
|
||||
<InputLeftAddon
|
||||
isTruncated
|
||||
maxW="60px"
|
||||
fontSize={
|
||||
ui.isMobileView ? "xs" : "sm"
|
||||
}
|
||||
bgColor={
|
||||
subscibedItem?.color ?? "gray.100"
|
||||
}
|
||||
>
|
||||
<FormLabel
|
||||
alignContent="center"
|
||||
my={2}
|
||||
{...getLabelProps()}
|
||||
color={
|
||||
labelColor
|
||||
? labelColor?.isDark()
|
||||
? "white"
|
||||
: labelColor.darken(0.6).hex()
|
||||
: "inherit"
|
||||
}
|
||||
>{`#${idx}:`}</FormLabel>
|
||||
</InputLeftAddon>
|
||||
|
||||
<Input
|
||||
placeholder="Subscription to use in dashboard"
|
||||
isTruncated
|
||||
fontSize="sm"
|
||||
{...getInputProps({
|
||||
defaultValue:
|
||||
subscibedItem?.label ?? "iha",
|
||||
})}
|
||||
></Input>
|
||||
<InputRightAddon>
|
||||
{" "}
|
||||
<button
|
||||
{...getToggleButtonProps()}
|
||||
aria-label={"toggle menu"}
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</InputRightAddon>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
{isOpen ? (
|
||||
<Stack
|
||||
// display="flex"
|
||||
direction="column"
|
||||
className="menuListTim"
|
||||
{...getMenuProps()}
|
||||
bgColor="gray.300"
|
||||
borderRadius="md"
|
||||
boxShadow="lg"
|
||||
pos="absolute"
|
||||
left={0}
|
||||
right={0}
|
||||
spacing={2}
|
||||
zIndex={1000}
|
||||
py={2}
|
||||
};
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
itemToString={(item) =>
|
||||
item ? item.label : ""
|
||||
}
|
||||
initialSelectedItem={subscibedItem ?? undefined}
|
||||
>
|
||||
{({
|
||||
getInputProps,
|
||||
getItemProps,
|
||||
getLabelProps,
|
||||
getMenuProps,
|
||||
getToggleButtonProps,
|
||||
isOpen,
|
||||
inputValue,
|
||||
highlightedIndex,
|
||||
getRootProps,
|
||||
}) => {
|
||||
const labelColor =
|
||||
subscibedItem.color &&
|
||||
color(`${subscibedItem.color}`);
|
||||
return (
|
||||
<Box pos="relative">
|
||||
<Box
|
||||
{...getRootProps(
|
||||
{},
|
||||
{ suppressRefError: true }
|
||||
)}
|
||||
>
|
||||
{pickerItems &&
|
||||
pickerItems.filter((item) =>
|
||||
filterFn(item, inputValue)
|
||||
).length === 0 && (
|
||||
<InputGroup>
|
||||
<InputLeftAddon
|
||||
isTruncated
|
||||
maxW="60px"
|
||||
fontSize={
|
||||
ui.isMobileView ? "xs" : "sm"
|
||||
}
|
||||
bgColor={
|
||||
subscibedItem?.color ?? "gray.100"
|
||||
}
|
||||
>
|
||||
<FormLabel
|
||||
alignContent="center"
|
||||
my={2}
|
||||
{...getLabelProps()}
|
||||
color={
|
||||
labelColor
|
||||
? labelColor?.isDark()
|
||||
? "white"
|
||||
: labelColor
|
||||
.darken(0.6)
|
||||
.hex()
|
||||
: "inherit"
|
||||
}
|
||||
>{`#${idx}:`}</FormLabel>
|
||||
</InputLeftAddon>
|
||||
|
||||
<Input
|
||||
placeholder="Subscription to use in dashboard"
|
||||
isTruncated
|
||||
fontSize="sm"
|
||||
{...getInputProps({
|
||||
defaultValue:
|
||||
subscibedItem?.label ?? "iha",
|
||||
})}
|
||||
></Input>
|
||||
<InputRightAddon>
|
||||
{" "}
|
||||
<button
|
||||
{...getToggleButtonProps()}
|
||||
aria-label={"toggle menu"}
|
||||
>
|
||||
↓
|
||||
</button>
|
||||
</InputRightAddon>
|
||||
</InputGroup>
|
||||
</Box>
|
||||
{isOpen ? (
|
||||
<Stack
|
||||
// display="flex"
|
||||
direction="column"
|
||||
className="menuListTim"
|
||||
{...getMenuProps()}
|
||||
bgColor="gray.300"
|
||||
borderRadius="md"
|
||||
boxShadow="lg"
|
||||
pos="absolute"
|
||||
left={0}
|
||||
right={0}
|
||||
spacing={2}
|
||||
zIndex={1000}
|
||||
py={2}
|
||||
>
|
||||
{pickerItems &&
|
||||
pickerItems.filter((item) =>
|
||||
filterFn(item, inputValue)
|
||||
).length === 0 && (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
fontSize="sm"
|
||||
w="100%"
|
||||
m={0}
|
||||
isTruncated
|
||||
onClick={() => {
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.NEW_SUBSCRIPTON,
|
||||
props: {
|
||||
initialValue: inputValue,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
Subscribe to: {inputValue}{" "}
|
||||
</Button>
|
||||
)}
|
||||
{pickerItems &&
|
||||
pickerItems
|
||||
.filter((item) =>
|
||||
filterFn(item, inputValue)
|
||||
)
|
||||
.map((item, index) => {
|
||||
const badgeColor = color(
|
||||
`${item.color}`
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
px={4}
|
||||
py={1}
|
||||
alignItems="center"
|
||||
key={item.value}
|
||||
{...getItemProps({
|
||||
key: item.value,
|
||||
index,
|
||||
item,
|
||||
})}
|
||||
direction="row"
|
||||
w="100%"
|
||||
bgColor={
|
||||
index === highlightedIndex
|
||||
? "orange.900"
|
||||
: "inherit"
|
||||
}
|
||||
color={
|
||||
index === highlightedIndex
|
||||
? "gray.100"
|
||||
: "inherit"
|
||||
}
|
||||
>
|
||||
<chakra.span whiteSpace="nowrap">
|
||||
{item.label}
|
||||
</chakra.span>
|
||||
<Badge
|
||||
size="sm"
|
||||
placeSelf="self-end"
|
||||
colorScheme={
|
||||
item.abi
|
||||
? "green"
|
||||
: "gray"
|
||||
}
|
||||
>
|
||||
ABI
|
||||
</Badge>
|
||||
<Badge
|
||||
isTruncated
|
||||
size="sm"
|
||||
placeSelf="self-end"
|
||||
bgColor={item.color}
|
||||
color={
|
||||
badgeColor.isDark()
|
||||
? badgeColor
|
||||
.lighten(100)
|
||||
.hex()
|
||||
: badgeColor
|
||||
.darken(0.6)
|
||||
.hex()
|
||||
}
|
||||
>
|
||||
{item.address}
|
||||
</Badge>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
{inputValue === "" && (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
fontSize="sm"
|
||||
w="100%"
|
||||
m={0}
|
||||
isTruncated
|
||||
onClick={() => {
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.NEW_SUBSCRIPTON,
|
||||
props: {
|
||||
initialValue: inputValue,
|
||||
},
|
||||
});
|
||||
}}
|
||||
})
|
||||
}
|
||||
>
|
||||
Subscribe to: {inputValue}{" "}
|
||||
New subscription
|
||||
{inputValue}{" "}
|
||||
</Button>
|
||||
)}
|
||||
{pickerItems &&
|
||||
pickerItems
|
||||
.filter((item) =>
|
||||
filterFn(item, inputValue)
|
||||
)
|
||||
.map((item, index) => {
|
||||
const badgeColor = color(
|
||||
`${item.color}`
|
||||
);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
px={4}
|
||||
py={1}
|
||||
alignItems="center"
|
||||
key={item.value}
|
||||
{...getItemProps({
|
||||
key: item.value,
|
||||
index,
|
||||
item,
|
||||
})}
|
||||
direction="row"
|
||||
w="100%"
|
||||
bgColor={
|
||||
index === highlightedIndex
|
||||
? "orange.900"
|
||||
: "inherit"
|
||||
}
|
||||
color={
|
||||
index === highlightedIndex
|
||||
? "gray.100"
|
||||
: "inherit"
|
||||
}
|
||||
>
|
||||
<chakra.span whiteSpace="nowrap">
|
||||
{item.label}
|
||||
</chakra.span>
|
||||
<Badge
|
||||
size="sm"
|
||||
placeSelf="self-end"
|
||||
colorScheme={
|
||||
item.abi
|
||||
? "green"
|
||||
: "gray"
|
||||
}
|
||||
>
|
||||
ABI
|
||||
</Badge>
|
||||
<Badge
|
||||
isTruncated
|
||||
size="sm"
|
||||
placeSelf="self-end"
|
||||
bgColor={item.color}
|
||||
color={
|
||||
badgeColor.isDark()
|
||||
? badgeColor
|
||||
.lighten(100)
|
||||
.hex()
|
||||
: badgeColor
|
||||
.darken(0.6)
|
||||
.hex()
|
||||
}
|
||||
>
|
||||
{item.address}
|
||||
</Badge>
|
||||
</Stack>
|
||||
);
|
||||
})}
|
||||
{inputValue === "" && (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
variant="outline"
|
||||
w="100%"
|
||||
m={0}
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.NEW_SUBSCRIPTON,
|
||||
})
|
||||
}
|
||||
>
|
||||
New subscription
|
||||
{inputValue}{" "}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
) : null}
|
||||
{/* </Menu> */}
|
||||
</Box>
|
||||
);
|
||||
}}
|
||||
</Downshift>
|
||||
</>
|
||||
</Stack>
|
||||
) : null}
|
||||
{/* </Menu> */}
|
||||
</Box>
|
||||
);
|
||||
}}
|
||||
</Downshift>
|
||||
</>
|
||||
)}
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
{subscibedItem.abi && subscibedItem.address && (
|
||||
<CheckCircleIcon color="green" />
|
||||
)}
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
{subscibedItem.abi && subscibedItem.address && (
|
||||
<CheckCircleIcon color="green" />
|
||||
)}
|
||||
{!subscibedItem.abi && (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
size="xs"
|
||||
py={2}
|
||||
disabled={!subscibedItem.address}
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.UPLOAD_ABI,
|
||||
props: { id: subscibedItem.subscription_id },
|
||||
})
|
||||
}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</Td>
|
||||
{!subscibedItem.abi && (
|
||||
<Button
|
||||
colorScheme="orange"
|
||||
size="xs"
|
||||
py={2}
|
||||
disabled={!subscibedItem.address}
|
||||
onClick={() =>
|
||||
overlay.toggleModal({
|
||||
type: MODAL_TYPES.UPLOAD_ABI,
|
||||
props: { id: subscibedItem.subscription_id },
|
||||
})
|
||||
}
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
)}
|
||||
</Td>
|
||||
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.abi}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx] = {
|
||||
...newState.subscriptions[idx],
|
||||
isMethods: !newState.subscriptions[idx].isMethods,
|
||||
};
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.isMethods}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={
|
||||
!subscibedItem.address || !subscibedItem.abi
|
||||
}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx] = {
|
||||
...newState.subscriptions[idx],
|
||||
isEvents: !newState.subscriptions[idx].isEvents,
|
||||
};
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.isEvents}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx].generic.transactions.in =
|
||||
!newState.subscriptions[idx].generic.transactions
|
||||
.in;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.transactions.in}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx].generic.transactions.out =
|
||||
!newState.subscriptions[idx].generic.transactions
|
||||
.out;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.transactions.out}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx].generic.value.in =
|
||||
!newState.subscriptions[idx].generic.value.in;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.value.in}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx].generic.value.out =
|
||||
!newState.subscriptions[idx].generic.value.out;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.value.out}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions[idx].generic.balance =
|
||||
!newState.subscriptions[idx].generic.balance;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.balance}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
|
||||
<Td p={1} textAlign="center">
|
||||
{idx > 0 && (
|
||||
<CloseButton
|
||||
onClick={() => {
|
||||
const hardcopy = [
|
||||
...newDashboardForm?.subscriptions,
|
||||
];
|
||||
hardcopy.splice(idx, 1);
|
||||
setNewDashboardForm((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
subscriptions: [...hardcopy],
|
||||
};
|
||||
});
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.abi}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[idx] = {
|
||||
...newState.subscription_settings[idx],
|
||||
isMethods:
|
||||
!newState.subscription_settings[idx].isMethods,
|
||||
};
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
isChecked={subscibedItem.isMethods}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={
|
||||
!subscibedItem.address || !subscibedItem.abi
|
||||
}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[idx] = {
|
||||
...newState.subscription_settings[idx],
|
||||
isEvents:
|
||||
!newState.subscription_settings[idx].isEvents,
|
||||
};
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.isEvents}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[
|
||||
idx
|
||||
].generic.transactions.in =
|
||||
!newState.subscription_settings[idx].generic
|
||||
.transactions.in;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.transactions.in}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[
|
||||
idx
|
||||
].generic.transactions.out =
|
||||
!newState.subscription_settings[idx].generic
|
||||
.transactions.out;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.transactions.out}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[
|
||||
idx
|
||||
].generic.value.in =
|
||||
!newState.subscription_settings[idx].generic.value
|
||||
.in;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.value.in}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[
|
||||
idx
|
||||
].generic.value.out =
|
||||
!newState.subscription_settings[idx].generic.value
|
||||
.out;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.value.out}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
<Td p={1} textAlign="center">
|
||||
<Checkbox
|
||||
isDisabled={!subscibedItem.address}
|
||||
onChange={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscription_settings[
|
||||
idx
|
||||
].generic.balance =
|
||||
!newState.subscription_settings[idx].generic
|
||||
.balance;
|
||||
setNewDashboardForm(newState);
|
||||
}}
|
||||
isChecked={subscibedItem.generic.balance}
|
||||
></Checkbox>
|
||||
</Td>
|
||||
|
||||
<Td p={1} textAlign="center">
|
||||
{idx > 0 && (
|
||||
<CloseButton
|
||||
onClick={() => {
|
||||
const hardcopy = [
|
||||
...newDashboardForm?.subscription_settings,
|
||||
];
|
||||
hardcopy.splice(idx, 1);
|
||||
setNewDashboardForm((prevState) => {
|
||||
return {
|
||||
...prevState,
|
||||
subscriptions: [...hardcopy],
|
||||
};
|
||||
});
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</Tbody>
|
||||
</Table>
|
||||
<Center>
|
||||
|
|
@ -572,7 +595,7 @@ const NewDashboard = (props) => {
|
|||
_active={{ textDecor: "none" }}
|
||||
onClick={() => {
|
||||
const newState = { ...newDashboardForm };
|
||||
newState.subscriptions.push({
|
||||
newState.subscription_settings.push({
|
||||
label: "",
|
||||
abi: false,
|
||||
subscription_id: null,
|
||||
|
|
|
|||
|
|
@ -258,31 +258,32 @@ const OverlayProvider = ({ children }) => {
|
|||
);
|
||||
createDashboard.mutate({
|
||||
name: dashboardState.name,
|
||||
subscriptions: dashboardState.subscriptions.map(
|
||||
(pickedSubscription) => {
|
||||
const retval = {
|
||||
subscription_id: pickedSubscription.subscription_id,
|
||||
generic: [],
|
||||
all_methods: !!pickedSubscription.isMethods,
|
||||
all_events: !!pickedSubscription.isEvents,
|
||||
};
|
||||
subscription_settings:
|
||||
dashboardState.subscription_settings.map(
|
||||
(pickedSubscription) => {
|
||||
const retval = {
|
||||
subscription_id: pickedSubscription.subscription_id,
|
||||
generic: [],
|
||||
all_methods: !!pickedSubscription.isMethods,
|
||||
all_events: !!pickedSubscription.isEvents,
|
||||
};
|
||||
|
||||
pickedSubscription.generic.transactions.in &&
|
||||
retval.generic.push({ name: "transactions_in" });
|
||||
pickedSubscription.generic.transactions.out &&
|
||||
retval.generic.push({ name: "transactions_out" });
|
||||
pickedSubscription.generic.value.in &&
|
||||
retval.generic.push({ name: "value_in" });
|
||||
pickedSubscription.generic.value.out &&
|
||||
retval.generic.push({ name: "value_out" });
|
||||
pickedSubscription.generic.balance &&
|
||||
retval.generic.push({ name: "balance" });
|
||||
retval["methods"] = [];
|
||||
retval["events"] = [];
|
||||
pickedSubscription.generic.transactions.in &&
|
||||
retval.generic.push({ name: "transactions_in" });
|
||||
pickedSubscription.generic.transactions.out &&
|
||||
retval.generic.push({ name: "transactions_out" });
|
||||
pickedSubscription.generic.value.in &&
|
||||
retval.generic.push({ name: "value_in" });
|
||||
pickedSubscription.generic.value.out &&
|
||||
retval.generic.push({ name: "value_out" });
|
||||
pickedSubscription.generic.balance &&
|
||||
retval.generic.push({ name: "balance" });
|
||||
retval["methods"] = [];
|
||||
retval["events"] = [];
|
||||
|
||||
return retval;
|
||||
}
|
||||
),
|
||||
return retval;
|
||||
}
|
||||
),
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue