From 938ee067da797a76acc808fdabf7cf6b40267f32 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Tue, 16 Nov 2021 02:18:25 +0000 Subject: [PATCH 01/87] scrollable --- frontend/src/components/SubscriptionReport.js | 297 +++++++++--------- 1 file changed, 150 insertions(+), 147 deletions(-) diff --git a/frontend/src/components/SubscriptionReport.js b/frontend/src/components/SubscriptionReport.js index 1ba35921..d2dfce45 100644 --- a/frontend/src/components/SubscriptionReport.js +++ b/frontend/src/components/SubscriptionReport.js @@ -3,6 +3,7 @@ import { usePresignedURL } from "../core/hooks"; import Report from "./Report"; import { Spinner, Flex, Heading, Text, Stack } from "@chakra-ui/react"; import { v4 } from "uuid"; +import Scrollable from "./Scrollable"; const HOUR_KEY = "Hourly"; const DAY_KEY = "Daily"; @@ -23,166 +24,168 @@ const SubscriptionReport = ({ timeRange, url, id, type, refetchLinks }) => { const plotMinW = "500px"; if (!data || isLoading) return ; return ( - - - {data?.web3_metric.map((metric) => { - return ( - - {metric.display_name} - - {metric.display_name == "Total weth earned" - ? Number.parseFloat( - Number.parseFloat(metric.value) / 1e18 - ).toString() - : metric.value} - - - ); - })} - - {data?.events && Object.keys(data?.events) && ( - + + - Events - {Object.keys(data.events).map((key) => { + {data?.web3_metric.map((metric) => { return ( - - {key} + {metric.display_name} + + {metric.display_name == "Total weth earned" + ? Number.parseFloat( + Number.parseFloat(metric.value) / 1e18 + ).toString() + : metric.value} - ); })} - - )} - {data?.functions && Object.keys(data?.functions) && ( - - functions - {Object.keys(data.functions).map((key) => { - return ( - - + {data?.events && Object.keys(data?.events) && ( + + Events + {Object.keys(data.events).map((key) => { + return ( + - {key} - - - - ); - })} - - )} - {data?.generic && Object.keys(data?.generic) && ( - - Account generic - {Object.keys(data.generic).map((key) => { - return ( - - + {key} + + + + ); + })} + + )} + {data?.functions && Object.keys(data?.functions) && ( + + functions + {Object.keys(data.functions).map((key) => { + return ( + - {key} - - - - ); - })} - - )} - + + {key} + + + + ); + })} + + )} + {data?.generic && Object.keys(data?.generic) && ( + + Account generic + {Object.keys(data.generic).map((key) => { + return ( + + + {key} + + + + ); + })} + + )} + + ); }; From c37132ab814276ba03bf39092cb4b0db34ee844c Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Mon, 29 Nov 2021 12:41:48 +0000 Subject: [PATCH 02/87] improved responsivness of the screen --- frontend/pages/subscriptions.js | 100 ++--- frontend/src/components/CopyButton.js | 6 +- frontend/src/components/SubscriptionsList.js | 398 ++++++++++++++----- 3 files changed, 344 insertions(+), 160 deletions(-) diff --git a/frontend/pages/subscriptions.js b/frontend/pages/subscriptions.js index eb41eff3..d37eb688 100644 --- a/frontend/pages/subscriptions.js +++ b/frontend/pages/subscriptions.js @@ -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 ( - - {subscriptionsCache.isLoading ? ( -
-
- ) : ( - - My Subscriptions - + + + {subscriptionsCache.isLoading ? ( +
+
+ ) : ( + + My Subscriptions - {subscriptionsCache.data?.is_free_subscription_availible && ( + + {subscriptionsCache.data?.is_free_subscription_availible && ( + + )} - )} - + + - - - - )} - + + )} + + ); }; diff --git a/frontend/src/components/CopyButton.js b/frontend/src/components/CopyButton.js index f6d2d885..09c79504 100644 --- a/frontend/src/components/CopyButton.js +++ b/frontend/src/components/CopyButton.js @@ -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={} colorScheme="orange" variant="ghost" - size="sm" + size={props.size ?? "sm"} /> { + 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 ( - - - - - - - - - - - - - - {subscriptionsCache.data.subscriptions.map((subscription) => { - const iconLink = - subscriptionTypeIcons[subscription.subscription_type_id]; - return ( - - - - - - - - - + <> + {isLargerThan530px && ( +
TokenLabelAddressabiColorDate CreatedActions
- - pool icon - - - - updateCallback({ - id: subscription.id, - label: nextValue, - }) - } - > - - - - - {subscription.address?.startsWith("tag") ? ( - {mapper[subscription.address]} - ) : ( - {subscription.address} - )} - - {subscription.abi ? ( - - ) : ( - - )} - - - updateCallback({ id: subscription.id, color: color }) - } - /> - {moment(subscription.created_at).format("L")} - deleteSubscription.mutate(subscription.id)} - > - } - /> - -
+ + + + + + + + + - ); - })} - -
TokenLabelAddressabiColorDate CreatedActions
+ + + {subscriptionsCache.data.subscriptions.map((subscription) => { + const iconLink = + subscriptionTypeIcons[subscription.subscription_type_id]; + return ( + + + + pool icon + + + + + updateCallback({ + id: subscription.id, + label: nextValue, + }) + } + > + + + + + + {subscription.address?.startsWith("tag") ? ( + {mapper[subscription.address]} + ) : ( + {subscription.address} + )} + + + {subscription.abi ? ( + + ) : ( + + )} + + + + updateCallback({ id: subscription.id, color: color }) + } + /> + + + {moment(subscription.created_at).format("L")} + + + + + deleteSubscription.mutate(subscription.id) + } + > + } + /> + + + + ); + })} + + + )} + {!isLargerThan530px && ( + + {subscriptionsCache.data.subscriptions.map((subscription) => { + const iconLink = + subscriptionTypeIcons[subscription.subscription_type_id]; + return ( + +

+ + + + pool icon + + + updateCallback({ + id: subscription.id, + label: nextValue, + }) + } + > + + + + + + +

+ + + + Address: + + {subscription.address?.startsWith("tag") ? ( + + {mapper[subscription.address]} + + ) : ( + + {subscription.address} + + )} + + + Abi: + + {subscription.abi ? ( + + ) : ( + + )} + + + + + deleteSubscription.mutate(subscription.id) + } + > + + + + + + + ); + })} + + +

+ + + Section 2 title + + + +

+ + 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. + + + + )} + ); } else if ( subscriptionsCache.data && From 0a57eb67378bfba4086dae190e237804c368b00e Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Mon, 29 Nov 2021 12:45:28 +0000 Subject: [PATCH 03/87] remove log --- frontend/src/components/CopyButton.js | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/CopyButton.js b/frontend/src/components/CopyButton.js index 09c79504..d1f74279 100644 --- a/frontend/src/components/CopyButton.js +++ b/frontend/src/components/CopyButton.js @@ -11,7 +11,6 @@ import { import { BiCopy } from "react-icons/bi"; const CopyButton = (props) => { - console.log(props.copyString); const children = props.children ? props.children : ""; const copyString = props.copyString ?? (props.prefix ? props.prefix + children : children); From 7507b271cafbfeb8fb998865bf18a13914311ccc Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 1 Dec 2021 15:26:04 +0000 Subject: [PATCH 04/87] work in progress --- frontend/pages/dashboard/[dashboardId].js | 20 +++ .../src/components/NewDashboardElement.js | 122 ++++++++++++++++++ frontend/src/core/hooks/useSubscription.js | 25 ++++ .../providers/OverlayProvider/constants.js | 1 + .../core/providers/OverlayProvider/index.js | 73 ++++++----- .../core/services/subscriptions.service.js | 8 +- 6 files changed, 217 insertions(+), 32 deletions(-) create mode 100644 frontend/src/components/NewDashboardElement.js create mode 100644 frontend/src/core/hooks/useSubscription.js diff --git a/frontend/pages/dashboard/[dashboardId].js b/frontend/pages/dashboard/[dashboardId].js index 761372b5..a20143eb 100644 --- a/frontend/pages/dashboard/[dashboardId].js +++ b/frontend/pages/dashboard/[dashboardId].js @@ -8,6 +8,7 @@ import { Text, Spacer, IconButton, + Button, } from "@chakra-ui/react"; import Scrollable from "../../src/components/Scrollable"; import RangeSelector from "../../src/components/RangeSelector"; @@ -16,7 +17,9 @@ import { useRouter, useSubscriptions } from "../../src/core/hooks"; import { BiTrash } from "react-icons/bi"; import OverlayContext from "../../src/core/providers/OverlayProvider/context"; import SubscriptionReport from "../../src/components/SubscriptionReport"; +import { AiOutlinePlusCircle } from "react-icons/ai"; import { v4 } from "uuid"; +import { DRAWER_TYPES } from "../../src/core/providers/OverlayProvider/constants"; const HOUR_KEY = "Hourly"; const DAY_KEY = "Daily"; @@ -93,6 +96,7 @@ const Analytics = () => { const [timeRange, setTimeRange] = useState(timeMap[MINUTE_KEY]); const router = useRouter(); + const overlay = useContext(OverlayContext); const { dashboardId } = router.params; const { dashboardCache, dashboardLinksCache, deleteDashboard } = useDashboard(dashboardId); @@ -145,6 +149,10 @@ const Analytics = () => { // } // }, [nodesReady, windowSize]); + const addReportClicked = () => { + console.log("click"); + }; + if ( dashboardCache.isLoading || dashboardLinksCache.isLoading || @@ -185,6 +193,18 @@ const Analytics = () => { setTimeRange(timeMap[e]); }} /> + diff --git a/frontend/src/components/NewDashboardElement.js b/frontend/src/components/NewDashboardElement.js new file mode 100644 index 00000000..30fdfd67 --- /dev/null +++ b/frontend/src/components/NewDashboardElement.js @@ -0,0 +1,122 @@ +import React, { useContext, useEffect } from "react"; +import { + chakra, + FormLabel, + Input, + Stack, + InputGroup, + Box, + Button, + Table, + Th, + Td, + Tr, + Thead, + Tbody, + Center, + Checkbox, + CloseButton, + InputRightAddon, + Badge, + InputLeftAddon, +} from "@chakra-ui/react"; +import { CheckCircleIcon } from "@chakra-ui/icons"; +import { useStorage, useSubscriptions } from "../core/hooks"; +import Downshift from "downshift"; +import color from "color"; +import OverlayContext from "../core/providers/OverlayProvider/context"; +import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; +import UIContext from "../core/providers/UIProvider/context"; + +const NewDashboardElement = (props) => { + const ui = useContext(UIContext); + const overlay = useContext(OverlayContext); + const [newDashboardForm, setNewDashboardForm] = useStorage( + sessionStorage, + "new_dashboard", + { + name: "", + subscriptions: [ + { + label: "", + abi: false, + subscription_id: null, + isMethods: false, + isEvents: false, + generic: { + transactions: { + in: false, + out: false, + }, + value: { + in: false, + out: false, + balance: false, + }, + }, + }, + ], + } + ); + + const subscriptions = useSubscriptions(); + + const [pickerItems, setPickerItems] = React.useState( + subscriptions.subscriptionsCache.data?.subscriptions + ); + + useEffect(() => { + newDashboardForm.subscriptions.forEach((element, idx) => { + const subscription = + subscriptions.subscriptionsCache.data?.subscriptions.find( + (subscription_item) => + element.subscription_id === subscription_item.id + ); + + if ( + element.subscription_id && + subscription && + newDashboardForm.subscriptions[idx].abi !== subscription?.abi + ) { + const newestDashboardForm = { ...newDashboardForm }; + newestDashboardForm.subscriptions[idx].abi = subscription.abi; + setNewDashboardForm(newestDashboardForm); + } + }); + }, [ + subscriptions.subscriptionsCache.data, + newDashboardForm, + setNewDashboardForm, + ]); + + useEffect(() => { + if (!subscriptions.subscriptionsCache.isLoading) { + const massaged = subscriptions.subscriptionsCache.data?.subscriptions.map( + (item) => { + return { value: item.address, ...item }; + } + ); + setPickerItems(massaged); + } + }, [ + subscriptions.subscriptionsCache.data, + subscriptions.subscriptionsCache.isLoading, + ]); + + const filterFn = (item, inputValue) => + (item.subscription_type_id === "ethereum_blockchain" || + item.subscription_type_id === "polygon_blockchain") && + (!inputValue || + item.address.toUpperCase().includes(inputValue.toUpperCase()) || + item.label.toUpperCase().includes(inputValue.toUpperCase())); + + return ( + <> + + + ); +}; + +const ChakraNewDashboard = chakra(NewDashboardElement); + +export default ChakraNewDashboard; diff --git a/frontend/src/core/hooks/useSubscription.js b/frontend/src/core/hooks/useSubscription.js new file mode 100644 index 00000000..3f368325 --- /dev/null +++ b/frontend/src/core/hooks/useSubscription.js @@ -0,0 +1,25 @@ +import { queryCacheProps } from "./hookCommon"; +import { useToast } from "."; +import { useQuery } from "react-query"; +import { SubscriptionsService } from "../services"; +import { useContext } from "react"; +import UserContext from "../providers/UserProvider/context"; + +const useSubscription = ({ id }) => { + const toast = useToast(); + const user = useContext(UserContext); + + const subscriptionLinksCache = useQuery( + ["dashboardLinks", { id }], + SubscriptionsService.getSubscriptionABI, + { + ...queryCacheProps, + onError: (error) => { + toast(error, "error"); + }, + enabled: !!user && !!id, + } + ); +}; + +export default useSubscription; diff --git a/frontend/src/core/providers/OverlayProvider/constants.js b/frontend/src/core/providers/OverlayProvider/constants.js index 7d8d7704..660f9678 100644 --- a/frontend/src/core/providers/OverlayProvider/constants.js +++ b/frontend/src/core/providers/OverlayProvider/constants.js @@ -13,6 +13,7 @@ export const MODAL_TYPES = { export const DRAWER_TYPES = { OFF: 0, NEW_DASHBOARD: 1, + NEW_DASHBOARD_ITEM: 2, }; export const ALERT_TYPES = { diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js index 253671c3..c4066700 100644 --- a/frontend/src/core/providers/OverlayProvider/index.js +++ b/frontend/src/core/providers/OverlayProvider/index.js @@ -36,6 +36,7 @@ import UserContext from "../UserProvider/context"; import UIContext from "../UIProvider/context"; import useDashboard from "../../hooks/useDashboard"; import SignUp from "../../../components/SignUp"; +import NewDashboardElement from "../../../components/NewDashboardElement"; const ForgotPassword = React.lazy(() => import("../../../components/ForgotPassword") ); @@ -121,6 +122,39 @@ const OverlayProvider = ({ children }) => { window.sessionStorage.removeItem("new_dashboard"); }; + const submitNewDashboard = () => { + const dashboardState = JSON.parse(sessionStorage.getItem("new_dashboard")); + 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, + }; + + 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; + }), + }); + }; + + const submitNewDashboardItem = () => { + console.log("submit new dashboard item"); + }; useEffect(() => { if (createDashboard.isSuccess) { finishNewDashboard(); @@ -232,6 +266,7 @@ const OverlayProvider = ({ children }) => { {DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"} + {DRAWER_TYPES.NEW_DASHBOARD_ITEM && "New dashboard element"} @@ -240,6 +275,11 @@ const OverlayProvider = ({ children }) => { )} + {DRAWER_TYPES.NEW_DASHBOARD_ITEM && ( + }> + + + )} From 1c6cc51d411fd618eb3c38e0f504cbc16cca9bc6 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Mon, 11 Apr 2022 11:10:33 +0100 Subject: [PATCH 20/87] remove duplicate tracking --- frontend/pages/index.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index a4ae152e..641a8373 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -34,10 +34,7 @@ import { v4 as uuidv4 } from "uuid"; import RouteButton from "../src/components/RouteButton"; import { MODAL_TYPES } from "../src/core/providers/OverlayProvider/constants"; import mixpanel from "mixpanel-browser"; -import { - MIXPANEL_PROPS, - MIXPANEL_EVENTS, -} from "../src/core/providers/AnalyticsProvider/constants"; +import { MIXPANEL_EVENTS } from "../src/core/providers/AnalyticsProvider/constants"; const SplitWithImage = dynamic( () => import("../src/components/SplitWithImage"), @@ -653,10 +650,6 @@ const Homepage = () => { cta={{ colorScheme: "orange", onClick: () => { - mixpanel.get_distinct_id() && - mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - [`${MIXPANEL_PROPS.BUTTON_NAME}`]: `Early access CTA: developer txpool button`, - }); router.push("/whitepapers"); }, label: "NFT market report", From ff5e954530a073b57c542a68d8bb527f0f6564ea Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Tue, 12 Apr 2022 17:43:08 +0100 Subject: [PATCH 21/87] Revert "work in progress" This reverts commit 7507b271cafbfeb8fb998865bf18a13914311ccc. --- frontend/pages/dashboard/[dashboardId].js | 20 --- .../src/components/NewDashboardElement.js | 122 ------------------ frontend/src/core/hooks/useSubscription.js | 25 ---- .../providers/OverlayProvider/constants.js | 1 - .../core/providers/OverlayProvider/index.js | 73 +++++------ .../core/services/subscriptions.service.js | 8 +- 6 files changed, 32 insertions(+), 217 deletions(-) delete mode 100644 frontend/src/components/NewDashboardElement.js delete mode 100644 frontend/src/core/hooks/useSubscription.js diff --git a/frontend/pages/dashboard/[dashboardId].js b/frontend/pages/dashboard/[dashboardId].js index a20143eb..761372b5 100644 --- a/frontend/pages/dashboard/[dashboardId].js +++ b/frontend/pages/dashboard/[dashboardId].js @@ -8,7 +8,6 @@ import { Text, Spacer, IconButton, - Button, } from "@chakra-ui/react"; import Scrollable from "../../src/components/Scrollable"; import RangeSelector from "../../src/components/RangeSelector"; @@ -17,9 +16,7 @@ import { useRouter, useSubscriptions } from "../../src/core/hooks"; import { BiTrash } from "react-icons/bi"; import OverlayContext from "../../src/core/providers/OverlayProvider/context"; import SubscriptionReport from "../../src/components/SubscriptionReport"; -import { AiOutlinePlusCircle } from "react-icons/ai"; import { v4 } from "uuid"; -import { DRAWER_TYPES } from "../../src/core/providers/OverlayProvider/constants"; const HOUR_KEY = "Hourly"; const DAY_KEY = "Daily"; @@ -96,7 +93,6 @@ const Analytics = () => { const [timeRange, setTimeRange] = useState(timeMap[MINUTE_KEY]); const router = useRouter(); - const overlay = useContext(OverlayContext); const { dashboardId } = router.params; const { dashboardCache, dashboardLinksCache, deleteDashboard } = useDashboard(dashboardId); @@ -149,10 +145,6 @@ const Analytics = () => { // } // }, [nodesReady, windowSize]); - const addReportClicked = () => { - console.log("click"); - }; - if ( dashboardCache.isLoading || dashboardLinksCache.isLoading || @@ -193,18 +185,6 @@ const Analytics = () => { setTimeRange(timeMap[e]); }} /> - diff --git a/frontend/src/components/NewDashboardElement.js b/frontend/src/components/NewDashboardElement.js deleted file mode 100644 index 30fdfd67..00000000 --- a/frontend/src/components/NewDashboardElement.js +++ /dev/null @@ -1,122 +0,0 @@ -import React, { useContext, useEffect } from "react"; -import { - chakra, - FormLabel, - Input, - Stack, - InputGroup, - Box, - Button, - Table, - Th, - Td, - Tr, - Thead, - Tbody, - Center, - Checkbox, - CloseButton, - InputRightAddon, - Badge, - InputLeftAddon, -} from "@chakra-ui/react"; -import { CheckCircleIcon } from "@chakra-ui/icons"; -import { useStorage, useSubscriptions } from "../core/hooks"; -import Downshift from "downshift"; -import color from "color"; -import OverlayContext from "../core/providers/OverlayProvider/context"; -import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; -import UIContext from "../core/providers/UIProvider/context"; - -const NewDashboardElement = (props) => { - const ui = useContext(UIContext); - const overlay = useContext(OverlayContext); - const [newDashboardForm, setNewDashboardForm] = useStorage( - sessionStorage, - "new_dashboard", - { - name: "", - subscriptions: [ - { - label: "", - abi: false, - subscription_id: null, - isMethods: false, - isEvents: false, - generic: { - transactions: { - in: false, - out: false, - }, - value: { - in: false, - out: false, - balance: false, - }, - }, - }, - ], - } - ); - - const subscriptions = useSubscriptions(); - - const [pickerItems, setPickerItems] = React.useState( - subscriptions.subscriptionsCache.data?.subscriptions - ); - - useEffect(() => { - newDashboardForm.subscriptions.forEach((element, idx) => { - const subscription = - subscriptions.subscriptionsCache.data?.subscriptions.find( - (subscription_item) => - element.subscription_id === subscription_item.id - ); - - if ( - element.subscription_id && - subscription && - newDashboardForm.subscriptions[idx].abi !== subscription?.abi - ) { - const newestDashboardForm = { ...newDashboardForm }; - newestDashboardForm.subscriptions[idx].abi = subscription.abi; - setNewDashboardForm(newestDashboardForm); - } - }); - }, [ - subscriptions.subscriptionsCache.data, - newDashboardForm, - setNewDashboardForm, - ]); - - useEffect(() => { - if (!subscriptions.subscriptionsCache.isLoading) { - const massaged = subscriptions.subscriptionsCache.data?.subscriptions.map( - (item) => { - return { value: item.address, ...item }; - } - ); - setPickerItems(massaged); - } - }, [ - subscriptions.subscriptionsCache.data, - subscriptions.subscriptionsCache.isLoading, - ]); - - const filterFn = (item, inputValue) => - (item.subscription_type_id === "ethereum_blockchain" || - item.subscription_type_id === "polygon_blockchain") && - (!inputValue || - item.address.toUpperCase().includes(inputValue.toUpperCase()) || - item.label.toUpperCase().includes(inputValue.toUpperCase())); - - return ( - <> - - - ); -}; - -const ChakraNewDashboard = chakra(NewDashboardElement); - -export default ChakraNewDashboard; diff --git a/frontend/src/core/hooks/useSubscription.js b/frontend/src/core/hooks/useSubscription.js deleted file mode 100644 index 3f368325..00000000 --- a/frontend/src/core/hooks/useSubscription.js +++ /dev/null @@ -1,25 +0,0 @@ -import { queryCacheProps } from "./hookCommon"; -import { useToast } from "."; -import { useQuery } from "react-query"; -import { SubscriptionsService } from "../services"; -import { useContext } from "react"; -import UserContext from "../providers/UserProvider/context"; - -const useSubscription = ({ id }) => { - const toast = useToast(); - const user = useContext(UserContext); - - const subscriptionLinksCache = useQuery( - ["dashboardLinks", { id }], - SubscriptionsService.getSubscriptionABI, - { - ...queryCacheProps, - onError: (error) => { - toast(error, "error"); - }, - enabled: !!user && !!id, - } - ); -}; - -export default useSubscription; diff --git a/frontend/src/core/providers/OverlayProvider/constants.js b/frontend/src/core/providers/OverlayProvider/constants.js index 660f9678..7d8d7704 100644 --- a/frontend/src/core/providers/OverlayProvider/constants.js +++ b/frontend/src/core/providers/OverlayProvider/constants.js @@ -13,7 +13,6 @@ export const MODAL_TYPES = { export const DRAWER_TYPES = { OFF: 0, NEW_DASHBOARD: 1, - NEW_DASHBOARD_ITEM: 2, }; export const ALERT_TYPES = { diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js index c4066700..253671c3 100644 --- a/frontend/src/core/providers/OverlayProvider/index.js +++ b/frontend/src/core/providers/OverlayProvider/index.js @@ -36,7 +36,6 @@ import UserContext from "../UserProvider/context"; import UIContext from "../UIProvider/context"; import useDashboard from "../../hooks/useDashboard"; import SignUp from "../../../components/SignUp"; -import NewDashboardElement from "../../../components/NewDashboardElement"; const ForgotPassword = React.lazy(() => import("../../../components/ForgotPassword") ); @@ -122,39 +121,6 @@ const OverlayProvider = ({ children }) => { window.sessionStorage.removeItem("new_dashboard"); }; - const submitNewDashboard = () => { - const dashboardState = JSON.parse(sessionStorage.getItem("new_dashboard")); - 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, - }; - - 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; - }), - }); - }; - - const submitNewDashboardItem = () => { - console.log("submit new dashboard item"); - }; useEffect(() => { if (createDashboard.isSuccess) { finishNewDashboard(); @@ -266,7 +232,6 @@ const OverlayProvider = ({ children }) => { {DRAWER_TYPES.NEW_DASHBOARD && "New dashboard"} - {DRAWER_TYPES.NEW_DASHBOARD_ITEM && "New dashboard element"} @@ -275,11 +240,6 @@ const OverlayProvider = ({ children }) => { )} - {DRAWER_TYPES.NEW_DASHBOARD_ITEM && ( - }> - - - )} + + Not Available + + )} + + + + + + {isEditing && + + } onClick={handleSubmit} /> + } onClick={() => setIsEditing(false)} /> + } + + + + deleteSubscription.mutate(subscription.id) + } + > + + + + + + + + + )} + {isDesktopView && ( + + + + pool icon + + + + + updateCallback({ + id: subscription.id, + label: nextValue, + }) + } + > + + + + + + {subscription.address?.startsWith("tag") ? ( + {mapper[subscription.address]} + ) : ( + {subscription.address} + )} + + + {subscription.abi ? ( + + ) : ( + + )} + + + + updateCallback({ id: subscription.id, color: color }) + } + /> + + + {moment(subscription.created_at).format("L")} + + + + + deleteSubscription.mutate(subscription.id) + } + > + } + /> + + + + )} + + ); +} + +export default SubscriptionCard; + diff --git a/frontend/src/components/SubscriptionsList.js b/frontend/src/components/SubscriptionsList.js index d9876dbf..0428eef3 100644 --- a/frontend/src/components/SubscriptionsList.js +++ b/frontend/src/components/SubscriptionsList.js @@ -1,4 +1,4 @@ -import React, { useContext } from "react"; +import React, { useContext, useState } from "react"; import { Skeleton, IconButton, Container } from "@chakra-ui/react"; import { Table, @@ -8,11 +8,14 @@ import { Thead, Tbody, Tooltip, + Input, Editable, EditableInput, EditablePreview, + useEditableControls, Image, Button, + ButtonGroup, useMediaQuery, Accordion, AccordionItem, @@ -23,9 +26,9 @@ import { Flex, Text, Spacer, - Stack, + Stack } from "@chakra-ui/react"; -import { CheckIcon, DeleteIcon } from "@chakra-ui/icons"; +import { CheckIcon, CloseIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons"; import moment from "moment"; import CopyButton from "./CopyButton"; import { useSubscriptions } from "../core/hooks"; @@ -33,12 +36,39 @@ import ConfirmationRequest from "./ConfirmationRequest"; import ColorSelector from "./ColorSelector"; import OverlayContext from "../core/providers/OverlayProvider/context"; import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; +import SubscriptionCard from "./SubscriptionCard"; const mapper = { "tag:erc721": "NFTs", "input:address": "Address", }; +const EditableControls = () => { + const { + isEditing, + getSubmitButtonProps, + getCancelButtonProps, + getEditButtonProps, + } = useEditableControls() + + return isEditing ? ( + + } {...getSubmitButtonProps()} /> + } {...getCancelButtonProps()} /> + + ) : ( + + } {...getEditButtonProps()} /> + + ) +} + +// const truncateText = function(text) { +// if(text.length > 7) { +// return text.substring() +// } +// } + const SubscriptionsList = ({ emptyCTA }) => { const [isLargerThan530px] = useMediaQuery(["(min-width: 530px)"]); const overlay = useContext(OverlayContext); @@ -50,6 +80,8 @@ const SubscriptionsList = ({ emptyCTA }) => { subscriptionTypeNames, } = useSubscriptions(); + const [inputState, setInputState] = useState() + const updateCallback = ({ id, label, color }) => { const data = { id: id }; label && (data.label = label); @@ -97,242 +129,20 @@ const SubscriptionsList = ({ emptyCTA }) => { const iconLink = subscriptionTypeIcons[subscription.subscription_type_id]; return ( - - - - pool icon - - - - - updateCallback({ - id: subscription.id, - label: nextValue, - }) - } - > - - - - - - {subscription.address?.startsWith("tag") ? ( - {mapper[subscription.address]} - ) : ( - {subscription.address} - )} - - - {subscription.abi ? ( - - ) : ( - - )} - - - - updateCallback({ id: subscription.id, color: color }) - } - /> - - - {moment(subscription.created_at).format("L")} - - - - - deleteSubscription.mutate(subscription.id) - } - > - } - /> - - - + ); })} )} {!isLargerThan530px && ( - + {subscriptionsCache.data.subscriptions.map((subscription) => { const iconLink = subscriptionTypeIcons[subscription.subscription_type_id]; return ( - -

- - - - pool icon - - - updateCallback({ - id: subscription.id, - label: nextValue, - }) - } - > - - - - - - -

- - - - Address: - - {subscription.address?.startsWith("tag") ? ( - - {mapper[subscription.address]} - - ) : ( - - {subscription.address} - - )} - - - Abi: - - {subscription.abi ? ( - - ) : ( - - )} - - - - - deleteSubscription.mutate(subscription.id) - } - > - - - - - - + ); })} From 042edda53c879571a094e1a6bbb2cbee54c3cef0 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Wed, 20 Apr 2022 15:41:43 +0100 Subject: [PATCH 31/87] lint status page --- frontend/pages/status/index.js | 34 +++++++++++++--------------------- 1 file changed, 13 insertions(+), 21 deletions(-) diff --git a/frontend/pages/status/index.js b/frontend/pages/status/index.js index 80eec26c..b307070b 100644 --- a/frontend/pages/status/index.js +++ b/frontend/pages/status/index.js @@ -16,9 +16,7 @@ const Status = () => { return rawTimestamp.replace(/^.+T/, "").replace(/\..+/, ""); }; - const { - serverListStatusCache, - } = useStatus(); + const { serverListStatusCache } = useStatus(); console.log(serverListStatusCache?.data); @@ -223,20 +221,14 @@ const Status = () => { : downStatusText} - + {dbServerStatus?.response?.ethereum_block_latest ? dbServerStatus.response.ethereum_block_latest : 0} - + {dbServerStatus?.response?.polygon_block_latest ? dbServerStatus.response.polygon_block_latest @@ -246,7 +238,10 @@ const Status = () => {
- + { : downStatusText} - + {dbReplicaServerStatus?.response?.ethereum_block_latest ? dbReplicaServerStatus.response.ethereum_block_latest : 0} - + {dbReplicaServerStatus?.response?.polygon_block_latest ? dbReplicaServerStatus.response.polygon_block_latest @@ -282,7 +271,10 @@ const Status = () => {
- + Date: Wed, 20 Apr 2022 15:43:52 +0100 Subject: [PATCH 32/87] something works with renaming on mobile screen wip --- frontend/src/components/EditableControls.js | 50 -- frontend/src/components/SubscriptionCard.js | 709 +++++++++--------- frontend/src/components/SubscriptionsList.js | 90 +-- .../UpdateSubscriptionLabelInput.js | 82 ++ .../providers/OverlayProvider/constants.js | 1 + .../core/providers/OverlayProvider/index.js | 8 + 6 files changed, 451 insertions(+), 489 deletions(-) delete mode 100644 frontend/src/components/EditableControls.js create mode 100644 frontend/src/components/UpdateSubscriptionLabelInput.js diff --git a/frontend/src/components/EditableControls.js b/frontend/src/components/EditableControls.js deleted file mode 100644 index f599891e..00000000 --- a/frontend/src/components/EditableControls.js +++ /dev/null @@ -1,50 +0,0 @@ -import React, { useContext, useState } from "react"; -import { Skeleton, IconButton, Container, useEditable } from "@chakra-ui/react"; -import { - Td, - Tr, - Tooltip, - Editable, - EditableInput, - EditablePreview, - useEditableControls, - Image, - Button, - ButtonGroup, - useMediaQuery, - AccordionItem, - AccordionButton, - AccordionPanel, - AccordionIcon, - Flex, - Text, - Spacer, - Stack -} from "@chakra-ui/react"; - - - -function EditableControls(editButtonClick) { - const { - isEditing, - getSubmitButtonProps, - getCancelButtonProps, - getEditButtonProps, - onEdit - } = useEditable() - - React.useEffect(() => { if (editButtonClick) { onEdit() } }, [editButtonClick]) - - return isEditing ? ( - - } {...getSubmitButtonProps()} /> - } {...getCancelButtonProps()} /> - - ) : ( - - } {...getEditButtonProps()} /> - - ) -} - -export default EditableControls; \ No newline at end of file diff --git a/frontend/src/components/SubscriptionCard.js b/frontend/src/components/SubscriptionCard.js index afcd22e6..cfd14e34 100644 --- a/frontend/src/components/SubscriptionCard.js +++ b/frontend/src/components/SubscriptionCard.js @@ -1,28 +1,24 @@ -import React, { useContext, useEffect, useState } from "react"; -import { Skeleton, IconButton, Container, useEditable, useOutsideClick } from "@chakra-ui/react"; +import React, { useContext } from "react"; +import { IconButton } from "@chakra-ui/react"; import { - Td, - Tr, - Tooltip, - Editable, - Input, - EditableInput, - EditablePreview, - useEditableControls, - Image, - Button, - ButtonGroup, - useMediaQuery, - AccordionItem, - AccordionButton, - AccordionPanel, - AccordionIcon, - Flex, - Text, - Spacer, - Stack + Td, + Tr, + Tooltip, + Editable, + EditableInput, + EditablePreview, + Image, + Button, + AccordionItem, + AccordionButton, + AccordionPanel, + AccordionIcon, + Flex, + Text, + Spacer, + Stack, } from "@chakra-ui/react"; -import { CheckIcon, CloseIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons"; +import { CheckIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons"; import moment from "moment"; import CopyButton from "./CopyButton"; import { useSubscriptions } from "../core/hooks"; @@ -30,361 +26,344 @@ import ConfirmationRequest from "./ConfirmationRequest"; import ColorSelector from "./ColorSelector"; import OverlayContext from "../core/providers/OverlayProvider/context"; import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; -import EditableControls from "./EditableControls"; -import { BiHandicap } from "react-icons/bi"; const mapper = { - "tag:erc721": "NFTs", - "input:address": "Address", + "tag:erc721": "NFTs", + "input:address": "Address", }; - const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => { - const overlay = useContext(OverlayContext); - const { - updateSubscription, - deleteSubscription, - subscriptionTypeNames, - } = useSubscriptions(); + const overlay = useContext(OverlayContext); + const { updateSubscription, deleteSubscription, subscriptionTypeNames } = + useSubscriptions(); + const [_isLoading, _setIsLoading] = React.useState( + updateSubscription.isLoading + ); - const [inputState, setInputState] = useState() - const [isEditing, setIsEditing] = useState(false) - const inputRef = React.useRef() - useEffect(() => { - if (isEditing && inputRef.current) { - inputRef.current.focus() - } - }, [isEditing, inputRef.current]) + const updateCallback = ({ id, label, color }) => { + const data = { id: id }; + label && (data.label = label); + color && (data.color = color); + updateSubscription.mutate(data); + }; - useOutsideClick({ ref: inputRef, handler: () => { setIsEditing(false) } }) + const cellProps = { + px: ["16px", "8px", "16px"], + }; - const updateCallback = ({ id, label, color }) => { - const data = { id: id }; - label && (data.label = label); - color && (data.color = color); - updateSubscription.mutate(data); - }; + React.useEffect(() => { + console.log("update subscription ue"); + if (updateSubscription.isLoading) _setIsLoading(true); + else _setIsLoading(false); + }, [updateSubscription.isLoading]); - const handleSubmit = () => { - updateCallback({ - id: subscription.id, - label: inputState, - }) - } + const getIsLoading = React.useCallback(() => { + console.log("getIsLoading", updateSubscription.isLoading); + return updateSubscription.isLoading; + }, [updateSubscription.isLoading]); + console.log("updateSubscription.isLoading", updateSubscription.isLoading); + return ( + <> + {!isDesktopView && ( + +

+ + + + pool icon + + {subscription.label} - const cellProps = { - px: ["16px", "8px", "16px"], - }; + {/* { + setInputState(e.target.value); + }} + // onClick={() => { setIsEditing(true) }} + ref={inputRef} + variant="outline" + > */} + + + +

+ + + + Address: + {/* */} - console.log(isEditing); - return ( - <> - {!isDesktopView && ( - -

- - - - pool icon - + {subscription.address?.startsWith("tag") ? ( + + {mapper[subscription.address]} + + ) : ( + + + {subscription.address} + + + )} + + + Abi: + + {subscription.abi ? ( + + ) : ( + // + Not Available + )} + + + - { setInputState(e.target.value) }} - // onClick={() => { setIsEditing(true) }} - ref={inputRef} - variant="flushed" - > - - - - - -

- - - - Address: - {/* */} - - {subscription.address?.startsWith("tag") ? ( - - {mapper[subscription.address]} - - ) : ( - - {subscription.address} - - - )} - - - Abi: - - {subscription.abi ? ( - - ) : ( - // - - Not Available - - )} - - - - - - {isEditing && - - } onClick={handleSubmit} /> - } onClick={() => setIsEditing(false)} /> - } - - - - deleteSubscription.mutate(subscription.id) - } - > - - - - - - - - + + {/* {isEditing && ( + + } onClick={handleSubmit} /> + } + onClick={() => setIsEditing(false)} + /> + + )} */} + + + deleteSubscription.mutate(subscription.id)} + > + + + + + + + + )} + {isDesktopView && ( + + + + pool icon + + + + + updateCallback({ + id: subscription.id, + label: nextValue, + }) + } + > + + + + + + {subscription.address?.startsWith("tag") ? ( + {mapper[subscription.address]} + ) : ( + {subscription.address} )} - {isDesktopView && ( - - - - pool icon - - - - - updateCallback({ - id: subscription.id, - label: nextValue, - }) - } - > - - - - - - {subscription.address?.startsWith("tag") ? ( - {mapper[subscription.address]} - ) : ( - {subscription.address} - )} - - - {subscription.abi ? ( - - ) : ( - - )} - - - - updateCallback({ id: subscription.id, color: color }) - } - /> - - - {moment(subscription.created_at).format("L")} - - - - - deleteSubscription.mutate(subscription.id) - } - > - } - /> - - - + + + {subscription.abi ? ( + + ) : ( + )} - - ); -} + + + + updateCallback({ id: subscription.id, color: color }) + } + /> + + + {moment(subscription.created_at).format("L")} + + + + deleteSubscription.mutate(subscription.id)} + > + } + /> + + + + )} + + ); +}; export default SubscriptionCard; - diff --git a/frontend/src/components/SubscriptionsList.js b/frontend/src/components/SubscriptionsList.js index 0428eef3..7571ab41 100644 --- a/frontend/src/components/SubscriptionsList.js +++ b/frontend/src/components/SubscriptionsList.js @@ -1,21 +1,12 @@ -import React, { useContext, useState } from "react"; -import { Skeleton, IconButton, Container } from "@chakra-ui/react"; +import React from "react"; +import { Skeleton, Container } from "@chakra-ui/react"; import { Table, Th, - Td, Tr, Thead, Tbody, - Tooltip, - Input, - Editable, - EditableInput, - EditablePreview, - useEditableControls, - Image, Button, - ButtonGroup, useMediaQuery, Accordion, AccordionItem, @@ -23,71 +14,13 @@ import { AccordionPanel, AccordionIcon, Box, - Flex, - Text, - Spacer, - Stack } from "@chakra-ui/react"; -import { CheckIcon, CloseIcon, DeleteIcon, EditIcon } from "@chakra-ui/icons"; -import moment from "moment"; -import CopyButton from "./CopyButton"; import { useSubscriptions } from "../core/hooks"; -import ConfirmationRequest from "./ConfirmationRequest"; -import ColorSelector from "./ColorSelector"; -import OverlayContext from "../core/providers/OverlayProvider/context"; -import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; import SubscriptionCard from "./SubscriptionCard"; -const mapper = { - "tag:erc721": "NFTs", - "input:address": "Address", -}; - -const EditableControls = () => { - const { - isEditing, - getSubmitButtonProps, - getCancelButtonProps, - getEditButtonProps, - } = useEditableControls() - - return isEditing ? ( - - } {...getSubmitButtonProps()} /> - } {...getCancelButtonProps()} /> - - ) : ( - - } {...getEditButtonProps()} /> - - ) -} - -// const truncateText = function(text) { -// if(text.length > 7) { -// return text.substring() -// } -// } - const SubscriptionsList = ({ emptyCTA }) => { const [isLargerThan530px] = useMediaQuery(["(min-width: 530px)"]); - const overlay = useContext(OverlayContext); - const { - subscriptionsCache, - updateSubscription, - deleteSubscription, - subscriptionTypeIcons, - subscriptionTypeNames, - } = useSubscriptions(); - - const [inputState, setInputState] = useState() - - const updateCallback = ({ id, label, color }) => { - const data = { id: id }; - label && (data.label = label); - color && (data.color = color); - updateSubscription.mutate(data); - }; + const { subscriptionsCache, subscriptionTypeIcons } = useSubscriptions(); const cellProps = { px: ["16px", "8px", "16px"], @@ -129,20 +62,29 @@ const SubscriptionsList = ({ emptyCTA }) => { const iconLink = subscriptionTypeIcons[subscription.subscription_type_id]; return ( - + ); })} )} {!isLargerThan530px && ( - + {subscriptionsCache.data.subscriptions.map((subscription) => { const iconLink = subscriptionTypeIcons[subscription.subscription_type_id]; return ( - + ); })} diff --git a/frontend/src/components/UpdateSubscriptionLabelInput.js b/frontend/src/components/UpdateSubscriptionLabelInput.js new file mode 100644 index 00000000..3643c66c --- /dev/null +++ b/frontend/src/components/UpdateSubscriptionLabelInput.js @@ -0,0 +1,82 @@ +import React, { useContext, useState, useEffect, useRef } from "react"; +import { Button, Input } from "@chakra-ui/react"; +import OverlayContext from "../core/providers/OverlayProvider/context"; +import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; +import { useSubscriptions } from "../core/hooks"; + +const MobileFiledInput = ({ + onChange, + inidialValue, + cancelText, + submitText, + id, +}) => { + const { updateSubscription } = useSubscriptions(); + const isLoading = updateSubscription.isLoading; + const [value, setValue] = useState(inidialValue); + const updateCallback = () => { + const data = { id: id }; + value && (data.label = value); + updateSubscription.mutate(data); + }; + const [wasSubmitted, setWasSubmitted] = useState(false); + console.log("MobileFiledInput", isLoading, wasSubmitted); + const inputRef = useRef(); + const handleChange = (e) => { + setValue(e.target.value); + onChange && onChange(e); + }; + + const overlay = useContext(OverlayContext); + const handleSubmit = (e) => { + e.preventDefault(); + updateCallback({}); + }; + + useEffect(() => { + if (isLoading) { + setWasSubmitted(true); + } + }, [isLoading]); + + useEffect(() => { + if (inputRef.current) { + inputRef.current.focus(); + } + }, []); + + useEffect(() => { + if (!isLoading && wasSubmitted) { + overlay.toggleModal({ type: MODAL_TYPES.OFF }); + setWasSubmitted(false); + } + }, [isLoading, overlay, wasSubmitted]); + + return ( + <> + + + + + ); +}; + +export default MobileFiledInput; diff --git a/frontend/src/core/providers/OverlayProvider/constants.js b/frontend/src/core/providers/OverlayProvider/constants.js index e8cf24cf..b4466f21 100644 --- a/frontend/src/core/providers/OverlayProvider/constants.js +++ b/frontend/src/core/providers/OverlayProvider/constants.js @@ -9,6 +9,7 @@ export const MODAL_TYPES = { NEW_SUBSCRIPTON: 7, UPLOAD_ABI: 8, NEW_DASHBOARD_FLOW: 9, + MOBILE_INPUT_FIELD: 10, }; export const DRAWER_TYPES = { diff --git a/frontend/src/core/providers/OverlayProvider/index.js b/frontend/src/core/providers/OverlayProvider/index.js index b1d14e13..ce67ef24 100644 --- a/frontend/src/core/providers/OverlayProvider/index.js +++ b/frontend/src/core/providers/OverlayProvider/index.js @@ -38,6 +38,7 @@ import SignUp from "../../../components/SignUp"; import NewDashboardChart from "../../../components/NewDashboardChart"; import { useRouter } from "../../hooks"; import { DASHBOARD_UPDATE_ACTIONS } from "../../constants"; +import UpdateSubscriptionLabelInput from "../../../components/UpdateSubscriptionLabelInput"; const NewDashboardName = React.lazy(() => import("../../../components/NewDashboardName") ); @@ -64,6 +65,7 @@ const OverlayProvider = ({ children }) => { const [modal, toggleModal] = useState({ type: MODAL_TYPES.OFF, props: undefined, + key: undefined, }); const [drawer, toggleDrawer] = useState({ type: DRAWER_TYPES.OFF, @@ -224,6 +226,8 @@ const OverlayProvider = ({ children }) => { }); }; + console.log("_key:", modal._key); + return ( { {modal.type === MODAL_TYPES.UPLOAD_ABI && "Assign ABI"} {modal.type === MODAL_TYPES.NEW_DASHBOARD_FLOW && "Would you like to give it a name?"} + {modal.type === MODAL_TYPES.MOBILE_INPUT_FIELD && modal.props.title} @@ -316,6 +321,9 @@ const OverlayProvider = ({ children }) => { {modal.type === MODAL_TYPES.NEW_DASHBOARD_FLOW && ( )} + {modal.type === MODAL_TYPES.MOBILE_INPUT_FIELD && ( + + )} From b566132245e5a80eca2db34e0ae6389f0cd11cc4 Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Wed, 20 Apr 2022 23:40:17 -0400 Subject: [PATCH 33/87] Fixed delete button. Restored copy address link. --- frontend/src/components/SubscriptionCard.js | 20 ++++++-------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/SubscriptionCard.js b/frontend/src/components/SubscriptionCard.js index cfd14e34..b8070a28 100644 --- a/frontend/src/components/SubscriptionCard.js +++ b/frontend/src/components/SubscriptionCard.js @@ -57,11 +57,6 @@ const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => { else _setIsLoading(false); }, [updateSubscription.isLoading]); - const getIsLoading = React.useCallback(() => { - console.log("getIsLoading", updateSubscription.isLoading); - return updateSubscription.isLoading; - }, [updateSubscription.isLoading]); - console.log("updateSubscription.isLoading", updateSubscription.isLoading); return ( <> {!isDesktopView && ( @@ -115,7 +110,7 @@ const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => { - + Address: {/* */} @@ -125,13 +120,14 @@ const SubscriptionCard = ({ subscription, isDesktopView, iconLink }) => { ) : ( + { position: "absolute", top: 0, left: "100%", + pt: "9px", + marginLeft: "-2px", }} > {subscription.address} )} - + { size="xs" py={2} disabled={!subscription.address} - onClick={() => - overlay.toggleModal({ - type: MODAL_TYPES.UPLOAD_ABI, - props: { id: subscription.id }, - }) - } leftIcon={} > Delete From 97e9d70bd577413279072016d3f828cc7a0e285d Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Thu, 21 Apr 2022 10:56:54 +0100 Subject: [PATCH 34/87] added schema version to mixpanel analytics --- frontend/src/core/providers/AnalyticsProvider/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/core/providers/AnalyticsProvider/index.js b/frontend/src/core/providers/AnalyticsProvider/index.js index b2762004..1602754a 100644 --- a/frontend/src/core/providers/AnalyticsProvider/index.js +++ b/frontend/src/core/providers/AnalyticsProvider/index.js @@ -5,6 +5,8 @@ import { useClientID, useUser, useRouter } from "../../hooks"; import { MIXPANEL_EVENTS, MIXPANEL_PROPS } from "./constants"; import UIContext from "../UIProvider/context"; +const TELEMETRY_SCHEMA_VERSION = 1.0; + const AnalyticsProvider = ({ children }) => { const clientID = useClientID(); const analytics = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN; @@ -138,7 +140,7 @@ const AnalyticsProvider = ({ children }) => { loaded: () => { setIsLoaded(true); mixpanel.identify(clientID); - mixpanel.register({ schema_version: 1.0 }); + mixpanel.register({ schema_version: TELEMETRY_SCHEMA_VERSION }); }, }); } catch (error) { From e8a0cd06735a6ad4188cccdb5adb591f123aa5e6 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Thu, 21 Apr 2022 13:37:33 +0100 Subject: [PATCH 35/87] fix zindex of docs --- frontend/pages/docs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/pages/docs.js b/frontend/pages/docs.js index e0a8b00e..1b837d6a 100644 --- a/frontend/pages/docs.js +++ b/frontend/pages/docs.js @@ -8,7 +8,7 @@ const Docs = () => { return ( // <> - + Date: Thu, 21 Apr 2022 13:38:06 +0100 Subject: [PATCH 36/87] change schema of sitemap constanto to be nested --- frontend/src/components/Footer.js | 34 ++++--- frontend/src/components/LandingNavbar.js | 53 ++++++++--- frontend/src/core/constants.js | 110 +++++++++++++++++------ 3 files changed, 146 insertions(+), 51 deletions(-) diff --git a/frontend/src/components/Footer.js b/frontend/src/components/Footer.js index 01ac8881..760a58d6 100644 --- a/frontend/src/components/Footer.js +++ b/frontend/src/components/Footer.js @@ -12,11 +12,7 @@ import { chakra, } from "@chakra-ui/react"; import RouterLink from "next/link"; -import { - WHITE_LOGO_W_TEXT_URL, - ALL_NAV_PATHES, - FOOTER_COLUMNS, -} from "../core/constants"; +import { WHITE_LOGO_W_TEXT_URL, SITEMAP } from "../core/constants"; import { FaGithub, FaTwitter, FaDiscord } from "react-icons/fa"; import moment from "moment"; @@ -69,9 +65,9 @@ const Footer = () => ( bg={useColorModeValue("blue.900", "gray.900")} color={useColorModeValue("gray.700", "gray.200")} > - + @@ -112,16 +108,30 @@ const Footer = () => ( - {Object.values(FOOTER_COLUMNS).map((columnEnum, colIndex) => { + {Object.values(SITEMAP).map((category, colIndex) => { return ( - {ALL_NAV_PATHES.filter( - (navPath) => navPath.footerCategory === columnEnum + <> + {category.title} + {category.children.map((linkItem, linkItemIndex) => { + return ( + + {linkItem.title} + + ); + })} + + {/* {SITEMAP.filter( + (navPath) => navPath.SiteMapCategory === columnEnum ).length > 0 && ( <> {columnEnum} {ALL_NAV_PATHES.filter( - (navPath) => navPath.footerCategory === columnEnum + (navPath) => navPath.SiteMapCategory === columnEnum ).map((linkItem, linkItemIndex) => { return ( ( ); })} - )} + )} */} ); })} diff --git a/frontend/src/components/LandingNavbar.js b/frontend/src/components/LandingNavbar.js index 89f26406..5c02fec7 100644 --- a/frontend/src/components/LandingNavbar.js +++ b/frontend/src/components/LandingNavbar.js @@ -8,13 +8,17 @@ import { Link, IconButton, Flex, + Menu, + MenuButton, + MenuList, + MenuItem, } from "@chakra-ui/react"; -import { HamburgerIcon } from "@chakra-ui/icons"; +import { ChevronDownIcon, HamburgerIcon } from "@chakra-ui/icons"; import useModals from "../core/hooks/useModals"; import UIContext from "../core/providers/UIProvider/context"; import ChakraAccountIconButton from "./AccountIconButton"; import RouteButton from "./RouteButton"; -import { ALL_NAV_PATHES, WHITE_LOGO_W_TEXT_URL } from "../core/constants"; +import { SITEMAP, WHITE_LOGO_W_TEXT_URL } from "../core/constants"; import router from "next/router"; import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; @@ -59,21 +63,46 @@ const LandingNavbar = () => { <> - {ALL_NAV_PATHES.map((item, idx) => ( - - {item.title} - + {SITEMAP.map((item, idx) => ( + <> + {!item.children && ( + + {item.title} + + )} + {item.children && ( + + }> + {item.title} + + + {item.children.map((child, idx) => ( + + + {child.title} + + + ))} + + + )} + ))} {ui.isLoggedIn && ( */} + { + if (mixpanel.get_distinct_id()) { + mixpanel.track( + `${MIXPANEL_EVENTS.BUTTON_CLICKED}`, + { + full_url: router.nextRouter.asPath, + buttonName: `Join our Discord`, + page: `landing`, + section: `bottom-line`, + } + ); + } + }} + href={"https://discord.gg/K56VNUQGvA"} + > + Learn More on Discord + + + + + + + Date: Thu, 28 Apr 2022 00:10:13 -0400 Subject: [PATCH 52/87] Updating pages to use the new SITEMAP schema. --- frontend/src/components/AccountIconButton.js | 26 ++++--- frontend/src/components/AppNavbar.js | 67 +++++++++++++---- frontend/src/components/LandingNavbar.js | 76 ++++++++++---------- frontend/src/components/Sidebar.js | 31 +++++--- 4 files changed, 132 insertions(+), 68 deletions(-) diff --git a/frontend/src/components/AccountIconButton.js b/frontend/src/components/AccountIconButton.js index bfed04b4..2bcbd6b4 100644 --- a/frontend/src/components/AccountIconButton.js +++ b/frontend/src/components/AccountIconButton.js @@ -14,7 +14,7 @@ import { import { RiAccountCircleLine } from "react-icons/ri"; import useLogout from "../core/hooks/useLogout"; import UIContext from "../core/providers/UIProvider/context"; -import { ALL_NAV_PATHES } from "../core/constants"; +import { SITEMAP } from "../core/constants"; const AccountIconButton = (props) => { const { logout } = useLogout(); @@ -47,14 +47,22 @@ const AccountIconButton = (props) => { {ui.isMobileView && - ALL_NAV_PATHES.map((pathToLink, idx) => { - return ( - - - {pathToLink.title} - - - ); + SITEMAP.map((item, idx) => { + if (item.children) { + return ( + + {item.children.map((child, idx) => { + return ( + + + {child.title} + + + ); + })} + + ); + } })} { <> {!ui.isMobileView && ( <> - + - - {ALL_NAV_PATHES.map((item, idx) => ( - - {item.title} - - ))} + + {SITEMAP.map((item, idx) => { + if (!item.children) { + return ( + + {item.title} + + ); + } else { + return ( + + } + > + {item.title} + + + + {item.children.map((child, idx) => ( + + + {child.title} + + + ))} + + + + ); + } + })} {USER_NAV_PATHES.map((item, idx) => { return ( { <> - {SITEMAP.map((item, idx) => ( - <> - {!item.children && ( - - {item.title} - - )} - {item.children && ( - - }> + {SITEMAP.map((item, idx) => { + return ( + + {!item.children && ( + {item.title} - - - - {item.children.map((child, idx) => ( - - - {child.title} - - - ))} - - - - )} - - ))} + + )} + {item.children && ( + + }> + {item.title} + + + + {item.children.map((child, idx) => ( + + + {child.title} + + + ))} + + + + )} + + ); + })} {ui.isLoggedIn && ( diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js index c659313a..16cf8136 100644 --- a/frontend/src/components/Sidebar.js +++ b/frontend/src/components/Sidebar.js @@ -25,7 +25,7 @@ import { LockIcon, } from "@chakra-ui/icons"; import { MdSettings, MdDashboard, MdTimeline } from "react-icons/md"; -import { WHITE_LOGO_W_TEXT_URL, ALL_NAV_PATHES } from "../core/constants"; +import { WHITE_LOGO_W_TEXT_URL, SITEMAP } from "../core/constants"; import useDashboard from "../core/hooks/useDashboard"; import { MODAL_TYPES } from "../core/providers/OverlayProvider/constants"; import OverlayContext from "../core/providers/OverlayProvider/context"; @@ -102,14 +102,27 @@ const Sidebar = () => { Login {ui.isMobileView && - ALL_NAV_PATHES.map((pathToLink, linkItemIndex) => { - return ( - - - {pathToLink.title} - - - ); + SITEMAP.map((item, idx) => { + if (item.children) { + return ( + + {item.children.map((child, idx) => { + return ( + + { + ui.setSidebarToggled(false); + }} + > + {child.title} + + + ); + })} + + ); + } })} )} From 990846255aa88678c3a0f64018fd629866134723 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Thu, 28 Apr 2022 12:35:39 +0100 Subject: [PATCH 53/87] landing updates and fix navbar --- frontend/pages/index.js | 173 ++++++++++----------------- frontend/src/components/AppNavbar.js | 1 - frontend/src/layouts/AppLayout.js | 8 +- 3 files changed, 67 insertions(+), 115 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index f1f0f693..79e06294 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -10,7 +10,6 @@ import { Flex, Heading, Box, - Center, chakra, Stack, useMediaQuery, @@ -29,8 +28,6 @@ import useRouter from "../src/core/hooks/useRouter"; import { AWS_ASSETS_PATH, DEFAULT_METATAGS } from "../src/core/constants"; import UIContext from "../src/core/providers/UIProvider/context"; import TrustedBadge from "../src/components/TrustedBadge"; -import Slider from "react-slick"; -import { v4 as uuidv4 } from "uuid"; import RouteButton from "../src/components/RouteButton"; import { MODAL_TYPES } from "../src/core/providers/OverlayProvider/constants"; import mixpanel from "mixpanel-browser"; @@ -42,71 +39,13 @@ const SplitWithImage = dynamic( ssr: false, } ); -const FaStoreAlt = dynamic(() => - import("react-icons/fa").then((mod) => mod.FaStoreAlt) -); const FaDiscord = dynamic(() => import("react-icons/fa").then((mod) => mod.FaDiscord) ); -const GiRiver = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiRiver) -); - -const GiCrossedChains = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiCrossedChains) -); - -const GiChainedHeart = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiChainedHeart) -); - -const MdOutlineVerifiedUser = dynamic(() => - import("react-icons/md").then((mod) => mod.MdOutlineVerifiedUser) -); - -const GiRadarCrossSection = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiRadarCrossSection) -); - -const GiMedallist = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiMedallist) -); - -const GiRobotGolem = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiRobotGolem) -); - -const CgUserlane = dynamic(() => - import("react-icons/cg").then((mod) => mod.CgUserlane) -); - -const GiChaingun = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiChaingun) -); - -const GiQuickSlash = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiQuickSlash) -); - -const GiConcentrationOrb = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiConcentrationOrb) -); - -const GiTakeMyMoney = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiTakeMyMoney) -); - const FaGithubSquare = dynamic(() => import("react-icons/fa").then((mod) => mod.FaGithubSquare) ); -const GiMeshBall = dynamic(() => - import("react-icons/gi").then((mod) => mod.GiMeshBall) -); - -const VscOrganization = dynamic(() => - import("react-icons/vsc").then((mod) => mod.VscOrganization) -); const HEADING_PROPS = { fontWeight: "700", @@ -282,6 +221,7 @@ const Homepage = () => { sx={{ scrollBehavior: "smooth" }} bgSize="cover" id="page:landing" + bgColor={"blue.50"} > { > - + { - + + + Trusted by{" "} + + + + + + + + + + + + { alignItems="center" borderRadius="12px" borderColor="gray.100" + bgColor={"blue.700"} borderWidth={"1px"} _hover={{ transform: "scale(1.05)", transition: "0.42s" }} cursor="pointer" @@ -584,58 +580,12 @@ const Homepage = () => { - - - Trusted by{" "} - - - - - - - - - - - Featured by{" "} @@ -830,6 +780,7 @@ const Homepage = () => { pb="120px" px="7%" id={"bottom-line"} + bgColor="blue.50" > { const ui = useContext(UIContext); @@ -17,12 +17,12 @@ const AppLayout = ({ children }) => { return ( {(!ui.isAppReady || !ui.isLoggedIn) && ( { zIndex={1010} /> )} - + + + {ui.isAppReady && ui.isLoggedIn && children} ); From f65049488304df1a924c2117ccaeac42a3c1dd1e Mon Sep 17 00:00:00 2001 From: Kellan Wampler Date: Thu, 28 Apr 2022 10:39:16 -0400 Subject: [PATCH 54/87] Updates to landing page. --- frontend/pages/index.js | 295 +++++++++++++---------------- frontend/src/components/Sidebar.js | 7 +- 2 files changed, 137 insertions(+), 165 deletions(-) diff --git a/frontend/pages/index.js b/frontend/pages/index.js index 79e06294..5482af41 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -10,13 +10,15 @@ import { Flex, Heading, Box, + Container, + Divider, chakra, Stack, + VStack, useMediaQuery, Grid, Text, GridItem, - SimpleGrid, Button, Image as ChakraImage, } from "@chakra-ui/react"; @@ -92,6 +94,28 @@ const carousel_content = [ { title: "immutable x coming soon!", img: assets["immutable"] }, { title: "gnosis chain coming soon!", img: assets["gnosis"] }, ]; + +const Feature = ({ image, altText, heading }) => { + return ( + + + + {heading} + + + ); +}; + const Homepage = () => { const ui = useContext(UIContext); const [background, setBackground] = useState("background720"); @@ -274,7 +298,7 @@ const Homepage = () => { fontWeight="semibold" color="white" > - Building blocks for your blockchain economy + Building blocks for your blockchain game { display="inline-block" color="blue.200" > - Moonstream DAO makes tools that help you build, - manage, and secure your blockchain economy. + We are introducing Moonstream Engine - a + groundbreaking set of tools for game design. { + + + + + + Dive into Engine Features + + + + + + + + Lootboxes, crafting, deck builder, you name it! + Whatever on-chain mechanics you want incorporated in + your project, contact us to help you launch it. It is + fast and secure. Or explore the features to know more. + + + + + + + + + + + + + + + {/* { - Features: + Dive into Engine Features + + Get the full picture of your economy with automated + customizable dashboards. + { - + */} { // mt={["32px", "64px", null]} py={["98px", "128px", null]} colSpan="12" - bgColor="blue.50" + bgColor="blue.700" + textColor="white" > - - Want to check it out? - { // lineHeight="shorter" // color={useColorModeValue("gray.900", "gray.100")} > - - To find out if Moonstream tools can benefit your project, - please contact us on Discord. - - {`You can also explore our analytics on your own! It - helps you get awesome insights into economy you're - interested in. Whether you are a game founder or a - researcher, sign up and get your instant free access.`} - - - {`PS If you need help using it, we'll readily help you - out on Discord.`} + {`Contact us on Discord to discuss your project and keep up with the latest updates on the Moonstream Engine.`} { Sign up */} { shadow="md" variant="solid" colorScheme="orange" + textColor="blue.1200" onClick={() => { if (mixpanel.get_distinct_id()) { mixpanel.track( @@ -733,141 +838,13 @@ const Homepage = () => { }} href={"https://discord.gg/K56VNUQGvA"} > - Learn More on Discord + Join the community on Discord - - - - - - Check out our GitHub repository and join our community on - Discord - - - - } - w="280px" - onClick={() => { - if (mixpanel.get_distinct_id()) { - mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - full_url: router.nextRouter.asPath, - buttonName: `Join our Discord`, - page: `landing`, - section: `bottom-line`, - }); - } - }} - > - Join our Discord - - { - if (mixpanel.get_distinct_id()) { - mixpanel.track(`${MIXPANEL_EVENTS.BUTTON_CLICKED}`, { - full_url: router.nextRouter.asPath, - buttonName: `git clone moonstream`, - page: `landing`, - section: `bottom-line`, - }); - } - }} - leftIcon={} - > - git clone moonstream - - - - - diff --git a/frontend/src/components/Sidebar.js b/frontend/src/components/Sidebar.js index 16cf8136..b6a77643 100644 --- a/frontend/src/components/Sidebar.js +++ b/frontend/src/components/Sidebar.js @@ -109,12 +109,7 @@ const Sidebar = () => { {item.children.map((child, idx) => { return ( - { - ui.setSidebarToggled(false); - }} - > + {child.title} From 92bf8aec2f78914aa792e560dfe4fb0ad52c35d3 Mon Sep 17 00:00:00 2001 From: Tim Pechersky Date: Thu, 28 Apr 2022 19:03:28 +0100 Subject: [PATCH 55/87] change google tag to universal analytics --- frontend/pages/_document.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/pages/_document.js b/frontend/pages/_document.js index 3f658609..d94357a7 100644 --- a/frontend/pages/_document.js +++ b/frontend/pages/_document.js @@ -45,7 +45,7 @@ export default class MyDocument extends Document { {/* */}