From ba94732d33d7954d463cb42d6434629d840301b4 Mon Sep 17 00:00:00 2001 From: Sergio Martin Date: Mon, 3 Oct 2022 08:21:54 -0500 Subject: [PATCH] Lint / Format Config (#337) * Fixed lint / format configs * Added .editorconfig * Fixed Husky hooks, now on pre-commit lint-check will be run * Fixed all lint issues --- .editorconfig | 9 + .eslintrc.json | 2 +- .husky/.gitignore | 1 - .husky/pre-commit | 4 + .husky/pre-push | 4 - .nvmrc | 2 +- .prettierrc.json | 12 + package.json | 15 +- src/App.tsx | 89 ++- src/index.tsx | 18 +- src/models/Token.ts | 149 ++-- src/modules/common/Blockie.tsx | 42 +- src/modules/common/ChangeNetworkButton.tsx | 49 +- src/modules/common/CloseButton.tsx | 31 +- src/modules/common/CopyAddress.tsx | 25 +- src/modules/common/CopyButton.tsx | 22 +- src/modules/common/ExternalLink.tsx | 37 +- src/modules/common/Footer.tsx | 18 +- src/modules/common/MainButton.tsx | 41 +- src/modules/common/Markdown.tsx | 57 +- src/modules/common/ScrollToTop.tsx | 12 +- src/modules/common/SmallButton.tsx | 33 +- src/modules/common/TitleBlock.tsx | 61 +- src/modules/common/Toolbar.tsx | 251 +++---- src/modules/common/WarningFooter.tsx | 44 +- src/modules/common/hooks/useLocalStorage.ts | 61 +- src/modules/common/hooks/useNotification.tsx | 51 +- src/modules/creator/components/ClaimName.tsx | 16 +- .../creator/components/ConnectWallet.tsx | 32 +- .../creator/components/DeploymentLoader.tsx | 133 ++-- .../creator/components/NavigationBar.tsx | 53 +- .../creator/components/ProtectedRoute.tsx | 24 +- .../creator/components/SuspenseDots.tsx | 64 +- src/modules/creator/index.tsx | 104 ++- src/modules/creator/state/context.tsx | 133 ++-- src/modules/creator/state/index.ts | 6 +- src/modules/creator/state/types.ts | 132 ++-- src/modules/creator/state/utils.ts | 19 +- src/modules/creator/steps/DaoSettings.tsx | 702 ++++++++---------- src/modules/creator/steps/Governance.tsx | 522 +++++-------- src/modules/creator/steps/Quorum.tsx | 330 +++----- src/modules/creator/steps/Review.tsx | 123 ++- src/modules/creator/steps/Summary.tsx | 234 ++---- src/modules/creator/steps/Template.tsx | 145 ++-- src/modules/creator/steps/index.tsx | 75 +- src/modules/explorer/components/AppTabBar.tsx | 82 +- src/modules/explorer/components/BatchBar.tsx | 103 ++- .../explorer/components/BottomSheet.tsx | 13 +- .../components/ChangeNetworkButton.tsx | 49 +- .../components/ConfigProposalForm.tsx | 118 +-- .../explorer/components/ContentContainer.tsx | 6 +- .../explorer/components/CopyButton.tsx | 18 +- src/modules/explorer/components/Countdown.tsx | 34 +- .../explorer/components/CycleDescription.tsx | 32 +- .../explorer/components/DAOStatsRow.tsx | 211 +++--- .../DelegationChangeProposalForm.tsx | 93 ++- .../explorer/components/EstimatedTime.tsx | 31 +- src/modules/explorer/components/FA2Symbol.tsx | 21 +- .../explorer/components/FreezeDialog.tsx | 154 ++-- .../components/GuardianChangeProposalForm.tsx | 104 +-- src/modules/explorer/components/Hero.tsx | 24 +- src/modules/explorer/components/HeroTitle.tsx | 10 +- .../explorer/components/ItemDialog.tsx | 36 +- src/modules/explorer/components/NFT.tsx | 76 +- src/modules/explorer/components/NFTDialog.tsx | 203 +++-- .../explorer/components/NFTTransfer.tsx | 180 +++-- .../explorer/components/NavigationMenu.tsx | 297 ++++---- .../explorer/components/NetworkSheet.tsx | 53 +- .../components/NewTreasuryProposalDialog.tsx | 311 ++++---- src/modules/explorer/components/NotFound.tsx | 8 +- .../explorer/components/NotIndexed.tsx | 17 +- .../explorer/components/ProgressBar.tsx | 48 +- .../explorer/components/ProposalForm.tsx | 225 +++--- .../explorer/components/ProposalFormInput.tsx | 40 +- .../components/ProposalFormSendButton.tsx | 34 +- .../components/ProposalSelectionMenu.tsx | 81 +- .../explorer/components/ProposalTableRow.tsx | 150 ++-- .../ProposalTableRowStatusBadge.tsx | 50 +- .../components/ProposalTransferBadge.tsx | 26 +- .../explorer/components/ProposalsList.tsx | 117 ++- .../explorer/components/ProposalsTable.tsx | 62 +- .../explorer/components/ResponsiveDialog.tsx | 60 +- .../explorer/components/ResponsiveTable.tsx | 8 +- src/modules/explorer/components/SideBar.tsx | 212 +++--- .../explorer/components/StatusBadge.tsx | 55 +- src/modules/explorer/components/TabPanel.tsx | 14 +- .../explorer/components/TemplateHeader.tsx | 66 +- src/modules/explorer/components/Toolbar.tsx | 142 ++-- .../explorer/components/TransferBadge.tsx | 57 +- .../components/UpdateRegistryDialog.tsx | 125 ++-- src/modules/explorer/components/UserBadge.tsx | 47 +- .../explorer/components/UserBalances.tsx | 150 ++-- .../components/UserBalancesWidget.tsx | 114 ++- .../explorer/components/UserMenuSheet.tsx | 68 +- .../explorer/components/UserProfileName.tsx | 20 +- .../explorer/components/UsersTable.tsx | 92 +-- .../explorer/components/ViewButton.tsx | 37 +- .../explorer/components/VoteDialog.tsx | 197 ++--- .../explorer/components/VotersDialog.tsx | 214 +++--- .../explorer/components/VotersProgress.tsx | 152 ++-- .../explorer/components/VotesDetailDialog.tsx | 94 ++- .../explorer/components/VotesTable.tsx | 20 +- .../explorer/components/WarningDialog.tsx | 63 +- .../explorer/components/XTZTransferBadge.tsx | 45 +- .../explorer/components/styled/ErrorText.tsx | 6 +- .../components/styled/HighlightedBadge.tsx | 8 +- .../explorer/components/styled/InfoIcon.tsx | 8 +- .../components/styled/ProfileAvatar.tsx | 31 +- .../components/styled/RectangleHeader.tsx | 8 +- .../components/styled/TableHeader.tsx | 6 +- .../components/tables/RowContainer.tsx | 8 +- .../explorer/context/ActionSheets/index.tsx | 54 +- .../explorer/hooks/useCanDropProposal.ts | 37 +- .../explorer/hooks/useTimeLeftInCycle.ts | 28 +- src/modules/explorer/hooks/useVotesStats.ts | 58 +- src/modules/explorer/pages/DAO/index.tsx | 150 ++-- src/modules/explorer/pages/DAO/router.tsx | 109 ++- .../DAOList/components/ConnectMessage.tsx | 24 +- .../pages/DAOList/components/DAOItem.tsx | 162 ++-- .../pages/DAOList/components/Searchbar.tsx | 68 +- src/modules/explorer/pages/DAOList/index.tsx | 173 ++--- src/modules/explorer/pages/NFTs/index.tsx | 169 ++--- .../components/QuorumThreshold.tsx | 63 +- .../explorer/pages/ProposalDetails/index.tsx | 438 +++++------ .../explorer/pages/Proposals/index.tsx | 138 ++-- .../Registry/components/OverflowCell.tsx | 8 +- .../Registry/components/RegistryTable.tsx | 121 ++- .../Registry/components/UpdatesTable.tsx | 89 +-- src/modules/explorer/pages/Registry/index.tsx | 119 ++- .../Treasury/components/BalancesTable.tsx | 194 +++-- .../Treasury/components/TransfersTable.tsx | 212 +++--- src/modules/explorer/pages/Treasury/index.tsx | 241 +++--- src/modules/explorer/pages/User/index.tsx | 133 ++-- src/modules/explorer/router.tsx | 14 +- src/modules/explorer/utils/FormatNumber.ts | 19 +- src/modules/explorer/utils/debounce.ts | 21 +- src/modules/home/FAQ.tsx | 82 +- src/modules/home/FAQItem.tsx | 47 +- src/modules/home/Header.tsx | 63 +- src/modules/home/Landing.tsx | 100 +-- src/modules/home/LandingHeader.tsx | 138 ++-- src/modules/home/hooks/useGenerateFAQ.tsx | 66 +- src/services/agora/hooks/useTopic.tsx | 24 +- src/services/agora/index.ts | 4 +- src/services/agora/topics/index.ts | 18 +- src/services/agora/topics/types.ts | 304 ++++---- .../bakingBad/context/TZKTSubscriptions.tsx | 58 +- src/services/bakingBad/delegations/index.ts | 21 +- src/services/bakingBad/delegations/types.ts | 40 +- src/services/bakingBad/index.ts | 4 +- src/services/bakingBad/stats/index.ts | 22 +- src/services/bakingBad/stats/types.ts | 2 +- src/services/bakingBad/tokenBalances/index.ts | 214 +++--- src/services/bakingBad/tokenBalances/types.ts | 64 +- src/services/bakingBad/transfers/index.ts | 95 ++- src/services/bakingBad/transfers/types.ts | 46 +- src/services/baseDAODocker/index.ts | 36 +- src/services/baseDAODocker/mappers.ts | 30 +- src/services/baseDAODocker/types.ts | 20 +- src/services/beacon/actions.ts | 23 +- src/services/beacon/context.tsx | 47 +- src/services/beacon/hooks/useTezos.ts | 106 +-- src/services/beacon/index.ts | 8 +- src/services/beacon/reducer.ts | 22 +- src/services/beacon/utils.ts | 61 +- src/services/config/constants.ts | 1 - src/services/config/env.ts | 2 +- src/services/config/hooks/featureFlags.ts | 4 +- src/services/config/hooks/index.ts | 2 +- src/services/config/index.ts | 6 +- src/services/contracts/baseDAO/class.ts | 299 ++++---- .../baseDAO/hooks/useBlockchainInfo.ts | 16 +- .../contracts/baseDAO/hooks/useCycleInfo.ts | 14 +- .../contracts/baseDAO/hooks/useDAOHoldings.ts | 42 +- .../contracts/baseDAO/hooks/useDelegate.ts | 24 +- .../baseDAO/hooks/useDropAllExpired.ts | 70 +- .../baseDAO/hooks/useDropProposal.ts | 72 +- .../contracts/baseDAO/hooks/useFlush.ts | 71 +- .../contracts/baseDAO/hooks/useFreeze.ts | 87 +-- .../contracts/baseDAO/hooks/useOriginate.ts | 149 ++-- .../baseDAO/hooks/useProposeConfigChange.ts | 107 ++- .../hooks/useProposeDelegationChange.ts | 105 ++- .../baseDAO/hooks/useProposeGuardianChange.ts | 105 ++- .../baseDAO/hooks/useRegistryPropose.ts | 73 +- .../contracts/baseDAO/hooks/useSendXTZ.ts | 74 +- .../baseDAO/hooks/useTezosBalance.ts | 26 +- .../baseDAO/hooks/useTokenHoldersWithVotes.ts | 58 +- .../baseDAO/hooks/useTokenMetadata.ts | 18 +- .../contracts/baseDAO/hooks/useTransfers.ts | 83 +-- .../baseDAO/hooks/useTreasuryPropose.ts | 73 +- .../baseDAO/hooks/useUnstakeVotes.ts | 67 +- .../contracts/baseDAO/hooks/useVote.ts | 81 +- src/services/contracts/baseDAO/index.ts | 10 +- .../contracts/baseDAO/michelson/baseDAO.ts | 2 +- .../contracts/baseDAO/registryDAO/index.ts | 136 ++-- .../baseDAO/registryDAO/michelson/propose.ts | 2 +- .../contracts/baseDAO/registryDAO/types.ts | 595 +++++++-------- .../contracts/baseDAO/treasuryDAO/index.ts | 76 +- .../baseDAO/treasuryDAO/michelson/propose.ts | 2 +- .../contracts/baseDAO/treasuryDAO/types.ts | 108 +-- src/services/contracts/baseDAO/types.ts | 148 ++-- src/services/contracts/baseDAO/utils.ts | 60 +- .../contracts/metadataCarrier/code.ts | 2 +- .../contracts/metadataCarrier/deploy.ts | 76 +- .../contracts/metadataCarrier/index.ts | 34 +- .../contracts/metadataCarrier/metadata.ts | 425 ++++++----- .../contracts/metadataCarrier/types.ts | 66 +- src/services/contracts/utils.ts | 46 +- src/services/indexer/dao/hooks/useAllDAOs.ts | 14 +- src/services/indexer/dao/hooks/useDAO.ts | 142 ++-- src/services/indexer/dao/hooks/useProposal.ts | 56 +- .../indexer/dao/hooks/useProposals.ts | 46 +- .../indexer/dao/mappers/proposal/index.ts | 83 +-- .../indexer/dao/mappers/proposal/types.ts | 300 ++++---- src/services/indexer/dao/queries.ts | 15 +- src/services/indexer/dao/services.ts | 92 +-- src/services/indexer/graphql.ts | 19 +- src/services/indexer/types.ts | 286 +++---- src/services/ipfs/index.ts | 2 +- src/services/tzprofiles/claims/index.ts | 31 +- src/services/tzprofiles/claims/types.ts | 24 +- .../tzprofiles/hooks/useProfileClaim.tsx | 18 +- src/services/tzprofiles/index.ts | 2 +- src/theme/index.ts | 276 +++---- src/theme/legacy.ts | 236 +++--- src/utils.ts | 9 +- yarn.lock | 294 ++++++-- 227 files changed, 8768 insertions(+), 10532 deletions(-) create mode 100644 .editorconfig delete mode 100644 .husky/.gitignore create mode 100755 .husky/pre-commit delete mode 100644 .husky/pre-push create mode 100644 .prettierrc.json diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..75588f46 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +# http://editorconfig.org + + [*] + indent_style = space + indent_size = 2 + end_of_line = lf + charset = utf-8 + trim_trailing_whitespace = true + insert_final_newline = true diff --git a/.eslintrc.json b/.eslintrc.json index cf24339c..c5c0d6ed 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -20,7 +20,7 @@ "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", - "prettier" + "plugin:prettier/recommended" ], "rules": { "@typescript-eslint/no-explicit-any": "off", diff --git a/.husky/.gitignore b/.husky/.gitignore deleted file mode 100644 index 31354ec1..00000000 --- a/.husky/.gitignore +++ /dev/null @@ -1 +0,0 @@ -_ diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..5a182ef1 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +yarn lint-staged diff --git a/.husky/pre-push b/.husky/pre-push deleted file mode 100644 index 309ce312..00000000 --- a/.husky/pre-push +++ /dev/null @@ -1,4 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -yarn lint-staged && yarn lint:check diff --git a/.nvmrc b/.nvmrc index 8e62141c..dac255d2 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v15.5.1 \ No newline at end of file +v16.15.1 diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..8c0f6116 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,12 @@ +{ + "arrowParens": "avoid", + "bracketSpacing": true, + "endOfLine": "auto", + "printWidth": 120, + "proseWrap": "preserve", + "quoteProps": "consistent", + "semi": false, + "singleQuote": false, + "tabWidth": 2, + "trailingComma": "none" +} diff --git a/package.json b/package.json index 13557d09..6125aa5a 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "eject": "react-scripts eject", "lint:ci": "eslint --color 'src/**/*.{js,jsx,ts,tsx}'", "lint:check": "eslint --quiet 'src/**/*.{js,jsx,ts,tsx}'", - "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'" + "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'", + "prepare": "husky install" }, "dependencies": { "@hookform/resolvers": "^2.8.1", @@ -69,10 +70,11 @@ "@typescript-eslint/parser": "^4.18.0", "eslint": "^7.22.0", "eslint-config-prettier": "^8.1.0", + "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.21.5", "eslint-plugin-react-hooks": "^4.2.0", - "husky": "^5.1.3", - "lint-staged": "^10.5.4", + "husky": "^8.0.1", + "lint-staged": "^13.0.3", "prettier": "^2.2.0", "source-map-explorer": "2.5.2", "typescript": "^4.2.3" @@ -94,9 +96,14 @@ "last 1 safari version" ] }, + "husky": { + "hooks": { + "pre-commit": "lint-staged" + } + }, "lint-staged": { "src/**/*.{js,jsx,ts,tsx}": [ - "yarn lint:fix" + "yarn lint:check" ] } } diff --git a/src/App.tsx b/src/App.tsx index b934087f..b15d1e0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,40 +1,40 @@ -import React from 'react'; -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 {Box, makeStyles, ThemeProvider} from '@material-ui/core'; -import {SnackbarProvider} from 'notistack'; +import React from "react" +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 { Box, makeStyles, ThemeProvider } from "@material-ui/core" +import { SnackbarProvider } from "notistack" -import {DAOExplorerRouter} from 'modules/explorer/router'; -import {DAOCreate} from 'modules/creator'; -import {CreatorProvider} from 'modules/creator/state'; -import ScrollToTop from 'modules/common/ScrollToTop'; -import {theme} from 'theme'; +import { DAOExplorerRouter } from "modules/explorer/router" +import { DAOCreate } from "modules/creator" +import { CreatorProvider } from "modules/creator/state" +import ScrollToTop from "modules/common/ScrollToTop" +import { theme } from "theme" -import 'App.css'; -import {TZKTSubscriptionsProvider} from 'services/bakingBad/context/TZKTSubscriptions'; -import {Landing} from 'modules/home/Landing'; -import {WarningFooter} from 'modules/common/WarningFooter'; -import {ActionSheetProvider} from 'modules/explorer/context/ActionSheets'; -import {legacyTheme} from 'theme/legacy'; -import {Footer} from 'modules/common/Footer'; -import {FAQ} from 'modules/home/FAQ'; -import { EnvKey, getEnv } from 'services/config'; +import "App.css" +import { TZKTSubscriptionsProvider } from "services/bakingBad/context/TZKTSubscriptions" +import { Landing } from "modules/home/Landing" +import { WarningFooter } from "modules/common/WarningFooter" +import { ActionSheetProvider } from "modules/explorer/context/ActionSheets" +import { legacyTheme } from "theme/legacy" +import { Footer } from "modules/common/Footer" +import { FAQ } from "modules/home/FAQ" +import { EnvKey, getEnv } from "services/config" const queryClient = new QueryClient({ defaultOptions: { queries: { - retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 60000), + retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 60000), retry: false, retryOnMount: false, refetchOnMount: false, refetchOnWindowFocus: true, staleTime: 5000, - cacheTime: 30000, - }, - }, -}); + cacheTime: 30000 + } + } +}) const styles = makeStyles({ success: { @@ -43,7 +43,7 @@ const styles = makeStyles({ height: 54, fontSize: 13, lineHeight: "0px", - opacity: 1, + opacity: 1 }, error: { backgroundColor: "#ED254E !important", @@ -51,7 +51,7 @@ const styles = makeStyles({ height: 54, fontSize: 13, lineHeight: "0px", - opacity: 1, + opacity: 1 }, info: { backgroundColor: "#3866F9 !important", @@ -59,29 +59,28 @@ const styles = makeStyles({ height: 54, fontSize: 13, lineHeight: "0px", - opacity: 1, - }, -}); - + opacity: 1 + } +}) const MIXPANEL_TOKEN = getEnv(EnvKey.REACT_APP_MIXPANEL_TOKEN) const MIXPANEL_DEBUG_ENABLED = getEnv(EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED) if (!MIXPANEL_TOKEN) { - throw new Error(`${EnvKey.REACT_APP_MIXPANEL_TOKEN} env variable is missing`); + throw new Error(`${EnvKey.REACT_APP_MIXPANEL_TOKEN} env variable is missing`) } if (!MIXPANEL_DEBUG_ENABLED) { - throw new Error(`${EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED} env variable is missing`); + throw new Error(`${EnvKey.REACT_APP_MIXPANEL_DEBUG_ENABLED} env variable is missing`) } mixpanel.init(MIXPANEL_TOKEN, { - debug: MIXPANEL_DEBUG_ENABLED === "true", -}); -mixpanel.track("Visit"); + debug: MIXPANEL_DEBUG_ENABLED === "true" +}) +mixpanel.track("Visit") const App: React.FC = () => { - const classes = styles(); + const classes = styles() return ( @@ -89,7 +88,7 @@ const App: React.FC = () => { classes={{ variantSuccess: classes.success, variantError: classes.error, - variantInfo: classes.info, + variantInfo: classes.info }} > @@ -135,14 +134,12 @@ 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); + clientSideID: + env === "PROD" ? getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_PROD) : getEnv(EnvKey.REACT_APP_LAUNCH_DARKLY_SDK_DEV) +})(App) diff --git a/src/index.tsx b/src/index.tsx index 7047c9a4..f26baf20 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,15 +1,15 @@ -import React from "react"; -import ReactDOM from "react-dom"; +import React from "react" +import ReactDOM from "react-dom" -import App from "App"; -import { TezosProvider } from "services/beacon/context"; -import localizedFormat from "dayjs/plugin/localizedFormat"; -import dayjs from "dayjs"; -import BigNumber from "bignumber.js"; +import App from "App" +import { TezosProvider } from "services/beacon/context" +import localizedFormat from "dayjs/plugin/localizedFormat" +import dayjs from "dayjs" +import BigNumber from "bignumber.js" // BigNumber.config({ DECIMAL_PLACES: }) -dayjs.extend(localizedFormat); +dayjs.extend(localizedFormat) ReactDOM.render( @@ -18,4 +18,4 @@ ReactDOM.render( , document.getElementById("root") -); +) diff --git a/src/models/Token.ts b/src/models/Token.ts index 3b777960..100a03b7 100644 --- a/src/models/Token.ts +++ b/src/models/Token.ts @@ -1,125 +1,134 @@ -import BigNumber from "bignumber.js"; -import { Network } from "services/beacon"; +import BigNumber from "bignumber.js" +import { Network } from "services/beacon" interface TokenParams { - id: string; - contract: string; - level: number; - token_id: number; - symbol: string; - name: string; - decimals: number; - network: Network; - supply: string; + id: string + contract: string + level: number + token_id: number + symbol: string + name: string + decimals: number + network: Network + supply: string } -export const SUPPORTED_MIME_TYPES = ["image/jpeg", "image/gif", "image/png", "video/mp4", "audio/mpeg", "audio/x-wav"] as const +export const SUPPORTED_MIME_TYPES = [ + "image/jpeg", + "image/gif", + "image/png", + "video/mp4", + "audio/mpeg", + "audio/x-wav" +] as const export const SUPPORTED_MEDIA_TYPES = ["image", "audio", "video"] as const export type NFTMimeType = typeof SUPPORTED_MIME_TYPES[number] | "unknown" export type NFTMediaType = typeof SUPPORTED_MEDIA_TYPES[number] | "unknown" interface NFTParams extends TokenParams { - description: string; - artifact_uri: string; - thumbnail_uri: string; - is_transferable: boolean; - creators?: string[]; - tags?: string[]; + description: string + artifact_uri: string + thumbnail_uri: string + is_transferable: boolean + creators?: string[] + tags?: string[] formats?: { - mimeType: string; - uri: string; - }[]; + mimeType: string + uri: string + }[] } export class Token { - id: string; - contract: string; - level: number; - token_id: number; - symbol: string; - name: string; - decimals: number; - network: Network; - supply: BigNumber; + id: string + contract: string + level: number + token_id: number + symbol: string + name: string + decimals: number + network: Network + supply: BigNumber constructor(params: TokenParams) { - this.id = params.id; - this.contract = params.contract; - this.level = params.level; - this.token_id = params.token_id; - this.symbol = params.symbol; - this.name = params.name; - this.decimals = params.decimals; - this.network = params.network; - this.supply = new BigNumber(params.supply); + this.id = params.id + this.contract = params.contract + this.level = params.level + this.token_id = params.token_id + this.symbol = params.symbol + this.name = params.name + this.decimals = params.decimals + this.network = params.network + this.supply = new BigNumber(params.supply) } } export const extractQmHash = (ipfsUri: string) => { if (!ipfsUri) { - return ipfsUri; + return ipfsUri } - return ipfsUri.startsWith("ipfs://") ? ipfsUri.split("ipfs://")[1] : ipfsUri; -}; + return ipfsUri.startsWith("ipfs://") ? ipfsUri.split("ipfs://")[1] : ipfsUri +} const getFormatTag = (mimeType: NFTMimeType) => { if (mimeType.includes("video")) { - return "video"; + return "video" } if (mimeType.includes("audio")) { - return "audio"; + return "audio" } if (mimeType.includes("image")) { - return "image"; + return "image" } - return "unknown"; -}; + return "unknown" +} export class NFT extends Token { - description: string; - artifact_uri: string; - thumbnail_uri: string; - artifact_hash: string; - thumbnail_hash: string; - is_transferable: boolean; - creators: string[]; - firstCreator?: string; - tags: string[]; - preferredFormat: NFTMimeType; - mediaType: NFTMediaType; - formats: NFTMimeType[]; + description: string + artifact_uri: string + thumbnail_uri: string + artifact_hash: string + thumbnail_hash: string + is_transferable: boolean + creators: string[] + firstCreator?: string + tags: string[] + preferredFormat: NFTMimeType + mediaType: NFTMediaType + formats: NFTMimeType[] constructor(params: NFTParams) { - super(params); + super(params) - this.thumbnail_hash = extractQmHash(params.thumbnail_uri); - this.artifact_hash = extractQmHash(params.artifact_uri); + this.thumbnail_hash = extractQmHash(params.thumbnail_uri) + this.artifact_hash = extractQmHash(params.artifact_uri) - this.description = params.description; - this.artifact_uri = params.artifact_uri; - this.thumbnail_uri = params.thumbnail_uri; - this.is_transferable = params.is_transferable; - this.tags = params.tags || []; + this.description = params.description + this.artifact_uri = params.artifact_uri + this.thumbnail_uri = params.thumbnail_uri + this.is_transferable = params.is_transferable + this.tags = params.tags || [] this.formats = ["image/jpeg"] this.creators = [] if (params.creators && params.creators.length) { this.firstCreator = params.creators[0] - this.creators = params.creators; + this.creators = params.creators } if (params.formats) { - this.formats = params.formats.map(format => SUPPORTED_MIME_TYPES.includes(format.mimeType as any) ? format.mimeType as NFTMimeType : "unknown"); + this.formats = params.formats.map(format => + SUPPORTED_MIME_TYPES.includes(format.mimeType as any) ? (format.mimeType as NFTMimeType) : "unknown" + ) } //On BakingBad's APIs, it's simply the first one this.preferredFormat = this.formats[0] - this.mediaType = getFormatTag(this.preferredFormat); + this.mediaType = getFormatTag(this.preferredFormat) } } diff --git a/src/modules/common/Blockie.tsx b/src/modules/common/Blockie.tsx index f1cee2fd..0df26592 100644 --- a/src/modules/common/Blockie.tsx +++ b/src/modules/common/Blockie.tsx @@ -1,29 +1,17 @@ -import { Box, BoxProps, styled } from "@material-ui/core"; -import React from "react"; -import { getBlockie } from "services/contracts/utils"; +import { Box, BoxProps, styled } from "@material-ui/core" +import React from "react" +import { getBlockie } from "services/contracts/utils" -const StyledBox = styled(Box)( - ({ address, size }: { address: string; size?: number }) => ({ - width: size || 23, - height: size || 23, - minWidth: size || 23, - maxHeight: size || 23, - borderRadius: "50%", - background: `url(${address})`, - backgroundSize: "contain", - }) -); +const StyledBox = styled(Box)(({ address, size }: { address: string; size?: number }) => ({ + width: size || 23, + height: size || 23, + minWidth: size || 23, + maxHeight: size || 23, + borderRadius: "50%", + background: `url(${address})`, + backgroundSize: "contain" +})) -export const Blockie = ({ - address, - size, - ...props -}: BoxProps & { address: string; size?: number }) => { - return ( - - ); -}; +export const Blockie = ({ address, size, ...props }: BoxProps & { address: string; size?: number }) => { + return +} diff --git a/src/modules/common/ChangeNetworkButton.tsx b/src/modules/common/ChangeNetworkButton.tsx index 7f208f2f..38db6d9c 100644 --- a/src/modules/common/ChangeNetworkButton.tsx +++ b/src/modules/common/ChangeNetworkButton.tsx @@ -1,52 +1,45 @@ -import { - Box, - capitalize, - Grid, - styled, - Typography, - Theme, -} from "@material-ui/core"; -import { ActionSheet, useActionSheet } from "modules/explorer/context/ActionSheets"; -import React from "react"; -import { Network } from "services/beacon"; -import { useTezos } from "services/beacon/hooks/useTezos"; +import { Box, capitalize, Grid, styled, Typography, Theme } from "@material-ui/core" +import { ActionSheet, useActionSheet } from "modules/explorer/context/ActionSheets" +import React from "react" +import { Network } from "services/beacon" +import { useTezos } from "services/beacon/hooks/useTezos" const StyledConnectedButton = styled(Box)(({ theme }: { theme: Theme }) => ({ "& > *": { - height: "100%", + height: "100%" }, - background: theme.palette.primary.dark, - borderRadius: 4, - padding: "5px 10px", - cursor: "pointer", - transition: ".15s ease-out", + "background": theme.palette.primary.dark, + "borderRadius": 4, + "padding": "5px 10px", + "cursor": "pointer", + "transition": ".15s ease-out", "&:hover": { background: theme.palette.secondary.dark, - transition: ".15s ease-in", + transition: ".15s ease-in" } -})); +})) export const networkDotColorMap: Record = { mainnet: "#9EEE5D", - ghostnet: "#291F79", + ghostnet: "#291F79" } export const ColorDot = styled(Box)({ height: 6, width: 6, backgroundColor: ({ color }: { color: string }) => color, - borderRadius: "50%", -}); + borderRadius: "50%" +}) const NetworkText = styled(Typography)({ fontSize: "14px", color: "#ddd" -}); +}) export const ChangeNetworkButton = () => { - const { network } = useTezos(); - const { open } = useActionSheet(ActionSheet.Network); + const { network } = useTezos() + const { open } = useActionSheet(ActionSheet.Network) return ( open()}> @@ -59,5 +52,5 @@ export const ChangeNetworkButton = () => { - ); -}; + ) +} diff --git a/src/modules/common/CloseButton.tsx b/src/modules/common/CloseButton.tsx index 2a64f68f..3cf867ab 100644 --- a/src/modules/common/CloseButton.tsx +++ b/src/modules/common/CloseButton.tsx @@ -1,21 +1,20 @@ -import React from "react"; -import { Box, styled } from "@material-ui/core"; -import { Close } from "@material-ui/icons"; +import React from "react" +import { Box, styled } from "@material-ui/core" +import { Close } from "@material-ui/icons" const CloseIcon = styled(Close)({ - cursor: "pointer", - width: "18px", - color: "#ffff", - marginTop: "-5px" - }); + cursor: "pointer", + width: "18px", + color: "#ffff", + marginTop: "-5px" +}) export const CloseButton: React.FC<{ onClose: () => void }> = ({ onClose }) => { - return ( - - - - ); -}; + return ( + + + + ) +} -export default CloseButton \ No newline at end of file +export default CloseButton diff --git a/src/modules/common/CopyAddress.tsx b/src/modules/common/CopyAddress.tsx index 01b389ee..af74a764 100644 --- a/src/modules/common/CopyAddress.tsx +++ b/src/modules/common/CopyAddress.tsx @@ -1,23 +1,16 @@ -import { - Grid, - GridProps, - Typography, - TypographyProps, - useMediaQuery, - useTheme, -} from "@material-ui/core"; -import React from "react"; -import { toShortAddress } from "services/contracts/utils"; -import { CopyButton } from "./CopyButton"; +import { Grid, GridProps, Typography, TypographyProps, useMediaQuery, useTheme } from "@material-ui/core" +import React from "react" +import { toShortAddress } from "services/contracts/utils" +import { CopyButton } from "./CopyButton" interface Props extends GridProps { - address: string; + address: string typographyProps?: TypographyProps } export const CopyAddress: React.FC = ({ address, typographyProps }) => { - const theme = useTheme(); - const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")); + const theme = useTheme() + const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) return ( <> @@ -32,5 +25,5 @@ export const CopyAddress: React.FC = ({ address, typographyProps }) => { - ); -}; + ) +} diff --git a/src/modules/common/CopyButton.tsx b/src/modules/common/CopyButton.tsx index 02fa1b5b..c6f8c725 100644 --- a/src/modules/common/CopyButton.tsx +++ b/src/modules/common/CopyButton.tsx @@ -1,21 +1,21 @@ -import React, { useState } from "react"; -import { Box, styled, Tooltip } from "@material-ui/core"; -import { FileCopyOutlined } from "@material-ui/icons"; +import React, { useState } from "react" +import { Box, styled, Tooltip } from "@material-ui/core" +import { FileCopyOutlined } from "@material-ui/icons" const CopyIcon = styled(FileCopyOutlined)({ - cursor: "pointer", -}); + cursor: "pointer" +}) export const CopyButton: React.FC<{ text: string }> = ({ text }) => { - const [copied, setCopied] = useState(false); + const [copied, setCopied] = useState(false) return ( { + onClick={e => { e.preventDefault() - navigator.clipboard.writeText(text); - setCopied(true); + navigator.clipboard.writeText(text) + setCopied(true) setTimeout(() => { setCopied(false) @@ -26,5 +26,5 @@ export const CopyButton: React.FC<{ text: string }> = ({ text }) => { - ); -}; + ) +} diff --git a/src/modules/common/ExternalLink.tsx b/src/modules/common/ExternalLink.tsx index ca5e51d5..1069a265 100644 --- a/src/modules/common/ExternalLink.tsx +++ b/src/modules/common/ExternalLink.tsx @@ -1,34 +1,25 @@ -import React from "react"; -import { styled } from "@material-ui/core"; +import React from "react" +import { styled } from "@material-ui/core" const Link = styled("a")({ - display: "flex", - textDecoration: "none", + "display": "flex", + "textDecoration": "none", "&:active": { - color: "unset", - }, -}); + color: "unset" + } +}) interface ExternalLinkProps { - link: string; - children: React.ReactNode; + link: string + children: React.ReactNode // pass className to allowlocal style overrides - className?: string; + className?: string } -export const ExternalLink = ({ - link, - children, - className, -}: ExternalLinkProps): JSX.Element => { +export const ExternalLink = ({ link, children, className }: ExternalLinkProps): JSX.Element => { return ( - + {children} - ); -}; + ) +} diff --git a/src/modules/common/Footer.tsx b/src/modules/common/Footer.tsx index 6e26132c..a3447a16 100644 --- a/src/modules/common/Footer.tsx +++ b/src/modules/common/Footer.tsx @@ -1,13 +1,11 @@ -import { Grid, styled } from "@material-ui/core"; +import { Grid, styled } from "@material-ui/core" export const Footer = styled(Grid)(({ theme }) => ({ - width: "100%", - height: 60, - background: theme.palette.primary.dark, + width: "100%", + height: 60, + background: theme.palette.primary.dark, - ["@media (max-width:960px)"]: { - height: 100, - }, -})); - - \ No newline at end of file + ["@media (max-width:960px)"]: { + height: 100 + } +})) diff --git a/src/modules/common/MainButton.tsx b/src/modules/common/MainButton.tsx index 7a8c3a59..6b98d1b8 100644 --- a/src/modules/common/MainButton.tsx +++ b/src/modules/common/MainButton.tsx @@ -1,26 +1,23 @@ -import { - styled, - Button, - } from "@material-ui/core"; +import { styled, Button } from "@material-ui/core" export const MainButton = styled(Button)(({ theme }) => ({ - fontSize: "18px", - justifyItems: "center", - boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", - transition: ".15s ease-in", - background: theme.palette.secondary.main, - - "&$disabled": { - boxShadow: "none", - }, + "fontSize": "18px", + "justifyItems": "center", + "boxShadow": "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", + "transition": ".15s ease-in", + "background": theme.palette.secondary.main, + + "&$disabled": { + boxShadow: "none" + }, - "&:hover": { - boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", - backgroundColor: "#62eda5 !important", - transition: ".15s ease-in", - }, + "&:hover": { + boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", + backgroundColor: "#62eda5 !important", + transition: ".15s ease-in" + }, - ["@media (max-width:1030px)"]: { - fontSize: "16px", - }, - })); \ No newline at end of file + ["@media (max-width:1030px)"]: { + fontSize: "16px" + } +})) diff --git a/src/modules/common/Markdown.tsx b/src/modules/common/Markdown.tsx index 4216828d..04fcd33c 100644 --- a/src/modules/common/Markdown.tsx +++ b/src/modules/common/Markdown.tsx @@ -1,14 +1,14 @@ -import React, { ReactNode } from "react"; -import Typography from "@material-ui/core/Typography"; -import ReactMarkdown from "react-markdown"; -import remarkGfm from "remark-gfm"; -import remarkBreaks from "remark-breaks"; -import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown"; -import { SpecialComponents } from "react-markdown/lib/ast-to-react"; -import { Link, styled } from "@material-ui/core"; +import React, { ReactNode } from "react" +import Typography from "@material-ui/core/Typography" +import ReactMarkdown from "react-markdown" +import remarkGfm from "remark-gfm" +import remarkBreaks from "remark-breaks" +import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown" +import { SpecialComponents } from "react-markdown/lib/ast-to-react" +import { Link, styled } from "@material-ui/core" const getSrcPathForLocalImage = (src?: string): string => { - return require(`../../assets/markdown/${src}`).default; + return require(`../../assets/markdown/${src}`).default } const MarkDownImg = styled("img")({ @@ -16,35 +16,35 @@ const MarkDownImg = styled("img")({ }) const MarkdownParagraph = (props: { children: ReactNode }) => { - return {props.children}; -}; + return {props.children} +} const MarkdownLink = (props: any) => { return ( {props.children} - ); -}; + ) +} const MarkdownHeader = (props: { children: ReactNode; level: number }) => { switch (props.level) { case 1: - return {props.children}; + return {props.children} case 2: - return {props.children}; + return {props.children} case 3: - return {props.children}; + return {props.children} case 4: - return {props.children}; + return {props.children} case 5: - return {props.children}; + return {props.children} case 6: - return {props.children}; + return {props.children} default: - return {props.children}; + return {props.children} } -}; +} const components: Partial< Omit & SpecialComponents @@ -57,8 +57,8 @@ const components: Partial< h6: MarkdownHeader, p: MarkdownParagraph, a: MarkdownLink, - img: (props) => { - const { src } = props; + img: props => { + const { src } = props if (!src) { return null } @@ -71,12 +71,11 @@ const components: Partial< } return - - }, -}; + } +} const Markdown = (props: ReactMarkdownOptions) => { - return ; -}; + return +} -export default Markdown; +export default Markdown diff --git a/src/modules/common/ScrollToTop.tsx b/src/modules/common/ScrollToTop.tsx index 4ab25df7..9e56c3db 100644 --- a/src/modules/common/ScrollToTop.tsx +++ b/src/modules/common/ScrollToTop.tsx @@ -1,12 +1,12 @@ -import { useEffect } from "react"; -import { useLocation } from "react-router-dom"; +import { useEffect } from "react" +import { useLocation } from "react-router-dom" export default function ScrollToTop(): null { - const { pathname } = useLocation(); + const { pathname } = useLocation() useEffect(() => { - window.scrollTo(0, 0); - }, [pathname]); + window.scrollTo(0, 0) + }, [pathname]) - return null; + return null } diff --git a/src/modules/common/SmallButton.tsx b/src/modules/common/SmallButton.tsx index dfc2f458..26dbe412 100644 --- a/src/modules/common/SmallButton.tsx +++ b/src/modules/common/SmallButton.tsx @@ -1,21 +1,18 @@ -import { - styled, - Button, - } from "@material-ui/core"; +import { styled, Button } from "@material-ui/core" export const SmallButton = styled(Button)({ - justifyItems: "center", - fontSize: "16px", - boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", - transition: ".15s ease-out", - - "&$disabled": { - boxShadow: "none", - }, + "justifyItems": "center", + "fontSize": "16px", + "boxShadow": "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", + "transition": ".15s ease-out", + + "&$disabled": { + boxShadow: "none" + }, - "&:hover": { - boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", - backgroundColor: "#62eda5 !important", - transition: ".15s ease-in", - }, - }); \ No newline at end of file + "&:hover": { + boxShadow: "0px 0px 7px -2px rgba(0, 0, 0, 0.2)", + backgroundColor: "#62eda5 !important", + transition: ".15s ease-in" + } +}) diff --git a/src/modules/common/TitleBlock.tsx b/src/modules/common/TitleBlock.tsx index 4dc6d76b..2524667b 100644 --- a/src/modules/common/TitleBlock.tsx +++ b/src/modules/common/TitleBlock.tsx @@ -1,39 +1,39 @@ -import { Grid, Paper, styled, Tooltip, Typography } from "@material-ui/core"; -import React from "react"; -import { ReactElement } from "react-markdown/lib/react-markdown"; -import { InfoRounded } from "@material-ui/icons"; +import { Grid, Paper, styled, Tooltip, Typography } from "@material-ui/core" +import React from "react" +import { ReactElement } from "react-markdown/lib/react-markdown" +import { InfoRounded } from "@material-ui/icons" const StyledGrid = styled(Grid)({ height: "fit-content", background: "#2F3438", borderRadius: 8, padding: "30px 40px", - marginBottom: 38, -}); + marginBottom: 38 +}) const CustomTypography = styled(Typography)({ - marginTop: 27, -}); + marginTop: 27 +}) const CustomTooltip = styled(Tooltip)({ marginLeft: 8, ["@media (max-width:1167px)"]: { marginLeft: 0, marginTop: 8 - }, -}); + } +}) const InfoIconInput = styled(InfoRounded)(({ theme }) => ({ cursor: "default", color: theme.palette.secondary.light, height: 16, - width: 16, -})); + width: 16 +})) const CustomTooltipText = styled(Typography)({ fontSize: 12, - marginLeft: 2, -}); + marginLeft: 2 +}) const CustomTextContainer = styled(Paper)({ maxWidth: "fit-content", @@ -44,34 +44,27 @@ const CustomTextContainer = styled(Paper)({ }) interface Props { - title?: ReactElement | string; - description: ReactElement | string; - tooltip?: boolean; - tooltipText?: string; + title?: ReactElement | string + description: ReactElement | string + tooltip?: boolean + tooltipText?: string } -export const TitleBlock: React.FC = ({ - title = "", - description, - tooltip = false, - tooltipText = "", -}) => { +export const TitleBlock: React.FC = ({ title = "", description, tooltip = false, tooltipText = "" }) => { return ( - - {title} - + + {title} + {tooltip ? ( - - + + - - Configure Proposals and Voting{" "} - + Configure Proposals and Voting ) : null} @@ -89,5 +82,5 @@ export const TitleBlock: React.FC = ({ - ); -}; + ) +} diff --git a/src/modules/common/Toolbar.tsx b/src/modules/common/Toolbar.tsx index 234632c9..82bf9568 100644 --- a/src/modules/common/Toolbar.tsx +++ b/src/modules/common/Toolbar.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState } from "react" import { AppBar, Toolbar, @@ -10,51 +10,51 @@ import { useTheme, Popover, useMediaQuery, - Theme, -} from "@material-ui/core"; -import { useHistory } from "react-router-dom"; -import { TezosToolkit } from "@taquito/taquito"; - -import HomeButton from "assets/logos/homebase_logo.svg"; -import { useTezos } from "services/beacon/hooks/useTezos"; -import { toShortAddress } from "services/contracts/utils"; -import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons"; -import { Network } from "services/beacon"; -import { UserProfileName } from "modules/explorer/components/UserProfileName"; -import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar"; -import { NavigationMenu } from "modules/explorer/components/NavigationMenu"; -import { SmallButton } from "./SmallButton"; -import { ChangeNetworkButton } from "./ChangeNetworkButton"; - -import { ArrowBackIos } from "@material-ui/icons"; + Theme +} from "@material-ui/core" +import { useHistory } from "react-router-dom" +import { TezosToolkit } from "@taquito/taquito" + +import HomeButton from "assets/logos/homebase_logo.svg" +import { useTezos } from "services/beacon/hooks/useTezos" +import { toShortAddress } from "services/contracts/utils" +import { ExitToAppOutlined, FileCopyOutlined } from "@material-ui/icons" +import { Network } from "services/beacon" +import { UserProfileName } from "modules/explorer/components/UserProfileName" +import { ProfileAvatar } from "modules/explorer/components/styled/ProfileAvatar" +import { NavigationMenu } from "modules/explorer/components/NavigationMenu" +import { SmallButton } from "./SmallButton" +import { ChangeNetworkButton } from "./ChangeNetworkButton" + +import { ArrowBackIos } from "@material-ui/icons" const AddressMenu = styled(Box)(() => ({ width: 264, borderRadius: 4, - backgroundColor: "#282B31", -})); + backgroundColor: "#282B31" +})) const AddressMenuItem = styled(Grid)(({ theme }) => ({ cursor: "pointer", boxSizing: "border-box", color: theme.palette.text.secondary, - padding: "20px 3px", -})); + padding: "20px 3px" +})) const AddressMenuIcon = styled(Grid)({ paddingRight: "12px", - marginBottom: "-4px", -}); + marginBottom: "-4px" +}) const StyledUserProfileName = styled(Typography)({ - color: "#ddd", -}); + color: "#ddd" +}) const StyledPopover = styled(Popover)({ ".MuiPaper-root": { - borderRadius: 4, - }, -}); + borderRadius: 4 + } +}) const Header = styled(Grid)(({ theme }) => ({ width: "1000px", @@ -68,7 +68,7 @@ const Header = styled(Grid)(({ theme }) => ({ ["@media (max-width:1335px)"]: {}, ["@media (max-width:1167px)"]: { - width: "86vw", + width: "86vw" }, ["@media (max-width:1030px)"]: {}, @@ -76,9 +76,9 @@ const Header = styled(Grid)(({ theme }) => ({ ["@media (max-width:960px)"]: {}, ["@media (max-width:645px)"]: { - flexDirection: "column", - }, -})); + flexDirection: "column" + } +})) const StyledAppBar = styled(AppBar)(({ theme }: { theme: Theme }) => ({ boxShadow: "none", @@ -86,138 +86,125 @@ const StyledAppBar = styled(AppBar)(({ theme }: { theme: Theme }) => ({ position: "sticky", ["@media (max-height:750px)"]: { - position: "sticky", - }, -})); + position: "sticky" + } +})) const StyledToolbar = styled(Toolbar)({ width: "100%", padding: 0, boxSizing: "border-box", justifyContent: "space-between", - flexWrap: "wrap", -}); + flexWrap: "wrap" +}) const AddressContainer = styled(Grid)({ - cursor: "pointer", -}); + cursor: "pointer" +}) const LogoText = styled(Typography)({ fontWeight: "bold", fontSize: "24px", cursor: "pointer", fontFamily: "Roboto", - letterSpacing: "initial", -}); + letterSpacing: "initial" +}) const AddressBarWrapper = styled(Grid)({ - boxSizing: "border-box", - padding: "8px 16px", - borderRadius: 4, + "boxSizing": "border-box", + "padding": "8px 16px", + "borderRadius": 4, "&:hover": { - background: "rgba(129, 254, 183, 0.03)", - }, -}); + background: "rgba(129, 254, 183, 0.03)" + } +}) const LogoItem = styled("img")({ height: "30px", cursor: "pointer", - paddingTop: 8, -}); + paddingTop: 8 +}) const ToolbarContainer = styled(Grid)(({ theme }) => ({ ["@media (max-width: 645px)"]: { - marginBottom: "20px", - }, -})); + marginBottom: "20px" + } +})) const BackButtonContainer = styled(Grid)({ marginTop: 28, - alignItems: "baseline", - -}); + alignItems: "baseline" +}) const BackButton = styled(Typography)(({ theme }) => ({ color: theme.palette.secondary.light, - fontSize: 18, -})); + fontSize: 18 +})) const BackButtonIcon = styled(ArrowBackIos)(({ theme }) => ({ color: theme.palette.secondary.light, fontSize: 12, - marginRight: 15, -})); + marginRight: 15 +})) const BackButtonText = styled(Grid)({ cursor: "pointer", alignItems: "baseline" -}); +}) -export const ConnectWalletButton = ({ - connect, -}: { - connect: () => Promise; -}) => ( +export const ConnectWalletButton = ({ connect }: { connect: () => Promise }) => ( connect()}> Connect Wallet -); +) export const Navbar: React.FC<{ - mode: "creator" | "explorer"; - disableMobileMenu?: boolean; + mode: "creator" | "explorer" + disableMobileMenu?: boolean }> = ({ mode, children, disableMobileMenu }) => { - const { connect, account, reset, changeNetwork, network } = useTezos(); - const [anchorEl, setAnchorEl] = React.useState( - null - ); - const [popperOpen, setPopperOpen] = useState(false); - const theme = useTheme(); - const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs")); - const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")); - - const [networkAnchorEl, setNetworkAnchorEl] = - React.useState(null); - const [networkPopperOpen, setNetworkPopperOpen] = useState(false); + const { connect, account, reset, changeNetwork, network } = useTezos() + const [anchorEl, setAnchorEl] = React.useState(null) + const [popperOpen, setPopperOpen] = useState(false) + const theme = useTheme() + const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs")) + const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm")) + + const [networkAnchorEl, setNetworkAnchorEl] = React.useState(null) + const [networkPopperOpen, setNetworkPopperOpen] = useState(false) const handleNetworkClick = (event: React.MouseEvent) => { - setNetworkAnchorEl(event.currentTarget); - setNetworkPopperOpen(!networkPopperOpen); - }; + setNetworkAnchorEl(event.currentTarget) + setNetworkPopperOpen(!networkPopperOpen) + } const handleNetworkChange = (network: Network) => { - changeNetwork(network); - setPopperOpen(!popperOpen); - setNetworkPopperOpen(!networkPopperOpen); - history.push("/explorer"); - }; + changeNetwork(network) + setPopperOpen(!popperOpen) + setNetworkPopperOpen(!networkPopperOpen) + history.push("/explorer") + } const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - setPopperOpen(!popperOpen); - }; + setAnchorEl(event.currentTarget) + setPopperOpen(!popperOpen) + } const handleLogout = () => { - reset(); - setPopperOpen(false); - }; + reset() + setPopperOpen(false) + } const handleCopy = (address: string) => { - navigator.clipboard.writeText(address); - setPopperOpen(false); - }; + navigator.clipboard.writeText(address) + setPopperOpen(false) + } - const history = useHistory(); + const history = useHistory() return ( -
+
history.push("/explorer")}> @@ -234,10 +221,7 @@ export const Navbar: React.FC<{ - + {account ? ( { - setPopperOpen(false); + setPopperOpen(false) }} PaperProps={{ style: { borderRadius: 4, - backgroundColor: "transparent", - }, + backgroundColor: "transparent" + } }} > - handleCopy(account)} - > + handleCopy(account)}> - + @@ -305,11 +282,7 @@ export const Navbar: React.FC<{ - + Change network ({network}) @@ -318,17 +291,14 @@ export const Navbar: React.FC<{ - + @@ -340,13 +310,7 @@ export const Navbar: React.FC<{ ) : ( - + @@ -364,11 +328,8 @@ export const Navbar: React.FC<{ )} - - history.push("/explorer")}> + + history.push("/explorer")}> Back @@ -377,5 +338,5 @@ export const Navbar: React.FC<{ {/* */} - ); -}; + ) +} diff --git a/src/modules/common/WarningFooter.tsx b/src/modules/common/WarningFooter.tsx index ea1d3f59..cc85a37d 100644 --- a/src/modules/common/WarningFooter.tsx +++ b/src/modules/common/WarningFooter.tsx @@ -1,9 +1,9 @@ -import { Box, Grid, IconButton, Typography } from "@material-ui/core"; -import { styled } from "@material-ui/styles"; -import React, { useState } from "react"; -import { ReactComponent as WarningIcon } from "assets/logos/warning.svg"; -import CloseIcon from "@material-ui/icons/Close"; -import hexToRgba from "hex-to-rgba"; +import { Box, Grid, IconButton, Typography } from "@material-ui/core" +import { styled } from "@material-ui/styles" +import React, { useState } from "react" +import { ReactComponent as WarningIcon } from "assets/logos/warning.svg" +import CloseIcon from "@material-ui/icons/Close" +import hexToRgba from "hex-to-rgba" const Container = styled(Box)({ position: "fixed", @@ -14,8 +14,8 @@ const Container = styled(Box)({ boxSizing: "border-box", padding: "25px 50px", color: "#FFC839", - zIndex: 10000, -}); + zIndex: 10000 +}) const ContainerText = styled(Typography)({ maxWidth: 1160, @@ -23,33 +23,25 @@ const ContainerText = styled(Typography)({ color: "inherit", fontSize: "18px", - ["@media (max-width:1030px)"]: { - fontSize: "16px", - }, -}); + ["@media (max-width:1030px)"]: { + fontSize: "16px" + } +}) export const WarningFooter: React.FC<{ text: string }> = ({ text }) => { - const [open, setOpen] = useState(true); + const [open, setOpen] = useState(true) return ( <> {open && ( - + - - + - - {text} - + {text} setOpen(false)}> @@ -60,5 +52,5 @@ export const WarningFooter: React.FC<{ text: string }> = ({ text }) => { )} - ); -}; + ) +} diff --git a/src/modules/common/hooks/useLocalStorage.ts b/src/modules/common/hooks/useLocalStorage.ts index 6a1578c2..72e02ebf 100644 --- a/src/modules/common/hooks/useLocalStorage.ts +++ b/src/modules/common/hooks/useLocalStorage.ts @@ -1,68 +1,63 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState } from "react" // From https://usehooks-typescript.com/react-hook/use-local-storage -function useLocalStorage( - key: string, - initialValue: T -): [T, (value: T) => void] { +function useLocalStorage(key: string, initialValue: T): [T, (value: T) => void] { // Get from local storage then // parse stored json or return initialValue const readValue = () => { // Prevent build error "window is undefined" but keep keep working if (typeof window === "undefined") { - return initialValue; + return initialValue } try { - const item = window.localStorage.getItem(key); - return item ? JSON.parse(item) : initialValue; + const item = window.localStorage.getItem(key) + return item ? JSON.parse(item) : initialValue } catch (error) { - console.warn(`Error reading localStorage key “${key}”:`, error); - return initialValue; + console.warn(`Error reading localStorage key “${key}”:`, error) + return initialValue } - }; + } // State to store our value // Pass initial state function to useState so logic is only executed once - const [storedValue, setStoredValue] = useState(readValue); + const [storedValue, setStoredValue] = useState(readValue) // Return a wrapped version of useState's setter function that ... // ... persists the new value to localStorage. const setValue = (value: T) => { // Prevent build error "window is undefined" but keep keep working if (typeof window == "undefined") { - console.warn( - `Tried setting localStorage key “${key}” even though environment is not a client` - ); + console.warn(`Tried setting localStorage key “${key}” even though environment is not a client`) } try { // Allow value to be a function so we have the same API as useState - const newValue = value instanceof Function ? value(storedValue) : value; + const newValue = value instanceof Function ? value(storedValue) : value // Save to local storage - window.localStorage.setItem(key, JSON.stringify(newValue)); + window.localStorage.setItem(key, JSON.stringify(newValue)) // Save state - setStoredValue(newValue); + setStoredValue(newValue) // We dispatch a custom event so every useLocalStorage hook are notified - window.dispatchEvent(new Event("local-storage")); + window.dispatchEvent(new Event("local-storage")) } catch (error) { - console.warn(`Error setting localStorage key “${key}”:`, error); + console.warn(`Error setting localStorage key “${key}”:`, error) } - }; + } useEffect(() => { - setStoredValue(readValue()); + setStoredValue(readValue()) // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, []) useEffect(() => { const handleStorageChange = () => { - setStoredValue(readValue()); - }; + setStoredValue(readValue()) + } // this only works for other documents, not the current one - window.addEventListener("storage", handleStorageChange); + window.addEventListener("storage", handleStorageChange) // this is a custom event, triggered in writeValueToLocalStorage - window.addEventListener("local-storage", handleStorageChange); + window.addEventListener("local-storage", handleStorageChange) return () => { - window.removeEventListener("storage", handleStorageChange); - window.removeEventListener("local-storage", handleStorageChange); - }; + window.removeEventListener("storage", handleStorageChange) + window.removeEventListener("local-storage", handleStorageChange) + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - return [storedValue, setValue]; + }, []) + return [storedValue, setValue] } -export default useLocalStorage; +export default useLocalStorage diff --git a/src/modules/common/hooks/useNotification.tsx b/src/modules/common/hooks/useNotification.tsx index 86029cfb..85d893e5 100644 --- a/src/modules/common/hooks/useNotification.tsx +++ b/src/modules/common/hooks/useNotification.tsx @@ -1,25 +1,19 @@ -import React, { Fragment } from "react"; -import { Button, styled } from "@material-ui/core"; -import { OptionsObject, useSnackbar } from "notistack"; -import { Close, OpenInNew } from "@material-ui/icons"; -import { ExternalLink } from "modules/common/ExternalLink"; +import React, { Fragment } from "react" +import { Button, styled } from "@material-ui/core" +import { OptionsObject, useSnackbar } from "notistack" +import { Close, OpenInNew } from "@material-ui/icons" +import { ExternalLink } from "modules/common/ExternalLink" const CloseIcon = styled(Close)({ - color: "#fff", -}); + color: "#fff" +}) const ExpandIcon = styled(OpenInNew)({ color: "#fff", - fontSize: 25, -}); + fontSize: 25 +}) -const NotificationActions = ({ - detailsLink, - onClose, -}: { - detailsLink?: string; - onClose: () => void; -}) => ( +const NotificationActions = ({ detailsLink, onClose }: { detailsLink?: string; onClose: () => void }) => ( {detailsLink ? ( @@ -30,29 +24,24 @@ const NotificationActions = ({ -); +) interface NotificationParams extends OptionsObject { - message: string; - detailsLink?: string; + message: string + detailsLink?: string } export const useNotification = () => { - const { enqueueSnackbar, closeSnackbar } = useSnackbar(); + const { enqueueSnackbar, closeSnackbar } = useSnackbar() const open = ({ message, detailsLink, ...options }: NotificationParams) => { const key = enqueueSnackbar(message, { ...options, persist: true, - action: ( - closeSnackbar(key)} - /> - ), - }); + action: closeSnackbar(key)} /> + }) - return { key, closeSnackbar }; - }; + return { key, closeSnackbar } + } - return open; -}; + return open +} diff --git a/src/modules/creator/components/ClaimName.tsx b/src/modules/creator/components/ClaimName.tsx index 7cf00254..3c4b92fc 100644 --- a/src/modules/creator/components/ClaimName.tsx +++ b/src/modules/creator/components/ClaimName.tsx @@ -1,5 +1,5 @@ -import { Grid, Paper, styled, Typography } from "@material-ui/core"; -import React from "react"; +import { Grid, Paper, styled, Typography } from "@material-ui/core" +import React from "react" const CustomUrlButton = styled(Paper)({ border: "1px solid #3866F9", @@ -15,8 +15,8 @@ const CustomUrlButton = styled(Paper)({ padding: 5, color: "#3866F9", marginTop: 12, - fontFamily: "system-ui", -}); + fontFamily: "system-ui" +}) const CustomContainer = styled(Grid)({ height: 62, @@ -24,8 +24,8 @@ const CustomContainer = styled(Grid)({ background: "#FFFFFF", border: "1px solid #E4E4E4", boxSizing: "border-box", - marginTop: 14, -}); + marginTop: 14 +}) export const ClaimName: React.FC = () => { return ( @@ -45,5 +45,5 @@ export const ClaimName: React.FC = () => { - ); -}; + ) +} diff --git a/src/modules/creator/components/ConnectWallet.tsx b/src/modules/creator/components/ConnectWallet.tsx index 8c80f9bc..19cd3dbc 100644 --- a/src/modules/creator/components/ConnectWallet.tsx +++ b/src/modules/creator/components/ConnectWallet.tsx @@ -1,28 +1,18 @@ -import { - Grid, - Typography, - Box, - List, - ListItem, - ListItemAvatar, - Avatar, - ListItemText, - styled, -} from "@material-ui/core"; -import ImageIcon from "@material-ui/icons/Image"; -import React from "react"; -import { useTezos } from "services/beacon/hooks/useTezos"; +import { Grid, Typography, Box, List, ListItem, ListItemAvatar, Avatar, ListItemText, styled } from "@material-ui/core" +import ImageIcon from "@material-ui/icons/Image" +import React from "react" +import { useTezos } from "services/beacon/hooks/useTezos" const PageContainer = styled(Grid)({ - height: "90%", -}); + height: "90%" +}) const SpacingTitle = styled(Typography)({ - marginBottom: 15, -}); + marginBottom: 15 +}) export const ConnectWallet: React.FC = () => { - const { connect } = useTezos(); + const { connect } = useTezos() return ( @@ -52,5 +42,5 @@ export const ConnectWallet: React.FC = () => { - ); -}; + ) +} diff --git a/src/modules/creator/components/DeploymentLoader.tsx b/src/modules/creator/components/DeploymentLoader.tsx index 69773592..3f3efb3a 100644 --- a/src/modules/creator/components/DeploymentLoader.tsx +++ b/src/modules/creator/components/DeploymentLoader.tsx @@ -8,19 +8,18 @@ import { styled, Theme, Typography, - withStyles, -} from "@material-ui/core"; -import React, { useEffect, useState } from "react"; -import { SuspenseDots } from "./SuspenseDots"; + withStyles +} from "@material-ui/core" +import React, { useEffect, useState } from "react" +import { SuspenseDots } from "./SuspenseDots" const WaitingText = styled(Typography)({ marginTop: 46, textAlign: "center", justifyContent: "center", marginBottom: 20, - maxWidth: 650, -}); - + maxWidth: 650 +}) const StyledContainer = styled(Box)({ width: "100%", @@ -29,109 +28,91 @@ const StyledContainer = styled(Box)({ ["@media (max-width:1167px)"]: { minWidth: "auto" } -}); - +}) const StyledStepper = styled(Stepper)(({ theme }) => ({ - width: "100%", - paddingLeft: 0, - paddingRight: 0, - background: "inherit", + "width": "100%", + "paddingLeft": 0, + "paddingRight": 0, + "background": "inherit", "& .MuiStepConnector-alternativeLabel": { - left: "calc(-50% + 19px)", - right: "calc(50% + 19px)", - top: 16, + "left": "calc(-50% + 19px)", + "right": "calc(50% + 19px)", + "top": 16, "& .MuiStepConnector-lineHorizontal": { borderColor: theme.palette.primary.light, - borderTopWidth: 3, - }, - }, -})); + borderTopWidth: 3 + } + } +})) const StyledLabel = styled(StepLabel)( - ({ - theme, - focused, - hasError, - }: { - theme: Theme; - focused: boolean; - hasError: boolean; - }) => ({ + ({ theme, focused, hasError }: { theme: Theme; focused: boolean; hasError: boolean }) => ({ "& .MuiStepIcon-root": { - borderWidth: 3, + borderWidth: 3 }, "& .MuiStepIcon-active": { - borderColor: hasError - ? theme.palette.error.main - : focused - ? "#fff" - : theme.palette.primary.light, - fill: "none", + borderColor: hasError ? theme.palette.error.main : focused ? "#fff" : theme.palette.primary.light, + fill: "none" }, "& .MuiStepIcon-text": { - fill: "none", + fill: "none" }, "& .MuiStepIcon-completed": { borderColor: focused ? "#fff" : theme.palette.secondary.main, - fill: theme.palette.secondary.main, - }, + fill: theme.palette.secondary.main + } }) -); +) const ColorlibConnector = withStyles((theme: Theme) => ({ alternativeLabel: { - top: 22, + top: 22 }, active: { "& $line": { - backgroundColor: theme.palette.secondary.main, - }, + backgroundColor: theme.palette.secondary.main + } }, completed: { "& $line": { - backgroundColor: theme.palette.secondary.main, - }, + backgroundColor: theme.palette.secondary.main + } }, line: { height: 3, border: 0, backgroundColor: theme.palette.primary.light, - borderRadius: 1, - }, -}))(StepConnector); + borderRadius: 1 + } +}))(StepConnector) interface Props { - states: { activeText: string; completedText: string }[]; - activeStep: number | undefined; - error: Error | null; + states: { activeText: string; completedText: string }[] + activeStep: number | undefined + error: Error | null } -export const DeploymentLoader: React.FC = ({ - states, - activeStep, - error, -}) => { +export const DeploymentLoader: React.FC = ({ states, activeStep, error }) => { const errorMessage = "Something went wrong, please try again later." - const [focusedState, setFocusedState] = useState(0); - const isFinished = activeStep === states.length; - const isStarted = Number.isInteger(activeStep); - const showActiveText = - isStarted && !isFinished && activeStep === focusedState; - const showCompletedText = isStarted && focusedState < (activeStep as number); + const [focusedState, setFocusedState] = useState(0) + const isFinished = activeStep === states.length + const isStarted = Number.isInteger(activeStep) + const showActiveText = isStarted && !isFinished && activeStep === focusedState + const showCompletedText = isStarted && focusedState < (activeStep as number) useEffect(() => { if (activeStep) { if (isFinished) { - setFocusedState(states.length - 1); + setFocusedState(states.length - 1) } else { - setFocusedState(activeStep); + setFocusedState(activeStep) } } - }, [activeStep, isFinished, states.length]); + }, [activeStep, isFinished, states.length]) return ( - + @@ -146,33 +127,25 @@ export const DeploymentLoader: React.FC = ({ - } - > + }> {states.map((_, index) => ( { if (!activeStep) { - return; + return } if (index <= activeStep) { - setFocusedState(index); + setFocusedState(index) } }} completed={activeStep ? index < activeStep : false} > - + ))} - ); -}; + ) +} diff --git a/src/modules/creator/components/NavigationBar.tsx b/src/modules/creator/components/NavigationBar.tsx index d190cabd..218709f6 100644 --- a/src/modules/creator/components/NavigationBar.tsx +++ b/src/modules/creator/components/NavigationBar.tsx @@ -1,15 +1,8 @@ -import { - styled, - Grid, - Typography, - Paper, - useMediaQuery, - useTheme, -} from "@material-ui/core"; -import React from "react"; -import { ArrowBackIos } from "@material-ui/icons"; +import { styled, Grid, Typography, Paper, useMediaQuery, useTheme } from "@material-ui/core" +import React from "react" +import { ArrowBackIos } from "@material-ui/icons" -import { NavigationBarProps } from "modules/creator/state"; +import { NavigationBarProps } from "modules/creator/state" const Footer = styled(Grid)(({ theme }) => ({ background: theme.palette.primary.main, @@ -17,9 +10,9 @@ const Footer = styled(Grid)(({ theme }) => ({ marginBottom: 10, ["@media (max-width:1167px)"]: { marginLeft: 0, - marginBottom: 50, + marginBottom: 50 } -})); +})) const BackButton = styled(Paper)({ boxShadow: "none", @@ -32,9 +25,9 @@ const BackButton = styled(Paper)({ alignItems: "baseline", padding: 8, width: "fit-content" -}); +}) -const NextButton = styled(Paper)(({theme }) => ({ +const NextButton = styled(Paper)(({ theme }) => ({ boxShadow: "none", borderRadius: 4, textAlign: "center", @@ -42,35 +35,25 @@ const NextButton = styled(Paper)(({theme }) => ({ cursor: "pointer", background: theme.palette.secondary.light, padding: 8 -})); +})) const BackButtonIcon = styled(ArrowBackIos)(({ theme }) => ({ color: theme.palette.secondary.light, fontSize: 12, - marginRight: 12, -})); + marginRight: 12 +})) const FooterContainer = styled(Grid)(({ isMobile }: { isMobile: boolean }) => ({ width: "100%" -})); +})) export const NavigationBar: React.FC = ({ back, next }) => { - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down("md")); + const theme = useTheme() + const isMobile = useMediaQuery(theme.breakpoints.down("md")) return ( -