From 40633858f8dd0eb6a383c43b08e3df37d9af6b45 Mon Sep 17 00:00:00 2001 From: Ashutosh Kumar Date: Tue, 10 Dec 2024 18:35:14 +0530 Subject: [PATCH] Loading Line for better loader --- package.json | 1 - src/App.tsx | 71 ++++++++----------- src/components/ui/DaoCreator.tsx | 14 +--- src/components/ui/DaoExplorer.tsx | 14 +--- src/components/ui/LoadingLine.tsx | 55 ++++++++++++++ src/index.tsx | 30 ++++---- .../explorer/components/CodeCollapse.tsx | 12 +--- .../explorer/components/DAOStatsRow.tsx | 4 +- src/modules/explorer/pages/DAOList/index.tsx | 10 ++- .../ProposalDetails/components/CodeVisor.tsx | 2 +- src/services/beacon/hooks/useTezos.ts | 3 +- src/services/config/hooks/featureFlags.ts | 7 -- src/services/config/hooks/index.ts | 1 - src/services/services/dao/hooks/useAllDAOs.ts | 7 +- src/services/wagmi/context.tsx | 21 +++--- yarn.lock | 33 +-------- 16 files changed, 136 insertions(+), 149 deletions(-) create mode 100644 src/components/ui/LoadingLine.tsx delete mode 100644 src/services/config/hooks/featureFlags.ts delete mode 100644 src/services/config/hooks/index.ts diff --git a/package.json b/package.json index 17303163..dd5772e5 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,6 @@ "html-react-parser": "^5.0.6", "https-browserify": "^1.0.0", "jsonschema": "^1.4.0", - "launchdarkly-react-client-sdk": "2.27.0", "mixpanel-browser": "^2.42.0", "notistack": "^1.0.3", "numbro": "^2.4.0", diff --git a/src/App.tsx b/src/App.tsx index df7484d2..3c2565a3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,15 +1,11 @@ import React from "react" import "App.css" -import { withLDProvider } from "launchdarkly-react-client-sdk" + import { BrowserRouter as Router, Redirect, Route, Switch } from "react-router-dom" import mixpanel from "mixpanel-browser" import { QueryClient, QueryClientProvider } from "react-query" -import { - QueryClient as TanStackQueryClient, - QueryClientProvider as TanStackQueryClientProvider -} from "@tanstack/react-query" -import { Box, makeStyles, ThemeProvider } from "@material-ui/core" +import { Box, ThemeProvider, styled } from "@material-ui/core" import { SnackbarProvider } from "notistack" import { DAOExplorerRouter } from "modules/explorer/router" @@ -46,31 +42,31 @@ const queryClient = new QueryClient({ } }) -const styles = makeStyles({ - success: { - backgroundColor: "#4BCF93 !important", - padding: "6px 28px", - height: 54, - fontSize: 13, - lineHeight: "0px", - opacity: 1 - }, - error: { - backgroundColor: "#ED254E !important", - padding: "6px 28px", - height: 54, - fontSize: 13, - lineHeight: "0px", - opacity: 1 - }, - info: { - backgroundColor: "#3866F9 !important", - padding: "6px 28px", - height: 54, - fontSize: 13, - lineHeight: "0px", - opacity: 1 - } +const SuccessSnackbar = styled("div")({ + backgroundColor: "#4BCF93 !important", + padding: "6px 28px", + height: 54, + fontSize: 13, + lineHeight: "0px", + opacity: 1 +}) + +const ErrorSnackbar = styled("div")({ + backgroundColor: "#ED254E !important", + padding: "6px 28px", + height: 54, + fontSize: 13, + lineHeight: "0px", + opacity: 1 +}) + +const InfoSnackbar = styled("div")({ + backgroundColor: "#3866F9 !important", + padding: "6px 28px", + height: 54, + fontSize: 13, + lineHeight: "0px", + opacity: 1 }) const MIXPANEL_TOKEN = getEnv(EnvKey.REACT_APP_MIXPANEL_TOKEN) @@ -90,15 +86,13 @@ mixpanel.init(MIXPANEL_TOKEN, { mixpanel.track("Visit") const App: React.FC = () => { - const classes = styles() - return ( @@ -168,7 +162,4 @@ const App: React.FC = () => { const env = getEnv(EnvKey.REACT_APP_ENV) -export default withLDProvider({ - clientSideID: - env === "PROD" ? getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_PROD) : getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_DEV) -})(App) +export default App diff --git a/src/components/ui/DaoCreator.tsx b/src/components/ui/DaoCreator.tsx index 50479753..1ad38e34 100644 --- a/src/components/ui/DaoCreator.tsx +++ b/src/components/ui/DaoCreator.tsx @@ -1,16 +1,4 @@ -import { - Box, - Grid, - Paper, - Step, - StepLabel, - Stepper, - TextareaAutosize, - Typography, - styled, - withStyles, - withTheme -} from "@material-ui/core" +import { Grid, Paper, Stepper, TextareaAutosize, Typography, styled, withStyles, withTheme } from "@material-ui/core" import { InfoRounded } from "@mui/icons-material" import { TextField as FormikTextField } from "formik-material-ui" diff --git a/src/components/ui/DaoExplorer.tsx b/src/components/ui/DaoExplorer.tsx index 01e4d8db..87d28811 100644 --- a/src/components/ui/DaoExplorer.tsx +++ b/src/components/ui/DaoExplorer.tsx @@ -1,16 +1,4 @@ -import { - Box, - Grid, - Paper, - Step, - StepLabel, - Stepper, - TextareaAutosize, - Typography, - styled, - withStyles, - withTheme -} from "@material-ui/core" +import { styled } from "@material-ui/core" const PageLayout = styled("div")(({ theme }) => ({ background: theme.palette.primary.dark, diff --git a/src/components/ui/LoadingLine.tsx b/src/components/ui/LoadingLine.tsx new file mode 100644 index 00000000..f367817e --- /dev/null +++ b/src/components/ui/LoadingLine.tsx @@ -0,0 +1,55 @@ +import React from "react" +import { makeStyles, Theme } from "@material-ui/core/styles" + +interface LoadingLineProps { + color?: string + height?: number + barWidth?: number +} + +const useStyles = makeStyles((theme: Theme) => ({ + "root": { + width: "100%", + backgroundColor: theme.palette.grey[200], + position: "relative", + overflow: "hidden" + }, + "bar": { + height: "100%", + position: "absolute", + animation: "$loadingLine 1s infinite linear" + }, + "@keyframes loadingLine": { + "0%": { + transform: "translateX(-100%)" + }, + "100%": { + transform: "translateX(400%)" + } + } +})) + +export const LoadingLine: React.FC = ({ + color = "#3f51b5", // Default Material-UI primary color + height = 2, + barWidth = 30 +}) => { + const classes = useStyles() + + return ( +
+
+
+ ) +} diff --git a/src/index.tsx b/src/index.tsx index 6957df74..37a0daa7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ -import React from "react" -import ReactDOM from "react-dom" +import { createRoot } from "react-dom/client" + import App from "App" import { TezosProvider } from "services/beacon/context" import { EtherlinkProvider } from "services/wagmi/context" @@ -8,21 +8,17 @@ import dayjs from "dayjs" import { Web3Provider } from "services/wagmi/web3provider" import { NetworkProvider } from "services/useNetwork" -// BigNumber.config({ DECIMAL_PLACES: }) - dayjs.extend(localizedFormat) -ReactDOM.render( - - - - - - - - - - - , - document.getElementById("root") +// New React 18 way to render +createRoot(document.getElementById("root") as HTMLElement).render( + + + + + + + + + ) diff --git a/src/modules/explorer/components/CodeCollapse.tsx b/src/modules/explorer/components/CodeCollapse.tsx index 86fc3ba1..b5a8b793 100644 --- a/src/modules/explorer/components/CodeCollapse.tsx +++ b/src/modules/explorer/components/CodeCollapse.tsx @@ -1,20 +1,12 @@ -import { Collapse, Grid, IconButton, styled, Typography } from "@material-ui/core" -import { ProposalItem } from "modules/explorer/pages/User" import React, { useState } from "react" -import { Link } from "react-router-dom" -import { Proposal } from "services/services/dao/mappers/proposal/types" +import { Collapse, Grid, IconButton, Typography } from "@material-ui/core" + import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown" import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp" import { ProposalCodeEditorInput } from "./ProposalFormInput" import Prism, { highlight } from "prismjs" import { TableContainer, TableHeader } from "components/ui/Table" -const ProposalsFooter = styled(Grid)({ - padding: "16px 46px", - borderTop: ".6px solid rgba(125,140,139, 0.2)", - minHeight: 34 -}) - interface Props { code: string } diff --git a/src/modules/explorer/components/DAOStatsRow.tsx b/src/modules/explorer/components/DAOStatsRow.tsx index 6aee7f7c..68e857ca 100644 --- a/src/modules/explorer/components/DAOStatsRow.tsx +++ b/src/modules/explorer/components/DAOStatsRow.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react" -import { Box, Grid, styled, useTheme, Typography, Paper } from "@material-ui/core" +import { Box, Grid, styled, Typography, Paper } from "@material-ui/core" import { useDAO } from "services/services/dao/hooks/useDAO" import { useProposals } from "services/services/dao/hooks/useProposals" import BigNumber from "bignumber.js" @@ -7,7 +7,7 @@ import { ProposalStatus } from "services/services/dao/mappers/proposal/types" import { useDAOID } from "../pages/DAO/router" import { usePolls } from "modules/lite/explorer/hooks/usePolls" import dayjs from "dayjs" -import { useDAOHoldings, useDAONFTHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings" +import { useDAOHoldings } from "services/contracts/baseDAO/hooks/useDAOHoldings" import { useTimeLeftInCycle } from "../hooks/useTimeLeftInCycle" import { useIsProposalButtonDisabled } from "services/contracts/baseDAO/hooks/useCycleInfo" import numbro from "numbro" diff --git a/src/modules/explorer/pages/DAOList/index.tsx b/src/modules/explorer/pages/DAOList/index.tsx index c2e586af..3ad1e12c 100644 --- a/src/modules/explorer/pages/DAOList/index.tsx +++ b/src/modules/explorer/pages/DAOList/index.tsx @@ -25,6 +25,7 @@ import { ReactComponent as MyDAOsIcon } from "assets/img/my-daos-icon.svg" import { ReactComponent as MyDAOsSelectedIcon } from "assets/img/my-daos-selected-icon.svg" import ReactPaginate from "react-paginate" import "./styles.css" +import { LoadingLine } from "components/ui/LoadingLine" const PageContainer = styled("div")(({ theme }) => ({ width: "1000px", @@ -115,9 +116,9 @@ const TabsContainer = styled(Grid)(({ theme }) => ({ export const DAOList: React.FC = () => { const { network, etherlink, account } = useTezos() - const { data: daos, isLoading } = useAllDAOs(network) + const { data: daos, isLoading, isLoadingWithFirebase } = useAllDAOs(network) - console.log({ daos }) + console.log("isLoadingWithFirebase", isLoadingWithFirebase) const theme = useTheme() const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) const isMobileSmall = useMediaQuery(theme.breakpoints.down("mobile")) @@ -285,6 +286,11 @@ export const DAOList: React.FC = () => { + {isLoadingWithFirebase ? ( + + + + ) : null} diff --git a/src/modules/explorer/pages/ProposalDetails/components/CodeVisor.tsx b/src/modules/explorer/pages/ProposalDetails/components/CodeVisor.tsx index 37be13d9..4b62e4d5 100644 --- a/src/modules/explorer/pages/ProposalDetails/components/CodeVisor.tsx +++ b/src/modules/explorer/pages/ProposalDetails/components/CodeVisor.tsx @@ -1,4 +1,4 @@ -import { Grid, styled, makeStyles } from "@material-ui/core" +import { Grid, styled, Typography } from "@material-ui/core" import React, { useState } from "react" import { ResponsiveDialog } from "modules/explorer/components/ResponsiveDialog" import Prism, { highlight, plugins } from "prismjs" diff --git a/src/services/beacon/hooks/useTezos.ts b/src/services/beacon/hooks/useTezos.ts index b632b473..c9c00054 100644 --- a/src/services/beacon/hooks/useTezos.ts +++ b/src/services/beacon/hooks/useTezos.ts @@ -100,6 +100,7 @@ export const useTezos = (): WalletConnectReturn => { async (newNetwork: Network) => { mixpanel.register({ Network: newNetwork }) localStorage.setItem("homebase:network", newNetwork) + switchToNetwork(newNetwork) if (newNetwork.startsWith("etherlink")) { await handleEtherlinkNetworkChange(newNetwork) } else { @@ -107,7 +108,7 @@ export const useTezos = (): WalletConnectReturn => { } queryClient.resetQueries() }, - [handleEtherlinkNetworkChange, handleTezosNetworkChange, queryClient] + [handleEtherlinkNetworkChange, handleTezosNetworkChange, switchToNetwork, queryClient] ) const handleTezosConnect = useCallback( diff --git a/src/services/config/hooks/featureFlags.ts b/src/services/config/hooks/featureFlags.ts deleted file mode 100644 index 084cef30..00000000 --- a/src/services/config/hooks/featureFlags.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { useFlags } from "launchdarkly-react-client-sdk" -import { FeatureFlag } from "services/config/constants" - -export const useFeatureFlag = (featureFlag: FeatureFlag) => { - const flags = useFlags() - return flags[featureFlag] ?? false -} diff --git a/src/services/config/hooks/index.ts b/src/services/config/hooks/index.ts deleted file mode 100644 index 4734e37c..00000000 --- a/src/services/config/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./featureFlags" diff --git a/src/services/services/dao/hooks/useAllDAOs.ts b/src/services/services/dao/hooks/useAllDAOs.ts index 8778b51b..c0ad7b74 100644 --- a/src/services/services/dao/hooks/useAllDAOs.ts +++ b/src/services/services/dao/hooks/useAllDAOs.ts @@ -8,7 +8,7 @@ import { EtherlinkContext } from "services/wagmi/context" export const useAllDAOs = (network: Network) => { const { daos: etherinkDaos, isLoadingDaos } = useContext(EtherlinkContext) - return useQuery( + const queryData = useQuery( ["daos", network], async () => { const homebase_daos = await getDAOs(network) @@ -38,4 +38,9 @@ export const useAllDAOs = (network: Network) => { enabled: !!(network && !isLoadingDaos) } ) + + return { + ...queryData, + isLoadingWithFirebase: isLoadingDaos + } } diff --git a/src/services/wagmi/context.tsx b/src/services/wagmi/context.tsx index d6f9386b..3b1a0803 100644 --- a/src/services/wagmi/context.tsx +++ b/src/services/wagmi/context.tsx @@ -8,6 +8,7 @@ import { useEthersProvider, useEthersSigner } from "./ethers" import useFirestoreStore from "services/contracts/etherlinkDAO/hooks/useFirestoreStore" import { useParams } from "react-router-dom" import { ProposalStatus } from "services/services/dao/mappers/proposal/types" +import { useTezos } from "services/beacon/hooks/useTezos" interface EtherlinkType { isConnected: boolean @@ -23,7 +24,7 @@ interface EtherlinkType { const useEtherlinkDao = ({ network }: { network: string }) => { const selectedDaoIdRef = useRef(null) - + console.log("useEtherlinkDao", { network }) const firebaseRootCollection = useMemo(() => { if (network === "etherlink_mainnet") { return "daosEtherlink-Mainnet" @@ -34,7 +35,9 @@ const useEtherlinkDao = ({ network }: { network: string }) => { return undefined }, [network]) - const [isLoadingDaos, setIsLoadingDaos] = useState(true) + console.log({ firebaseRootCollection }) + + const [isLoadingDaos, setIsLoadingDaos] = useState(!!firebaseRootCollection) const [isLoadingDaoProposals, setIsLoadingDaoProposals] = useState(true) const [daoData, setDaoData] = useState([]) @@ -46,9 +49,8 @@ const useEtherlinkDao = ({ network }: { network: string }) => { useEffect(() => { if (firebaseRootCollection) { - fetchCollection(firebaseRootCollection).then((data: any) => { - setIsLoadingDaos(false) - }) + // Trigger DAO Loading Request + fetchCollection(firebaseRootCollection) } }, [fetchCollection, firebaseRootCollection]) @@ -57,6 +59,7 @@ const useEtherlinkDao = ({ network }: { network: string }) => { if (!firebaseRootCollection) return if (firestoreData?.[firebaseRootCollection]) { setDaoData(firestoreData[firebaseRootCollection]) + setIsLoadingDaos(false) } const daoProposalKey = `${firebaseRootCollection}/${daoSelected.id}/proposals` if (firestoreData?.[daoProposalKey]) { @@ -136,6 +139,7 @@ const getStatusByHistory = (history: { active: number; executable: number; passe export const EtherlinkContext = createContext(undefined) export const EtherlinkProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + const [network, setNetwork] = useState(localStorage.getItem("homebase:network") || undefined) const { setOpen } = useModal() const provider = useEthersProvider() const signer = useEthersSigner() @@ -162,8 +166,8 @@ export const EtherlinkProvider: React.FC<{ children: ReactNode }> = ({ children if (chain?.name === "Etherlink Testnet") { return "etherlink_testnet" } - return "unknown" - }, [chain?.name]) + return network + }, [chain?.name, network]) const { daos, @@ -176,7 +180,7 @@ export const EtherlinkProvider: React.FC<{ children: ReactNode }> = ({ children selectDaoProposal, selectDao } = useEtherlinkDao({ - network: etherlinkNetwork + network: etherlinkNetwork || "" }) console.log("Etherlink Network", etherlinkNetwork) @@ -209,6 +213,7 @@ export const EtherlinkProvider: React.FC<{ children: ReactNode }> = ({ children disconnect: () => disconnectEtherlink(wagmiConfig), switchToNetwork: (network: string) => { const networkId = network === "etherlink_mainnet" ? etherlink.id : etherlinkTestnet.id + setNetwork(network) switchChain({ chainId: networkId }) } }} diff --git a/yarn.lock b/yarn.lock index 4a3a55bd..b8cd7ffb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6250,7 +6250,7 @@ base-x@^4.0.0: resolved "https://registry.yarnpkg.com/base-x/-/base-x-4.0.0.tgz#d0e3b7753450c73f8ad2389b5c018a4af7b2224a" integrity sha512-FuwxlW4H5kh37X/oW59pwTzzTKRzfrrQwhmyspRM7swOEZcHtDZSCt45U6oKgtuFE+WYPblePMVIPR4RZrh/hw== -base64-js@^1.3.0, base64-js@^1.3.1: +base64-js@^1.3.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== @@ -11800,32 +11800,6 @@ launch-editor@^2.6.0: picocolors "^1.0.0" shell-quote "^1.8.1" -launchdarkly-js-client-sdk@2.22.1: - version "2.22.1" - resolved "https://registry.yarnpkg.com/launchdarkly-js-client-sdk/-/launchdarkly-js-client-sdk-2.22.1.tgz#e6064c79bc575eea0aa4364be41754d54d89ae6a" - integrity sha512-EAdw7B8w4m/WZGmHHLj9gbYBP6lCqJs5TQDCM9kWJOnvHBz7DJIxOdqazNMDn5AzBxfvaMG7cpLms+Cur5LD5g== - dependencies: - escape-string-regexp "^1.0.5" - launchdarkly-js-sdk-common "3.6.0" - -launchdarkly-js-sdk-common@3.6.0: - version "3.6.0" - resolved "https://registry.yarnpkg.com/launchdarkly-js-sdk-common/-/launchdarkly-js-sdk-common-3.6.0.tgz#d146be5bbd86a019c4bedc52e66c37a1ffa7bb3d" - integrity sha512-wCdBoBiYXlP64jTrC0dOXY2B345LSJO/IvitbdW4kBKmJ1DkeufpqV0s5DBlwE0RLzDmaQx3mRTmcoNAIhIoaA== - dependencies: - base64-js "^1.3.0" - fast-deep-equal "^2.0.1" - uuid "^3.3.2" - -launchdarkly-react-client-sdk@2.27.0: - version "2.27.0" - resolved "https://registry.yarnpkg.com/launchdarkly-react-client-sdk/-/launchdarkly-react-client-sdk-2.27.0.tgz#18a2f470e3af166d25d2252e4a14f092378fc2cb" - integrity sha512-I2mmY5OHbc8bHkfYlt131cRXjSolCzbMtt0lMeN7vC5vMWnjNnLCT08YRrqromnNgPNUtg/7kwPEUTOmUCFqiA== - dependencies: - hoist-non-react-statics "^3.3.2" - launchdarkly-js-client-sdk "2.22.1" - lodash.camelcase "^4.3.0" - leven@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2" @@ -16969,11 +16943,6 @@ utils-merge@1.0.1: resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713" integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA== -uuid@^3.3.2: - version "3.4.0" - resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee" - integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A== - uuid@^8.3.2: version "8.3.2" resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"