├── .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 |
4 |
--------------------------------------------------------------------------------
/public/static/badges/ELA-network.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/public/static/badges/ETH-network.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/badges/FSN-network.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/badges/diamond.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/static/badges/thumbdown.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/badges/thumbup.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/basket.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/batch-img.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/blockchain.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/broken-image.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/circle-loading.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
30 |
--------------------------------------------------------------------------------
/public/static/collection.svg:
--------------------------------------------------------------------------------
1 |
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 |
4 |
--------------------------------------------------------------------------------
/public/static/diamond2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/elastos.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/erc20/ELAonETH.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/public/static/erc20/ETH.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/static/erc20/FSN.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/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 |
4 |
--------------------------------------------------------------------------------
/public/static/exchange.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/glide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/PasarProtocol/PasarDWebApp/91a26eeb5fbe3f12dfc4cb4499ad80da3c74560a/public/static/glide.png
--------------------------------------------------------------------------------
/public/static/hammer.svg:
--------------------------------------------------------------------------------
1 |
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 |
--------------------------------------------------------------------------------
/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 |
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 |
--------------------------------------------------------------------------------
/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 |
8 |
--------------------------------------------------------------------------------
/public/static/overlay.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/static/remove.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/tag.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/trashcan.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/static/upload.svg:
--------------------------------------------------------------------------------
1 |
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 |
15 | {value === index && {children}}
16 |
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 |
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 | }
25 | >
26 | See more
27 |
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 | }
31 | onClick={toggleFullScreen}
32 | sx={{
33 | fontSize: 14,
34 | ...(fullscreen && {
35 | bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
36 | })
37 | }}
38 | >
39 | {fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
40 |
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 |
--------------------------------------------------------------------------------