├── .env ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── jsconfig.json ├── package.json ├── public ├── _redirects ├── favicon │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ ├── apple-touch-icon.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ └── favicon.ico ├── fonts │ ├── CircularStd-Bold.otf │ ├── CircularStd-Book.otf │ ├── CircularStd-Medium.otf │ ├── Roboto-Bold.ttf │ ├── Roboto-Regular.ttf │ └── index.css ├── index.html ├── manifest.json ├── robots.txt └── static │ ├── auction.svg │ ├── badges │ ├── ELA-network.svg │ ├── ETH-network.svg │ ├── FSN-network.svg │ ├── custom.svg │ ├── diamond.svg │ ├── kyc.svg │ ├── pasar.svg │ ├── thumbdown.svg │ ├── thumbup.svg │ └── user.svg │ ├── basket.svg │ ├── batch-img.svg │ ├── blockchain.svg │ ├── broken-image.svg │ ├── calendar-hammer.svg │ ├── calendar-market.svg │ ├── carbon_credentials.svg │ ├── cash-hand.svg │ ├── chain-home.svg │ ├── circle-loading.svg │ ├── collection.svg │ ├── contract-address.svg │ ├── contract.svg │ ├── corner-logo.png │ ├── description.svg │ ├── diamond.svg │ ├── diamond2.svg │ ├── elastos-logo.svg │ ├── elastos.svg │ ├── elastos_solid.svg │ ├── empty-feeds-icon.svg │ ├── erc20 │ ├── BUSD.svg │ ├── Bunny.svg │ ├── ELAonETH.svg │ ├── ETH.svg │ ├── EUSDC.svg │ ├── Elk.svg │ ├── FSN.svg │ ├── Glide.svg │ └── WELA.png │ ├── essentials.png │ ├── ethereum.svg │ ├── exchange.svg │ ├── feeds-collection.svg │ ├── feeds-sticker.svg │ ├── glide.png │ ├── hammer.svg │ ├── hash.svg │ ├── icons │ ├── browser-edge.svg │ ├── controls │ │ ├── arrow-ios-back.svg │ │ ├── arrow-ios-forward.svg │ │ ├── close.svg │ │ ├── maximize-outline.svg │ │ └── minimize-outline.svg │ ├── editor │ │ ├── align_center.svg │ │ ├── align_justify.svg │ │ ├── align_left.svg │ │ ├── align_right.svg │ │ ├── colorpicker.svg │ │ ├── embedded.svg │ │ ├── emoji.svg │ │ ├── history_redo.svg │ │ ├── history_undo.svg │ │ ├── image.svg │ │ ├── inline_bold.svg │ │ ├── inline_italic.svg │ │ ├── inline_strikethrough.svg │ │ ├── inline_underline.svg │ │ ├── link.svg │ │ ├── list_indent.svg │ │ ├── list_ordered.svg │ │ ├── list_outdent.svg │ │ ├── list_unordered.svg │ │ ├── monospace.svg │ │ ├── remove.svg │ │ ├── subscript.svg │ │ ├── superscript.svg │ │ └── unlink.svg │ ├── elephant.svg │ ├── file │ │ ├── file_type_ai.svg │ │ ├── file_type_excel.svg │ │ ├── file_type_pdf.svg │ │ ├── file_type_photoshop.svg │ │ ├── file_type_powerpoint.svg │ │ ├── file_type_video.svg │ │ └── file_type_word.svg │ ├── ic_chrome.svg │ ├── ic_code.svg │ ├── ic_design.svg │ ├── ic_drive.svg │ ├── ic_dropbox.svg │ ├── ic_evernote.svg │ ├── ic_flag_de.svg │ ├── ic_flag_en.svg │ ├── ic_flag_fr.svg │ ├── ic_flag_kr.svg │ ├── ic_flag_us.svg │ ├── ic_github.svg │ ├── ic_mastercard.svg │ ├── ic_notification_chat.svg │ ├── ic_notification_mail.svg │ ├── ic_notification_package.svg │ ├── ic_notification_shipping.svg │ ├── ic_paypal.svg │ ├── ic_visa.svg │ ├── json-logo.svg │ ├── love-camera.svg │ ├── navbar │ │ ├── ic_analytics.svg │ │ ├── ic_banking.svg │ │ ├── ic_blog.svg │ │ ├── ic_booking.svg │ │ ├── ic_calendar.svg │ │ ├── ic_cart.svg │ │ ├── ic_chat.svg │ │ ├── ic_dashboard.svg │ │ ├── ic_ecommerce.svg │ │ ├── ic_kanban.svg │ │ ├── ic_mail.svg │ │ └── ic_user.svg │ ├── shape-avatar.svg │ └── shield.svg │ ├── loading-dark.gif │ ├── loading-homecard.jpg │ ├── loading-light.gif │ ├── logo-gif-dark.gif │ ├── logo-gif-light.gif │ ├── logo-icon-white.svg │ ├── logo-icon.svg │ ├── logo-sm.svg │ ├── logo-xs-round.svg │ ├── logo.svg │ ├── market-home-1.svg │ ├── market-home-2.svg │ ├── marketplace-auction.svg │ ├── marketplace.svg │ ├── metamask.svg │ ├── overlay.svg │ ├── profile-icon.svg │ ├── qricon.svg │ ├── remove.svg │ ├── stamp.svg │ ├── tag.svg │ ├── trashcan.svg │ ├── upload.svg │ ├── user-check.svg │ ├── user-home.svg │ ├── user.svg │ └── walletconnect.svg └── src ├── App.js ├── abi ├── commonABI.js ├── diamondABI.js ├── erc20ABI.js ├── feedsStickerABI.js ├── pasarABI.js ├── pasarV1ABI.js ├── registerABI.js ├── stickerABI.js ├── token1155ABI.js ├── token20ABI.js ├── token721ABI.js ├── tokenMiningABI.js ├── tokenStakingABI.js └── tokenVestingABI.js ├── assets ├── illustration_404.js └── index.js ├── bytecode ├── token1155.code └── token721.code ├── components ├── @material-extend │ ├── MAvatar.js │ ├── MBreadcrumbs.js │ ├── MFab.js │ ├── MHidden.js │ ├── MIconButton.js │ └── index.js ├── ActivityPeriodSelect.js ├── AddressCopyButton.js ├── AssetSortSelect.js ├── ByToSelect.js ├── CardImgBox.js ├── ChainSelect.js ├── CoinTypeLabel.js ├── CollectionSortSelect.js ├── CopyButton.js ├── Countdown.js ├── CustomInput.js ├── DateOrderSelect.js ├── InlineBox.js ├── Jazzicon.js ├── LinkIcons │ └── Discord.js ├── LoadingScreen.js ├── LoadingWrapper.js ├── Logo.js ├── MethodLabel.js ├── MethodSelect.js ├── MyItemsSortSelect.js ├── NetworkCircle.js ├── NotistackProvider.js ├── Page.js ├── PaperRecord.js ├── ProgressBar.js ├── RingAvatar.js ├── ScrollManager.js ├── Scrollbar.js ├── SearchBox │ └── index.js ├── SearchNotFound.js ├── Searchbar.js ├── SnackbarCustom.js ├── TabPanel.js ├── ThemeLocalization.js ├── ThemePrimaryColor.js ├── TransLoadingButton.js ├── activity │ ├── ActivityAccordion.js │ ├── ActivityFilterPan.js │ ├── ActivitySkeleton.js │ ├── ActivityTableRow.js │ └── TabletImgBox.js ├── animate │ ├── ButtonAnimate.js │ ├── DialogAnimate.js │ ├── MotionContainer.js │ ├── MotionInView.js │ ├── TextAnimate.js │ ├── index.js │ └── variants │ │ ├── Actions.js │ │ ├── Path.js │ │ ├── Wrap.js │ │ ├── background │ │ ├── BackgroundColor.js │ │ ├── BackgroundKenburns.js │ │ ├── BackgroundPan.js │ │ └── index.js │ │ ├── bounce │ │ ├── BounceIn.js │ │ ├── BounceOut.js │ │ └── index.js │ │ ├── fade │ │ ├── FadeIn.js │ │ ├── FadeOut.js │ │ └── index.js │ │ ├── flip │ │ ├── FlipIn.js │ │ ├── FlipOut.js │ │ └── index.js │ │ ├── index.js │ │ ├── rotate │ │ ├── RotateIn.js │ │ ├── RotateOut.js │ │ └── index.js │ │ ├── scale │ │ ├── ScaleIn.js │ │ ├── ScaleOut.js │ │ └── index.js │ │ ├── slide │ │ ├── SlideIn.js │ │ ├── SlideOut.js │ │ └── index.js │ │ └── zoom │ │ ├── In.js │ │ ├── Out.js │ │ └── index.js ├── badge │ ├── Badge.js │ ├── DIABadge.js │ └── KYCBadge.js ├── carousel │ ├── CarouselCustom.js │ ├── CarouselFeatures.js │ ├── controls │ │ ├── CarouselControlsPaging2.js │ │ └── index.js │ └── index.js ├── charts │ ├── BaseOptionChart.js │ ├── ChartArea.js │ └── index.js ├── collection │ ├── CategorySelect.js │ ├── CollectionCard.js │ ├── CollectionCardSkeleton.js │ ├── CollectionFilterPan.js │ ├── IconLinkButtonGroup.js │ ├── StandardTypeButton.js │ ├── StatisticPanel │ │ ├── StatisticItem.js │ │ └── index.js │ └── VolumeIcon.js ├── custom-switch │ └── index.js ├── dialog │ ├── Access.js │ ├── Auction.js │ ├── CancelSale.js │ ├── ChooseCollection.js │ ├── CreateItem.js │ ├── Credentials.js │ ├── DeleteItem.js │ ├── Disclaimer.js │ ├── Donate.js │ ├── Mint.js │ ├── NeedBuyDIA.js │ ├── NeedMoreDIA.js │ ├── PlaceBid.js │ ├── Purchase.js │ ├── RegisterCollection.js │ ├── Sell.js │ ├── SettleOrder.js │ ├── Transfer.js │ ├── UpdatePrice.js │ └── UpdateRoyalties.js ├── editor │ ├── draft │ │ ├── DraftEditorStyle.js │ │ ├── DraftEditorToolbar.js │ │ └── index.js │ ├── index.js │ └── quill │ │ ├── QuillEditorToolbar.js │ │ ├── QuillEditorToolbarStyle.js │ │ └── index.js ├── explorer │ ├── CollectibleList │ │ └── CollectibleListItem.js │ ├── CollectionView │ │ ├── LatestTransactions.js │ │ ├── NewestCollectibles.js │ │ └── Template.js │ ├── StatisticPanel │ │ ├── StatisticItem.js │ │ └── index.js │ └── TransactionList │ │ ├── TransactionCollectibleDetail.js │ │ ├── TransactionListItem.js │ │ └── TransactionOrderDetail.js ├── home │ ├── FilteredAssetGrid.js │ ├── FilteredCollectionGrid.js │ ├── FilteredTransGrid.js │ ├── HomeAssetCarousel.js │ └── TransSkeleton.js ├── main-logo │ └── index.js ├── marketplace │ ├── AssetCard.js │ ├── AssetCardSkeleton.js │ ├── AssetDetailInfo.js │ ├── AssetFilterPan.js │ ├── AssetGrid.js │ ├── BadgeProfile.js │ ├── BidList.js │ ├── CoinSelect.js │ ├── CollectibleHistory.js │ ├── ExpirationDateSelect.js │ ├── ItemTypeButton.js │ ├── MintBatchName.js │ ├── MintingTypeButton.js │ ├── MultiMintGrid.js │ ├── NetworkBox.js │ └── StartingDateSelect.js ├── mega-menu │ ├── MegaMenuCarousel.js │ ├── MegaMenuDesktopHorizon.js │ ├── MegaMenuDesktopVertical.js │ ├── MegaMenuMobile.js │ ├── MenuConfig.js │ ├── MenuHotProducts.js │ └── index.js ├── mode-switch │ └── index.js ├── pagination │ ├── ShowSelect │ │ └── index.js │ └── index.js ├── rewards │ └── StatisticPanel │ │ ├── StatisticItem.js │ │ └── index.js ├── settings │ ├── SettingColor.js │ ├── SettingDirection.js │ ├── SettingFullscreen.js │ ├── SettingMode.js │ ├── SettingStretch.js │ └── index.js ├── signin-dlg │ ├── BrowserConnectivitySDKHiveAuthHelper.js │ ├── EssentialConnectivity.js │ ├── HiveAPI.js │ ├── HiveService.js │ ├── LoadCredentials.js │ ├── SignInDialog.js │ ├── StyledButton.js │ ├── connectors.js │ └── hook.js └── upload │ ├── UploadAvatar.js │ ├── UploadMultiFile.js │ ├── UploadSingleFile.js │ └── index.js ├── config.js ├── contexts ├── AuctionDlgContext.js ├── MintDlgContext.js ├── SettingsContext.js └── SigninContext.js ├── hooks ├── useAuctionDlg.js ├── useAuth.js ├── useCollapseDrawer.js ├── useCountdown.js ├── useIsMountedRef.js ├── useLocalStorage.js ├── useLocales.js ├── useMintDlg.js ├── useOffSetTop.js ├── useSettings.js └── useSignin.js ├── index.js ├── layouts ├── LogoOnlyLayout.js └── main │ ├── MainFooter.js │ ├── MainNavbar.js │ ├── MenuConfig.js │ ├── MenuDesktop.js │ ├── MenuMobile.js │ └── index.js ├── pages ├── MarketHome.js ├── Page404.js ├── Page500.js ├── activity │ └── Explorer.js ├── collection │ ├── CollectionDetail.js │ ├── CreateCollection.js │ ├── EditCollection.js │ ├── Explorer.js │ └── ImportCollection.js ├── explorer │ ├── AddressDetail.js │ ├── Collectible.js │ ├── CollectibleDetail.js │ ├── Explorer.js │ ├── SearchResult.js │ └── Transaction.js ├── features │ └── Features.js ├── marketplace │ ├── CollectibleDetail.js │ ├── CollectibleHandleSection.js │ ├── CreateItem.js │ └── Explorer.js ├── profile │ ├── EditProfile.js │ ├── MyItems.js │ └── MyProfile.js └── rewards │ └── Rewards.js ├── redux ├── rootReducer.js ├── slices │ ├── blog.js │ ├── calendar.js │ ├── chat.js │ ├── kanban.js │ ├── mail.js │ ├── product.js │ └── user.js └── store.js ├── routes ├── index.js └── paths.js ├── service-worker.js ├── theme ├── breakpoints.js ├── globalStyles.js ├── index.js ├── overrides │ ├── Accordion.js │ ├── Alert.js │ ├── Autocomplete.js │ ├── Avatar.js │ ├── Backdrop.js │ ├── Badge.js │ ├── Breadcrumbs.js │ ├── Button.js │ ├── ButtonGroup.js │ ├── Card.js │ ├── Checkbox.js │ ├── Chip.js │ ├── Container.js │ ├── ControlLabel.js │ ├── DataGrid.js │ ├── Dialog.js │ ├── Drawer.js │ ├── Fab.js │ ├── Grid.js │ ├── IconButton.js │ ├── Input.js │ ├── Link.js │ ├── Lists.js │ ├── LoadingButton.js │ ├── Menu.js │ ├── Pagination.js │ ├── Paper.js │ ├── Pickers.js │ ├── Popover.js │ ├── Progress.js │ ├── Radio.js │ ├── Rating.js │ ├── Select.js │ ├── Skeleton.js │ ├── Slider.js │ ├── Snackbar.js │ ├── Stepper.js │ ├── SvgIcon.js │ ├── Switch.js │ ├── Table.js │ ├── Tabs.js │ ├── Timeline.js │ ├── ToggleButton.js │ ├── Tooltip.js │ ├── TreeView.js │ ├── Typography.js │ └── index.js ├── palette.js ├── shadows.js ├── shape.js └── typography.js └── utils ├── analytics.js ├── common.js ├── elastosConnectivityService.js ├── formatNumber.js ├── gitInfo.js ├── highlight.js ├── image-file-resize └── index.js └── mock-data ├── address.js ├── boolean.js ├── company.js ├── email.js ├── index.js ├── name.js ├── number.js ├── phoneNumber.js ├── role.js └── text.js /.env: -------------------------------------------------------------------------------- 1 | # FIX REFRESH "react-scripts": "4.x" 2 | # https://github.com/facebook/create-react-app/issues/9984 3 | FAST_REFRESH=false 4 | 5 | # MAP 6 | REACT_APP_MAP_MAPBOX= 7 | 8 | # FIREBASE 9 | REACT_APP_FIREBASE_API_KEY="" 10 | REACT_APP_FIREBASE_AUTH_DOMAIN="" 11 | REACT_APP_FIREBASE_PROJECT_ID="" 12 | REACT_APP_FIREBASE_STORAGE_BUCKET="" 13 | REACT_APP_FIREBASE_MESSAGING_SENDER_ID="" 14 | REACT_APP_FIREBASE_APPID="" 15 | REACT_APP_FIREBASE_MEASUREMENT_ID="" 16 | 17 | # AWS COGNITO 18 | REACT_APP_AWS_COGNITO_USER_POOL_ID= 19 | REACT_APP_AWS_COGNITO_CLIENT_ID= 20 | 21 | # AUTH0 22 | REACT_APP_AUTH0_DOMAIN= 23 | REACT_APP_AUTH0_CLIENT_ID= 24 | 25 | # GOOGLE ANALYTICS 26 | REACT_APP_GA_MEASUREMENT_ID= 27 | 28 | REACT_APP_BACKEND_URL_PRODUCTION="https://assist.pasarprotocol.io" 29 | REACT_APP_BACKEND_URL_TEST="https://assist-test.pasarprotocol.io" 30 | 31 | REACT_APP_IPFS_URL_PRODUCTION="https://ipfs.pasarprotocol.io" 32 | REACT_APP_IPFS_URL_TEST="https://ipfs-test.pasarprotocol.io" 33 | 34 | REACT_APP_SHORTEN_SERVICE_URL="https://s.pasarprotocol.io" 35 | 36 | REACT_APP_ENV="test" 37 | # REACT_APP_ENV="production" 38 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | // .eslintignore 2 | build/* 3 | public/* 4 | src/service-worker.js 5 | src/serviceWorkerRegistration.js 6 | src/setupTests.js 7 | src/reportWebVitals.js 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | /.env 17 | /.env.local 18 | /.env.development.local 19 | /.env.test.local 20 | /.env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | yarn.lock 26 | 27 | .eslintcache 28 | src/generatedGitInfo.json 29 | 30 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "tabWidth": 2 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Pasar Protocol DAO 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "commonjs", 5 | "baseUrl": "." 6 | }, 7 | "include": [ 8 | "src/**/*" 9 | ], 10 | "exclude": [ 11 | "node_modules" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /public/favicon/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/favicon/android-chrome-192x192.png -------------------------------------------------------------------------------- /public/favicon/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/favicon/android-chrome-512x512.png -------------------------------------------------------------------------------- /public/favicon/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/favicon/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/favicon/favicon.ico -------------------------------------------------------------------------------- /public/fonts/CircularStd-Bold.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/fonts/CircularStd-Bold.otf -------------------------------------------------------------------------------- /public/fonts/CircularStd-Book.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/fonts/CircularStd-Book.otf -------------------------------------------------------------------------------- /public/fonts/CircularStd-Medium.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/fonts/CircularStd-Medium.otf -------------------------------------------------------------------------------- /public/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /public/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /public/fonts/index.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'CircularStd'; 3 | font-weight: 400; 4 | font-style: normal; 5 | src: local('CircularStd'), url('CircularStd-Book.otf') format('opentype'); 6 | } 7 | @font-face { 8 | font-family: 'CircularStd'; 9 | font-weight: 500; 10 | font-style: normal; 11 | src: local('CircularStd'), url('CircularStd-Medium.otf') format('opentype'); 12 | } 13 | @font-face { 14 | font-family: 'CircularStd'; 15 | font-weight: 700; 16 | font-style: normal; 17 | src: local('CircularStd'), url('CircularStd-Bold.otf') format('opentype'); 18 | } 19 | .walletconnect-modal__mobile__toggle a { 20 | color: black; 21 | } 22 | div[class^='bg svelte-'] { 23 | display: none; 24 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | PASAR 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "React Material Minimal UI", 3 | "short_name": "Minimal-UI", 4 | "display": "standalone", 5 | "start_url": "/", 6 | "theme_color": "#000000", 7 | "background_color": "#ffffff", 8 | "icons": [ 9 | { 10 | "src": "favicon/favicon.ico", 11 | "sizes": "48x48", 12 | "type": "image/x-icon" 13 | }, 14 | { 15 | "src": "favicon/android-chrome-192x192.png", 16 | "sizes": "192x192", 17 | "type": "image/png" 18 | }, 19 | { 20 | "src": "favicon/android-chrome-512x512.png", 21 | "sizes": "512x512", 22 | "type": "image/png" 23 | } 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/static/auction.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/badges/ELA-network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/static/badges/ETH-network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/badges/FSN-network.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/badges/diamond.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/static/badges/thumbdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/badges/thumbup.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/basket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/batch-img.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/blockchain.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/broken-image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/circle-loading.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 19 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /public/static/collection.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/corner-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/corner-logo.png -------------------------------------------------------------------------------- /public/static/description.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/diamond.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/diamond2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/elastos.svg: -------------------------------------------------------------------------------- 1 | logo-mark -------------------------------------------------------------------------------- /public/static/erc20/ELAonETH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/static/erc20/ETH.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/static/erc20/FSN.svg: -------------------------------------------------------------------------------- 1 | fusion-fsn-logo -------------------------------------------------------------------------------- /public/static/erc20/WELA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/erc20/WELA.png -------------------------------------------------------------------------------- /public/static/essentials.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/essentials.png -------------------------------------------------------------------------------- /public/static/ethereum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/exchange.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/glide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/glide.png -------------------------------------------------------------------------------- /public/static/hammer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/hash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/browser-edge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/controls/arrow-ios-back.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/controls/arrow-ios-forward.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/controls/close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/controls/maximize-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/controls/minimize-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/align_center.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/align_justify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/align_left.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/align_right.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/emoji.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/history_redo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/history_undo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/image.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/inline_bold.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/inline_italic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/inline_underline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/list_indent.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/list_ordered.svg: -------------------------------------------------------------------------------- 1 | 123 -------------------------------------------------------------------------------- /public/static/icons/editor/list_outdent.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/list_unordered.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/editor/remove.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/elephant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_code.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_design.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_drive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_dropbox.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_flag_de.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_flag_en.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_flag_fr.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_mastercard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_notification_mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/ic_visa.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/json-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/love-camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_banking.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_blog.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_booking.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_cart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_chat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_dashboard.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_kanban.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | ic_kanban 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_mail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/navbar/ic_user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/shape-avatar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/icons/shield.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/loading-dark.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/loading-dark.gif -------------------------------------------------------------------------------- /public/static/loading-homecard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/loading-homecard.jpg -------------------------------------------------------------------------------- /public/static/loading-light.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/loading-light.gif -------------------------------------------------------------------------------- /public/static/logo-gif-dark.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/logo-gif-dark.gif -------------------------------------------------------------------------------- /public/static/logo-gif-light.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/logo-gif-light.gif -------------------------------------------------------------------------------- /public/static/marketplace.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /public/static/overlay.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/static/remove.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/tag.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/trashcan.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/static/user.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/abi/commonABI.js: -------------------------------------------------------------------------------- 1 | module.exports.COMMON_CONTRACT_ABI = [ 2 | { 3 | type: 'function', 4 | stateMutability: 'view', 5 | outputs: [{ type: 'string', name: '', internalType: 'string' }], 6 | name: 'name', 7 | inputs: [] 8 | }, 9 | { 10 | type: 'function', 11 | stateMutability: 'view', 12 | outputs: [{ type: 'string', name: '', internalType: 'string' }], 13 | name: 'symbol', 14 | inputs: [] 15 | }, 16 | { 17 | type: 'function', 18 | stateMutability: 'view', 19 | inputs: [{ type: 'bytes4', name: '_interfaceId', internalType: 'bytes4' }], 20 | name: 'supportsInterface', 21 | outputs: [{ type: 'bool', name: '', internalType: 'bool' }] 22 | }, 23 | { 24 | type: 'function', 25 | stateMutability: 'view', 26 | inputs: [], 27 | name: 'owner', 28 | outputs: [{ type: 'address', name: '', internalType: 'address' }] 29 | } 30 | ]; 31 | -------------------------------------------------------------------------------- /src/abi/diamondABI.js: -------------------------------------------------------------------------------- 1 | module.exports.ERC20_CONTRACT_ABI = [ 2 | { 3 | inputs: [ 4 | { 5 | internalType: 'address', 6 | name: 'owner', 7 | type: 'address' 8 | } 9 | ], 10 | name: 'balanceOf', 11 | outputs: [ 12 | { 13 | internalType: 'uint256', 14 | name: 'balance', 15 | type: 'uint256' 16 | } 17 | ], 18 | stateMutability: 'view', 19 | type: 'function' 20 | } 21 | ]; 22 | -------------------------------------------------------------------------------- /src/abi/erc20ABI.js: -------------------------------------------------------------------------------- 1 | module.exports.ERC20_CONTRACT_ABI = [ 2 | { 3 | type: 'function', 4 | stateMutability: 'view', 5 | inputs: [ 6 | { type: 'address', name: 'owner', internalType: 'address' }, 7 | { type: 'address', name: 'spender', internalType: 'address' } 8 | ], 9 | name: 'allowance', 10 | outputs: [{ type: 'uint256', name: '', internalType: 'uint256' }] 11 | }, 12 | { 13 | type: 'function', 14 | stateMutability: 'nonpayable', 15 | inputs: [ 16 | { type: 'address', name: 'spender', internalType: 'address' }, 17 | { type: 'uint256', name: 'amount', internalType: 'uint256' } 18 | ], 19 | name: 'approve', 20 | outputs: [{ type: 'bool', name: '', internalType: 'bool' }] 21 | } 22 | ]; 23 | -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | export { default as PageNotFoundIllustration } from './illustration_404'; -------------------------------------------------------------------------------- /src/components/@material-extend/MAvatar.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { forwardRef } from 'react'; 3 | // material 4 | import { Avatar, useTheme } from '@mui/material'; 5 | 6 | // ---------------------------------------------------------------------- 7 | 8 | const MAvatar = forwardRef(({ color = 'default', sx, children, ...other }, ref) => { 9 | const theme = useTheme(); 10 | 11 | if (color === 'default') { 12 | return ( 13 | 14 | {children} 15 | 16 | ); 17 | } 18 | 19 | return ( 20 | 30 | {children} 31 | 32 | ); 33 | }); 34 | 35 | MAvatar.propTypes = { 36 | children: PropTypes.node, 37 | sx: PropTypes.object, 38 | color: PropTypes.oneOf(['default', 'primary', 'secondary', 'info', 'success', 'warning', 'error']) 39 | }; 40 | 41 | export default MAvatar; 42 | -------------------------------------------------------------------------------- /src/components/@material-extend/MFab.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { forwardRef } from 'react'; 3 | // material 4 | import { useTheme } from '@mui/material/styles'; 5 | import { Fab } from '@mui/material'; 6 | // 7 | import { ButtonAnimate } from '../animate'; 8 | 9 | // ---------------------------------------------------------------------- 10 | 11 | const MFab = forwardRef(({ color = 'primary', children, sx, ...other }, ref) => { 12 | const theme = useTheme(); 13 | 14 | if (color === 'default' || color === 'inherit' || color === 'primary' || color === 'secondary') { 15 | return ( 16 | 17 | 18 | {children} 19 | 20 | 21 | ); 22 | } 23 | 24 | return ( 25 | 26 | 39 | {children} 40 | 41 | 42 | ); 43 | }); 44 | 45 | MFab.propTypes = { 46 | children: PropTypes.node, 47 | sx: PropTypes.object, 48 | color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'info', 'success', 'warning', 'error']) 49 | }; 50 | 51 | export default MFab; 52 | -------------------------------------------------------------------------------- /src/components/@material-extend/MHidden.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | // material 3 | import { useMediaQuery } from '@mui/material'; 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | MHidden.propTypes = { 8 | children: PropTypes.node, 9 | width: PropTypes.oneOf(['xsDown', 'smDown', 'mdDown', 'lgDown', 'xlDown', 'xsUp', 'smUp', 'mdUp', 'lgUp', 'xlUp']) 10 | .isRequired 11 | }; 12 | 13 | export default function MHidden({ width, children }) { 14 | const breakpoint = width.substring(0, 2); 15 | 16 | const hiddenUp = useMediaQuery((theme) => theme.breakpoints.up(breakpoint)); 17 | const hiddenDown = useMediaQuery((theme) => theme.breakpoints.down(breakpoint)); 18 | 19 | if (width.includes('Down')) { 20 | return hiddenDown ? null : children; 21 | } 22 | 23 | if (width.includes('Up')) { 24 | return hiddenUp ? null : children; 25 | } 26 | 27 | return null; 28 | } 29 | -------------------------------------------------------------------------------- /src/components/@material-extend/MIconButton.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { forwardRef } from 'react'; 3 | // material 4 | import { IconButton } from '@mui/material'; 5 | // 6 | import { ButtonAnimate } from '../animate'; 7 | 8 | // ---------------------------------------------------------------------- 9 | 10 | const MIconButton = forwardRef(({ children, ...other }, ref) => ( 11 | 12 | 13 | {children} 14 | 15 | 16 | )); 17 | 18 | MIconButton.propTypes = { 19 | children: PropTypes.node 20 | }; 21 | 22 | export default MIconButton; 23 | -------------------------------------------------------------------------------- /src/components/@material-extend/index.js: -------------------------------------------------------------------------------- 1 | export { default as MAvatar } from './MAvatar'; 2 | export { default as MBreadcrumbs } from './MBreadcrumbs'; 3 | export { default as MFab } from './MFab'; 4 | export { default as MIconButton } from './MIconButton'; 5 | export { default as MHidden } from './MHidden'; 6 | -------------------------------------------------------------------------------- /src/components/AssetSortSelect.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Select from '@mui/material/Select'; 3 | import MenuItem from '@mui/material/MenuItem'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const MenuProps = { 7 | anchorOrigin: { 8 | vertical: 'bottom', 9 | horizontal: 'left' 10 | }, 11 | transformOrigin: { 12 | vertical: 'top', 13 | horizontal: 'left' 14 | }, 15 | variant: 'menu' 16 | }; 17 | const menuItems = [ 18 | 'Latest: Listed', 19 | 'Latest: Created', 20 | 'Oldest: Listed', 21 | 'Oldest: Created', 22 | 'Price: Low to High', 23 | 'Price: High to Low', 24 | 'Auction Ending Soon' 25 | ]; 26 | 27 | export default function AssetSortSelect({ selected, onChange, sx = {} }) { 28 | const handleChange = (event) => { 29 | onChange(event.target.value); 30 | }; 31 | return ( 32 | 46 | ); 47 | } 48 | 49 | AssetSortSelect.propTypes = { 50 | selected: PropTypes.number, 51 | onChange: PropTypes.func, 52 | sx: PropTypes.any 53 | }; 54 | -------------------------------------------------------------------------------- /src/components/ByToSelect.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Select from '@mui/material/Select'; 3 | import MenuItem from '@mui/material/MenuItem'; 4 | import PropTypes from 'prop-types'; 5 | 6 | export default function ByToSelect({ onChange }) { 7 | const [selected, setSelected] = useState(0); 8 | const handleChange = (event) => { 9 | setSelected(event.target.value); 10 | onChange(event.target.value); 11 | }; 12 | return ( 13 | 24 | ); 25 | } 26 | 27 | ByToSelect.propTypes = { 28 | onChange: PropTypes.func 29 | }; 30 | -------------------------------------------------------------------------------- /src/components/CoinTypeLabel.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Box } from '@mui/material'; 3 | // ---------------------------------------------------------------------- 4 | 5 | const CoinTypeLabel = ({ type }) => ( 6 | 7 | (theme.palette.mode === 'dark' && type.name === 'ELA' ? 'invert(1)' : 'none') 15 | }} 16 | /> 17 |  {type.name} 18 | 19 | ); 20 | export default CoinTypeLabel; 21 | 22 | CoinTypeLabel.propTypes = { 23 | type: PropTypes.any 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/CollectionSortSelect.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Select from '@mui/material/Select'; 3 | import MenuItem from '@mui/material/MenuItem'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const MenuProps = { 7 | anchorOrigin: { 8 | vertical: 'bottom', 9 | horizontal: 'left' 10 | }, 11 | transformOrigin: { 12 | vertical: 'top', 13 | horizontal: 'left' 14 | }, 15 | variant: 'menu' 16 | }; 17 | export default function CollectionSortSelect({ onChange, orderType, sortOptions, sx = {} }) { 18 | const handleChange = (event) => { 19 | onChange(event.target.value); 20 | }; 21 | return ( 22 | 37 | ); 38 | } 39 | 40 | CollectionSortSelect.propTypes = { 41 | onChange: PropTypes.func, 42 | orderType: PropTypes.any, 43 | sortOptions: PropTypes.any, 44 | sx: PropTypes.any 45 | }; 46 | -------------------------------------------------------------------------------- /src/components/CopyButton.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { CopyToClipboard } from 'react-copy-to-clipboard'; 3 | import sharpContentCopy from '@iconify/icons-ic/sharp-content-copy'; 4 | import { Icon } from '@iconify/react'; 5 | import { useSnackbar } from 'notistack'; 6 | import IconButton from '@mui/material/IconButton'; 7 | 8 | CopyButton.propTypes = { 9 | text: PropTypes.string, 10 | sx: PropTypes.any 11 | }; 12 | 13 | export default function CopyButton({ text, sx }) { 14 | const { enqueueSnackbar } = useSnackbar(); 15 | const onCopy = () => { 16 | enqueueSnackbar('Copied to clipboard', { variant: 'success' }); 17 | }; 18 | return ( 19 | 20 | { 25 | e.preventDefault(); 26 | e.stopPropagation(); 27 | }} 28 | > 29 | 30 | 31 | 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /src/components/CustomInput.js: -------------------------------------------------------------------------------- 1 | import { InputLabel, Input, TextField } from '@mui/material'; 2 | import { styled } from '@mui/material/styles'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | export const InputStyle = styled(Input)(({ theme }) => ({ 7 | '&:before': { 8 | borderWidth: 0 9 | }, 10 | '&:after': { 11 | borderColor: theme.palette.text.primary 12 | } 13 | })); 14 | export const InputLabelStyle = styled(InputLabel)(({ theme }) => ({ 15 | '&.Mui-focused': { 16 | color: theme.palette.text.primary 17 | } 18 | })); 19 | export const TextFieldStyle = styled(TextField)(({ theme }) => ({ 20 | '& .Mui-focused fieldset.MuiOutlinedInput-notchedOutline': { 21 | borderColor: theme.palette.text.primary 22 | }, 23 | '& label.Mui-focused': { 24 | color: theme.palette.text.primary 25 | } 26 | })); 27 | -------------------------------------------------------------------------------- /src/components/DateOrderSelect.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Select from '@mui/material/Select'; 3 | import MenuItem from '@mui/material/MenuItem'; 4 | import PropTypes from 'prop-types'; 5 | 6 | export default function DateOrderSelect({ onChange }) { 7 | const [selected, setSelected] = useState(-1); 8 | const handleChange = (event) => { 9 | setSelected(event.target.value); 10 | onChange(event.target.value); 11 | }; 12 | return ( 13 | 24 | ); 25 | } 26 | 27 | DateOrderSelect.propTypes = { 28 | onChange: PropTypes.func 29 | }; 30 | -------------------------------------------------------------------------------- /src/components/InlineBox.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | 3 | InlineBox.propTypes = { 4 | children: PropTypes.node 5 | }; 6 | 7 | export default function InlineBox(props) { 8 | return {props.children}; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Jazzicon.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { styled } from '@mui/material/styles'; 4 | import { generateJazzicon } from '../utils/common'; 5 | 6 | const StyledIdenticon = styled('div')(({ size }) => ({ 7 | width: size, 8 | height: size, 9 | display: 'inline-flex', 10 | borderRadius: '50%', 11 | overflow: 'hidden', 12 | backgroundColor: 'black', 13 | marginRight: 8 14 | })); 15 | 16 | Identicon.propTypes = { 17 | address: PropTypes.string, 18 | sx: PropTypes.any, 19 | size: PropTypes.number 20 | }; 21 | 22 | export default function Identicon(props) { 23 | const ref = useRef(); 24 | const { address, sx, size = 40 } = props; 25 | useEffect(() => { 26 | if (ref.current) { 27 | ref.current.innerHTML = ''; 28 | ref.current.appendChild(generateJazzicon(address, size)); 29 | } 30 | // eslint-disable-next-line react-hooks/exhaustive-deps 31 | }, [address]); 32 | 33 | return ; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/LoadingWrapper.js: -------------------------------------------------------------------------------- 1 | import { styled } from '@mui/material/styles'; 2 | 3 | const LoadingWrapper = styled('div')({ 4 | position: 'fixed', 5 | left: '50%', 6 | top: '50%', 7 | webkitTransform: 'translateX(-50%) translateY(-50%)', 8 | transform: 'translateX(-50%) translateY(-50%)', 9 | 'z-index': 1 10 | }); 11 | export default LoadingWrapper; 12 | -------------------------------------------------------------------------------- /src/components/Logo.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Box } from '@mui/material'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | Logo.propTypes = { 7 | sx: PropTypes.object 8 | }; 9 | 10 | export default function Logo({ sx }) { 11 | return ; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/MethodLabel.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Typography } from '@mui/material'; 3 | import { MethodList } from '../utils/common'; 4 | 5 | MethodLabel.propTypes = { 6 | methodName: PropTypes.string 7 | }; 8 | 9 | export default function MethodLabel({ methodName }) { 10 | const methodItem = MethodList.find((item) => item.method === methodName); 11 | const methodColor = methodItem ? methodItem.color : 'grey'; 12 | const camelCaseArr = methodName ? methodName.split(/(?=[A-Z])/g) : []; 13 | camelCaseArr.forEach((w, i) => { 14 | camelCaseArr.splice(i * 2 + 1, 0, ); 15 | }); 16 | return ( 17 | 34 | {camelCaseArr} 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/components/MyItemsSortSelect.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import Select from '@mui/material/Select'; 3 | import MenuItem from '@mui/material/MenuItem'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const MenuProps = { 7 | anchorOrigin: { 8 | vertical: 'bottom', 9 | horizontal: 'left' 10 | }, 11 | transformOrigin: { 12 | vertical: 'top', 13 | horizontal: 'left' 14 | }, 15 | variant: 'menu' 16 | }; 17 | export default function MyItemsSortSelect({ onChange, sx = {} }) { 18 | const [selected, setSelected] = useState(0); 19 | const handleChange = (event) => { 20 | setSelected(event.target.value); 21 | onChange(event.target.value); 22 | }; 23 | return ( 24 | 38 | ); 39 | } 40 | 41 | MyItemsSortSelect.propTypes = { 42 | onChange: PropTypes.func, 43 | sx: PropTypes.any 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/Page.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Helmet } from 'react-helmet-async'; 3 | import { useLocation } from 'react-router-dom'; 4 | import { forwardRef, useEffect, useCallback } from 'react'; 5 | // material 6 | import { Box } from '@mui/material'; 7 | // utils 8 | import track from '../utils/analytics'; 9 | 10 | // ---------------------------------------------------------------------- 11 | 12 | const Page = forwardRef(({ children, title = '', ...other }, ref) => { 13 | const { pathname } = useLocation(); 14 | 15 | const sendPageViewEvent = useCallback(() => { 16 | track.pageview({ 17 | page_path: pathname 18 | }); 19 | // eslint-disable-next-line react-hooks/exhaustive-deps 20 | }, []); 21 | 22 | useEffect(() => { 23 | sendPageViewEvent(); 24 | }, [sendPageViewEvent]); 25 | 26 | return ( 27 | 28 | 29 | {title} 30 | 31 | {children} 32 | 33 | ); 34 | }); 35 | 36 | Page.propTypes = { 37 | title: PropTypes.string, 38 | children: PropTypes.node.isRequired 39 | }; 40 | 41 | export default Page; 42 | -------------------------------------------------------------------------------- /src/components/PaperRecord.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Paper } from '@mui/material'; 3 | 4 | const PaperRecord = (props) => ( 5 | theme.customShadows.z1, 10 | ...props.sx 11 | }} 12 | onClick={props.onClick} 13 | > 14 | {props.children} 15 | 16 | ); 17 | export default PaperRecord; 18 | 19 | PaperRecord.propTypes = { 20 | sx: PropTypes.any, 21 | onClick: PropTypes.func, 22 | children: PropTypes.node 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/ProgressBar.js: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { styled } from '@mui/material/styles'; 4 | import { makeStyles } from '@mui/styles'; 5 | import { Container } from '@mui/material'; 6 | 7 | import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'; 8 | 9 | const useStyles = makeStyles({ 10 | bar: { 11 | transitionDuration: `100ms` 12 | }, 13 | container: ({ isFinished }) => ({ 14 | position: 'fixed', 15 | top: 0, 16 | width: '100%', 17 | maxWidth: 'unset', 18 | padding: 0, 19 | zIndex: 100000, 20 | opacity: isFinished ? 0 : 1, 21 | pointerEvents: 'none', 22 | transition: `opacity 100ms linear` 23 | }) 24 | }); 25 | 26 | const BorderProgressBar = styled(LinearProgress)(({ theme }) => ({ 27 | height: 5, 28 | borderRadius: 1, 29 | [`&.${linearProgressClasses.colorPrimary}`]: { 30 | backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800] 31 | }, 32 | [`& .${linearProgressClasses.bar}`]: { 33 | borderRadius: 1, 34 | backgroundColor: theme.palette.mode === 'light' ? '#FF5082' : '#308fe8' 35 | } 36 | })); 37 | 38 | const ProgressBar = ({ isFinished, progress }) => { 39 | const classes = useStyles({ isFinished }); 40 | 41 | return ( 42 | 43 | 44 | 45 | ); 46 | }; 47 | export default ProgressBar; 48 | 49 | ProgressBar.propTypes = { 50 | isFinished: PropTypes.bool, 51 | progress: PropTypes.number 52 | }; 53 | -------------------------------------------------------------------------------- /src/components/RingAvatar.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Box } from '@mui/material'; 3 | import Jazzicon from './Jazzicon'; 4 | 5 | RingAvatar.propTypes = { 6 | size: PropTypes.number, 7 | outersx: PropTypes.any, 8 | isImage: PropTypes.bool, 9 | avatar: PropTypes.string, 10 | address: PropTypes.string 11 | }; 12 | 13 | export default function RingAvatar(props) { 14 | const { size, outersx, isImage = false } = props; 15 | let { avatar = '' } = props; 16 | if (!avatar) avatar = '/static/broken-image.svg'; 17 | 18 | return ( 19 | theme.palette.origin.main, 25 | backgroundColor: (theme) => theme.palette.background.paper, 26 | p: '5px', 27 | background: (theme) => 28 | `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box, linear-gradient(180deg, #a951f4, #FF5082) border-box`, 29 | border: '4px solid transparent', 30 | ...outersx 31 | }} 32 | > 33 | {isImage ? ( 34 | { 40 | e.target.src = '/static/circle-loading.svg'; 41 | }} 42 | /> 43 | ) : ( 44 | 45 | )} 46 | 47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /src/components/SearchNotFound.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Paper, Typography } from '@mui/material'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | SearchNotFound.propTypes = { 7 | searchQuery: PropTypes.string 8 | }; 9 | 10 | export default function SearchNotFound({ searchQuery = '', ...other }) { 11 | return ( 12 | 13 | 14 | Not found 15 | 16 | 17 | No results found for   18 | "{searchQuery}". Try checking for typos or using complete words. 19 | 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /src/components/SnackbarCustom.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Snackbar, Alert } from '@mui/material'; 4 | 5 | SnackbarCustom.propTypes = { 6 | vertical: PropTypes.string, 7 | horizontal: PropTypes.string, 8 | children: PropTypes.node, 9 | isOpen: PropTypes.bool, 10 | setOpen: PropTypes.func 11 | }; 12 | 13 | export default function SnackbarCustom(props) { 14 | const { vertical = 'top', horizontal = 'center', children, isOpen, setOpen } = props; 15 | 16 | const handleClose = () => { 17 | setOpen(false); 18 | }; 19 | 20 | return ( 21 | 22 | 23 | {children} 24 | 25 | 26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /src/components/TabPanel.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Box } from '@mui/material'; 3 | 4 | function TabPanel(props) { 5 | const { children, value, index, ...other } = props; 6 | 7 | return ( 8 | 17 | ); 18 | } 19 | 20 | TabPanel.propTypes = { 21 | children: PropTypes.node, 22 | index: PropTypes.number.isRequired, 23 | value: PropTypes.number.isRequired 24 | }; 25 | 26 | export default TabPanel; 27 | -------------------------------------------------------------------------------- /src/components/ThemeLocalization.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | // material 3 | import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; 4 | // hooks 5 | import useLocales from '../hooks/useLocales'; 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | ThemeLocalization.propTypes = { 10 | children: PropTypes.node 11 | }; 12 | 13 | export default function ThemeLocalization({ children }) { 14 | const defaultTheme = useTheme(); 15 | const { currentLang } = useLocales(); 16 | 17 | const theme = createTheme(defaultTheme, currentLang.systemValue); 18 | 19 | return {children}; 20 | } 21 | -------------------------------------------------------------------------------- /src/components/ThemePrimaryColor.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { useMemo } from 'react'; 3 | // material 4 | import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; 5 | // hooks 6 | import useSettings from '../hooks/useSettings'; 7 | // 8 | import componentsOverride from '../theme/overrides'; 9 | 10 | // ---------------------------------------------------------------------- 11 | 12 | ThemePrimaryColor.propTypes = { 13 | children: PropTypes.node 14 | }; 15 | 16 | export default function ThemePrimaryColor({ children }) { 17 | const defaultTheme = useTheme(); 18 | const { setColor } = useSettings(); 19 | 20 | const themeOptions = useMemo( 21 | () => ({ 22 | ...defaultTheme, 23 | palette: { 24 | ...defaultTheme.palette, 25 | primary: setColor 26 | }, 27 | customShadows: { 28 | ...defaultTheme.customShadows, 29 | primary: `0 8px 16px 0 ${alpha(setColor.main, 0.24)}` 30 | } 31 | }), 32 | [setColor, defaultTheme] 33 | ); 34 | 35 | const theme = createTheme(themeOptions); 36 | theme.components = componentsOverride(theme); 37 | 38 | return {children}; 39 | } 40 | -------------------------------------------------------------------------------- /src/components/TransLoadingButton.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { styled } from '@mui/material/styles'; 3 | import { LoadingButton } from '@mui/lab'; 4 | 5 | const LoadingButtonStyled = styled(LoadingButton)(({ theme }) => ({ 6 | minWidth: 200, 7 | backgroundColor: theme.palette.mode === 'light' ? theme.palette.text.primary : theme.palette.grey[700], 8 | '&:hover': 9 | theme.palette.mode === 'dark' 10 | ? { 11 | backgroundColor: theme.palette.grey[600] 12 | } 13 | : {}, 14 | '&.Mui-disabled': { 15 | paddingLeft: 40, 16 | color: theme.palette.origin.main, 17 | borderColor: theme.palette.origin.main, 18 | backgroundColor: 'unset' 19 | } 20 | })); 21 | 22 | export default function TransLoadingButton(props) { 23 | return ( 24 | } 28 | variant={props.loading ? 'outlined' : 'contained'} 29 | fullWidth 30 | onClick={props.onClick} 31 | > 32 | {props.loading ? props.loadingText : props.children} 33 | 34 | ); 35 | } 36 | 37 | TransLoadingButton.propTypes = { 38 | loading: PropTypes.bool, 39 | onClick: PropTypes.func, 40 | loadingText: PropTypes.string, 41 | children: PropTypes.node 42 | }; 43 | 44 | TransLoadingButton.defaultProps = { 45 | loadingText: 'Please Sign Transaction From Wallet' 46 | }; 47 | -------------------------------------------------------------------------------- /src/components/animate/ButtonAnimate.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { motion } from 'framer-motion'; 3 | // material 4 | import { Box } from '@mui/material'; 5 | // 6 | import { varSmallClick, varMediumClick } from './variants'; 7 | 8 | // ---------------------------------------------------------------------- 9 | 10 | ButtonAnimate.propTypes = { 11 | mediumClick: PropTypes.bool, 12 | children: PropTypes.node, 13 | sx: PropTypes.object 14 | }; 15 | 16 | export default function ButtonAnimate({ mediumClick = false, children, sx, ...other }) { 17 | return ( 18 | 26 | {children} 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /src/components/animate/DialogAnimate.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { motion, AnimatePresence } from 'framer-motion'; 3 | // material 4 | import { Dialog } from '@mui/material'; 5 | // 6 | import { varFadeInUp } from './variants'; 7 | 8 | // ---------------------------------------------------------------------- 9 | 10 | DialogAnimate.propTypes = { 11 | open: PropTypes.bool.isRequired, 12 | animate: PropTypes.object, 13 | onClose: PropTypes.func, 14 | children: PropTypes.node.isRequired 15 | }; 16 | 17 | export default function DialogAnimate({ open = false, animate, onClose, children, ...other }) { 18 | return ( 19 | 20 | {open && ( 21 | 36 | {children} 37 | 38 | )} 39 | 40 | ); 41 | } 42 | -------------------------------------------------------------------------------- /src/components/animate/MotionContainer.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { motion } from 'framer-motion'; 3 | // material 4 | import { Box } from '@mui/material'; 5 | // 6 | import { varWrapEnter } from './variants'; 7 | 8 | // ---------------------------------------------------------------------- 9 | 10 | MotionContainer.propTypes = { 11 | open: PropTypes.bool.isRequired, 12 | children: PropTypes.node 13 | }; 14 | 15 | export default function MotionContainer({ open, children, ...other }) { 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /src/components/animate/MotionInView.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { useEffect } from 'react'; 3 | import { motion, useAnimation } from 'framer-motion'; 4 | import { useInView } from 'react-intersection-observer'; 5 | // material 6 | import { Box } from '@mui/material'; 7 | 8 | // ---------------------------------------------------------------------- 9 | 10 | MotionInView.propTypes = { 11 | children: PropTypes.node, 12 | variants: PropTypes.object, 13 | transition: PropTypes.object, 14 | triggerOnce: PropTypes.bool, 15 | threshold: PropTypes.oneOfType([PropTypes.number, PropTypes.array]) 16 | }; 17 | 18 | export default function MotionInView({ children, variants, transition, threshold, ...other }) { 19 | const controls = useAnimation(); 20 | const [ref, inView] = useInView({ 21 | threshold: threshold || 0, 22 | triggerOnce: true 23 | }); 24 | 25 | useEffect(() => { 26 | if (inView) { 27 | controls.start(Object.keys(variants)[1]); 28 | } else { 29 | controls.start(Object.keys(variants)[0]); 30 | } 31 | }, [controls, inView, variants]); 32 | 33 | return ( 34 | 43 | {children} 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/components/animate/TextAnimate.js: -------------------------------------------------------------------------------- 1 | import { motion } from 'framer-motion'; 2 | import PropTypes from 'prop-types'; 3 | // material 4 | import { Typography } from '@mui/material'; 5 | // 6 | import { varFadeInUp } from './variants'; 7 | 8 | // ---------------------------------------------------------------------- 9 | 10 | TextAnimate.propTypes = { 11 | text: PropTypes.string, 12 | variants: PropTypes.object, 13 | sx: PropTypes.object 14 | }; 15 | 16 | export default function TextAnimate({ text, variants, sx, ...other }) { 17 | return ( 18 | 28 | {text.split('').map((letter, index) => ( 29 | 30 | {letter} 31 | 32 | ))} 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/components/animate/index.js: -------------------------------------------------------------------------------- 1 | export * from './variants'; 2 | export { default as MotionInView } from './MotionInView'; 3 | export { default as MotionContainer } from './MotionContainer'; 4 | export { default as DialogAnimate } from './DialogAnimate'; 5 | export { default as ButtonAnimate } from './ButtonAnimate'; 6 | export { default as TextAnimate } from './TextAnimate'; 7 | -------------------------------------------------------------------------------- /src/components/animate/variants/Actions.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const varHover = { 4 | hover: { scale: 1.1 } 5 | }; 6 | 7 | export const varSmallClick = { 8 | hover: { scale: 1.04 }, 9 | tap: { scale: 0.96 } 10 | }; 11 | 12 | export const varMediumClick = { 13 | hover: { scale: 1.1 }, 14 | tap: { scale: 0.9 } 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/animate/variants/Path.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const TRANSITION = { 4 | duration: 2, 5 | ease: [0.43, 0.13, 0.23, 0.96] 6 | }; 7 | 8 | export const varPath = { 9 | animate: { 10 | fillOpacity: [0, 0, 1], 11 | pathLength: [1, 0.4, 0], 12 | transition: TRANSITION 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /src/components/animate/variants/Wrap.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const varWrapEnter = { 4 | animate: { 5 | transition: { staggerChildren: 0.1 } 6 | } 7 | }; 8 | 9 | export const varWrapExit = { 10 | exit: { 11 | transition: { staggerChildren: 0.1 } 12 | } 13 | }; 14 | 15 | export const varWrapBoth = { 16 | animate: { 17 | transition: { staggerChildren: 0.07, delayChildren: 0.1 } 18 | }, 19 | exit: { 20 | transition: { staggerChildren: 0.05, staggerDirection: -1 } 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/animate/variants/background/BackgroundColor.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION = { 4 | duration: 5, 5 | ease: 'linear' 6 | }; 7 | 8 | export const varColor2x = { 9 | animate: { 10 | background: ['#19dcea', '#b22cff'], 11 | transition: TRANSITION 12 | } 13 | }; 14 | 15 | export const varColor3x = { 16 | animate: { 17 | background: ['#19dcea', '#b22cff', '#ea2222'], 18 | transition: TRANSITION 19 | } 20 | }; 21 | 22 | export const varColor4x = { 23 | animate: { 24 | background: ['#19dcea', '#b22cff', '#ea2222', '#f5be10'], 25 | transition: TRANSITION 26 | } 27 | }; 28 | 29 | export const varColor5x = { 30 | animate: { 31 | background: ['#19dcea', '#b22cff', '#ea2222', '#f5be10', '#3bd80d'], 32 | transition: TRANSITION 33 | } 34 | }; 35 | -------------------------------------------------------------------------------- /src/components/animate/variants/background/BackgroundKenburns.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION = { 4 | duration: 5, 5 | ease: 'easeOut' 6 | }; 7 | 8 | export const varKenburnsTop = { 9 | animate: { 10 | scale: [1, 1.25], 11 | y: [0, -15], 12 | transformOrigin: ['50% 16%', 'top'], 13 | transition: TRANSITION 14 | } 15 | }; 16 | 17 | export const varKenburnsBottom = { 18 | animate: { 19 | scale: [1, 1.25], 20 | y: [0, 15], 21 | transformOrigin: ['50% 84%', 'bottom'], 22 | transition: TRANSITION 23 | } 24 | }; 25 | 26 | export const varKenburnsLeft = { 27 | animate: { 28 | scale: [1, 1.25], 29 | x: [0, -20], 30 | y: [0, 15], 31 | transformOrigin: ['16% 50%', 'left'], 32 | transition: TRANSITION 33 | } 34 | }; 35 | 36 | export const varKenburnsRight = { 37 | animate: { 38 | scale: [1, 1.25], 39 | x: [0, 20], 40 | y: [0, -15], 41 | transformOrigin: ['84% 50%', 'right'], 42 | transition: TRANSITION 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/animate/variants/background/BackgroundPan.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION = { 4 | duration: 4, 5 | ease: 'linear' 6 | }; 7 | 8 | const gradient = (deg) => `linear-gradient(${deg}deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)`; 9 | 10 | export const varPanTop = { 11 | animate: { 12 | backgroundImage: [gradient(0), gradient(0)], 13 | backgroundPosition: ['center 99%', 'center 1%'], 14 | backgroundSize: ['100% 600%', '100% 600%'], 15 | transition: TRANSITION 16 | } 17 | }; 18 | 19 | export const varPanBottom = { 20 | animate: { 21 | backgroundImage: [gradient(0), gradient(0)], 22 | backgroundPosition: ['center 1%', 'center 99%'], 23 | backgroundSize: ['100% 600%', '100% 600%'], 24 | transition: TRANSITION 25 | } 26 | }; 27 | 28 | export const varPanLeft = { 29 | animate: { 30 | backgroundPosition: ['99% center', '1% center'], 31 | backgroundImage: [gradient(270), gradient(270)], 32 | backgroundSize: ['600% 100%', '600% 100%'], 33 | transition: TRANSITION 34 | } 35 | }; 36 | 37 | export const varPanRight = { 38 | animate: { 39 | backgroundPosition: ['1% center', '99% center'], 40 | backgroundImage: [gradient(270), gradient(270)], 41 | backgroundSize: ['600% 100%', '600% 100%'], 42 | transition: TRANSITION 43 | } 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/animate/variants/background/index.js: -------------------------------------------------------------------------------- 1 | export * from './BackgroundKenburns'; 2 | export * from './BackgroundPan'; 3 | export * from './BackgroundColor'; 4 | -------------------------------------------------------------------------------- /src/components/animate/variants/bounce/BounceOut.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const varBounceOut = { 4 | animate: { 5 | scale: [0.9, 1.1, 0.3], 6 | opacity: [1, 1, 0] 7 | } 8 | }; 9 | 10 | export const varBounceOutUp = { 11 | animate: { 12 | y: [-12, 24, -720], 13 | scaleY: [0.985, 0.9, 3], 14 | opacity: [1, 1, 0] 15 | } 16 | }; 17 | 18 | export const varBounceOutDown = { 19 | animate: { 20 | y: [12, -24, 720], 21 | scaleY: [0.985, 0.9, 3], 22 | opacity: [1, 1, 0] 23 | } 24 | }; 25 | 26 | export const varBounceOutLeft = { 27 | animate: { 28 | x: [0, 24, -720], 29 | scaleX: [1, 0.9, 2], 30 | opacity: [1, 1, 0] 31 | } 32 | }; 33 | 34 | export const varBounceOutRight = { 35 | animate: { 36 | x: [0, -24, 720], 37 | scaleX: [1, 0.9, 2], 38 | opacity: [1, 1, 0] 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /src/components/animate/variants/bounce/index.js: -------------------------------------------------------------------------------- 1 | export * from './BounceIn'; 2 | export * from './BounceOut'; 3 | -------------------------------------------------------------------------------- /src/components/animate/variants/fade/FadeIn.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const DISTANCE = 120; 4 | 5 | const TRANSITION_ENTER = { 6 | duration: 0.64, 7 | ease: [0.43, 0.13, 0.23, 0.96] 8 | }; 9 | const TRANSITION_EXIT = { 10 | duration: 0.48, 11 | ease: [0.43, 0.13, 0.23, 0.96] 12 | }; 13 | 14 | export const varFadeIn = { 15 | initial: { opacity: 0 }, 16 | animate: { opacity: 1, transition: TRANSITION_ENTER }, 17 | exit: { opacity: 0, transition: TRANSITION_EXIT } 18 | }; 19 | 20 | export const varFadeInUp = { 21 | initial: { y: DISTANCE, opacity: 0 }, 22 | animate: { y: 0, opacity: 1, transition: TRANSITION_ENTER }, 23 | exit: { y: DISTANCE, opacity: 0, transition: TRANSITION_EXIT } 24 | }; 25 | 26 | export const varFadeInLeft = { 27 | initial: { x: -DISTANCE, opacity: 0 }, 28 | animate: { x: 0, opacity: 1, transition: TRANSITION_ENTER }, 29 | exit: { x: -DISTANCE, opacity: 0, transition: TRANSITION_EXIT } 30 | }; 31 | 32 | export const varFadeInDown = { 33 | initial: { y: -DISTANCE, opacity: 0 }, 34 | animate: { y: 0, opacity: 1, transition: TRANSITION_ENTER }, 35 | exit: { y: -DISTANCE, opacity: 0, transition: TRANSITION_EXIT } 36 | }; 37 | 38 | export const varFadeInRight = { 39 | initial: { x: DISTANCE, opacity: 0 }, 40 | animate: { x: 0, opacity: 1, transition: TRANSITION_ENTER }, 41 | exit: { x: DISTANCE, opacity: 0, transition: TRANSITION_EXIT } 42 | }; 43 | -------------------------------------------------------------------------------- /src/components/animate/variants/fade/FadeOut.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const DISTANCE = 120; 4 | 5 | const TRANSITION_ENTER = { 6 | duration: 0.64, 7 | ease: [0.43, 0.13, 0.23, 0.96] 8 | }; 9 | const TRANSITION_EXIT = { 10 | duration: 0.48, 11 | ease: [0.43, 0.13, 0.23, 0.96] 12 | }; 13 | 14 | export const varFadeOut = { 15 | initial: { opacity: 1 }, 16 | animate: { opacity: 0, transition: TRANSITION_ENTER }, 17 | exit: { opacity: 1, transition: TRANSITION_EXIT } 18 | }; 19 | 20 | export const varFadeOutUp = { 21 | initial: { y: 0, opacity: 1 }, 22 | animate: { y: -DISTANCE, opacity: 0, transition: TRANSITION_ENTER }, 23 | exit: { y: 0, opacity: 1, transition: TRANSITION_EXIT } 24 | }; 25 | 26 | export const varFadeOutDown = { 27 | initial: { y: 0, opacity: 1 }, 28 | animate: { y: DISTANCE, opacity: 0, transition: TRANSITION_ENTER }, 29 | exit: { y: 0, opacity: 1, transition: TRANSITION_EXIT } 30 | }; 31 | 32 | export const varFadeOutLeft = { 33 | initial: { x: 0, opacity: 1 }, 34 | animate: { x: -DISTANCE, opacity: 0, transition: TRANSITION_ENTER }, 35 | exit: { x: 0, opacity: 1, transition: TRANSITION_EXIT } 36 | }; 37 | 38 | export const varFadeOutRight = { 39 | initial: { x: 0, opacity: 1 }, 40 | animate: { x: DISTANCE, opacity: 0, transition: TRANSITION_ENTER }, 41 | exit: { x: 0, opacity: 1, transition: TRANSITION_EXIT } 42 | }; 43 | -------------------------------------------------------------------------------- /src/components/animate/variants/fade/index.js: -------------------------------------------------------------------------------- 1 | export * from './FadeIn'; 2 | export * from './FadeOut'; 3 | -------------------------------------------------------------------------------- /src/components/animate/variants/flip/FlipIn.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION_ENTER = { 4 | duration: 0.64, 5 | ease: [0.43, 0.13, 0.23, 0.96] 6 | }; 7 | const TRANSITION_EXIT = { 8 | duration: 0.48, 9 | ease: [0.43, 0.13, 0.23, 0.96] 10 | }; 11 | 12 | export const varFlipInX = { 13 | initial: { rotateX: -180, opacity: 0 }, 14 | animate: { rotateX: 0, opacity: 1, transition: TRANSITION_ENTER }, 15 | exit: { rotateX: -180, opacity: 0, transition: TRANSITION_EXIT } 16 | }; 17 | 18 | export const varFlipInY = { 19 | initial: { rotateY: -180, opacity: 0 }, 20 | animate: { rotateY: 0, opacity: 1, transition: TRANSITION_ENTER }, 21 | exit: { rotateY: -180, opacity: 0, transition: TRANSITION_EXIT } 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/animate/variants/flip/FlipOut.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION_EXIT = { 4 | duration: 0.48, 5 | ease: [0.43, 0.13, 0.23, 0.96] 6 | }; 7 | 8 | export const varFlipOutX = { 9 | initial: { rotateX: 0, opacity: 1 }, 10 | animate: { rotateX: 70, opacity: 0, transition: TRANSITION_EXIT } 11 | }; 12 | 13 | export const varFlipOutY = { 14 | initial: { rotateY: 0, opacity: 1 }, 15 | animate: { rotateY: 70, opacity: 0, transition: TRANSITION_EXIT } 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/animate/variants/flip/index.js: -------------------------------------------------------------------------------- 1 | export * from './FlipIn'; 2 | export * from './FlipOut'; 3 | -------------------------------------------------------------------------------- /src/components/animate/variants/index.js: -------------------------------------------------------------------------------- 1 | export * from './Wrap'; 2 | export * from './Path'; 3 | export * from './Actions'; 4 | export * from './background'; 5 | export * from './slide'; 6 | export * from './fade'; 7 | export * from './zoom'; 8 | export * from './bounce'; 9 | export * from './flip'; 10 | export * from './scale'; 11 | export * from './rotate'; 12 | -------------------------------------------------------------------------------- /src/components/animate/variants/rotate/RotateIn.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION_ENTER = { 4 | duration: 0.64, 5 | ease: [0.43, 0.13, 0.23, 0.96] 6 | }; 7 | const TRANSITION_EXIT = { 8 | duration: 0.48, 9 | ease: [0.43, 0.13, 0.23, 0.96] 10 | }; 11 | 12 | export const varRotateIn = { 13 | initial: { opacity: 0, rotate: -360 }, 14 | animate: { opacity: 1, rotate: 0, transition: TRANSITION_ENTER }, 15 | exit: { opacity: 0, rotate: -360, transition: TRANSITION_EXIT } 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/animate/variants/rotate/RotateOut.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION_EXIT = { 4 | duration: 0.48, 5 | ease: [0.43, 0.13, 0.23, 0.96] 6 | }; 7 | 8 | export const varRotateOut = { 9 | initial: { opacity: 1, rotate: 0 }, 10 | animate: { opacity: 0, rotate: -360, transition: TRANSITION_EXIT } 11 | }; 12 | -------------------------------------------------------------------------------- /src/components/animate/variants/rotate/index.js: -------------------------------------------------------------------------------- 1 | export * from './RotateIn'; 2 | export * from './RotateOut'; 3 | -------------------------------------------------------------------------------- /src/components/animate/variants/scale/ScaleIn.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION_ENTER = { 4 | duration: 0.64, 5 | ease: [0.43, 0.13, 0.23, 0.96] 6 | }; 7 | const TRANSITION_EXIT = { 8 | duration: 0.48, 9 | ease: [0.43, 0.13, 0.23, 0.96] 10 | }; 11 | 12 | export const varScaleInX = { 13 | initial: { scaleX: 0, opacity: 0 }, 14 | animate: { scaleX: 1, opacity: 1, transition: TRANSITION_ENTER }, 15 | exit: { scaleX: 0, opacity: 0, transition: TRANSITION_EXIT } 16 | }; 17 | 18 | export const varScaleInY = { 19 | initial: { scaleY: 0, opacity: 0 }, 20 | animate: { scaleY: 1, opacity: 1, transition: TRANSITION_ENTER }, 21 | exit: { scaleY: 0, opacity: 0, transition: TRANSITION_EXIT } 22 | }; 23 | -------------------------------------------------------------------------------- /src/components/animate/variants/scale/ScaleOut.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const TRANSITION_ENTER = { 4 | duration: 0.64, 5 | ease: [0.43, 0.13, 0.23, 0.96] 6 | }; 7 | 8 | export const varScaleOutX = { 9 | initial: { scaleX: 1, opacity: 1 }, 10 | animate: { scaleX: 0, opacity: 0, transition: TRANSITION_ENTER } 11 | }; 12 | 13 | export const varScaleOutY = { 14 | initial: { scaleY: 1, opacity: 1 }, 15 | animate: { scaleY: 0, opacity: 0, transition: TRANSITION_ENTER } 16 | }; 17 | -------------------------------------------------------------------------------- /src/components/animate/variants/scale/index.js: -------------------------------------------------------------------------------- 1 | export * from './ScaleIn'; 2 | export * from './ScaleOut'; 3 | -------------------------------------------------------------------------------- /src/components/animate/variants/slide/SlideIn.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const DISTANCE = 160; 4 | 5 | const TRANSITION_ENTER = { 6 | duration: 0.64, 7 | ease: [0.43, 0.13, 0.23, 0.96] 8 | }; 9 | const TRANSITION_EXIT = { 10 | duration: 0.48, 11 | ease: [0.43, 0.13, 0.23, 0.96] 12 | }; 13 | 14 | export const varSlideInUp = { 15 | initial: { y: DISTANCE }, 16 | animate: { y: 0, transition: TRANSITION_ENTER }, 17 | exit: { y: DISTANCE, transition: TRANSITION_EXIT } 18 | }; 19 | 20 | export const varSlideInDown = { 21 | initial: { y: -DISTANCE }, 22 | animate: { y: 0, transition: TRANSITION_ENTER }, 23 | exit: { y: -DISTANCE, transition: TRANSITION_EXIT } 24 | }; 25 | 26 | export const varSlideInLeft = { 27 | initial: { x: -DISTANCE }, 28 | animate: { x: 0, transition: TRANSITION_ENTER }, 29 | exit: { x: -DISTANCE, transition: TRANSITION_EXIT } 30 | }; 31 | 32 | export const varSlideInRight = { 33 | initial: { x: DISTANCE }, 34 | animate: { x: 0, transition: TRANSITION_ENTER }, 35 | exit: { x: DISTANCE, transition: TRANSITION_EXIT } 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/animate/variants/slide/SlideOut.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const DISTANCE = 160; 4 | 5 | const TRANSITION_ENTER = { 6 | duration: 0.64, 7 | ease: [0.43, 0.13, 0.23, 0.96] 8 | }; 9 | 10 | const TRANSITION_EXIT = { 11 | duration: 0.48, 12 | ease: [0.43, 0.13, 0.23, 0.96] 13 | }; 14 | 15 | export const varSlideOutUp = { 16 | initial: { y: 0 }, 17 | animate: { y: -DISTANCE, transition: TRANSITION_ENTER }, 18 | exit: { y: 0, transition: TRANSITION_EXIT } 19 | }; 20 | 21 | export const varSlideOutDown = { 22 | initial: { y: 0 }, 23 | animate: { y: DISTANCE, transition: TRANSITION_ENTER }, 24 | exit: { y: 0, transition: TRANSITION_EXIT } 25 | }; 26 | 27 | export const varSlideOutLeft = { 28 | initial: { x: 0 }, 29 | animate: { x: -DISTANCE, transition: TRANSITION_ENTER }, 30 | exit: { x: 0, transition: TRANSITION_EXIT } 31 | }; 32 | 33 | export const varSlideOutRight = { 34 | initial: { x: 0 }, 35 | animate: { x: DISTANCE, transition: TRANSITION_ENTER }, 36 | exit: { x: 0, transition: TRANSITION_EXIT } 37 | }; 38 | -------------------------------------------------------------------------------- /src/components/animate/variants/slide/index.js: -------------------------------------------------------------------------------- 1 | export * from './SlideIn'; 2 | export * from './SlideOut'; 3 | -------------------------------------------------------------------------------- /src/components/animate/variants/zoom/In.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const DISTANCE = 720; 4 | const IN = { scale: 1, opacity: 1 }; 5 | const OUT = { scale: 0, opacity: 0 }; 6 | 7 | const TRANSITION_ENTER = { 8 | duration: 0.64, 9 | ease: [0.43, 0.13, 0.23, 0.96] 10 | }; 11 | 12 | const TRANSITION_EXIT = { 13 | duration: 0.48, 14 | ease: [0.43, 0.13, 0.23, 0.96] 15 | }; 16 | 17 | export const varZoomIn = { 18 | initial: OUT, 19 | animate: { ...IN, transition: TRANSITION_ENTER }, 20 | exit: { ...OUT, transition: TRANSITION_EXIT } 21 | }; 22 | 23 | export const varZoomInUp = { 24 | initial: { ...OUT, translateY: DISTANCE }, 25 | animate: { ...IN, translateY: 0, transition: TRANSITION_ENTER }, 26 | exit: { ...OUT, translateY: DISTANCE, transition: TRANSITION_EXIT } 27 | }; 28 | 29 | export const varZoomInDown = { 30 | initial: { ...OUT, translateY: -DISTANCE }, 31 | animate: { ...IN, translateY: 0, transition: TRANSITION_ENTER }, 32 | exit: { ...OUT, translateY: -DISTANCE, transition: TRANSITION_EXIT } 33 | }; 34 | 35 | export const varZoomInLeft = { 36 | initial: { ...OUT, translateX: -DISTANCE }, 37 | animate: { ...IN, translateX: 0, transition: TRANSITION_ENTER }, 38 | exit: { ...OUT, translateX: -DISTANCE, transition: TRANSITION_EXIT } 39 | }; 40 | 41 | export const varZoomInRight = { 42 | initial: { ...OUT, translateX: DISTANCE }, 43 | animate: { ...IN, translateX: 0, transition: TRANSITION_ENTER }, 44 | exit: { ...OUT, translateX: DISTANCE, transition: TRANSITION_EXIT } 45 | }; 46 | -------------------------------------------------------------------------------- /src/components/animate/variants/zoom/Out.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const DISTANCE = 720; 4 | const IN = { scale: 1, opacity: 1 }; 5 | const OUT = { scale: 0, opacity: 0 }; 6 | 7 | const TRANSITION_ENTER = { 8 | duration: 0.64, 9 | ease: [0.43, 0.13, 0.23, 0.96] 10 | }; 11 | 12 | export const varZoomOut = { 13 | initial: { scale: 1 }, 14 | animate: { scale: 0, transition: TRANSITION_ENTER } 15 | }; 16 | 17 | export const varZoomOutUp = { 18 | initial: IN, 19 | animate: { ...OUT, translateY: -DISTANCE, transition: TRANSITION_ENTER } 20 | }; 21 | 22 | export const varZoomOutDown = { 23 | initial: IN, 24 | animate: { ...OUT, translateY: DISTANCE, transition: TRANSITION_ENTER } 25 | }; 26 | 27 | export const varZoomOutLeft = { 28 | initial: IN, 29 | animate: { ...OUT, translateX: -DISTANCE, transition: TRANSITION_ENTER } 30 | }; 31 | 32 | export const varZoomOutRight = { 33 | initial: IN, 34 | animate: { ...OUT, translateX: DISTANCE, transition: TRANSITION_ENTER } 35 | }; 36 | -------------------------------------------------------------------------------- /src/components/animate/variants/zoom/index.js: -------------------------------------------------------------------------------- 1 | export * from './In'; 2 | export * from './Out'; 3 | -------------------------------------------------------------------------------- /src/components/carousel/controls/index.js: -------------------------------------------------------------------------------- 1 | export { default as CarouselControlsPaging2 } from './CarouselControlsPaging2'; -------------------------------------------------------------------------------- /src/components/carousel/index.js: -------------------------------------------------------------------------------- 1 | export * from './controls'; 2 | export { default as CarouselCustom } from './CarouselCustom'; -------------------------------------------------------------------------------- /src/components/charts/index.js: -------------------------------------------------------------------------------- 1 | export { default as BaseOptionChart } from './BaseOptionChart'; 2 | // 3 | export { default as ChartArea } from './ChartArea'; 4 | -------------------------------------------------------------------------------- /src/components/collection/VolumeIcon.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Box } from '@mui/material'; 3 | 4 | VolumeIcon.propTypes = { 5 | chainIndex: PropTypes.number 6 | }; 7 | 8 | export default function VolumeIcon(props) { 9 | const { chainIndex } = props; 10 | const volumeIconTypes = [ 11 | { icon: 'elastos.svg', style: { filter: (theme) => (theme.palette.mode === 'dark' ? 'invert(1)' : 'none') } }, 12 | { 13 | icon: 'ethereum.svg', 14 | style: { filter: (theme) => (theme.palette.mode === 'light' ? 'invert(0.8)' : 'invert(0.2)'), width: 16 } 15 | }, 16 | { icon: 'erc20/FSN.svg', style: { width: 16 } } 17 | ]; 18 | let volumeIcon = null; 19 | if (chainIndex > 0) volumeIcon = volumeIconTypes[chainIndex - 1]; 20 | else if (chainIndex === undefined) volumeIcon = null; 21 | else [volumeIcon] = volumeIconTypes; 22 | 23 | return volumeIcon ? ( 24 | 29 | ) : null; 30 | } 31 | -------------------------------------------------------------------------------- /src/components/custom-switch/index.js: -------------------------------------------------------------------------------- 1 | import { styled } from '@mui/material/styles'; 2 | import { Switch } from '@mui/material'; 3 | 4 | const CustomSwitch = styled(Switch)(({ theme }) => ({ 5 | padding: 8, 6 | '& .Mui-checked+.MuiSwitch-track': { 7 | backgroundColor: `${theme.palette.text.primary} !important` 8 | }, 9 | '& .MuiSwitch-track': { 10 | borderRadius: 22 / 2, 11 | '&:before, &:after': { 12 | content: '""', 13 | position: 'absolute', 14 | top: '50%', 15 | transform: 'translateY(-50%)', 16 | width: 16, 17 | height: 16 18 | }, 19 | '&:before': { 20 | backgroundImage: `url('data:image/svg+xml;utf8,')`, 23 | left: 12 24 | }, 25 | '&:after': { 26 | backgroundImage: `url('data:image/svg+xml;utf8,')`, 29 | right: 12 30 | } 31 | }, 32 | '& .MuiSwitch-thumb': { 33 | boxShadow: 'none', 34 | width: 16, 35 | height: 16, 36 | margin: 2 37 | } 38 | })); 39 | export default CustomSwitch; 40 | -------------------------------------------------------------------------------- /src/components/editor/draft/index.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Editor } from 'react-draft-wysiwyg'; 3 | // 4 | import { toolbarFull, toolbarSimple } from './DraftEditorToolbar'; 5 | import DraftEditorStyle from './DraftEditorStyle'; 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | DraftEditor.propTypes = { 10 | simple: PropTypes.bool, 11 | error: PropTypes.bool, 12 | sx: PropTypes.object 13 | }; 14 | 15 | export default function DraftEditor({ simple = false, error, sx, ...other }) { 16 | return ( 17 | `solid 1px ${theme.palette.error.main}` 21 | }), 22 | ...sx 23 | }} 24 | > 25 | 26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /src/components/editor/index.js: -------------------------------------------------------------------------------- 1 | export { default as QuillEditor } from './quill'; 2 | export { default as DraftEditor } from './draft'; 3 | -------------------------------------------------------------------------------- /src/components/explorer/CollectionView/Template.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Icon } from '@iconify/react'; 3 | import { Link as RouterLink } from 'react-router-dom'; 4 | import arrowIosForwardFill from '@iconify/icons-eva/arrow-ios-forward-fill'; 5 | // material 6 | import { Box, Stack, Card, Button, Grid, CardHeader } from '@mui/material'; 7 | import Scrollbar from '../../Scrollbar'; 8 | 9 | // ---------------------------------------------------------------------- 10 | export default function CollectionView(props) { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 28 | 29 | 30 | 31 | 32 | 33 | {props.children} 34 | 35 | 36 | 37 | ); 38 | } 39 | 40 | CollectionView.propTypes = { 41 | title: PropTypes.string, 42 | to: PropTypes.string, 43 | children: PropTypes.node 44 | }; 45 | -------------------------------------------------------------------------------- /src/components/explorer/StatisticPanel/index.js: -------------------------------------------------------------------------------- 1 | // material 2 | import { styled } from '@mui/material/styles'; 3 | import { Grid, Card } from '@mui/material'; 4 | import StatisticItem from './StatisticItem'; 5 | // ---------------------------------------------------------------------- 6 | const RootStyle = styled(Card)(({ theme }) => ({ 7 | margin: 'auto', 8 | display: 'flex', 9 | position: 'relative', 10 | alignItems: 'center', 11 | flexDirection: 'column', 12 | padding: theme.spacing(4), 13 | [theme.breakpoints.down('sm')]: { 14 | padding: theme.spacing(3) 15 | } 16 | })); 17 | 18 | export default function StatisticPanel() { 19 | return ( 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/components/home/TransSkeleton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; 3 | import 'react-loading-skeleton/dist/skeleton.css'; 4 | import { Box, Stack, Divider } from '@mui/material'; 5 | import useSettings from '../../hooks/useSettings'; 6 | // ---------------------------------------------------------------------- 7 | 8 | export default function TransSkeleton() { 9 | const { themeMode } = useSettings(); 10 | const themeProp = {}; 11 | if (themeMode === 'dark') { 12 | themeProp.baseColor = '#333d48'; 13 | themeProp.highlightColor = '#434d58'; 14 | } 15 | return ( 16 | <> 17 | 18 | 19 | 20 | 21 | 22 |

23 | 24 |

25 |

26 | 27 |

28 |
29 |
30 |
31 |
32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /src/components/main-logo/index.js: -------------------------------------------------------------------------------- 1 | import { Link as RouterLink } from 'react-router-dom'; 2 | import { motion } from 'framer-motion'; 3 | // material 4 | import { useTheme, styled } from '@mui/material/styles'; 5 | import { Box, Link, Container } from '@mui/material'; 6 | // components 7 | import { varWrapEnter, varFadeIn } from '../animate'; 8 | 9 | const RootStyle = styled('div')(({ theme }) => ({ 10 | padding: theme.spacing(3, 0, 1) 11 | })); 12 | 13 | export default function MainLogo() { 14 | const theme = useTheme(); 15 | 16 | return ( 17 | 18 | 19 | 26 | 27 | 28 | 34 | 35 | 36 | 37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/components/marketplace/AssetCardSkeleton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'; 3 | import 'react-loading-skeleton/dist/skeleton.css'; 4 | import { Box, Stack } from '@mui/material'; 5 | 6 | import PaperRecord from '../PaperRecord'; 7 | import useSettings from '../../hooks/useSettings'; 8 | // ---------------------------------------------------------------------- 9 | 10 | export default function AssetCardSkeleton() { 11 | const { themeMode } = useSettings(); 12 | const themeProp = {}; 13 | if (themeMode === 'dark') { 14 | themeProp.baseColor = '#333d48'; 15 | themeProp.highlightColor = '#434d58'; 16 | } 17 | return ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |

27 | 28 |

29 |

30 | 31 |

32 |
33 |
34 |
35 | ); 36 | } 37 | -------------------------------------------------------------------------------- /src/components/marketplace/MultiMintGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { motion, AnimatePresence } from 'framer-motion'; 4 | import { Box } from '@mui/material'; 5 | import AssetCard from './AssetCard'; 6 | // ---------------------------------------------------------------------- 7 | 8 | const StackedGrid = ({ children }) => ( 9 | 10 | {children} 11 | 12 | ); 13 | 14 | StackedGrid.propTypes = { 15 | children: PropTypes.node 16 | }; 17 | 18 | const GridItems = (props) => ( 19 | 20 | {props.assets.map((src, index) => ( 21 | 22 | 30 | 31 | ))} 32 | 33 | ); 34 | 35 | GridItems.propTypes = { 36 | assets: PropTypes.any, 37 | multiNames: PropTypes.any 38 | }; 39 | 40 | export default function MultiMintGrid(props) { 41 | return ( 42 | 43 | 44 | 45 | ); 46 | } 47 | -------------------------------------------------------------------------------- /src/components/marketplace/StartingDateSelect.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Select from '@mui/material/Select'; 3 | import MenuItem from '@mui/material/MenuItem'; 4 | import PropTypes from 'prop-types'; 5 | 6 | const MenuProps = { 7 | anchorOrigin: { 8 | vertical: 'bottom', 9 | horizontal: 'left' 10 | }, 11 | transformOrigin: { 12 | vertical: 'top', 13 | horizontal: 'left' 14 | }, 15 | variant: 'menu' 16 | }; 17 | const menuItems = ['Right after listing']; 18 | 19 | export default function StartingDateSelect({ selected, onChange }) { 20 | const handleChange = (event) => { 21 | onChange(event.target.value); 22 | }; 23 | return ( 24 | 46 | ); 47 | } 48 | 49 | StartingDateSelect.propTypes = { 50 | onChange: PropTypes.func, 51 | selected: PropTypes.number 52 | }; 53 | -------------------------------------------------------------------------------- /src/components/mega-menu/MenuHotProducts.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { Link as RouterLink } from 'react-router-dom'; 3 | // material 4 | import { Link, Typography, Box } from '@mui/material'; 5 | 6 | // ---------------------------------------------------------------------- 7 | 8 | MenuHotProducts.propTypes = { 9 | tags: PropTypes.array 10 | }; 11 | 12 | export default function MenuHotProducts({ tags, ...other }) { 13 | return ( 14 | 15 | 16 | Hot Products: 17 | 18 |   19 | {tags.map((tag, index) => ( 20 | theme.transitions.create('all'), 29 | '&:hover': { color: 'primary.main' } 30 | }} 31 | > 32 | {index === 0 ? tag.name : `, ${tag.name} `} 33 | 34 | ))} 35 | 36 | ); 37 | } 38 | -------------------------------------------------------------------------------- /src/components/mega-menu/index.js: -------------------------------------------------------------------------------- 1 | export { default as MegaMenuDesktopVertical } from './MegaMenuDesktopVertical'; 2 | export { default as MegaMenuDesktopHorizon } from './MegaMenuDesktopHorizon'; 3 | export { default as MegaMenuMobile } from './MegaMenuMobile'; 4 | export { default as MenuConfig } from './MenuConfig'; 5 | -------------------------------------------------------------------------------- /src/components/pagination/ShowSelect/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { styled } from '@mui/material/styles'; 3 | import Select from '@mui/material/Select'; 4 | import MenuItem from '@mui/material/MenuItem'; 5 | import PropTypes from 'prop-types'; 6 | 7 | const DivStyle = styled('div')(({ theme }) => ({ 8 | flex: 1, 9 | marginTop: theme.spacing(1) 10 | })); 11 | export default function ShowSelect({ showCount, onChange }) { 12 | return ( 13 | 14 | Show 15 | 28 | Records 29 | 30 | ); 31 | } 32 | 33 | ShowSelect.propTypes = { 34 | showCount: PropTypes.number, 35 | onChange: PropTypes.func, 36 | }; 37 | -------------------------------------------------------------------------------- /src/components/settings/SettingFullscreen.js: -------------------------------------------------------------------------------- 1 | import { useState } from 'react'; 2 | import { Icon } from '@iconify/react'; 3 | import roundFullscreen from '@iconify/icons-ic/round-fullscreen'; 4 | import roundFullscreenExit from '@iconify/icons-ic/round-fullscreen-exit'; 5 | // material 6 | import { alpha } from '@mui/material/styles'; 7 | import { Button } from '@mui/material'; 8 | 9 | // ---------------------------------------------------------------------- 10 | 11 | export default function SettingFullscreen() { 12 | const [fullscreen, setFullscreen] = useState(false); 13 | 14 | const toggleFullScreen = () => { 15 | if (!document.fullscreenElement) { 16 | document.documentElement.requestFullscreen(); 17 | setFullscreen(true); 18 | } else if (document.exitFullscreen) { 19 | document.exitFullscreen(); 20 | setFullscreen(false); 21 | } 22 | }; 23 | 24 | return ( 25 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /src/components/signin-dlg/connectors.js: -------------------------------------------------------------------------------- 1 | import { InjectedConnector } from "@web3-react/injected-connector"; 2 | import { WalletConnectConnector } from "@web3-react/walletconnect-connector"; 3 | import { WalletLinkConnector } from "@web3-react/walletlink-connector"; 4 | 5 | const RPC_URL_1 = 6 | "https://mainnet.infura.io/v3/e2d4593179fa4120a217d136a0518efc"; 7 | const RPC_URL_4 = 8 | "https://goerli.infura.io/v3/02505ed478e64ee481a74236dc9e91f1"; 9 | const RPC_URL_20 = 10 | "https://api.elastos.io/eth"; 11 | const RPC_URL_21 = 12 | "https://api-testnet.elastos.io/eth"; 13 | 14 | 15 | const RPC_URLS = { 16 | 1: RPC_URL_1, 17 | 4: RPC_URL_4, 18 | 20: RPC_URL_20, 19 | 21: RPC_URL_21, 20 | }; 21 | 22 | export const injected = new InjectedConnector({ 23 | supportedChainIds: [1, 3, 4, 5, 20, 21, 42, 56, 97], 24 | }); 25 | 26 | export const walletconnect = new WalletConnectConnector({ 27 | rpc: { 1: RPC_URLS[1] }, 28 | qrcode: true, 29 | // supportedChainIds: [1, 3, 4, 5, 20, 21, 42, 10, 137, 69, 420, 80001], 30 | }); 31 | 32 | export const walletlink = new WalletLinkConnector({ 33 | url: RPC_URLS[1], 34 | appName: "Global Income Coin", 35 | supportedChainIds: [1, 3, 4, 5, 20, 21, 42, 10, 137, 69, 420, 80001], 36 | }); 37 | 38 | export const resetWalletConnector = (connector) => { 39 | if ( 40 | connector && 41 | connector instanceof WalletConnectConnector 42 | ) { 43 | connector.walletConnectProvider = undefined 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/components/upload/index.js: -------------------------------------------------------------------------------- 1 | export { default as UploadMultiFile } from './UploadMultiFile'; 2 | export { default as UploadSingleFile } from './UploadSingleFile'; 3 | export { default as UploadAvatar } from './UploadAvatar'; 4 | -------------------------------------------------------------------------------- /src/contexts/AuctionDlgContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, useState } from 'react' 2 | import PropTypes from 'prop-types'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | const initialState = { 7 | updateCount: 0, 8 | setUpdateCount: () => {}, 9 | }; 10 | 11 | const AuctionDlgContext = createContext(initialState); 12 | 13 | AuctionDlgProvider.propTypes = { 14 | children: PropTypes.node 15 | }; 16 | 17 | function AuctionDlgProvider({ children }) { 18 | const [updateCount, setUpdateCount] = useState(0); 19 | 20 | return ( 21 | 27 | {children} 28 | 29 | ); 30 | } 31 | 32 | export { AuctionDlgProvider, AuctionDlgContext }; 33 | -------------------------------------------------------------------------------- /src/hooks/useAuctionDlg.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { AuctionDlgContext } from '../contexts/AuctionDlgContext'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | const useAuctionDlg = () => useContext(AuctionDlgContext); 7 | 8 | export default useAuctionDlg; -------------------------------------------------------------------------------- /src/hooks/useAuth.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { AuthContext } from '../contexts/JWTContext'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | const useAuth = () => useContext(AuthContext); 7 | 8 | export default useAuth; 9 | -------------------------------------------------------------------------------- /src/hooks/useCollapseDrawer.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { CollapseDrawerContext } from '../contexts/CollapseDrawerContext'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | const useCollapseDrawer = () => useContext(CollapseDrawerContext); 7 | 8 | export default useCollapseDrawer; 9 | -------------------------------------------------------------------------------- /src/hooks/useCountdown.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function useCountdown(date) { 6 | const [countdown, setCountdown] = useState({ 7 | days: '00', 8 | hours: '00', 9 | minutes: '00', 10 | seconds: '00' 11 | }); 12 | 13 | useEffect(() => { 14 | const interval = setInterval(() => setNewTime(), 1000); 15 | return () => clearInterval(interval); 16 | // eslint-disable-next-line react-hooks/exhaustive-deps 17 | }, []); 18 | 19 | const setNewTime = () => { 20 | const startTime = date; 21 | const endTime = new Date(); 22 | const distanceToNow = startTime - endTime; 23 | 24 | const getDays = Math.floor(distanceToNow / (1000 * 60 * 60 * 24)); 25 | const getHours = `0${Math.floor((distanceToNow % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}`.slice(-2); 26 | const getMinutes = `0${Math.floor((distanceToNow % (1000 * 60 * 60)) / (1000 * 60))}`.slice(-2); 27 | const getSeconds = `0${Math.floor((distanceToNow % (1000 * 60)) / 1000)}`.slice(-2); 28 | 29 | setCountdown({ 30 | days: getDays || '000', 31 | hours: getHours || '000', 32 | minutes: getMinutes || '000', 33 | seconds: getSeconds || '000' 34 | }); 35 | }; 36 | 37 | return countdown; 38 | } 39 | 40 | // Usage 41 | // const countdown = useCountdown(new Date('07/07/2022 21:30')); 42 | -------------------------------------------------------------------------------- /src/hooks/useIsMountedRef.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function useIsMountedRef() { 6 | const isMounted = useRef(true); 7 | 8 | useEffect( 9 | () => () => { 10 | isMounted.current = false; 11 | }, 12 | [] 13 | ); 14 | 15 | return isMounted; 16 | } 17 | -------------------------------------------------------------------------------- /src/hooks/useLocalStorage.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function useLocalStorage(key, defaultValue) { 6 | const [value, setValue] = useState(() => { 7 | const storedValue = localStorage.getItem(key); 8 | return storedValue === null ? defaultValue : JSON.parse(storedValue); 9 | }); 10 | 11 | useEffect(() => { 12 | const listener = (e) => { 13 | if (e.storageArea === localStorage && e.key === key) { 14 | setValue(JSON.parse(e.newValue)); 15 | } 16 | }; 17 | window.addEventListener('storage', listener); 18 | 19 | return () => { 20 | window.removeEventListener('storage', listener); 21 | }; 22 | }, [key, defaultValue]); 23 | 24 | const setValueInLocalStorage = (newValue) => { 25 | setValue((currentValue) => { 26 | const result = typeof newValue === 'function' ? newValue(currentValue) : newValue; 27 | localStorage.setItem(key, JSON.stringify(result)); 28 | return result; 29 | }); 30 | }; 31 | 32 | return [value, setValueInLocalStorage]; 33 | } 34 | -------------------------------------------------------------------------------- /src/hooks/useLocales.js: -------------------------------------------------------------------------------- 1 | import { useTranslation } from 'react-i18next'; 2 | // material 3 | import { enUS, deDE, frFR } from '@mui/material/locale'; 4 | 5 | // ---------------------------------------------------------------------- 6 | 7 | const LANGS = [ 8 | { 9 | label: 'English', 10 | value: 'en', 11 | systemValue: enUS, 12 | icon: '/static/icons/ic_flag_en.svg' 13 | }, 14 | { 15 | label: 'German', 16 | value: 'de', 17 | systemValue: deDE, 18 | 19 | icon: '/static/icons/ic_flag_de.svg' 20 | }, 21 | { 22 | label: 'French', 23 | value: 'fr', 24 | systemValue: frFR, 25 | icon: '/static/icons/ic_flag_fr.svg' 26 | } 27 | ]; 28 | 29 | export default function useLocales() { 30 | const { i18n, t: translate } = useTranslation(); 31 | const langStorage = localStorage.getItem('i18nextLng'); 32 | const currentLang = LANGS.find((_lang) => _lang.value === langStorage) || LANGS[1]; 33 | 34 | const handleChangeLanguage = (newlang) => { 35 | i18n.changeLanguage(newlang); 36 | }; 37 | 38 | return { 39 | onChangeLang: handleChangeLanguage, 40 | translate, 41 | currentLang, 42 | allLang: LANGS 43 | }; 44 | } 45 | -------------------------------------------------------------------------------- /src/hooks/useMintDlg.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { MintDlgContext } from '../contexts/MintDlgContext'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | const useMintDlg = () => useContext(MintDlgContext); 7 | 8 | export default useMintDlg; -------------------------------------------------------------------------------- /src/hooks/useOffSetTop.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function useOffSetTop(top) { 6 | const [offsetTop, setOffSetTop] = useState(false); 7 | const isTop = top || 100; 8 | 9 | useEffect(() => { 10 | window.addEventListener('scroll', () => { 11 | if (window.pageYOffset > isTop) { 12 | setOffSetTop(true); 13 | } else { 14 | setOffSetTop(false); 15 | } 16 | } 17 | ); 18 | }, [isTop]); 19 | 20 | return offsetTop; 21 | } 22 | 23 | // Usage 24 | // const offset = useOffSetTop(100); 25 | -------------------------------------------------------------------------------- /src/hooks/useSettings.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { SettingsContext } from '../contexts/SettingsContext'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | const useSettings = () => useContext(SettingsContext); 7 | 8 | export default useSettings; 9 | -------------------------------------------------------------------------------- /src/hooks/useSignin.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | import { SigninContext } from '../contexts/SigninContext'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | const useSignIn = () => useContext(SigninContext); 7 | 8 | export default useSignIn; 9 | -------------------------------------------------------------------------------- /src/layouts/LogoOnlyLayout.js: -------------------------------------------------------------------------------- 1 | import { Outlet } from 'react-router-dom'; 2 | 3 | export default function LogoOnlyLayout() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /src/layouts/main/MenuConfig.js: -------------------------------------------------------------------------------- 1 | import { Icon } from '@iconify/react'; 2 | import roundGrain from '@iconify/icons-ic/round-grain'; 3 | import bookOpenFill from '@iconify/icons-eva/book-open-fill'; 4 | // routes 5 | import { PATH_PAGE } from '../../routes/paths'; 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | const ICON_SIZE = { 10 | width: 22, 11 | height: 22 12 | }; 13 | 14 | const menuConfig = [ 15 | { 16 | title: 'Explorer', 17 | icon: , 18 | path: PATH_PAGE.explorer, 19 | disable: false 20 | }, 21 | { 22 | title: 'Marketplace', 23 | icon: , 24 | path: PATH_PAGE.marketplace, 25 | disable: false 26 | }, 27 | { 28 | title: 'Collections', 29 | icon: , 30 | path: PATH_PAGE.collection, 31 | disable: false 32 | }, 33 | { 34 | title: 'Create', 35 | icon: , 36 | path: PATH_PAGE.create, 37 | disable: false 38 | }, 39 | { 40 | title: 'Activity', 41 | icon: , 42 | path: PATH_PAGE.activity, 43 | disable: false 44 | }, 45 | { 46 | title: 'Features', 47 | icon: , 48 | path: PATH_PAGE.features, 49 | disable: false 50 | }, 51 | { 52 | title: 'Rewards', 53 | icon: , 54 | path: PATH_PAGE.rewards, 55 | disable: false 56 | } 57 | ]; 58 | 59 | export default menuConfig; 60 | -------------------------------------------------------------------------------- /src/pages/Page500.js: -------------------------------------------------------------------------------- 1 | import { Link as RouterLink } from 'react-router-dom'; 2 | import { styled } from '@mui/material/styles'; 3 | // material 4 | import { Box, Button, Typography, Container } from '@mui/material'; 5 | // components 6 | import Page from '../components/Page'; 7 | import { SeverErrorIllustration } from '../assets'; 8 | 9 | // ---------------------------------------------------------------------- 10 | 11 | const RootStyle = styled(Page)(({ theme }) => ({ 12 | display: 'flex', 13 | minHeight: '100%', 14 | alignItems: 'center', 15 | paddingTop: theme.spacing(15), 16 | paddingBottom: theme.spacing(10) 17 | })); 18 | 19 | // ---------------------------------------------------------------------- 20 | 21 | export default function Page500() { 22 | return ( 23 | 24 | 25 | 26 | 27 | 500 Internal Server Error 28 | 29 | There was an error, please try again later. 30 | 31 | 32 | 33 | 36 | 37 | 38 | 39 | ); 40 | } 41 | -------------------------------------------------------------------------------- /src/redux/rootReducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import { persistReducer } from 'redux-persist'; 3 | import storage from 'redux-persist/lib/storage'; 4 | // slices 5 | import mailReducer from './slices/mail'; 6 | import chatReducer from './slices/chat'; 7 | import blogReducer from './slices/blog'; 8 | import userReducer from './slices/user'; 9 | import productReducer from './slices/product'; 10 | import calendarReducer from './slices/calendar'; 11 | import kanbanReducer from './slices/kanban'; 12 | 13 | // ---------------------------------------------------------------------- 14 | 15 | const rootPersistConfig = { 16 | key: 'root', 17 | storage, 18 | keyPrefix: 'redux-', 19 | whitelist: [] 20 | }; 21 | 22 | const productPersistConfig = { 23 | key: 'product', 24 | storage, 25 | keyPrefix: 'redux-', 26 | whitelist: ['sortBy', 'checkout'] 27 | }; 28 | 29 | const rootReducer = combineReducers({ 30 | mail: mailReducer, 31 | chat: chatReducer, 32 | blog: blogReducer, 33 | user: userReducer, 34 | calendar: calendarReducer, 35 | kanban: kanbanReducer, 36 | product: persistReducer(productPersistConfig, productReducer) 37 | }); 38 | 39 | export { rootPersistConfig, rootReducer }; 40 | -------------------------------------------------------------------------------- /src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { useDispatch as useReduxDispatch, useSelector as useReduxSelector } from 'react-redux'; 2 | import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'; 3 | import { persistStore, persistReducer } from 'redux-persist'; 4 | // 5 | import { rootPersistConfig, rootReducer } from './rootReducer'; 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | const store = configureStore({ 10 | reducer: persistReducer(rootPersistConfig, rootReducer), 11 | middleware: getDefaultMiddleware({ 12 | serializableCheck: false, 13 | immutableCheck: false 14 | }) 15 | }); 16 | 17 | const persistor = persistStore(store); 18 | 19 | const useSelector = useReduxSelector; 20 | 21 | const useDispatch = () => useReduxDispatch(); 22 | 23 | export { store, persistor, useSelector, useDispatch }; 24 | -------------------------------------------------------------------------------- /src/routes/paths.js: -------------------------------------------------------------------------------- 1 | export const PATH_PAGE = { 2 | explorer: '/explorer', 3 | marketplace: '/marketplace', 4 | create: '/create', 5 | collection: '/collections', 6 | activity: '/activity', 7 | features: '/features', 8 | rewards: '/rewards' 9 | }; 10 | 11 | export const PATH_DOCS = 'https://docs.pasarprotocol.io'; 12 | -------------------------------------------------------------------------------- /src/theme/breakpoints.js: -------------------------------------------------------------------------------- 1 | const breakpoints = { 2 | values: { 3 | xs: 0, 4 | sm: 600, 5 | md: 900, // OLD 960 6 | lg: 1200, // OLD 1280 7 | xl: 1536 // OLD 1920 8 | } 9 | }; 10 | 11 | export default breakpoints; 12 | -------------------------------------------------------------------------------- /src/theme/overrides/Accordion.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Accordion(theme) { 4 | return { 5 | MuiAccordion: { 6 | styleOverrides: { 7 | root: { 8 | '&.Mui-expanded': { 9 | // boxShadow: theme.customShadows.z8, 10 | borderRadius: theme.shape.borderRadius 11 | }, 12 | '&.Mui-disabled': { 13 | backgroundColor: 'transparent' 14 | } 15 | } 16 | } 17 | }, 18 | MuiAccordionSummary: { 19 | styleOverrides: { 20 | root: { 21 | paddingLeft: theme.spacing(2), 22 | paddingRight: theme.spacing(1), 23 | '&.Mui-disabled': { 24 | opacity: 1, 25 | color: theme.palette.action.disabled, 26 | '& .MuiTypography-root': { 27 | color: 'inherit' 28 | } 29 | } 30 | }, 31 | expandIconWrapper: { 32 | color: 'inherit' 33 | } 34 | } 35 | } 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /src/theme/overrides/Autocomplete.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Autocomplete(theme) { 4 | return { 5 | MuiAutocomplete: { 6 | styleOverrides: { 7 | paper: { 8 | boxShadow: theme.customShadows.z20 9 | } 10 | } 11 | } 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/overrides/Avatar.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Avatar(theme) { 4 | return { 5 | MuiAvatar: { 6 | styleOverrides: { 7 | colorDefault: { 8 | color: theme.palette.text.secondary, 9 | backgroundColor: theme.palette.grey[400] 10 | } 11 | } 12 | }, 13 | MuiAvatarGroup: { 14 | styleOverrides: { 15 | avatar: { 16 | fontSize: 16, 17 | fontWeight: theme.typography.fontWeightMedium, 18 | '&:first-of-type': { 19 | fontSize: 14, 20 | color: theme.palette.primary.main, 21 | backgroundColor: theme.palette.primary.lighter 22 | } 23 | } 24 | } 25 | } 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /src/theme/overrides/Backdrop.js: -------------------------------------------------------------------------------- 1 | import { alpha } from '@mui/material/styles'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function Backdrop(theme) { 6 | const varLow = alpha(theme.palette.grey[900], 0.48); 7 | const varHigh = alpha(theme.palette.grey[900], 1); 8 | 9 | return { 10 | MuiBackdrop: { 11 | styleOverrides: { 12 | root: { 13 | background: [ 14 | `rgb(22,28,36)`, 15 | `-moz-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`, 16 | `-webkit-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`, 17 | `linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)` 18 | ], 19 | '&.MuiBackdrop-invisible': { 20 | background: 'transparent' 21 | } 22 | } 23 | } 24 | } 25 | }; 26 | } 27 | -------------------------------------------------------------------------------- /src/theme/overrides/Badge.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Badge() { 4 | return { 5 | MuiBadge: { 6 | styleOverrides: { 7 | dot: { 8 | width: 10, 9 | height: 10, 10 | borderRadius: '50%' 11 | } 12 | } 13 | } 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /src/theme/overrides/Breadcrumbs.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Breadcrumbs(theme) { 4 | return { 5 | MuiBreadcrumbs: { 6 | styleOverrides: { 7 | separator: { 8 | marginLeft: theme.spacing(2), 9 | marginRight: theme.spacing(2) 10 | } 11 | } 12 | } 13 | }; 14 | } 15 | -------------------------------------------------------------------------------- /src/theme/overrides/ButtonGroup.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function ButtonGroup(theme) { 4 | const styleContained = (color) => ({ 5 | props: { variant: 'contained', color }, 6 | style: { boxShadow: theme.customShadows[color] } 7 | }); 8 | 9 | return { 10 | MuiButtonGroup: { 11 | variants: [ 12 | { 13 | props: { variant: 'contained', color: 'inherit' }, 14 | style: { boxShadow: theme.customShadows.z8 } 15 | }, 16 | styleContained('primary'), 17 | styleContained('secondary'), 18 | styleContained('info'), 19 | styleContained('success'), 20 | styleContained('warning'), 21 | styleContained('error'), 22 | 23 | { 24 | props: { disabled: true }, 25 | style: { 26 | boxShadow: 'none', 27 | '& .MuiButtonGroup-grouped.Mui-disabled': { 28 | color: theme.palette.action.disabled, 29 | borderColor: `${theme.palette.action.disabledBackground} !important`, 30 | '&.MuiButton-contained': { 31 | backgroundColor: theme.palette.action.disabledBackground 32 | } 33 | } 34 | } 35 | } 36 | ], 37 | 38 | styleOverrides: { 39 | root: { 40 | '&:hover': { 41 | boxShadow: 'none' 42 | } 43 | } 44 | } 45 | } 46 | }; 47 | } 48 | -------------------------------------------------------------------------------- /src/theme/overrides/Card.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Card(theme) { 4 | return { 5 | MuiCard: { 6 | styleOverrides: { 7 | root: { 8 | boxShadow: theme.customShadows.z16, 9 | borderRadius: theme.shape.borderRadiusMd, 10 | position: 'relative', 11 | zIndex: 0 // Fix Safari overflow: hidden with border radius 12 | } 13 | } 14 | }, 15 | MuiCardHeader: { 16 | defaultProps: { 17 | titleTypographyProps: { variant: 'h6' }, 18 | subheaderTypographyProps: { 19 | variant: 'body2', 20 | marginTop: theme.spacing(0.5) 21 | } 22 | }, 23 | styleOverrides: { 24 | root: { 25 | padding: theme.spacing(3, 3, 0) 26 | } 27 | } 28 | }, 29 | MuiCardContent: { 30 | styleOverrides: { 31 | root: { 32 | padding: theme.spacing(3) 33 | } 34 | } 35 | } 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /src/theme/overrides/Chip.js: -------------------------------------------------------------------------------- 1 | import { Icon } from '@iconify/react'; 2 | import closeCircleFill from '@iconify/icons-eva/close-circle-fill'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | export default function Chip(theme) { 7 | return { 8 | MuiChip: { 9 | defaultProps: { 10 | deleteIcon: 11 | }, 12 | 13 | styleOverrides: { 14 | colorDefault: { 15 | '& .MuiChip-avatarMedium, .MuiChip-avatarSmall': { 16 | color: theme.palette.text.secondary 17 | } 18 | }, 19 | outlined: { 20 | borderColor: theme.palette.grey[500_32], 21 | '&.MuiChip-colorPrimary': { 22 | borderColor: theme.palette.primary.main 23 | }, 24 | '&.MuiChip-colorSecondary': { 25 | borderColor: theme.palette.secondary.main 26 | } 27 | }, 28 | // 29 | avatarColorInfo: { 30 | color: theme.palette.info.contrastText, 31 | backgroundColor: theme.palette.info.dark 32 | }, 33 | avatarColorSuccess: { 34 | color: theme.palette.success.contrastText, 35 | backgroundColor: theme.palette.success.dark 36 | }, 37 | avatarColorWarning: { 38 | color: theme.palette.warning.contrastText, 39 | backgroundColor: theme.palette.warning.dark 40 | }, 41 | avatarColorError: { 42 | color: theme.palette.error.contrastText, 43 | backgroundColor: theme.palette.error.dark 44 | } 45 | } 46 | } 47 | }; 48 | } 49 | -------------------------------------------------------------------------------- /src/theme/overrides/Container.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Container() { 4 | return { 5 | MuiContainer: { 6 | styleOverrides: { 7 | root: {} 8 | } 9 | } 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /src/theme/overrides/ControlLabel.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function ControlLabel(theme) { 4 | return { 5 | MuiFormControlLabel: { 6 | styleOverrides: { 7 | label: { 8 | ...theme.typography.body2 9 | } 10 | } 11 | }, 12 | MuiFormHelperText: { 13 | styleOverrides: { 14 | root: { 15 | marginTop: theme.spacing(1) 16 | } 17 | } 18 | }, 19 | MuiFormLabel: { 20 | styleOverrides: { 21 | root: { 22 | color: theme.palette.text.disabled 23 | } 24 | } 25 | } 26 | }; 27 | } 28 | -------------------------------------------------------------------------------- /src/theme/overrides/Drawer.js: -------------------------------------------------------------------------------- 1 | import { alpha } from '@mui/material'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function Drawer(theme) { 6 | const isLight = theme.palette.mode === 'light'; 7 | 8 | return { 9 | MuiDrawer: { 10 | styleOverrides: { 11 | modal: { 12 | '&[role="presentation"]': { 13 | '& .MuiDrawer-paperAnchorLeft': { 14 | boxShadow: `8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}` 15 | }, 16 | '& .MuiDrawer-paperAnchorRight': { 17 | boxShadow: `-8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}` 18 | } 19 | } 20 | } 21 | } 22 | } 23 | }; 24 | } 25 | -------------------------------------------------------------------------------- /src/theme/overrides/Fab.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Fab(theme) { 4 | return { 5 | MuiFab: { 6 | defaultProps: { 7 | color: 'primary' 8 | }, 9 | 10 | styleOverrides: { 11 | root: { 12 | boxShadow: theme.customShadows.z8, 13 | '&:hover': { 14 | boxShadow: 'none', 15 | backgroundColor: theme.palette.grey[400] 16 | } 17 | }, 18 | primary: { 19 | boxShadow: theme.customShadows.primary, 20 | '&:hover': { 21 | backgroundColor: theme.palette.primary.dark 22 | } 23 | }, 24 | secondary: { 25 | boxShadow: theme.customShadows.secondary, 26 | '&:hover': { 27 | backgroundColor: theme.palette.secondary.dark 28 | } 29 | }, 30 | extended: { 31 | '& svg': { 32 | marginRight: theme.spacing(1) 33 | } 34 | } 35 | } 36 | } 37 | }; 38 | } 39 | -------------------------------------------------------------------------------- /src/theme/overrides/Grid.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Grid() { 4 | return { 5 | MuiGrid: { 6 | styleOverrides: {} 7 | } 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /src/theme/overrides/IconButton.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function IconButton() { 4 | return { 5 | MuiIconButton: { 6 | styleOverrides: { 7 | root: {} 8 | } 9 | } 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /src/theme/overrides/Link.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Link() { 4 | return { 5 | MuiLink: { 6 | defaultProps: { 7 | underline: 'hover' 8 | }, 9 | 10 | styleOverrides: { 11 | root: {} 12 | } 13 | } 14 | }; 15 | } 16 | -------------------------------------------------------------------------------- /src/theme/overrides/Lists.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Lists(theme) { 4 | return { 5 | MuiListItemIcon: { 6 | styleOverrides: { 7 | root: { 8 | color: 'inherit', 9 | minWidth: 'auto', 10 | marginRight: theme.spacing(2) 11 | } 12 | } 13 | }, 14 | MuiListItemAvatar: { 15 | styleOverrides: { 16 | root: { 17 | minWidth: 'auto', 18 | marginRight: theme.spacing(2) 19 | } 20 | } 21 | }, 22 | MuiListItemText: { 23 | styleOverrides: { 24 | root: { 25 | marginTop: 0, 26 | marginBottom: 0 27 | }, 28 | multiline: { 29 | marginTop: 0, 30 | marginBottom: 0 31 | } 32 | } 33 | } 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /src/theme/overrides/LoadingButton.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function LoadingButton() { 4 | return { 5 | MuiLoadingButton: { 6 | styleOverrides: { 7 | root: { 8 | '&.MuiButton-text': { 9 | '& .MuiLoadingButton-startIconPendingStart': { 10 | marginLeft: 0 11 | }, 12 | '& .MuiLoadingButton-endIconPendingEnd': { 13 | marginRight: 0 14 | } 15 | } 16 | } 17 | } 18 | } 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /src/theme/overrides/Menu.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Menu(theme) { 4 | return { 5 | MuiMenuItem: { 6 | styleOverrides: { 7 | root: { 8 | '&.Mui-selected': { 9 | backgroundColor: theme.palette.action.selected, 10 | '&:hover': { 11 | backgroundColor: theme.palette.action.hover 12 | } 13 | } 14 | } 15 | } 16 | } 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/overrides/Pagination.js: -------------------------------------------------------------------------------- 1 | import { alpha } from '@mui/material/styles'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function Pagination(theme) { 6 | return { 7 | MuiPaginationItem: { 8 | styleOverrides: { 9 | root: { 10 | '&.Mui-selected': { 11 | fontWeight: theme.typography.fontWeightBold 12 | } 13 | }, 14 | textPrimary: { 15 | '&.Mui-selected': { 16 | color: theme.palette.primary.main, 17 | backgroundColor: alpha(theme.palette.primary.main, 0.08), 18 | '&:hover, &.Mui-focusVisible': { 19 | backgroundColor: `${alpha(theme.palette.primary.main, 0.24)} !important` 20 | } 21 | } 22 | }, 23 | outlined: { 24 | border: `1px solid ${theme.palette.grey[500_32]}` 25 | }, 26 | outlinedPrimary: { 27 | '&.Mui-selected': { 28 | backgroundColor: alpha(theme.palette.primary.main, 0.08), 29 | border: `1px solid ${alpha(theme.palette.primary.main, 0.24)}` 30 | } 31 | } 32 | } 33 | } 34 | }; 35 | } 36 | -------------------------------------------------------------------------------- /src/theme/overrides/Paper.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Paper() { 4 | return { 5 | MuiPaper: { 6 | defaultProps: { 7 | elevation: 0 8 | }, 9 | 10 | styleOverrides: { 11 | root: { 12 | backgroundImage: 'none' 13 | } 14 | } 15 | } 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /src/theme/overrides/Pickers.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Pickers() { 4 | return {}; 5 | } 6 | -------------------------------------------------------------------------------- /src/theme/overrides/Popover.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Popover(theme) { 4 | return { 5 | MuiPopover: { 6 | styleOverrides: { 7 | paper: { 8 | boxShadow: theme.customShadows.z12 9 | } 10 | } 11 | } 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/overrides/Progress.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Progress(theme) { 4 | const isLight = theme.palette.mode === 'light'; 5 | 6 | return { 7 | MuiLinearProgress: { 8 | styleOverrides: { 9 | root: { 10 | borderRadius: 4, 11 | overflow: 'hidden' 12 | }, 13 | bar: { 14 | borderRadius: 4 15 | }, 16 | colorPrimary: { 17 | backgroundColor: theme.palette.primary[isLight ? 'lighter' : 'darker'] 18 | }, 19 | buffer: { 20 | backgroundColor: 'transparent' 21 | } 22 | } 23 | } 24 | }; 25 | } 26 | -------------------------------------------------------------------------------- /src/theme/overrides/Radio.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Radio(theme) { 4 | return { 5 | MuiRadio: { 6 | styleOverrides: { 7 | root: { 8 | padding: theme.spacing(1), 9 | svg: { 10 | fontSize: 24, 11 | '&[font-size=small]': { 12 | fontSize: 20 13 | } 14 | } 15 | } 16 | } 17 | } 18 | }; 19 | } 20 | -------------------------------------------------------------------------------- /src/theme/overrides/Rating.js: -------------------------------------------------------------------------------- 1 | import { Icon } from '@iconify/react'; 2 | import starFill from '@iconify/icons-eva/star-fill'; 3 | 4 | import { SvgIcon } from '@mui/material'; 5 | 6 | // ---------------------------------------------------------------------- 7 | 8 | const ICON_SMALL = { width: 20, height: 20 }; 9 | const ICON_LARGE = { width: 28, height: 28 }; 10 | 11 | const ICON = ( 12 | 13 | 14 | 15 | ); 16 | 17 | export default function Rating(theme) { 18 | return { 19 | MuiRating: { 20 | defaultProps: { 21 | emptyIcon: ICON, 22 | icon: ICON 23 | }, 24 | 25 | styleOverrides: { 26 | root: { 27 | '&.Mui-disabled': { 28 | opacity: 0.48 29 | } 30 | }, 31 | iconEmpty: { color: theme.palette.grey[500_48] }, 32 | sizeSmall: { '& svg': { ...ICON_SMALL } }, 33 | sizeLarge: { '& svg': { ...ICON_LARGE } } 34 | } 35 | } 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /src/theme/overrides/Select.js: -------------------------------------------------------------------------------- 1 | import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | export default function Select() { 6 | return { 7 | MuiSelect: { 8 | defaultProps: { 9 | IconComponent: ExpandMoreRoundedIcon 10 | }, 11 | 12 | styleOverrides: { 13 | root: {} 14 | } 15 | } 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /src/theme/overrides/Skeleton.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Skeleton(theme) { 4 | return { 5 | MuiSkeleton: { 6 | defaultProps: { 7 | animation: 'wave' 8 | }, 9 | 10 | styleOverrides: { 11 | root: { 12 | backgroundColor: theme.palette.background.neutral 13 | } 14 | } 15 | } 16 | }; 17 | } 18 | -------------------------------------------------------------------------------- /src/theme/overrides/Slider.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Slider(theme) { 4 | const isLight = theme.palette.mode === 'light'; 5 | 6 | return { 7 | MuiSlider: { 8 | defaultProps: { 9 | size: 'small' 10 | }, 11 | 12 | styleOverrides: { 13 | root: { 14 | '&.Mui-disabled': { 15 | color: theme.palette.action.disabled 16 | } 17 | }, 18 | markLabel: { 19 | fontSize: 13, 20 | color: theme.palette.text.disabled 21 | }, 22 | valueLabel: { 23 | borderRadius: 8, 24 | backgroundColor: theme.palette.grey[isLight ? 800 : 700] 25 | } 26 | } 27 | } 28 | }; 29 | } 30 | -------------------------------------------------------------------------------- /src/theme/overrides/Snackbar.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Snackbar() { 4 | return { 5 | MuiSnackbarContent: { 6 | styleOverrides: { 7 | root: {} 8 | } 9 | } 10 | }; 11 | } 12 | -------------------------------------------------------------------------------- /src/theme/overrides/Stepper.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Stepper(theme) { 4 | return { 5 | MuiStepConnector: { 6 | styleOverrides: { 7 | line: { 8 | borderColor: theme.palette.divider 9 | } 10 | } 11 | } 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /src/theme/overrides/SvgIcon.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function SvgIcon() { 4 | return { 5 | MuiSvgIcon: { 6 | styleOverrides: { 7 | fontSizeSmall: { 8 | width: 20, 9 | height: 20, 10 | fontSize: 'inherit' 11 | }, 12 | fontSizeLarge: { 13 | width: 32, 14 | height: 32, 15 | fontSize: 'inherit' 16 | } 17 | } 18 | } 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /src/theme/overrides/Switch.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Switch(theme) { 4 | const isLight = theme.palette.mode === 'light'; 5 | 6 | return { 7 | MuiSwitch: { 8 | styleOverrides: { 9 | thumb: { 10 | boxShadow: theme.customShadows.z1 11 | }, 12 | track: { 13 | opacity: 1, 14 | backgroundColor: theme.palette.grey[500] 15 | }, 16 | switchBase: { 17 | left: 0, 18 | right: 'auto', 19 | '&:not(:.Mui-checked)': { 20 | color: theme.palette.grey[isLight ? 100 : 300] 21 | }, 22 | '&.Mui-checked.Mui-disabled, &.Mui-disabled': { 23 | color: theme.palette.grey[isLight ? 400 : 600] 24 | }, 25 | '&.Mui-disabled+.MuiSwitch-track': { 26 | opacity: 1, 27 | backgroundColor: `${theme.palette.action.disabledBackground} !important` 28 | } 29 | } 30 | } 31 | } 32 | }; 33 | } 34 | -------------------------------------------------------------------------------- /src/theme/overrides/Tabs.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Tabs(theme) { 4 | return { 5 | MuiTab: { 6 | styleOverrides: { 7 | root: { 8 | padding: 0, 9 | fontWeight: theme.typography.fontWeightMedium, 10 | borderTopLeftRadius: theme.shape.borderRadius, 11 | borderTopRightRadius: theme.shape.borderRadius, 12 | '&.Mui-selected': { 13 | color: theme.palette.text.primary 14 | }, 15 | '&:not(:last-of-type)': { 16 | marginRight: theme.spacing(5) 17 | }, 18 | '@media (min-width: 600px)': { 19 | minWidth: 48 20 | } 21 | }, 22 | labelIcon: { 23 | minHeight: 48, 24 | flexDirection: 'row', 25 | '& > *:first-of-type': { 26 | marginBottom: 0, 27 | marginRight: theme.spacing(1) 28 | } 29 | }, 30 | wrapper: { 31 | flexDirection: 'row', 32 | whiteSpace: 'nowrap' 33 | }, 34 | textColorInherit: { 35 | opacity: 1, 36 | color: theme.palette.text.secondary 37 | } 38 | } 39 | }, 40 | MuiTabPanel: { 41 | styleOverrides: { 42 | root: { 43 | padding: 0 44 | } 45 | } 46 | }, 47 | MuiTabScrollButton: { 48 | styleOverrides: { 49 | root: { 50 | width: 48, 51 | borderRadius: '50%' 52 | } 53 | } 54 | } 55 | }; 56 | } 57 | -------------------------------------------------------------------------------- /src/theme/overrides/Timeline.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Timeline(theme) { 4 | return { 5 | MuiTimelineDot: { 6 | styleOverrides: { 7 | root: { 8 | boxShadow: 'none' 9 | } 10 | } 11 | }, 12 | 13 | MuiTimelineConnector: { 14 | styleOverrides: { 15 | root: { 16 | backgroundColor: theme.palette.divider 17 | } 18 | } 19 | } 20 | }; 21 | } 22 | -------------------------------------------------------------------------------- /src/theme/overrides/ToggleButton.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function ToggleButton(theme) { 4 | return { 5 | MuiToggleButton: { 6 | styleOverrides: { 7 | root: { 8 | color: theme.palette.grey[500], 9 | border: `solid 1px ${theme.palette.grey[500_32]}`, 10 | '&.Mui-selected': { 11 | backgroundColor: theme.palette.action.selected 12 | }, 13 | '&.Mui-disabled': { 14 | color: theme.palette.grey[500_48] 15 | } 16 | } 17 | } 18 | } 19 | }; 20 | } 21 | -------------------------------------------------------------------------------- /src/theme/overrides/Tooltip.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Tooltip(theme) { 4 | const isLight = theme.palette.mode === 'light'; 5 | 6 | return { 7 | MuiTooltip: { 8 | styleOverrides: { 9 | tooltip: { 10 | backgroundColor: theme.palette.grey[isLight ? 800 : 700] 11 | }, 12 | arrow: { 13 | color: theme.palette.grey[isLight ? 800 : 700] 14 | } 15 | } 16 | } 17 | }; 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/overrides/TreeView.js: -------------------------------------------------------------------------------- 1 | import { Icon } from '@iconify/react'; 2 | import plusSquareOutline from '@iconify/icons-eva/plus-square-outline'; 3 | import minusSquareOutline from '@iconify/icons-eva/minus-square-outline'; 4 | import closeSquareOutline from '@iconify/icons-eva/close-square-outline'; 5 | 6 | import { Box } from '@mui/material'; 7 | 8 | // ---------------------------------------------------------------------- 9 | 10 | const ICON_SIZE = { width: 20, height: 20 }; 11 | 12 | export default function TreeView(theme) { 13 | return { 14 | MuiTreeView: { 15 | defaultProps: { 16 | defaultCollapseIcon: , 17 | defaultExpandIcon: , 18 | defaultEndIcon: ( 19 | 20 | ) 21 | } 22 | }, 23 | MuiTreeItem: { 24 | styleOverrides: { 25 | label: { ...theme.typography.body2 }, 26 | iconContainer: { width: 'auto' } 27 | } 28 | } 29 | }; 30 | } 31 | -------------------------------------------------------------------------------- /src/theme/overrides/Typography.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export default function Typography(theme) { 4 | return { 5 | MuiTypography: { 6 | styleOverrides: { 7 | paragraph: { 8 | marginBottom: theme.spacing(2) 9 | }, 10 | gutterBottom: { 11 | marginBottom: theme.spacing(1) 12 | } 13 | } 14 | } 15 | }; 16 | } 17 | -------------------------------------------------------------------------------- /src/theme/shape.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | const shape = { 4 | borderRadius: 16, 5 | borderRadiusSm: 16, 6 | borderRadiusMd: 16 7 | }; 8 | 9 | export default shape; 10 | -------------------------------------------------------------------------------- /src/utils/analytics.js: -------------------------------------------------------------------------------- 1 | import { googleAnalyticsConfig } from '../config'; 2 | 3 | // ---------------------------------------------------------------------- 4 | 5 | const setup = (...args) => { 6 | if (process.env.NODE_ENV !== 'production') { 7 | return; 8 | } 9 | if (!window.gtag) { 10 | return; 11 | } 12 | window.gtag(...args); 13 | }; 14 | 15 | const track = { 16 | pageview: (props) => { 17 | setup('config', googleAnalyticsConfig, props); 18 | }, 19 | event: (type, props) => { 20 | setup('event', type, props); 21 | } 22 | }; 23 | 24 | export default track; 25 | -------------------------------------------------------------------------------- /src/utils/formatNumber.js: -------------------------------------------------------------------------------- 1 | import { replace } from 'lodash'; 2 | import numeral from 'numeral'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | export function fCurrency(number) { 7 | return numeral(number).format(Number.isInteger(number) ? '$0,0' : '$0,0.00'); 8 | } 9 | 10 | export function fPercent(number) { 11 | return numeral(number / 100).format('0.0%'); 12 | } 13 | 14 | export function fNumber(number) { 15 | return numeral(number).format(); 16 | } 17 | 18 | export function fShortenNumber(number) { 19 | return replace(numeral(number).format('0.00a'), '.00', ''); 20 | } 21 | 22 | export function fData(number) { 23 | return numeral(number).format('0.0 b'); 24 | } 25 | -------------------------------------------------------------------------------- /src/utils/gitInfo.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | const { execSync } = require('child_process'); 4 | 5 | const execSyncWrapper = (command) => { 6 | let stdout = null; 7 | try { 8 | stdout = execSync(command).toString().trim(); 9 | } catch (error) { 10 | console.error(error); 11 | } 12 | return stdout; 13 | }; 14 | 15 | const main = () => { 16 | const gitBranch = execSyncWrapper('git rev-parse --abbrev-ref HEAD'); 17 | const gitCommitHash = execSyncWrapper('git rev-parse --short=7 HEAD'); 18 | 19 | const obj = { 20 | gitBranch, 21 | gitCommitHash 22 | }; 23 | 24 | const filePath = path.resolve('src', 'generatedGitInfo.json'); 25 | const fileContents = JSON.stringify(obj, null, 2); 26 | 27 | fs.writeFileSync(filePath, fileContents); 28 | console.log(`Wrote the following contents to ${filePath}\n${fileContents}`); 29 | }; 30 | 31 | main(); 32 | -------------------------------------------------------------------------------- /src/utils/highlight.js: -------------------------------------------------------------------------------- 1 | import hljs from 'highlight.js'; 2 | import 'highlight.js/styles/atom-one-dark.css'; 3 | 4 | // ---------------------------------------------------------------------- 5 | 6 | hljs.configure({ 7 | languages: ['javascript', 'jsx', 'sh', 'bash', 'html', 'scss', 'css', 'json'] 8 | }); 9 | 10 | window.hljs = hljs; 11 | -------------------------------------------------------------------------------- /src/utils/mock-data/boolean.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const boolean = [ 4 | true, 5 | true, 6 | true, 7 | false, 8 | false, 9 | true, 10 | false, 11 | false, 12 | false, 13 | false, 14 | true, 15 | true, 16 | true, 17 | false, 18 | false, 19 | false, 20 | true, 21 | false, 22 | false, 23 | false, 24 | true, 25 | false, 26 | false, 27 | true, 28 | true, 29 | true, 30 | false, 31 | false, 32 | true, 33 | true, 34 | false, 35 | true, 36 | false, 37 | true, 38 | true, 39 | true, 40 | false, 41 | true, 42 | false, 43 | false 44 | ]; 45 | -------------------------------------------------------------------------------- /src/utils/mock-data/company.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const company = [ 4 | 'Lueilwitz and Sons', 5 | 'Gleichner, Mueller and Tromp', 6 | 'Nikolaus - Leuschke', 7 | 'Hegmann, Kreiger and Bayer', 8 | 'Grimes Inc', 9 | 'Durgan - Murazik', 10 | 'Altenwerth, Medhurst and Roberts', 11 | 'Raynor Group', 12 | 'Mraz, Donnelly and Collins', 13 | 'Padberg - Bailey', 14 | 'Heidenreich, Stokes and Parker', 15 | 'Pagac and Sons', 16 | 'Rempel, Hand and Herzog', 17 | 'Dare - Treutel', 18 | 'Kihn, Marquardt and Crist', 19 | 'Nolan - Kunde', 20 | 'Wuckert Inc', 21 | 'Dibbert Inc', 22 | 'Goyette and Sons', 23 | 'Feest Group', 24 | 'Bosco and Sons', 25 | 'Bartell - Kovacek', 26 | 'Schimmel - Raynor', 27 | 'Tremblay LLC', 28 | 'Hills - Mitchell', 29 | 'Rogahn LLC', 30 | 'Kuhn, Osinski and Morar', 31 | 'Schmitt Inc', 32 | 'Breitenberg - Rosenbaum', 33 | "O'Keefe, Schneider and Mraz", 34 | 'Rohan, Langworth and Kling', 35 | 'Morar and Sons', 36 | 'Mraz LLC', 37 | 'Rowe, Parisian and Kub', 38 | 'Marquardt - Hane', 39 | 'Medhurst Group', 40 | 'Nikolaus - Lang', 41 | 'Effertz, Mohr and Olson', 42 | 'Anderson - Kris', 43 | 'Runolfsson Group' 44 | ]; 45 | -------------------------------------------------------------------------------- /src/utils/mock-data/email.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const email = [ 4 | 'nannie_abernathy70@yahoo.com', 5 | 'ashlynn_ohara62@gmail.com', 6 | 'milo.farrell@hotmail.com', 7 | 'violet.ratke86@yahoo.com', 8 | 'letha_lubowitz24@yahoo.com', 9 | 'aditya_greenfelder31@gmail.com', 10 | 'lenna_bergnaum27@hotmail.com', 11 | 'luella.ryan33@gmail.com', 12 | 'joana.simonis84@gmail.com', 13 | 'marjolaine_white94@gmail.com', 14 | 'vergie_block82@hotmail.com', 15 | 'vito.hudson@hotmail.com', 16 | 'tyrel_greenholt@gmail.com', 17 | 'dwight.block85@yahoo.com', 18 | 'mireya13@hotmail.com', 19 | 'dasia_jenkins@hotmail.com', 20 | 'benny89@yahoo.com', 21 | 'dawn.goyette@gmail.com', 22 | 'zella_hickle4@yahoo.com', 23 | 'avery43@hotmail.com', 24 | 'olen_legros@gmail.com', 25 | 'jimmie.gerhold73@hotmail.com', 26 | 'genevieve.powlowski@hotmail.com', 27 | 'louie.kuphal39@gmail.com', 28 | 'enoch.cruickshank@gmail.com', 29 | 'arlo_mccullough@gmail.com', 30 | 'sadie18@yahoo.com', 31 | 'aric67@gmail.com', 32 | 'mack_deckow53@gmail.com', 33 | 'constantin91@yahoo.com', 34 | 'lonny84@hotmail.com', 35 | 'gus56@hotmail.com', 36 | 'brennon64@yahoo.com', 37 | 'hortense.streich@hotmail.com', 38 | 'kallie_powlowski57@hotmail.com', 39 | 'meghan.kemmer@hotmail.com', 40 | 'bella.mraz14@yahoo.com', 41 | 'barney88@gmail.com', 42 | 'diamond_johns@hotmail.com', 43 | 'gus80@hotmail.com' 44 | ]; 45 | -------------------------------------------------------------------------------- /src/utils/mock-data/number.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const price = [ 4 | 16.19, 35.71, 34.3, 93.1, 55.47, 89.09, 44.39, 26.92, 45.35, 26.96, 78.22, 35.54, 90.69, 63.61, 67.55, 94.75, 75.78, 5 | 39.6, 52.84, 72.8, 83.08, 85.02, 69.22, 60.96, 84.7, 16.68, 78.83, 58.07, 65.8, 55.69, 87.55, 44.74, 27.42, 84, 76.17, 6 | 43.83, 76.39, 17.42, 42.3, 12.45 7 | ]; 8 | 9 | export const rating = [ 10 | 2.5, 2, 4.9, 2, 4, 5, 4.9, 5, 3.7, 2.5, 2, 4.9, 4.8, 4, 2, 3.7, 1.4, 2.4, 1.8, 5, 2.9, 3.9, 3.9, 1.8, 5, 2.6, 3.1, 11 | 3.9, 1.2, 3.2, 4.1, 5, 4.5, 4.1, 2.3, 2.4, 5, 3.1, 4.9, 1.7 12 | ]; 13 | 14 | export const age = [ 15 | 52, 43, 56, 25, 22, 53, 38, 50, 55, 37, 16, 27, 55, 41, 52, 32, 34, 52, 31, 53, 23, 48, 43, 41, 19, 21, 17, 29, 32, 16 | 54, 38, 34, 49, 33, 55, 50, 24, 27, 23, 23 17 | ]; 18 | 19 | export const percent = [ 20 | 8.62, 86.36, 73.99, 79, 63.41, 58.79, 12.32, 88.44, 45.06, 91.64, 88.41, 73.08, 39.14, 89.34, 43.37, 34.45, 24.04, 21 | 80.96, 72.91, 47.59, 2.46, 3.33, 99.31, 47.6, 34.09, 50.61, 66.13, 46.69, 92.43, 31.41, 90.85, 36.32, 38.84, 25.6, 22 | 87.61, 1.31, 89.32, 41.23, 85.9, 62.63 23 | ]; 24 | -------------------------------------------------------------------------------- /src/utils/mock-data/phoneNumber.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const phoneNumber = [ 4 | '365-374-4961', 5 | '904-966-2836', 6 | '399-757-9909', 7 | '692-767-2903', 8 | '990-588-5716', 9 | '955-439-2578', 10 | '226-924-4058', 11 | '552-917-1454', 12 | '285-840-9338', 13 | '306-269-2446', 14 | '883-373-6253', 15 | '476-509-8866', 16 | '201-465-1954', 17 | '538-295-9408', 18 | '531-492-6028', 19 | '981-699-7588', 20 | '500-268-4826', 21 | '205-952-3828', 22 | '222-255-5190', 23 | '408-439-8033', 24 | '272-940-8266', 25 | '812-685-8057', 26 | '353-801-5212', 27 | '606-285-8928', 28 | '202-767-8621', 29 | '222-830-0731', 30 | '964-940-3166', 31 | '262-702-2396', 32 | '886-261-9789', 33 | '352-390-5069', 34 | '343-907-8334', 35 | '575-347-2399', 36 | '749-228-5604', 37 | '774-452-2071', 38 | '607-841-0447', 39 | '395-619-2157', 40 | '233-834-0373', 41 | '586-880-2602', 42 | '746-772-0722', 43 | '638-615-3365,' 44 | ]; 45 | -------------------------------------------------------------------------------- /src/utils/mock-data/role.js: -------------------------------------------------------------------------------- 1 | // ---------------------------------------------------------------------- 2 | 3 | export const role = [ 4 | 'UX Designer', 5 | 'Full Stack Designer', 6 | 'Backend Developer', 7 | 'UX Designer', 8 | 'UX Designer', 9 | 'Project Manager', 10 | 'Leader', 11 | 'Backend Developer', 12 | 'Project Manager', 13 | 'UI Designer', 14 | 'UI/UX Designer', 15 | 'UI/UX Designer', 16 | 'UI Designer', 17 | 'Backend Developer', 18 | 'Backend Developer', 19 | 'Front End Developer', 20 | 'Backend Developer', 21 | 'Full Stack Designer', 22 | 'Full Stack Developer', 23 | 'Backend Developer', 24 | 'UX Designer', 25 | 'UI Designer', 26 | 'Project Manager', 27 | 'UI/UX Designer', 28 | 'UI Designer', 29 | 'Project Manager', 30 | 'Full Stack Developer', 31 | 'Hr Manager', 32 | 'Hr Manager', 33 | 'UI/UX Designer', 34 | 'Project Manager', 35 | 'Full Stack Designer', 36 | 'UI Designer', 37 | 'Leader', 38 | 'Front End Developer', 39 | 'UI/UX Designer', 40 | 'Project Manager', 41 | 'UI/UX Designer', 42 | 'UI Designer', 43 | 'Full Stack Designer' 44 | ]; 45 | --------------------------------------------------------------------------------