├── .changeset ├── README.md └── config.json ├── .env.example ├── .eslintrc.json ├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ ├── main.yml │ ├── publish.yml │ └── storybook.yml ├── .gitignore ├── .npmrc ├── .plop └── plop-templates │ ├── with-code-examples │ ├── index.tsx.hbs │ ├── types.ts.hbs │ ├── {{ name }}.stories.tsx.hbs │ ├── {{ name }}.styles.ts.hbs │ ├── {{ name }}.test.tsx.hbs │ └── {{ name }}.tsx.hbs │ └── with-no-code-examples │ ├── index.tsx.hbs │ ├── types.ts.hbs │ ├── {{ name }}.stories.tsx.hbs │ ├── {{ name }}.styles.ts.hbs │ ├── {{ name }}.test.tsx.hbs │ └── {{ name }}.tsx.hbs ├── .prettierignore ├── .prettierrc ├── .storybook ├── assets │ └── Moralis-Web3-UI-kit.svg ├── main.js ├── manager.js ├── preview-head.html ├── preview.js └── theme.js ├── .vscode ├── extensions.json └── settings.json ├── CONTRIBUTE.md ├── LICENSE ├── README.md ├── apps └── example │ ├── index.html │ ├── package.json │ ├── project.json │ ├── src │ ├── bootstrap.tsx │ └── index.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── nx.json ├── package.json ├── packages ├── config │ ├── CHANGELOG.md │ ├── package.json │ ├── tsconfig.json │ ├── tsconfig.ui.json │ └── vite.config.ts ├── core │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── project.json │ ├── src │ │ ├── IconsGallery │ │ │ ├── Icon.test.tsx │ │ │ ├── IconGallery.stories.tsx │ │ │ ├── IconGallery.styles.ts │ │ │ └── IconGallery.tsx │ │ ├── hooks │ │ │ ├── useLocalStorage.ts │ │ │ └── useOutsideAlerter.ts │ │ ├── index.ts │ │ ├── interfaces │ │ │ ├── color.ts │ │ │ ├── customize.ts │ │ │ └── logo.ts │ │ ├── lib │ │ │ ├── Accordion │ │ │ │ ├── Accordion.stories.tsx │ │ │ │ ├── Accordion.styles.ts │ │ │ │ ├── Accordion.test.tsx │ │ │ │ ├── Accordion.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Avatar │ │ │ │ ├── Avatar.stories.tsx │ │ │ │ ├── Avatar.styles.tsx │ │ │ │ ├── Avatar.test.tsx │ │ │ │ ├── Avatar.tsx │ │ │ │ ├── images │ │ │ │ │ └── guy.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Badge │ │ │ │ ├── Badge.stories.tsx │ │ │ │ ├── Badge.styles.ts │ │ │ │ ├── Badge.test.tsx │ │ │ │ ├── Badge.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── BannerStrip │ │ │ │ ├── BannerStrip.stories.tsx │ │ │ │ ├── BannerStrip.styles.ts │ │ │ │ ├── BannerStrip.test.tsx │ │ │ │ ├── BannerStrip.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Breadcrumbs │ │ │ │ ├── Breadcrumbs.stories.tsx │ │ │ │ ├── Breadcrumbs.styles.ts │ │ │ │ ├── Breadcrumbs.test.tsx │ │ │ │ ├── Breadcrumbs.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Button │ │ │ │ ├── Button.stories.tsx │ │ │ │ ├── Button.test.tsx │ │ │ │ ├── Button.tsx │ │ │ │ ├── ButtonBase │ │ │ │ │ ├── ButtonBase.styles.ts │ │ │ │ │ ├── ButtonBase.tsx │ │ │ │ │ └── styles │ │ │ │ │ │ ├── ButtonBaseIcon.styles.tsx │ │ │ │ │ │ ├── ButtonBaseSize.styles.tsx │ │ │ │ │ │ └── ButtonBaseTest.styles.tsx │ │ │ │ ├── ButtonColored │ │ │ │ │ ├── ButtonColored.styles.tsx │ │ │ │ │ └── ButtonColored.tsx │ │ │ │ ├── ButtonCustom │ │ │ │ │ ├── ButtonCustom.styles.tsx │ │ │ │ │ └── ButtonCustom.tsx │ │ │ │ ├── ButtonMoneyPrimary │ │ │ │ │ ├── ButtonMoneyPrimary.styles.tsx │ │ │ │ │ └── ButtonMoneyPrimary.tsx │ │ │ │ ├── ButtonOutline │ │ │ │ │ ├── ButtonOutline.styles.tsx │ │ │ │ │ └── ButtonOutline.tsx │ │ │ │ ├── ButtonPrimary │ │ │ │ │ ├── ButtonPrimary.styles.tsx │ │ │ │ │ └── ButtonPrimary.tsx │ │ │ │ ├── ButtonSecondary │ │ │ │ │ ├── ButtonSecondary.styles.tsx │ │ │ │ │ └── ButtonSecondary.tsx │ │ │ │ ├── ButtonTranslucent │ │ │ │ │ ├── ButtonTranslucent.styles.tsx │ │ │ │ │ └── ButtonTranslucent.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Card │ │ │ │ ├── Animations │ │ │ │ │ └── animations.tsx │ │ │ │ ├── Card.stories.tsx │ │ │ │ ├── Card.styles.ts │ │ │ │ ├── Card.test.tsx │ │ │ │ ├── Card.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── ChainSelector │ │ │ │ ├── ChainSelector.stories.tsx │ │ │ │ ├── ChainSelector.styles.ts │ │ │ │ ├── ChainSelector.test.tsx │ │ │ │ ├── ChainSelector.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Checkbox │ │ │ │ ├── Checkbox.stories.tsx │ │ │ │ ├── Checkbox.styles.ts │ │ │ │ ├── Checkbox.test.tsx │ │ │ │ ├── Checkbox.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── CodeArea │ │ │ │ ├── CodeArea.stories.tsx │ │ │ │ ├── CodeArea.styles.tsx │ │ │ │ ├── CodeArea.test.tsx │ │ │ │ ├── CodeArea.tsx │ │ │ │ ├── LineNumbers.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── CopyButton │ │ │ │ ├── CopyButton.stories.tsx │ │ │ │ ├── CopyButton.styles.ts │ │ │ │ ├── CopyButton.test.tsx │ │ │ │ ├── CopyButton.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Credentials │ │ │ │ ├── Credentials.stories.tsx │ │ │ │ ├── Credentials.styles.tsx │ │ │ │ ├── Credentials.test.tsx │ │ │ │ ├── Credentials.tsx │ │ │ │ ├── components │ │ │ │ │ ├── CredentialsHeader.tsx │ │ │ │ │ └── TruncateString.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── CreditCard │ │ │ │ ├── CreditCard.stories.tsx │ │ │ │ ├── CreditCard.tsx │ │ │ │ ├── LargeCreditCard │ │ │ │ │ ├── LargeCreditCard.styles.ts │ │ │ │ │ └── index.tsx │ │ │ │ ├── SmallCreditCard │ │ │ │ │ ├── SmallCreditCard.styles.ts │ │ │ │ │ └── index.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── CryptoCards │ │ │ │ ├── CryptoCards.stories.tsx │ │ │ │ ├── CryptoCards.styles.tsx │ │ │ │ ├── CryptoCards.test.tsx │ │ │ │ ├── CryptoCards.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── CryptoLogos │ │ │ │ ├── CryptoLogos.stories.tsx │ │ │ │ ├── CryptoLogos.styles.tsx │ │ │ │ ├── CryptoLogos.test.tsx │ │ │ │ ├── CryptoLogos.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── DatePicker │ │ │ │ ├── DatePicker.stories.tsx │ │ │ │ ├── DatePicker.styles.ts │ │ │ │ ├── DatePicker.test.tsx │ │ │ │ ├── DatePicker.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Dropdown │ │ │ │ ├── Dropdown.stories.tsx │ │ │ │ ├── Dropdown.styles.tsx │ │ │ │ ├── Dropdown.test.tsx │ │ │ │ ├── Dropdown.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Form │ │ │ │ ├── Form.stories.tsx │ │ │ │ ├── Form.styles.ts │ │ │ │ ├── Form.test.tsx │ │ │ │ ├── Form.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Grid │ │ │ │ ├── Grid.stories.tsx │ │ │ │ ├── Grid.styles.ts │ │ │ │ ├── Grid.test.tsx │ │ │ │ ├── Grid.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Hero │ │ │ │ ├── Hero.stories.tsx │ │ │ │ ├── Hero.styles.ts │ │ │ │ ├── Hero.test.tsx │ │ │ │ ├── Hero.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── types.ts │ │ │ │ └── wizard.svg │ │ │ ├── HideButton │ │ │ │ ├── HideButton.stories.tsx │ │ │ │ ├── HideButton.test.tsx │ │ │ │ ├── HideButton.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Illustrations │ │ │ │ ├── Illustration.stories.tsx │ │ │ │ ├── Illustration.tsx │ │ │ │ ├── images │ │ │ │ │ ├── chains │ │ │ │ │ │ ├── aptos.tsx │ │ │ │ │ │ ├── arbitrum.tsx │ │ │ │ │ │ ├── avalanche.tsx │ │ │ │ │ │ ├── binance.tsx │ │ │ │ │ │ ├── coinbase.tsx │ │ │ │ │ │ ├── cronos.tsx │ │ │ │ │ │ ├── ethereum.tsx │ │ │ │ │ │ ├── fantom.tsx │ │ │ │ │ │ ├── harmony.tsx │ │ │ │ │ │ ├── index.ts │ │ │ │ │ │ ├── optimism.tsx │ │ │ │ │ │ ├── palm.tsx │ │ │ │ │ │ ├── polygon.tsx │ │ │ │ │ │ ├── pulsechain.tsx │ │ │ │ │ │ └── ronin.tsx │ │ │ │ │ └── various │ │ │ │ │ │ ├── beanBoyFront.tsx │ │ │ │ │ │ ├── beanBoyStepFive.tsx │ │ │ │ │ │ ├── beanBoyStepFour.tsx │ │ │ │ │ │ ├── beanBoyStepOne.tsx │ │ │ │ │ │ ├── beanBoyStepThree.tsx │ │ │ │ │ │ ├── beanBoyStepTwo.tsx │ │ │ │ │ │ ├── beanBoyUpLeft.tsx │ │ │ │ │ │ ├── binaryTriangle.tsx │ │ │ │ │ │ ├── bundle.tsx │ │ │ │ │ │ ├── cat.tsx │ │ │ │ │ │ ├── checklist.tsx │ │ │ │ │ │ ├── chest.tsx │ │ │ │ │ │ ├── comingSoon.tsx │ │ │ │ │ │ ├── confirmed.tsx │ │ │ │ │ │ ├── cryptoweb.tsx │ │ │ │ │ │ ├── data.tsx │ │ │ │ │ │ ├── discord.tsx │ │ │ │ │ │ ├── documentation.tsx │ │ │ │ │ │ ├── lazyNft.tsx │ │ │ │ │ │ ├── looking.tsx │ │ │ │ │ │ ├── marketplace.tsx │ │ │ │ │ │ ├── pack.tsx │ │ │ │ │ │ ├── plugins.tsx │ │ │ │ │ │ ├── servers.tsx │ │ │ │ │ │ ├── token.tsx │ │ │ │ │ │ ├── wallet.tsx │ │ │ │ │ │ └── wizard.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Info │ │ │ │ ├── Information.stories.tsx │ │ │ │ ├── Information.styles.ts │ │ │ │ ├── Information.test.tsx │ │ │ │ ├── Information.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Input │ │ │ │ ├── Input.stories.tsx │ │ │ │ ├── Input.styles.ts │ │ │ │ ├── Input.test.tsx │ │ │ │ ├── Input.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── InputNew │ │ │ │ ├── Input.stories.tsx │ │ │ │ ├── Input.styles.ts │ │ │ │ ├── Input.tsx │ │ │ │ ├── InputValidation.ts │ │ │ │ ├── atoms │ │ │ │ │ ├── InputBase.tsx │ │ │ │ │ ├── LabelBase.tsx │ │ │ │ │ ├── VisibilityToggle.tsx │ │ │ │ │ ├── stories │ │ │ │ │ │ ├── InputBase.stories.tsx │ │ │ │ │ │ └── LabelBase.stories.tsx │ │ │ │ │ ├── styles.ts │ │ │ │ │ ├── tests │ │ │ │ │ │ ├── InputBase.test.tsx │ │ │ │ │ │ └── LabelBase.test.tsx │ │ │ │ │ ├── types.ts │ │ │ │ │ └── values.ts │ │ │ │ ├── index.tsx │ │ │ │ ├── tests │ │ │ │ │ └── Inpup.test.tsx │ │ │ │ └── types.ts │ │ │ ├── LinkTo │ │ │ │ ├── LinkTo.stories.tsx │ │ │ │ ├── LinkTo.styles.ts │ │ │ │ ├── LinkTo.test.tsx │ │ │ │ ├── LinkTo.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Loading │ │ │ │ ├── Loading.stories.tsx │ │ │ │ ├── Loading.styles.tsx │ │ │ │ ├── Loading.test.tsx │ │ │ │ ├── Loading.tsx │ │ │ │ ├── WaveLoaderStates.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Logo │ │ │ │ ├── Logo.stories.tsx │ │ │ │ ├── Logo.test.tsx │ │ │ │ ├── Logo.tsx │ │ │ │ ├── images │ │ │ │ │ ├── amexLogo.tsx │ │ │ │ │ ├── dinersLogo.tsx │ │ │ │ │ ├── mastercardLogo.tsx │ │ │ │ │ ├── moralisLogoDefault.tsx │ │ │ │ │ ├── moralisLogoIcon.tsx │ │ │ │ │ └── visaLogo.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Modal │ │ │ │ ├── Modal.stories.tsx │ │ │ │ ├── Modal.styles.ts │ │ │ │ ├── Modal.test.tsx │ │ │ │ ├── Modal.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── NewComp │ │ │ │ ├── NewComp.stories.tsx │ │ │ │ ├── NewComp.styles.ts │ │ │ │ ├── NewComp.test.tsx │ │ │ │ ├── NewComp.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── NftCard │ │ │ │ ├── NftCard.stories.tsx │ │ │ │ ├── NftCard.styles.ts │ │ │ │ ├── NftCard.test.tsx │ │ │ │ ├── NftCard.tsx │ │ │ │ ├── NftDetail.helper.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Notification │ │ │ │ ├── Notification.stories.tsx │ │ │ │ ├── Notification.styles.tsx │ │ │ │ ├── Notification.test.tsx │ │ │ │ ├── Notification.tsx │ │ │ │ ├── NotificationProvider.tsx │ │ │ │ ├── context.ts │ │ │ │ ├── index.tsx │ │ │ │ ├── themes │ │ │ │ │ └── themes.ts │ │ │ │ └── types.ts │ │ │ ├── Pagination │ │ │ │ ├── Helper.ts │ │ │ │ ├── Pagination.stories.tsx │ │ │ │ ├── Pagination.styles.ts │ │ │ │ ├── Pagination.test.tsx │ │ │ │ ├── Pagination.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── PlanCard │ │ │ │ ├── PlanCard.stories.tsx │ │ │ │ ├── PlanCard.styles.tsx │ │ │ │ ├── PlanCard.test.tsx │ │ │ │ ├── PlanCard.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── mock.tsx │ │ │ │ └── types.ts │ │ │ ├── PopoverDropdown │ │ │ │ ├── PopoverDropdown.stories.tsx │ │ │ │ ├── PopoverDropdown.styles.tsx │ │ │ │ ├── PopoverDropdown.test.tsx │ │ │ │ ├── PopoverDropdown.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── PopoverElement │ │ │ │ ├── PopoverElement.stories.tsx │ │ │ │ ├── PopoverElement.styles.tsx │ │ │ │ ├── PopoverElement.test.tsx │ │ │ │ ├── PopoverElement.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── ProgressBar │ │ │ │ ├── ProgressBar.stories.tsx │ │ │ │ ├── ProgressBar.styles.ts │ │ │ │ ├── ProgressBar.test.tsx │ │ │ │ ├── ProgressBar.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Radios │ │ │ │ ├── Radios.cc.stories.tsx │ │ │ │ ├── Radios.stories.tsx │ │ │ │ ├── Radios.styles.ts │ │ │ │ ├── Radios.test.tsx │ │ │ │ ├── Radios.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.tsx │ │ │ ├── Row │ │ │ │ ├── Row.stories.tsx │ │ │ │ ├── Row.styles.ts │ │ │ │ ├── Row.test.tsx │ │ │ │ ├── Row.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.tsx │ │ │ ├── Select │ │ │ │ ├── OldSelect │ │ │ │ │ ├── OldSelect.styles.ts │ │ │ │ │ └── OldSelect.tsx │ │ │ │ ├── Select.stories.tsx │ │ │ │ ├── Select.test.tsx │ │ │ │ ├── Select.tsx │ │ │ │ ├── SelectBeta │ │ │ │ │ ├── SelectBeta.styles.ts │ │ │ │ │ ├── SelectBeta.test.tsx │ │ │ │ │ ├── SelectBeta.tsx │ │ │ │ │ ├── components │ │ │ │ │ │ ├── SelectMenuList.tsx │ │ │ │ │ │ └── SelectedItemsList.tsx │ │ │ │ │ └── mockData.ts │ │ │ │ ├── TraditionalSelect │ │ │ │ │ ├── TraditionalSelect.styles.ts │ │ │ │ │ └── TraditionalSelect.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Skeleton │ │ │ │ ├── Skeleton.stories.tsx │ │ │ │ ├── Skeleton.styles.ts │ │ │ │ ├── Skeleton.test.tsx │ │ │ │ ├── Skeleton.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Slider │ │ │ │ ├── Slider.stories.tsx │ │ │ │ ├── Slider.styles.ts │ │ │ │ ├── Slider.test.tsx │ │ │ │ ├── Slider.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Stepper │ │ │ │ ├── Stepper.stories.tsx │ │ │ │ ├── Stepper.styles.ts │ │ │ │ ├── Stepper.test.tsx │ │ │ │ ├── Stepper.tsx │ │ │ │ ├── helpers │ │ │ │ │ ├── StepperNumbers.styles.ts │ │ │ │ │ └── StepperNumbers.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── testStepData.tsx │ │ │ │ └── types.ts │ │ │ ├── Table │ │ │ │ ├── Helper.ts │ │ │ │ ├── MockData.tsx │ │ │ │ ├── Table.stories.tsx │ │ │ │ ├── Table.styles.ts │ │ │ │ ├── Table.test.tsx │ │ │ │ ├── Table.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.tsx │ │ │ ├── Tabs │ │ │ │ ├── Tabs.stories.tsx │ │ │ │ ├── Tabs.styles.ts │ │ │ │ ├── Tabs.test.tsx │ │ │ │ ├── TabsList.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Tag │ │ │ │ ├── Tag.stories.tsx │ │ │ │ ├── Tag.styles.ts │ │ │ │ ├── Tag.test.tsx │ │ │ │ ├── Tag.tsx │ │ │ │ ├── index.tsx │ │ │ │ ├── styles │ │ │ │ │ ├── colors.tsx │ │ │ │ │ └── themes.tsx │ │ │ │ └── types.ts │ │ │ ├── TextArea │ │ │ │ ├── TextArea.stories.tsx │ │ │ │ ├── TextArea.styles.ts │ │ │ │ ├── TextArea.test.tsx │ │ │ │ ├── TextArea.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.tsx │ │ │ ├── Todo │ │ │ │ ├── Todo.stories.tsx │ │ │ │ ├── Todo.styles.ts │ │ │ │ ├── Todo.test.tsx │ │ │ │ ├── Todo.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Toggle │ │ │ │ ├── Toggle.stories.tsx │ │ │ │ ├── Toggle.styles.ts │ │ │ │ ├── Toggle.test.tsx │ │ │ │ ├── Toggle.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Tooltip │ │ │ │ ├── Tooltip.stories.tsx │ │ │ │ ├── Tooltip.styles.ts │ │ │ │ ├── Tooltip.test.tsx │ │ │ │ ├── Tooltip.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Typography │ │ │ │ ├── Typography.stories.tsx │ │ │ │ ├── Typography.styles.ts │ │ │ │ ├── Typography.test.tsx │ │ │ │ ├── Typography.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Upload │ │ │ │ ├── Upload.stories.tsx │ │ │ │ ├── Upload.styles.ts │ │ │ │ ├── Upload.test.tsx │ │ │ │ ├── Upload.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── VerifyCode │ │ │ │ ├── VerifyCode.stories.tsx │ │ │ │ ├── VerifyCode.styles.ts │ │ │ │ ├── VerifyCode.test.tsx │ │ │ │ ├── VerifyCode.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── Widget │ │ │ │ ├── Widget.stories.tsx │ │ │ │ ├── Widget.styles.tsx │ │ │ │ ├── Widget.test.tsx │ │ │ │ ├── Widget.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ └── utils │ │ │ ├── const.ts │ │ │ ├── depreciationWarning.ts │ │ │ └── utils.tsx │ ├── tsconfig.json │ └── vite.config.ts ├── icons │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ └── lib │ │ │ ├── icons │ │ │ ├── Ada.tsx │ │ │ ├── AddUser.tsx │ │ │ ├── Airdrop.tsx │ │ │ ├── AlertCircle.tsx │ │ │ ├── AlertTriangle.tsx │ │ │ ├── Archive.tsx │ │ │ ├── Arrow.tsx │ │ │ ├── ArrowCircleDown.tsx │ │ │ ├── ArrowCircleLeft.tsx │ │ │ ├── ArrowCircleRight.tsx │ │ │ ├── ArrowDown.tsx │ │ │ ├── ArrowDownLeft.tsx │ │ │ ├── ArrowDownRight.tsx │ │ │ ├── ArrowLeft.tsx │ │ │ ├── ArrowUp.tsx │ │ │ ├── ArrowUpLeft.tsx │ │ │ ├── ArrowUpRight.tsx │ │ │ ├── AtomicApi.tsx │ │ │ ├── Avax.tsx │ │ │ ├── Balancer.tsx │ │ │ ├── Ban.tsx │ │ │ ├── BarChart.tsx │ │ │ ├── Bean.tsx │ │ │ ├── BeanOutline.tsx │ │ │ ├── Beans.tsx │ │ │ ├── Bell.tsx │ │ │ ├── Bin.tsx │ │ │ ├── BitBucket.tsx │ │ │ ├── BlueBean.tsx │ │ │ ├── Bnb.tsx │ │ │ ├── Book.tsx │ │ │ ├── Btc.tsx │ │ │ ├── Calendar.tsx │ │ │ ├── Camera.tsx │ │ │ ├── Cart.tsx │ │ │ ├── CartBag.tsx │ │ │ ├── Cat.tsx │ │ │ ├── Chainlink.tsx │ │ │ ├── Chart.tsx │ │ │ ├── Check.tsx │ │ │ ├── CheckCircle.tsx │ │ │ ├── CheckCircleAlt.tsx │ │ │ ├── CheckSquare.tsx │ │ │ ├── Checkmark.tsx │ │ │ ├── Chest.tsx │ │ │ ├── ChevronDown.tsx │ │ │ ├── ChevronLeft.tsx │ │ │ ├── ChevronLeft2X.tsx │ │ │ ├── ChevronRight.tsx │ │ │ ├── ChevronRight2X.tsx │ │ │ ├── ChevronUp.tsx │ │ │ ├── Clock.tsx │ │ │ ├── Cloud.tsx │ │ │ ├── Cog.tsx │ │ │ ├── Compass.tsx │ │ │ ├── Contract.tsx │ │ │ ├── Copy.tsx │ │ │ ├── Coupon.tsx │ │ │ ├── CreditCard.tsx │ │ │ ├── CreditCard2.tsx │ │ │ ├── Cross.tsx │ │ │ ├── CrossCircle.tsx │ │ │ ├── Cube.tsx │ │ │ ├── Curve.tsx │ │ │ ├── Dai.tsx │ │ │ ├── Dapps.tsx │ │ │ ├── Data.tsx │ │ │ ├── Discord.tsx │ │ │ ├── Discord2.tsx │ │ │ ├── DiscordOutline.tsx │ │ │ ├── Doge.tsx │ │ │ ├── Download.tsx │ │ │ ├── DownloadCloud.tsx │ │ │ ├── Dribbble.tsx │ │ │ ├── Edit.tsx │ │ │ ├── EditAlt.tsx │ │ │ ├── Erc20.tsx │ │ │ ├── Eth.tsx │ │ │ ├── EthColored.tsx │ │ │ ├── Etherscan.tsx │ │ │ ├── Event.tsx │ │ │ ├── Exchange.tsx │ │ │ ├── Exclamation.tsx │ │ │ ├── Expand.tsx │ │ │ ├── ExternalLink.tsx │ │ │ ├── Eye.tsx │ │ │ ├── EyeClosed.tsx │ │ │ ├── FacebookFill.tsx │ │ │ ├── Fil.tsx │ │ │ ├── File.tsx │ │ │ ├── Filter.tsx │ │ │ ├── FilterAlt.tsx │ │ │ ├── FirebaseLogo.tsx │ │ │ ├── Frown.tsx │ │ │ ├── Gas.tsx │ │ │ ├── Gift.tsx │ │ │ ├── GiftOpen.tsx │ │ │ ├── Github.tsx │ │ │ ├── Gmail.tsx │ │ │ ├── Google.tsx │ │ │ ├── Grid.tsx │ │ │ ├── HandCoin.tsx │ │ │ ├── Heart.tsx │ │ │ ├── HeartFilled.tsx │ │ │ ├── HelpCircle.tsx │ │ │ ├── Holders.tsx │ │ │ ├── Home.tsx │ │ │ ├── Image.tsx │ │ │ ├── Info.tsx │ │ │ ├── Instagram.tsx │ │ │ ├── Integration.tsx │ │ │ ├── Key.tsx │ │ │ ├── Layout.tsx │ │ │ ├── Learn.tsx │ │ │ ├── LifeRing.tsx │ │ │ ├── Lightbulb.tsx │ │ │ ├── Link.tsx │ │ │ ├── Linkedin.tsx │ │ │ ├── Linux.tsx │ │ │ ├── Liquidity.tsx │ │ │ ├── List.tsx │ │ │ ├── LockClosed.tsx │ │ │ ├── LockOpen.tsx │ │ │ ├── LockReset.tsx │ │ │ ├── LogIn.tsx │ │ │ ├── LogOut.tsx │ │ │ ├── MagicWand.tsx │ │ │ ├── Mail.tsx │ │ │ ├── Mastercard.tsx │ │ │ ├── Matic.tsx │ │ │ ├── Maximize.tsx │ │ │ ├── Medium.tsx │ │ │ ├── Menu.tsx │ │ │ ├── MessageCircle.tsx │ │ │ ├── MessageSquare.tsx │ │ │ ├── Metamask.tsx │ │ │ ├── MetamaskLined.tsx │ │ │ ├── Minimize.tsx │ │ │ ├── Minus.tsx │ │ │ ├── MinusCircle.tsx │ │ │ ├── Monitor.tsx │ │ │ ├── More.tsx │ │ │ ├── MoreVert.tsx │ │ │ ├── Network.tsx │ │ │ ├── NftCat.tsx │ │ │ ├── NoData.tsx │ │ │ ├── Off.tsx │ │ │ ├── Oneinch.tsx │ │ │ ├── Opensea.tsx │ │ │ ├── Overview.tsx │ │ │ ├── Paperclip.tsx │ │ │ ├── Pause.tsx │ │ │ ├── PauseCircle.tsx │ │ │ ├── Phone.tsx │ │ │ ├── PieChart.tsx │ │ │ ├── Pin.tsx │ │ │ ├── Play.tsx │ │ │ ├── PlayCricle.tsx │ │ │ ├── Playground.tsx │ │ │ ├── Plug.tsx │ │ │ ├── Plus.tsx │ │ │ ├── Pulse.tsx │ │ │ ├── Reddit.tsx │ │ │ ├── RedditFill.tsx │ │ │ ├── ReferenceApi.tsx │ │ │ ├── Reload.tsx │ │ │ ├── Roadmap.tsx │ │ │ ├── Rocket.tsx │ │ │ ├── RocketColored.tsx │ │ │ ├── Sandbox.tsx │ │ │ ├── Sandbox2.tsx │ │ │ ├── Save.tsx │ │ │ ├── Search.tsx │ │ │ ├── Send.tsx │ │ │ ├── Server.tsx │ │ │ ├── Share.tsx │ │ │ ├── ShareAlt.tsx │ │ │ ├── Shib.tsx │ │ │ ├── Shield.tsx │ │ │ ├── ShieldOff.tsx │ │ │ ├── Shopping.tsx │ │ │ ├── Slack.tsx │ │ │ ├── SleepyCat.tsx │ │ │ ├── Solana.tsx │ │ │ ├── SolanaColored.tsx │ │ │ ├── SpeedyNode.tsx │ │ │ ├── Star.tsx │ │ │ ├── Stars.tsx │ │ │ ├── StartFast.tsx │ │ │ ├── Streams.tsx │ │ │ ├── SushiSwap.tsx │ │ │ ├── Swap.tsx │ │ │ ├── Target.tsx │ │ │ ├── Telegram.tsx │ │ │ ├── TelegramFill.tsx │ │ │ ├── Testnet.tsx │ │ │ ├── TikTok.tsx │ │ │ ├── Token.tsx │ │ │ ├── TokenColored.tsx │ │ │ ├── Tokens.tsx │ │ │ ├── Toolbox.tsx │ │ │ ├── ToolboxAlt.tsx │ │ │ ├── Trending.tsx │ │ │ ├── TriangleDown.tsx │ │ │ ├── TriangleUp.tsx │ │ │ ├── Tv.tsx │ │ │ ├── Twitch.tsx │ │ │ ├── Twitter.tsx │ │ │ ├── TwitterOutline.tsx │ │ │ ├── Uni.tsx │ │ │ ├── Update.tsx │ │ │ ├── Usdc.tsx │ │ │ ├── Usdt.tsx │ │ │ ├── User.tsx │ │ │ ├── UserTeam.tsx │ │ │ ├── Video.tsx │ │ │ ├── Visa.tsx │ │ │ ├── Wallet.tsx │ │ │ ├── Web3Api.tsx │ │ │ ├── Webhook.tsx │ │ │ ├── Whale.tsx │ │ │ ├── Windows.tsx │ │ │ ├── Withdraw.tsx │ │ │ ├── Xrp.tsx │ │ │ ├── YellowBean.tsx │ │ │ ├── Youtube.tsx │ │ │ ├── YoutubeSchool.tsx │ │ │ └── index.ts │ │ │ ├── index.tsx │ │ │ ├── svg-template.js │ │ │ ├── svgr-config.json │ │ │ ├── svgs │ │ │ ├── NFTCat.svg │ │ │ ├── ada.svg │ │ │ ├── add-user.svg │ │ │ ├── airdrop.svg │ │ │ ├── alert-circle.svg │ │ │ ├── alert-triangle.svg │ │ │ ├── archive.svg │ │ │ ├── arrow-circle-down.svg │ │ │ ├── arrow-circle-left.svg │ │ │ ├── arrow-circle-right.svg │ │ │ ├── arrow-down-left.svg │ │ │ ├── arrow-down-right.svg │ │ │ ├── arrow-down.svg │ │ │ ├── arrow-left.svg │ │ │ ├── arrow-up-left.svg │ │ │ ├── arrow-up-right.svg │ │ │ ├── arrow-up.svg │ │ │ ├── arrow.svg │ │ │ ├── atomicApi.svg │ │ │ ├── avax.svg │ │ │ ├── balancer.svg │ │ │ ├── ban.svg │ │ │ ├── bar-chart.svg │ │ │ ├── bean-outline.svg │ │ │ ├── bean.svg │ │ │ ├── beans.svg │ │ │ ├── bell.svg │ │ │ ├── bin.svg │ │ │ ├── bit-bucket.svg │ │ │ ├── blue-bean.svg │ │ │ ├── bnb.svg │ │ │ ├── book.svg │ │ │ ├── btc.svg │ │ │ ├── calendar.svg │ │ │ ├── camera.svg │ │ │ ├── cart-bag.svg │ │ │ ├── cart.svg │ │ │ ├── cat.svg │ │ │ ├── chainlink.svg │ │ │ ├── chart.svg │ │ │ ├── check-circle-alt.svg │ │ │ ├── check-circle.svg │ │ │ ├── check-square.svg │ │ │ ├── check.svg │ │ │ ├── checkmark.svg │ │ │ ├── chest.svg │ │ │ ├── chevron-down.svg │ │ │ ├── chevron-left-2x.svg │ │ │ ├── chevron-left.svg │ │ │ ├── chevron-right-2x.svg │ │ │ ├── chevron-right.svg │ │ │ ├── chevron-up.svg │ │ │ ├── clock.svg │ │ │ ├── cloud.svg │ │ │ ├── cog.svg │ │ │ ├── compass.svg │ │ │ ├── contract.svg │ │ │ ├── copy.svg │ │ │ ├── coupon.svg │ │ │ ├── credit-card.svg │ │ │ ├── credit-card2.svg │ │ │ ├── cross-circle.svg │ │ │ ├── cross.svg │ │ │ ├── cube.svg │ │ │ ├── curve.svg │ │ │ ├── dai.svg │ │ │ ├── dapps.svg │ │ │ ├── data.svg │ │ │ ├── discord-outline.svg │ │ │ ├── discord.svg │ │ │ ├── discord2.svg │ │ │ ├── doge.svg │ │ │ ├── download-cloud.svg │ │ │ ├── download.svg │ │ │ ├── dribbble.svg │ │ │ ├── edit-alt.svg │ │ │ ├── edit.svg │ │ │ ├── erc-20.svg │ │ │ ├── eth-colored.svg │ │ │ ├── eth.svg │ │ │ ├── etherscan.svg │ │ │ ├── event.svg │ │ │ ├── exchange.svg │ │ │ ├── exclamation.svg │ │ │ ├── expand.svg │ │ │ ├── external-link.svg │ │ │ ├── eye-closed.svg │ │ │ ├── eye.svg │ │ │ ├── facebook-fill.svg │ │ │ ├── fil.svg │ │ │ ├── file.svg │ │ │ ├── filter-alt.svg │ │ │ ├── filter.svg │ │ │ ├── firebaseLogo.svg │ │ │ ├── frown.svg │ │ │ ├── gas.svg │ │ │ ├── gift-open.svg │ │ │ ├── gift.svg │ │ │ ├── github.svg │ │ │ ├── gmail.svg │ │ │ ├── google.svg │ │ │ ├── grid.svg │ │ │ ├── hand-coin.svg │ │ │ ├── heart-filled.svg │ │ │ ├── heart.svg │ │ │ ├── help-circle.svg │ │ │ ├── holders.svg │ │ │ ├── home.svg │ │ │ ├── image.svg │ │ │ ├── info.svg │ │ │ ├── instagram.svg │ │ │ ├── integration.svg │ │ │ ├── key.svg │ │ │ ├── layout.svg │ │ │ ├── learn.svg │ │ │ ├── life-ring.svg │ │ │ ├── lightbulb.svg │ │ │ ├── link.svg │ │ │ ├── linkedin.svg │ │ │ ├── linux.svg │ │ │ ├── liquidity.svg │ │ │ ├── list.svg │ │ │ ├── lock-closed.svg │ │ │ ├── lock-open.svg │ │ │ ├── lock-reset.svg │ │ │ ├── log-in.svg │ │ │ ├── log-out.svg │ │ │ ├── magic-wand.svg │ │ │ ├── mail.svg │ │ │ ├── mastercard.svg │ │ │ ├── matic.svg │ │ │ ├── maximize.svg │ │ │ ├── medium.svg │ │ │ ├── menu.svg │ │ │ ├── message-circle.svg │ │ │ ├── message-square.svg │ │ │ ├── metamask.svg │ │ │ ├── metamaskLined.svg │ │ │ ├── minimize.svg │ │ │ ├── minus-circle.svg │ │ │ ├── minus.svg │ │ │ ├── monitor.svg │ │ │ ├── more-vert.svg │ │ │ ├── more.svg │ │ │ ├── network.svg │ │ │ ├── no-data.svg │ │ │ ├── off.svg │ │ │ ├── oneinch.svg │ │ │ ├── opensea.svg │ │ │ ├── overview.svg │ │ │ ├── paperclip.svg │ │ │ ├── pause-circle.svg │ │ │ ├── pause.svg │ │ │ ├── phone.svg │ │ │ ├── pie-chart.svg │ │ │ ├── pin.svg │ │ │ ├── play-cricle.svg │ │ │ ├── play.svg │ │ │ ├── playground.svg │ │ │ ├── plug.svg │ │ │ ├── plus.svg │ │ │ ├── pulse.svg │ │ │ ├── reddit-fill.svg │ │ │ ├── reddit.svg │ │ │ ├── reference-api.svg │ │ │ ├── reload.svg │ │ │ ├── roadmap.svg │ │ │ ├── rocket-colored.svg │ │ │ ├── rocket.svg │ │ │ ├── sandbox.svg │ │ │ ├── sandbox2.svg │ │ │ ├── save.svg │ │ │ ├── search.svg │ │ │ ├── send.svg │ │ │ ├── server.svg │ │ │ ├── share-alt.svg │ │ │ ├── share.svg │ │ │ ├── shib.svg │ │ │ ├── shield-off.svg │ │ │ ├── shield.svg │ │ │ ├── shopping.svg │ │ │ ├── slack.svg │ │ │ ├── sleepyCat.svg │ │ │ ├── solana-colored.svg │ │ │ ├── solana.svg │ │ │ ├── speedyNode.svg │ │ │ ├── star.svg │ │ │ ├── stars.svg │ │ │ ├── start-fast.svg │ │ │ ├── streams.svg │ │ │ ├── sushi-swap.svg │ │ │ ├── swap.svg │ │ │ ├── target.svg │ │ │ ├── telegram-fill.svg │ │ │ ├── telegram.svg │ │ │ ├── testnet.svg │ │ │ ├── tik-tok.svg │ │ │ ├── token-colored.svg │ │ │ ├── token.svg │ │ │ ├── tokens.svg │ │ │ ├── toolbox-alt.svg │ │ │ ├── toolbox.svg │ │ │ ├── trending.svg │ │ │ ├── triangle-down.svg │ │ │ ├── triangle-up.svg │ │ │ ├── tv.svg │ │ │ ├── twitch.svg │ │ │ ├── twitter-outline.svg │ │ │ ├── twitter.svg │ │ │ ├── uni.svg │ │ │ ├── update.svg │ │ │ ├── usdc.svg │ │ │ ├── usdt.svg │ │ │ ├── user-team.svg │ │ │ ├── user.svg │ │ │ ├── video.svg │ │ │ ├── visa.svg │ │ │ ├── wallet.svg │ │ │ ├── web3api.svg │ │ │ ├── webhook.svg │ │ │ ├── whale.svg │ │ │ ├── windows.svg │ │ │ ├── withdraw.svg │ │ │ ├── xrp.svg │ │ │ ├── yellow-bean.svg │ │ │ ├── youtube-school.svg │ │ │ └── youtube.svg │ │ │ └── type.ts │ ├── tsconfig.json │ └── vite.config.ts ├── nextJs │ ├── CHANGELOG.md │ ├── package.json │ ├── project.json │ ├── src │ │ ├── css.module.scss.d.ts │ │ ├── index.ts │ │ ├── lib │ │ │ ├── Button │ │ │ │ ├── ButtonBase.tsx │ │ │ │ ├── ButtonOutline │ │ │ │ │ ├── Button.stories.tsx │ │ │ │ │ ├── ButtonOutline.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.scss │ │ │ │ ├── ButtonPrimary │ │ │ │ │ ├── Button.stories.tsx │ │ │ │ │ ├── ButtonPrimary.tsx │ │ │ │ │ ├── index.tsx │ │ │ │ │ └── styles.module.scss │ │ │ │ ├── index.tsx │ │ │ │ ├── styles.module.scss │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ └── styles │ │ │ ├── global.scss │ │ │ └── modules │ │ │ ├── _breakpoints.scss │ │ │ ├── _color.scss │ │ │ ├── _helpers.scss │ │ │ ├── _reset.scss │ │ │ └── _text.scss │ ├── tsconfig.json │ └── vite.config.ts ├── styles │ ├── CHANGELOG.md │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ └── lib │ │ │ ├── HexToRgb.ts │ │ │ ├── StyledElements.ts │ │ │ ├── breakpoints.ts │ │ │ ├── colors.ts │ │ │ ├── fonts.ts │ │ │ ├── index.ts │ │ │ ├── reset.ts │ │ │ └── rgbToHex.ts │ ├── tsconfig.json │ └── vite.config.ts ├── web3 │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── project.json │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── BlockNumber │ │ │ │ ├── BlockNumber.stories.tsx │ │ │ │ ├── BlockNumber.tsx │ │ │ │ └── index.tsx │ │ │ ├── Blockie │ │ │ │ ├── Blockie.stories.tsx │ │ │ │ ├── Blockie.styles.ts │ │ │ │ ├── Blockie.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── ConnectButton │ │ │ │ ├── ConnectButton.stories.tsx │ │ │ │ ├── ConnectButton.styles.ts │ │ │ │ ├── ConnectButton.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── ENSAvatar │ │ │ │ ├── ENSAvatar.stories.tsx │ │ │ │ ├── ENSAvatar.styles.ts │ │ │ │ ├── ENSAvatar.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── IPFSInput │ │ │ │ ├── IPFSInput.stories.tsx │ │ │ │ ├── IPFSInput.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── NFT │ │ │ │ ├── NFT.fetched.tsx │ │ │ │ ├── NFT.modal.tsx │ │ │ │ ├── NFT.stories.tsx │ │ │ │ ├── NFT.styles.ts │ │ │ │ ├── NFT.tsx │ │ │ │ ├── NFT.utils.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── NFTBalance │ │ │ │ ├── NFTBalance.stories.tsx │ │ │ │ ├── NFTBalance.styles.ts │ │ │ │ ├── NFTBalance.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── NativeBalance │ │ │ │ ├── NativeBalance.stories.tsx │ │ │ │ ├── NativeBalance.styles.ts │ │ │ │ ├── NativeBalance.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── SendTransaction │ │ │ │ ├── SendTransaction.stories.tsx │ │ │ │ ├── SendTransaction.tsx │ │ │ │ ├── example │ │ │ │ │ ├── VendingMachine.sol │ │ │ │ │ └── contractData.ts │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ ├── WalletModal │ │ │ │ ├── WalletIcons │ │ │ │ │ ├── MathWallet.tsx │ │ │ │ │ ├── Metamask.tsx │ │ │ │ │ ├── SafePal.tsx │ │ │ │ │ ├── TWT.tsx │ │ │ │ │ ├── TokenPocket.tsx │ │ │ │ │ └── WC.tsx │ │ │ │ ├── WalletModal.stories.tsx │ │ │ │ ├── WalletModal.styles.ts │ │ │ │ ├── WalletModal.tsx │ │ │ │ ├── config.ts │ │ │ │ ├── index.tsx │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ └── web3utils │ │ │ ├── decorators.tsx │ │ │ ├── formatters.ts │ │ │ ├── index.ts │ │ │ └── networks.ts │ ├── tsconfig.json │ └── vite.config.ts └── web3uikit │ ├── CHANGELOG.md │ ├── package.json │ ├── project.json │ ├── src │ └── index.ts │ ├── tsconfig.json │ └── vite.config.ts ├── plopfile.js ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── public └── mockServiceWorker.js ├── setup.ts ├── tsconfig.json └── vitest.config.ts /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.1.0/schema.json", 3 | "changelog": [ 4 | "@changesets/changelog-github", 5 | { "repo": "web3ui/web3uikit" } 6 | ], 7 | "commit": false, 8 | "fixed": [["web3uikit"]], 9 | "linked": [["@web3uikit/*"]], 10 | "access": "public", 11 | "baseBranch": "master", 12 | "updateInternalDependencies": "patch", 13 | "ignore": [] 14 | } 15 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | STORYBOOK_MORALIS_APPLICATION_ID= 2 | STORYBOOK_MORALIS_SERVER_URL= -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: 'Pull request' 3 | about: A new pull request 4 | --- 5 | 6 | ## New Pull Request 7 | 8 | ### Checklist 9 | 10 | 15 | 16 | - [ ] I am not disclosing a [vulnerability](https://github.com/MoralisWeb3/Moralis-JS-SDK/blob/main/SECURITY.md). 17 | - [ ] My code is conform the [code style](https://github.com/web3ui/web3uikit/blob/master/CONTRIBUTE.md) 18 | - [ ] I have made corresponding changes to the documentation 19 | - [ ] I have updated Typescript definitions when needed 20 | 21 | ### Issue Description 22 | 23 | 24 | 25 | Related issue: #`FILL_THIS_OUT` 26 | 27 | ### Solution Description 28 | 29 | 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | **/dist 3 | **/*.tsbuildinfo 4 | **/.DS_Store 5 | .env 6 | /storybook-static/ 7 | **/coverage 8 | **/.pnpm-store -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | public-hoist-pattern[]=*storybook* -------------------------------------------------------------------------------- /.plop/plop-templates/with-code-examples/index.tsx.hbs: -------------------------------------------------------------------------------- 1 | export { default as {{ name }} } from './{{ name }}'; 2 | export type { {{ getInterface name }} } from './types'; 3 | // above is boilerplate stuff 4 | // replace with your component & props 5 | -------------------------------------------------------------------------------- /.plop/plop-templates/with-no-code-examples/index.tsx.hbs: -------------------------------------------------------------------------------- 1 | export { default as {{ name }} } from './{{ name }}'; 2 | export type { {{ getInterface name }} } from './types'; -------------------------------------------------------------------------------- /.plop/plop-templates/with-no-code-examples/types.ts.hbs: -------------------------------------------------------------------------------- 1 | export interface {{ getInterface name }} {} 2 | -------------------------------------------------------------------------------- /.plop/plop-templates/with-no-code-examples/{{ name }}.stories.tsx.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import {{ name }} from './{{ name }}'; 4 | 5 | export default { 6 | title: '{{ category }}/{{ name }}', 7 | component: {{ name }}, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = (args) => ( 11 | <{{ name }} {...args} /> 12 | ); 13 | 14 | export const Default = Template.bind({}); 15 | Default.args = {}; 16 | -------------------------------------------------------------------------------- /.plop/plop-templates/with-no-code-examples/{{ name }}.styles.ts.hbs: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import {resetCSS} from '@web3uikit/styles'; 3 | 4 | const DivStyled = styled.div` 5 | ${resetCSS}; 6 | `; 7 | 8 | DivStyled.displayName = '{{ name }}'; 9 | 10 | export default { 11 | DivStyled, 12 | }; -------------------------------------------------------------------------------- /.plop/plop-templates/with-no-code-examples/{{ name }}.test.tsx.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { composeStories } from '@storybook/testing-react'; 4 | import * as stories from './{{ name }}.stories'; 5 | 6 | const { Default } = composeStories(stories); 7 | test('Renders - {{ name }} component', () => { 8 | const { baseElement } = render(); 9 | 10 | expect(baseElement).toBeTruthy(); 11 | }); 12 | -------------------------------------------------------------------------------- /.plop/plop-templates/with-no-code-examples/{{ name }}.tsx.hbs: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { {{ getInterface name }} } from './types'; 3 | import styles from './{{ name }}.styles' 4 | 5 | const { DivStyled } = styles; 6 | 7 | export const {{ name }}: React.FC<{{ getInterface name }}> = () => { 8 | return ( 9 | 13 | 14 | ); 15 | 16 | }; 17 | 18 | export default {{ name }}; 19 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .plop 2 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 4, 4 | "useTabs": false, 5 | "trailingComma": "all", 6 | "singleQuote": true, 7 | "semi": true, 8 | "quoteProps": "consistent", 9 | "arrowParens": "always" 10 | } 11 | -------------------------------------------------------------------------------- /.storybook/manager.js: -------------------------------------------------------------------------------- 1 | import { addons } from '@storybook/addons'; 2 | import theme from './theme'; 3 | 4 | addons.setConfig({ 5 | theme, 6 | }); 7 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.storybook/theme.js: -------------------------------------------------------------------------------- 1 | import { create } from '@storybook/theming'; 2 | import logo from './assets/Moralis-Web3-UI-kit.svg'; 3 | 4 | export default create({ 5 | base: 'light', 6 | brandTitle: 'Web3 Ui Kit', 7 | brandUrl: 'https://github.com/web3ui/web3uikit', 8 | brandImage: logo, 9 | }); 10 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | "**/.git": true, 4 | "**/.gitkeep": true, 5 | "**/node_modules": true 6 | }, 7 | "prettier.configPath": ".prettierrc", 8 | "editor.defaultFormatter": "esbenp.prettier-vscode", 9 | "editor.formatOnSave": true, 10 | "editor.codeActionsOnSave": { 11 | "source.fixAll.eslint": true 12 | }, 13 | "eslint.rules.customizations": [{ "rule": "*", "severity": "error" }], 14 | "scss.lint.unknownAtRules": "ignore", 15 | "typescript.tsdk": "./node_modules/typescript/lib", 16 | "svg.preview.background": "dark-transparent", 17 | "cSpell.words": ["blockie", "Blockies", "moralis", "testid"] 18 | } 19 | -------------------------------------------------------------------------------- /apps/example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Web3uikit 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /apps/example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@apps/example", 3 | "version": "0.0.1", 4 | "private": true, 5 | "sideEffects": false, 6 | "main": "./src/index.tsx", 7 | "module": "./src/index.tsx", 8 | "scripts": { 9 | "start:dev": "vite", 10 | "build": "vite build", 11 | "analyze": "source-map-explorer 'dist/assets/*.js'" 12 | }, 13 | "dependencies": { 14 | "web3uikit": "*", 15 | "react": "^18.0.0", 16 | "react-dom": "^18.0.0", 17 | "react-moralis": "^1.3.5", 18 | "react-router-dom": "^6.3.0", 19 | "source-map-explorer": "*" 20 | }, 21 | "devDependencies": { 22 | "@web3uikit/config": "*" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /apps/example/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "apps/example", 3 | "sourceRoot": "apps/example/src", 4 | "projectType": "application", 5 | "targets": { 6 | "version": { 7 | "executor": "@jscutlery/semver:version", 8 | "options": { 9 | "postTargets": ["@web3uikit/core:publish", "@web3uikit/core:github"] 10 | }, 11 | "projects": "dependencies" 12 | }, 13 | "github": { 14 | "executor": "@jscutlery/semver:github", 15 | "options": { 16 | "tag": "${tag}", 17 | "notes": "${notes}" 18 | } 19 | }, 20 | "publish": { 21 | "executor": "ngx-deploy-npm:deploy", 22 | "options": { 23 | "access": "public" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /apps/example/src/bootstrap.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react'; 2 | import { createRoot } from 'react-dom/client'; 3 | import { BrowserRouter } from 'react-router-dom'; 4 | import { App } from '.'; 5 | import { MoralisProvider } from 'react-moralis'; 6 | import { NotificationProvider } from 'web3uikit'; 7 | const rootElement = document.getElementById('root'); 8 | if (!rootElement) throw new Error('Failed to find the root element'); 9 | const MORALIS_APP_ID = 'Ee6dXw6BMrIwvZCToiliDH2qZaIipi1RIN2ODI3v'; 10 | const MORALIS_SERVER_URL = 'https://inlxtebatbqn.usemoralis.com:2053/server'; 11 | 12 | const root = createRoot(rootElement); 13 | root.render( 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | , 23 | ); 24 | -------------------------------------------------------------------------------- /apps/example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@web3uikit/config/tsconfig.ui.json", 3 | "compilerOptions": { 4 | "rootDir": "src" 5 | }, 6 | "include": ["src"] 7 | } 8 | -------------------------------------------------------------------------------- /nx.json: -------------------------------------------------------------------------------- 1 | { 2 | "npmScope": "web3uikit", 3 | "affected": { 4 | "defaultBase": "master" 5 | }, 6 | "cli": { 7 | "defaultCollection": "@nrwl/workspace" 8 | }, 9 | "implicitDependencies": { 10 | "package.json": { 11 | "dependencies": "*", 12 | "devDependencies": "*" 13 | }, 14 | ".eslintrc.json": "*" 15 | }, 16 | "tasksRunnerOptions": { 17 | "default": { 18 | "runner": "nx/tasks-runners/default", 19 | "options": { 20 | "cacheableOperations": ["build", "test"] 21 | } 22 | } 23 | }, 24 | "targetDependencies": { 25 | "build": [ 26 | { 27 | "target": "build", 28 | "projects": "dependencies" 29 | } 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/config/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @web3uikit/config 2 | 3 | ## 0.1.2 4 | 5 | ### Patch Changes 6 | 7 | - a30ab4db: Fix publish action 8 | 9 | ## 0.1.1 10 | 11 | ### Patch Changes 12 | 13 | - release 14 | -------------------------------------------------------------------------------- /packages/config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web3uikit/config", 3 | "version": "0.1.2", 4 | "sideEffects": false, 5 | "devDependencies": { 6 | "@types/node": "^17.0.36", 7 | "@vitejs/plugin-react": "^1.3.2", 8 | "vite": "^2.9.9", 9 | "vite-plugin-dts": "^1.2.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/config/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "declaration": true, 5 | "declarationDir": "lib", 6 | "declarationMap": true, 7 | "esModuleInterop": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "module": "CommonJS", 10 | "moduleResolution": "node", 11 | "noFallthroughCasesInSwitch": true, 12 | "noImplicitOverride": true, 13 | "noUncheckedIndexedAccess": true, 14 | "resolveJsonModule": true, 15 | "skipLibCheck": true, 16 | "sourceMap": true, 17 | "strict": true, 18 | "target": "ES2019" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /packages/config/tsconfig.ui.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "allowSyntheticDefaultImports": true, 6 | "isolatedModules": true, 7 | "jsx": "react-jsx", 8 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 9 | "module": "esnext", 10 | "target": "ESNext" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/config/vite.config.ts: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import { PluginOption } from 'vite'; 3 | import { UserConfigExport } from 'vite'; 4 | import dts from 'vite-plugin-dts'; 5 | 6 | /** 7 | * @param cwd 8 | * @param external packages as peer dependencies 9 | */ 10 | const config = (cwd: string, external?: string[]): UserConfigExport => { 11 | const cfg: UserConfigExport = { 12 | root: cwd, 13 | plugins: [ 14 | react() as PluginOption, 15 | dts({ entryRoot: cwd + '/src', outputDir: cwd + '/dist' }), 16 | ], 17 | build: { 18 | emptyOutDir: true, 19 | lib: { 20 | entry: cwd + '/src/index.ts', 21 | fileName: 'index', 22 | formats: ['es'], 23 | }, 24 | outDir: cwd + '/dist', 25 | rollupOptions: { 26 | external, 27 | }, 28 | }, 29 | }; 30 | return cfg; 31 | }; 32 | export default config; 33 | -------------------------------------------------------------------------------- /packages/core/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "packages/core", 3 | "sourceRoot": "packages/core/src", 4 | "projectType": "library", 5 | "targets": { 6 | "version": { 7 | "executor": "@jscutlery/semver:version", 8 | "options": { 9 | "postTargets": ["@web3uikit/core:publish", "@web3uikit/core:github"] 10 | }, 11 | "projects": "dependencies" 12 | }, 13 | "github": { 14 | "executor": "@jscutlery/semver:github", 15 | "options": { 16 | "tag": "${tag}", 17 | "notes": "${notes}" 18 | } 19 | }, 20 | "publish": { 21 | "executor": "ngx-deploy-npm:deploy", 22 | "options": { 23 | "access": "public" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/core/src/IconsGallery/Icon.test.tsx: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import * as Icons from '@web3uikit/icons'; 3 | import { test, expect } from 'vitest'; 4 | import React from 'react'; 5 | const testIconId = 'test-icon'; 6 | import '@testing-library/jest-dom'; 7 | 8 | Object.values(Icons).forEach((Icon, index) => { 9 | test(`Renders - ${Icon.name} Icon`, () => { 10 | render(); 11 | const element = screen.getByTestId(testIconId); 12 | expect(element).not.toBeNull(); 13 | expect(element.getAttribute('aria-hidden')).toBe('true'); 14 | expect(element.getAttribute('height')).toBe('1em'); 15 | expect(element.getAttribute('width')).toBe('1em'); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /packages/core/src/IconsGallery/IconGallery.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentStory } from '@storybook/react'; 2 | import { NotificationProvider } from '../lib'; 3 | import IconsGallery from './IconGallery'; 4 | 5 | export default { 6 | title: '8.Icons/Gallery', 7 | component: IconsGallery, 8 | } as unknown; 9 | 10 | const Template: ComponentStory = (args) => { 11 | return ( 12 | 13 | 14 | 15 | ); 16 | }; 17 | 18 | export const Gallery = Template.bind({}); 19 | -------------------------------------------------------------------------------- /packages/core/src/IconsGallery/IconGallery.styles.ts: -------------------------------------------------------------------------------- 1 | import { color } from '@web3uikit/styles'; 2 | import styled from 'styled-components'; 3 | 4 | const StyledDivGallery = styled.div` 5 | display: flex; 6 | flex-direction: column; 7 | align-items: center; 8 | `; 9 | 10 | const StyledDivGrid = styled.div` 11 | max-width: 95vw; 12 | margin: auto; 13 | display: grid; 14 | gap: 1rem; 15 | align-content: space-around; 16 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 17 | `; 18 | 19 | const StyledDivIcon = styled.div` 20 | border: 1px solid grey; 21 | position: relative; 22 | margin: auto; 23 | padding: 50px; 24 | border-radius: 20px; 25 | transition: all 0.1s linear; 26 | &:hover { 27 | background-color: ${color.aero10}; 28 | } 29 | `; 30 | 31 | export { StyledDivGallery, StyledDivIcon, StyledDivGrid }; 32 | -------------------------------------------------------------------------------- /packages/core/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib'; 2 | -------------------------------------------------------------------------------- /packages/core/src/interfaces/color.ts: -------------------------------------------------------------------------------- 1 | import { color } from '@web3uikit/styles'; 2 | 3 | export type Colors = keyof typeof color; 4 | -------------------------------------------------------------------------------- /packages/core/src/lib/Accordion/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Accordion } from './Accordion'; 2 | export type { AccordionProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Avatar/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Avatar } from './Avatar'; 2 | export type { AvatarProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Badge/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Badge } from './Badge'; 2 | export type { BadgeProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Badge/types.ts: -------------------------------------------------------------------------------- 1 | import { TypographyProps, variantType } from '../Typography/types'; 2 | import { TThemeName } from '@web3uikit/styles'; 3 | 4 | export type colorState = 'normal' | 'success' | 'warning' | 'danger' | 'custom'; 5 | 6 | type TTextProps = Pick< 7 | TypographyProps, 8 | 'color' | 'italic' | 'monospace' | 'weight' 9 | >; 10 | export interface BadgeProps extends TTextProps { 11 | /** 12 | * background color used when state is set to custom 13 | */ 14 | bgColor?: string; 15 | 16 | /** 17 | * set custom radius of the badge 18 | */ 19 | borderRadius?: number; 20 | 21 | /** 22 | * Set the initial state for the Badge component 23 | */ 24 | state?: colorState; 25 | 26 | /** 27 | * Add Text to display in the Badge 28 | */ 29 | text: string; 30 | 31 | /** 32 | * Variant of text style 33 | */ 34 | textVariant?: variantType; 35 | 36 | /** 37 | * set a theme for the component 38 | */ 39 | theme?: TThemeName; 40 | } 41 | -------------------------------------------------------------------------------- /packages/core/src/lib/BannerStrip/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as BannerStrip } from './BannerStrip'; 2 | export type { IBannerStripProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Breadcrumbs/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Breadcrumbs } from './Breadcrumbs'; 2 | export type { BreadcrumbsProps, Route } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Breadcrumbs/types.ts: -------------------------------------------------------------------------------- 1 | import { ListItemStyled } from './Breadcrumbs.styles'; 2 | 3 | // Route 4 | export interface Route { 5 | breadcrumb: React.ReactNode; 6 | icon?: React.ReactNode; 7 | path: string; 8 | } 9 | 10 | export interface BreadcrumbsProps { 11 | /** 12 | * The color of text 13 | */ 14 | theme?: string; 15 | 16 | /** 17 | * CSS style props 18 | */ 19 | style?: React.CSSProperties; 20 | 21 | /** 22 | * Current location for displaying active breadcrumb 23 | */ 24 | currentLocation?: string; 25 | 26 | /** 27 | * Routes 28 | */ 29 | routes: Route[]; 30 | 31 | /** 32 | * Separator for breadcrumbs 33 | */ 34 | separator?: React.ReactNode; 35 | } 36 | 37 | export interface IBreadcrumbs extends React.FC { 38 | /** 39 | * The element of links list 40 | */ 41 | Item: typeof ListItemStyled; 42 | // Separator: typeof BreadcrumbSeparator; 43 | } 44 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonBase/styles/ButtonBaseSize.styles.tsx: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | 3 | const sizeSmall = css` 4 | border-radius: 20px; 5 | font-size: 14px; 6 | padding: 0 16px; 7 | `; 8 | 9 | const sizeRegular = css` 10 | font-size: 14px; 11 | padding: 2px 14px; 12 | `; 13 | 14 | const sizeLarge = css` 15 | padding: 6px 22px; 16 | `; 17 | 18 | const sizeXL = css` 19 | padding: 16px 24px; 20 | `; 21 | 22 | const getSizeStyles = (size: string) => { 23 | switch (size) { 24 | case 'large': 25 | return sizeLarge; 26 | case 'small': 27 | return sizeSmall; 28 | case 'xl': 29 | return sizeXL; 30 | default: 31 | return sizeRegular; 32 | } 33 | }; 34 | 35 | export default { 36 | getSizeStyles, 37 | }; 38 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonColored/ButtonColored.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../types'; 2 | import styles from './ButtonColored.styles'; 3 | 4 | const { ButtonColoredStyled } = styles; 5 | 6 | const ButtonColored: React.FC = ({ 7 | color, 8 | ...props 9 | }: ButtonProps) => ; 10 | 11 | export default ButtonColored; 12 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonCustom/ButtonCustom.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../types'; 2 | import styles from './ButtonCustom.styles'; 3 | 4 | const { ButtonCustomStyled } = styles; 5 | 6 | const ButtonCustom: React.FC = ({ 7 | customize, 8 | ...props 9 | }: ButtonProps) => { 10 | return ; 11 | }; 12 | 13 | export default ButtonCustom; 14 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonMoneyPrimary/ButtonMoneyPrimary.styles.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ButtonBase from '../ButtonBase/ButtonBase'; 3 | import { color } from '@web3uikit/styles'; 4 | 5 | const ButtonMoneyPrimaryStyled = styled(ButtonBase)` 6 | background-color: ${color.mint50}; 7 | border: 1px solid ${color.mint50}; 8 | color: ${color.white}; 9 | 10 | :hover { 11 | background-color: ${color.mint53}; 12 | } 13 | 14 | :active { 15 | outline:none; 16 | transform:translateY(2px); 17 | } 18 | 19 | :focus { 20 | border-color:${color.mint10}; 21 | } 22 | 23 | svg { 24 | fill: ${color.white}; 25 | } 26 | `; 27 | 28 | export default { 29 | ButtonMoneyPrimaryStyled, 30 | }; 31 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonMoneyPrimary/ButtonMoneyPrimary.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../types'; 2 | import styles from './ButtonMoneyPrimary.styles'; 3 | 4 | const { ButtonMoneyPrimaryStyled } = styles; 5 | 6 | const ButtonMoneyPrimary: React.FC = ({ ...props }: ButtonProps) => ( 7 | 8 | ); 9 | 10 | export default ButtonMoneyPrimary; 11 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonOutline/ButtonOutline.styles.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ButtonBase from '../ButtonBase/ButtonBase'; 3 | import { color, gradientColors } from '@web3uikit/styles'; 4 | 5 | const ButtonOutlineStyled = styled(ButtonBase)` 6 | background-color: ${color.white}; 7 | border-color: ${color.navy20}; 8 | color: ${color.navy40}; 9 | 10 | :hover { 11 | background-color: ${gradientColors.beauBlue}; 12 | border-color: transparent; 13 | color: ${color.navy40}; 14 | 15 | svg { 16 | color: ${color.navy40}; 17 | } 18 | } 19 | 20 | :active { 21 | box-shadow: 0px 0px 0px 2px ${color.blue70}; 22 | } 23 | 24 | :focus { 25 | box-shadow: 0px 0px 0px 2px ${color.navy30}; 26 | } 27 | 28 | svg { 29 | color: ${color.navy40}; 30 | } 31 | `; 32 | 33 | export default { 34 | ButtonOutlineStyled, 35 | }; 36 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonOutline/ButtonOutline.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../types'; 2 | import styles from './ButtonOutline.styles'; 3 | 4 | const { ButtonOutlineStyled } = styles; 5 | 6 | const ButtonOutline: React.FC = ({ ...props }: ButtonProps) => ( 7 | 8 | ); 9 | 10 | export default ButtonOutline; 11 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonPrimary/ButtonPrimary.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../types'; 2 | import styles from './ButtonPrimary.styles'; 3 | 4 | const { ButtonPrimaryStyled } = styles; 5 | 6 | const ButtonPrimary: React.FC = ({ ...props }: ButtonProps) => ( 7 | 8 | ); 9 | 10 | export default ButtonPrimary; 11 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonSecondary/ButtonSecondary.styles.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ButtonBase from '../ButtonBase/ButtonBase'; 3 | import { color } from '@web3uikit/styles'; 4 | 5 | const ButtonSecondaryStyled = styled(ButtonBase)` 6 | background-color: ${color.aero10}; 7 | border-color: ${color.aero10}; 8 | color: ${color.navy40}; 9 | 10 | :active { 11 | border-color: ${color.navy40}; 12 | } 13 | 14 | :focus { 15 | box-shadow: 0px 0px 0px 2px ${color.navy30}; 16 | } 17 | 18 | svg { 19 | fill: ${color.navy40}; 20 | } 21 | `; 22 | 23 | export default { 24 | ButtonSecondaryStyled, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonSecondary/ButtonSecondary.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../types'; 2 | import styles from './ButtonSecondary.styles'; 3 | 4 | const { ButtonSecondaryStyled } = styles; 5 | 6 | const ButtonSecondary: React.FC = ({ ...props }: ButtonProps) => ( 7 | 8 | ); 9 | 10 | export default ButtonSecondary; 11 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonTranslucent/ButtonTranslucent.styles.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ButtonBase from '../ButtonBase/ButtonBase'; 3 | import { color, getShade } from '@web3uikit/styles'; 4 | 5 | const ButtonTranslucentStyled = styled(ButtonBase)` 6 | background-color: ${getShade('dark', 20)}; 7 | color: ${color.white}; 8 | 9 | :active { 10 | border: 2px solid transparent; 11 | } 12 | 13 | :focus { 14 | box-shadow: 0px 0px 0px 2px ${color.navy30}; 15 | } 16 | 17 | svg { 18 | fill: ${color.white}; 19 | } 20 | `; 21 | 22 | export default { 23 | ButtonTranslucentStyled, 24 | }; 25 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/ButtonTranslucent/ButtonTranslucent.tsx: -------------------------------------------------------------------------------- 1 | import { ButtonProps } from '../types'; 2 | import styles from './ButtonTranslucent.styles'; 3 | 4 | const { ButtonTranslucentStyled } = styles; 5 | 6 | const ButtonTranslucent: React.FC = ({ 7 | ...props 8 | }: ButtonProps) => ; 9 | 10 | export default ButtonTranslucent; 11 | -------------------------------------------------------------------------------- /packages/core/src/lib/Button/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Button } from './Button'; 2 | export type { ButtonProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Card/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Card } from './Card'; 2 | export type { CardProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/ChainSelector/index.ts: -------------------------------------------------------------------------------- 1 | export { default as ChainSelector } from './ChainSelector'; 2 | export type { IChainSelectorProps,chainIdType } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/ChainSelector/types.ts: -------------------------------------------------------------------------------- 1 | export interface IChainSelectorProps { 2 | IsMultipleAllowed: boolean; 3 | providers: OptionType[]; 4 | setValue: (value: DappConfig[]) => void; 5 | values: DappConfig[]; 6 | 7 | /** 8 | * prevents the use of networks 9 | * with the same name 10 | */ 11 | isCompatibilityChecked?: boolean; 12 | } 13 | 14 | export type OptionType = { 15 | chain?: string; 16 | chainId: string; 17 | name?: string; 18 | network?: string; 19 | }; 20 | 21 | export type DappConfig = { 22 | chainId: string; 23 | maxRecordsPerCategory?: number; 24 | userSync?: boolean; 25 | }; 26 | 27 | export type chainIdType = 28 | | '0x1' 29 | | '0x13881' 30 | | '0x152' 31 | | '0x19' 32 | | '0x2a' 33 | | '0x3' 34 | | '0x38' 35 | | '0x4' 36 | | '0x5' 37 | | '0x539' 38 | | '0x61' 39 | | '0x66eeb' 40 | | '0x89' 41 | | '0xa4b1' 42 | | '0xa869' 43 | | '0xa86a' 44 | | '0xfa'; 45 | -------------------------------------------------------------------------------- /packages/core/src/lib/Checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Checkbox } from './Checkbox'; 2 | export type { CheckboxProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/CodeArea/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as CodeArea } from './CodeArea'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/CopyButton/CopyButton.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { color, resetButtonCSS } from '@web3uikit/styles'; 3 | import { CopyButtonProps } from './types'; 4 | 5 | type TCopyButtonProps = Pick; 6 | 7 | export const ButtonStyled = styled.button` 8 | ${resetButtonCSS}; 9 | display: inline-block; 10 | vertical-align: sub; 11 | 12 | &:first-child { 13 | fill: ${color.blueGray50}; 14 | transition: fill 0.2s ease-out; 15 | } 16 | 17 | &:hover > svg { 18 | fill: ${color.navy40}; 19 | } 20 | `; 21 | -------------------------------------------------------------------------------- /packages/core/src/lib/CopyButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as CopyButton, useCopyToClipboard } from './CopyButton'; 2 | export type { CopyButtonProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/CopyButton/types.ts: -------------------------------------------------------------------------------- 1 | import { TCustomize } from '../../interfaces/customize'; 2 | 3 | export interface CopyButtonProps { 4 | fill?: string; 5 | iconSize?: number; 6 | onCopy?: (e?: React.BaseSyntheticEvent) => void; 7 | revertIn?: number; 8 | text?: string | number; 9 | hasTooltip?: boolean; 10 | customize?: TCustomize; 11 | } 12 | export interface CopyButtonIconProps { 13 | fill?: string; 14 | iconSize?: number; 15 | copied: boolean; 16 | } 17 | 18 | export type CopiedValue = string | null; 19 | export type CopyFn = (text: string) => Promise; 20 | -------------------------------------------------------------------------------- /packages/core/src/lib/Credentials/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Credentials } from './Credentials'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/CreditCard/CreditCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import LargeCreditCard from './LargeCreditCard'; 3 | import SmallCreditCard from './SmallCreditCard'; 4 | import { CreditCardProps } from './types'; 5 | 6 | const CreditCard: React.FC = ({ 7 | size = 'large', 8 | ...rest 9 | }: CreditCardProps) => { 10 | return size === 'large' ? ( 11 | 12 | ) : ( 13 | 14 | ); 15 | }; 16 | 17 | export default CreditCard; 18 | -------------------------------------------------------------------------------- /packages/core/src/lib/CreditCard/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as CreditCard } from './CreditCard'; 2 | export type { CreditCardProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/CryptoCards/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as CryptoCards } from './CryptoCards'; 2 | export type { CryptoCardProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/CryptoCards/types.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { TChainNames } from '../../interfaces/logo'; 3 | 4 | export interface CryptoCardProps { 5 | /** 6 | * The background color of the crypto card 7 | */ 8 | bgColor: string; 9 | 10 | /** 11 | * The text shown in the button 12 | */ 13 | btnText?: string; 14 | 15 | /** 16 | * The name of the blockchain 17 | */ 18 | chain: TChainNames; 19 | 20 | /** 21 | * The type of the chain / a subtitle below the chain name 22 | */ 23 | 24 | chainType: string; 25 | /** 26 | * A function that will be called if the button is clicked 27 | */ 28 | 29 | onClick: (event: React.MouseEvent) => void; 30 | 31 | /** 32 | * The type of settings icon 33 | */ 34 | settingsIcon?: React.ReactElement; 35 | } 36 | -------------------------------------------------------------------------------- /packages/core/src/lib/CryptoLogos/CryptoLogos.styles.tsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import { resetCSS } from '@web3uikit/styles'; 3 | import { chainType, CryptoLogoProps, sizeType } from './types'; 4 | import { chainLogoData } from '../../interfaces/logo'; 5 | 6 | const getBackground = (chain: chainType) => chainLogoData[chain].color; 7 | 8 | const getSize = (size?: sizeType) => css` 9 | height: ${size}; 10 | width: ${size}; 11 | `; 12 | 13 | const DivStyledCryptoLogo = styled.div` 14 | ${resetCSS}; 15 | ${(props) => getSize(props.size)} 16 | align-items: center; 17 | border-radius: 100%; 18 | box-sizing: border-box; 19 | display: flex; 20 | justify-content: center; 21 | overflow: hidden; 22 | position: relative; 23 | background: ${(props) => props?.bgColor || getBackground(props.chain)}; 24 | `; 25 | 26 | export default { DivStyledCryptoLogo }; 27 | -------------------------------------------------------------------------------- /packages/core/src/lib/CryptoLogos/CryptoLogos.tsx: -------------------------------------------------------------------------------- 1 | import Illustration from '../Illustrations/Illustration'; 2 | import { CryptoLogoProps } from './types'; 3 | import styles from './CryptoLogos.styles'; 4 | 5 | const { DivStyledCryptoLogo } = styles; 6 | 7 | const CryptoLogos: React.FC = ({ 8 | chain, 9 | size = '48px', 10 | bgColor, 11 | ...props 12 | }: CryptoLogoProps) => { 13 | return ( 14 | 21 | { 22 | 27 | } 28 | 29 | ); 30 | }; 31 | 32 | export default CryptoLogos; 33 | -------------------------------------------------------------------------------- /packages/core/src/lib/CryptoLogos/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as CryptoLogos } from './CryptoLogos'; 2 | export type { CryptoLogoProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/CryptoLogos/types.ts: -------------------------------------------------------------------------------- 1 | import { TChainNames, TWalletNames } from '../../interfaces/logo'; 2 | 3 | export interface CryptoLogoProps { 4 | /** 5 | * The background color of the crypto logo 6 | */ 7 | bgColor?: string; 8 | 9 | /** 10 | * The name of the blockchain 11 | */ 12 | chain: chainType; 13 | 14 | /** 15 | * The size of the component 16 | */ 17 | size?: sizeType; 18 | } 19 | 20 | export type chainType = TChainNames; 21 | 22 | export type sizeType = string | number; 23 | -------------------------------------------------------------------------------- /packages/core/src/lib/DatePicker/DatePicker.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { color, resetCSS } from '@web3uikit/styles'; 3 | export const SpanStyled = styled.span` 4 | ${resetCSS}; 5 | align-items: center; 6 | background-color: ${color.white}; 7 | border-radius: 50%; 8 | display: flex; 9 | height: 100%; 10 | justify-content: center; 11 | padding: 5px; 12 | pointer-events: none; 13 | position: absolute; 14 | right: 10px; 15 | top: 0; 16 | `; 17 | -------------------------------------------------------------------------------- /packages/core/src/lib/DatePicker/index.ts: -------------------------------------------------------------------------------- 1 | export { default as DatePicker } from './DatePicker'; 2 | export type { DatePickerProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Dropdown/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Dropdown } from './Dropdown'; 2 | export type { IDropdown } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Form/Form.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { color, fonts, resetCSS } from '@web3uikit/styles'; 3 | 4 | const H3Styled = styled.h3` 5 | ${resetCSS}; 6 | ${fonts.heading}; 7 | ${fonts.h3}; 8 | margin-bottom: 18px; 9 | `; 10 | 11 | const H4Styled = styled.h4` 12 | ${resetCSS}; 13 | ${fonts.heading}; 14 | ${fonts.h4}; 15 | margin-bottom: 12px; 16 | margin-top: 32px; 17 | `; 18 | 19 | const FormStyled = styled.form` 20 | ${resetCSS}; 21 | background-color: ${color.white}; 22 | border-radius: 16px; 23 | padding: 16px; 24 | 25 | .form-item + .form-item { 26 | margin-top: 30px; 27 | } 28 | 29 | > button[type='submit'], 30 | .customFooter { 31 | margin-top: 32px; 32 | } 33 | `; 34 | 35 | export default { 36 | FormStyled, 37 | H4Styled, 38 | H3Styled 39 | }; 40 | -------------------------------------------------------------------------------- /packages/core/src/lib/Form/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Form } from './Form'; 2 | export type { FormProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Grid/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Grid } from './Grid'; 2 | export type { IGridProps } from './types'; -------------------------------------------------------------------------------- /packages/core/src/lib/Hero/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Hero } from './Hero'; 2 | export type { IHeroProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/HideButton/HideButton.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 2 | 3 | import { HideButton } from '.'; 4 | 5 | export default { 6 | title: '4.UI/HideButton', 7 | component: HideButton, 8 | argTypes: { onToggle: { action: 'toggled' } }, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = (args) => ( 12 | 13 | ); 14 | 15 | export const Default = Template.bind({}); 16 | Default.args = {}; 17 | 18 | export const HiddenState = Template.bind({}); 19 | HiddenState.args = { isHidden: true }; 20 | 21 | export const WithTooltip = Template.bind({}); 22 | WithTooltip.args = { hasTooltip: true }; 23 | -------------------------------------------------------------------------------- /packages/core/src/lib/HideButton/HideButton.test.tsx: -------------------------------------------------------------------------------- 1 | import { composeStories } from '@storybook/testing-react'; 2 | import * as stories from './HideButton.stories'; 3 | import { render, screen } from '@testing-library/react'; 4 | import { test, expect, describe } from 'vitest'; 5 | 6 | const { Default, HiddenState } = composeStories(stories); 7 | 8 | export const testCompId = 'test-hide-button'; 9 | const iconTestId = 'test-icon'; 10 | test('Renders - HideButton Default', () => { 11 | render(); 12 | expect(screen.getByTestId(testCompId)).not.toBeNull(); 13 | expect(screen.getByTestId(iconTestId)?.textContent).toBe(`${'eye'} icon`); 14 | }); 15 | 16 | test('Renders - HideButton hidden state', () => { 17 | render(); 18 | expect(screen.getByTestId(testCompId)).not.toBeNull(); 19 | expect(screen.getByTestId(iconTestId)?.textContent).toBe('eye closed icon'); 20 | }); 21 | -------------------------------------------------------------------------------- /packages/core/src/lib/HideButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as HideButton } from './HideButton'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/HideButton/types.ts: -------------------------------------------------------------------------------- 1 | import { color } from '@web3uikit/styles'; 2 | import { TCustomize } from '../../interfaces/customize'; 3 | 4 | export interface IHideButtonProps { 5 | /** 6 | * The color of hide icon 7 | */ 8 | iconColor?: string | typeof color; 9 | 10 | /** 11 | * The size of hide icon 12 | */ 13 | iconSize?: number; 14 | 15 | /** 16 | * The hidden state info 17 | */ 18 | isHidden?: boolean; 19 | 20 | /** 21 | * Callback on toggle 22 | */ 23 | onToggle: () => void; 24 | 25 | /** 26 | * Show tooltip on icon 27 | */ 28 | hasTooltip?: boolean 29 | 30 | /** 31 | * Customize the tooltip 32 | */ 33 | customize?: TCustomize; 34 | } 35 | 36 | export interface IHideButtonIconProps { 37 | iconColor?: string | typeof color; 38 | iconSize?: number; 39 | isHidden?: boolean; 40 | } -------------------------------------------------------------------------------- /packages/core/src/lib/Illustrations/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Illustration } from './Illustration'; 2 | export type { IllustrationProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Info/Information.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 2 | import Information from './Information'; 3 | 4 | 5 | export default { 6 | title: '4.UI/Information', 7 | component: Information, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = (args) => { 11 | return ; 12 | }; 13 | 14 | export const Regular = Template.bind({}); 15 | Regular.args = { 16 | information: '1000 Mage', 17 | topic: 'Your Balance', 18 | }; 19 | -------------------------------------------------------------------------------- /packages/core/src/lib/Info/Information.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { color, fonts, resetCSS } from '@web3uikit/styles'; 3 | 4 | const DivStyled = styled.div` 5 | ${resetCSS}; 6 | ${fonts.text}; 7 | ${fonts.textBold}; 8 | background-color: ${color.white}; 9 | border-radius: 16px; 10 | border: 2px solid ${color.blue05}; 11 | display: grid; 12 | grid-gap: 5px; 13 | margin: 0; 14 | padding: 16px; 15 | width: 100%; 16 | `; 17 | 18 | const PStyledTopic = styled.p` 19 | color: ${color.navy40}; 20 | margin: 0; 21 | `; 22 | 23 | const PStyledInfo = styled.p` 24 | color: ${color.blue70}; 25 | font-size: 24px; 26 | margin: 0; 27 | `; 28 | 29 | export default { DivStyled, PStyledTopic, PStyledInfo }; 30 | -------------------------------------------------------------------------------- /packages/core/src/lib/Info/Information.test.tsx: -------------------------------------------------------------------------------- 1 | import { composeStories } from '@storybook/testing-react'; 2 | import * as stories from './Information.stories'; 3 | import { render, screen } from '@testing-library/react'; 4 | import { test, expect, describe } from 'vitest'; 5 | 6 | const { Regular } = composeStories(stories); 7 | 8 | const cardId = 'test-info'; 9 | const topicId = 'test-info-topic'; 10 | const infoId = 'test-info-info'; 11 | 12 | test('Renders - Information', () => { 13 | const topic = Regular?.args?.topic; 14 | const info = Regular?.args?.information; 15 | render(); 16 | expect(screen.getByTestId(cardId)).not.toBeNull(); 17 | expect(screen.getByTestId(topicId)?.textContent).toBe(topic); 18 | expect(screen.getByTestId(infoId)?.textContent).toBe(info); 19 | }); 20 | -------------------------------------------------------------------------------- /packages/core/src/lib/Info/Information.tsx: -------------------------------------------------------------------------------- 1 | import styles from './Information.styles'; 2 | import { InfoProps } from './types'; 3 | 4 | const { DivStyled, PStyledTopic, PStyledInfo } = styles; 5 | 6 | const Information: React.FC = ({ 7 | id, 8 | information, 9 | topic, 10 | ...props 11 | }: InfoProps) => { 12 | return ( 13 | 14 | {topic} 15 | 16 | {information} 17 | 18 | 19 | ); 20 | }; 21 | 22 | export default Information; 23 | -------------------------------------------------------------------------------- /packages/core/src/lib/Info/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Information } from './Information'; 2 | export type { InfoProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Info/types.ts: -------------------------------------------------------------------------------- 1 | export interface InfoProps { 2 | /** 3 | * set id of the info card 4 | */ 5 | id?: string; 6 | 7 | /** 8 | * set topic of information 9 | */ 10 | topic: string; 11 | 12 | /** 13 | * set information 14 | */ 15 | information: string; 16 | } 17 | -------------------------------------------------------------------------------- /packages/core/src/lib/Input/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Input } from './Input'; 2 | export type { InputProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/InputNew/atoms/LabelBase.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react'; 2 | import { Typography } from '../../Typography'; 3 | import { ILabelBaseProps } from './types'; 4 | import styles from './styles'; 5 | 6 | const { LabelStyled } = styles; 7 | 8 | const LabelBase: FC = ({ 9 | color, 10 | id, 11 | required, 12 | testid, 13 | text, 14 | typographyFontWeight, 15 | typographyVariant, 16 | ...props 17 | }) => { 18 | return ( 19 | 20 | 26 | {text} 27 | {required && '*'} 28 | 29 | 30 | ); 31 | }; 32 | 33 | export default LabelBase; 34 | -------------------------------------------------------------------------------- /packages/core/src/lib/InputNew/atoms/stories/LabelBase.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 2 | import LabelBase from '../LabelBase'; 3 | import { testLabelId } from '../values'; 4 | 5 | export default { 6 | title: '2.Forms/InputNew/atoms/LabelBase', 7 | component: LabelBase, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = (args) => ( 11 | 12 | ); 13 | 14 | export const LabelBaseDefault = Template.bind({}); 15 | LabelBaseDefault.args = { 16 | id: 'label-base', 17 | text: 'Labels are good for accessibility', 18 | }; 19 | LabelBaseDefault.storyName = 'Label Base'; 20 | 21 | export const LabelBaseRequired = Template.bind({}); 22 | LabelBaseRequired.args = { 23 | id: 'label-base', 24 | required: true, 25 | text: 'Required Label', 26 | }; 27 | LabelBaseRequired.storyName = 'Label Required'; 28 | -------------------------------------------------------------------------------- /packages/core/src/lib/InputNew/atoms/styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { color, fonts, resetCSS } from '@web3uikit/styles'; 3 | 4 | const InputStyled = styled.input` 5 | ${resetCSS}; 6 | ${fonts.text} 7 | background-color: ${color.white}; 8 | display: block; 9 | padding: 18px; 10 | pointer-events: ${(p) => (p.disabled ? 'none' : 'all')}; 11 | width: 100%; 12 | 13 | &::placeholder { 14 | color: ${color.gray40}; 15 | } 16 | 17 | &:-webkit-autofill, 18 | &:-webkit-autofill:hover, 19 | &:-webkit-autofill:focus, 20 | &:-webkit-autofill:active { 21 | transition: all 5000s ease-in-out 0s; 22 | } 23 | `; 24 | 25 | const LabelStyled = styled.label` 26 | box-sizing: border-box; 27 | display: block; 28 | padding: 0; 29 | `; 30 | 31 | export default { 32 | InputStyled, 33 | LabelStyled, 34 | }; 35 | -------------------------------------------------------------------------------- /packages/core/src/lib/InputNew/atoms/tests/LabelBase.test.tsx: -------------------------------------------------------------------------------- 1 | import * as stories from '../stories/LabelBase.stories'; 2 | import { expect, test } from 'vitest'; 3 | import { render, screen } from '@testing-library/react'; 4 | import { composeStories } from '@storybook/testing-react'; 5 | import { testLabelId } from '../values'; 6 | 7 | const { LabelBaseDefault, LabelBaseRequired } = composeStories(stories); 8 | 9 | test('Renders Input Base', () => { 10 | render(); 11 | const element: HTMLLabelElement = screen.getByTestId(testLabelId); 12 | expect(element).not.toBeNull(); 13 | expect(element.htmlFor).toBe(LabelBaseDefault.args?.id); 14 | expect(element.textContent).toBe(LabelBaseDefault.args?.text); 15 | }); 16 | 17 | test('Renders Input type with min and max', () => { 18 | render(); 19 | const element: HTMLLabelElement = screen.getByTestId(testLabelId); 20 | expect(element).not.toBeNull(); 21 | expect(element.textContent).toBe(`${LabelBaseRequired.args?.text}*`); 22 | }); 23 | -------------------------------------------------------------------------------- /packages/core/src/lib/InputNew/atoms/values.ts: -------------------------------------------------------------------------------- 1 | export const testInputId = 'test-input-base' as const; 2 | export const testLabelId = 'test-label-base' as const; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/InputNew/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as InputNew } from './Input'; 2 | export type { IInputProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/LinkTo/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as LinkTo } from './LinkTo'; 2 | export type { LinkToProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Loading/WaveLoaderStates.ts: -------------------------------------------------------------------------------- 1 | export const state1 = { 2 | ball0: false, 3 | ball1: true, 4 | ball2: true, 5 | ball3: false, 6 | }; 7 | export const state2 = { 8 | ball0: false, 9 | ball1: false, 10 | ball2: true, 11 | ball3: true, 12 | }; 13 | 14 | export const state3 = { 15 | ball0: true, 16 | ball1: false, 17 | ball2: false, 18 | ball3: true, 19 | }; 20 | 21 | export const state4 = { 22 | ball0: true, 23 | ball1: true, 24 | ball2: false, 25 | ball3: false, 26 | }; 27 | -------------------------------------------------------------------------------- /packages/core/src/lib/Loading/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Loading } from './Loading'; 2 | export type { ILoadingProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Loading/types.ts: -------------------------------------------------------------------------------- 1 | export interface ILoadingProps { 2 | // Font size of loading text, by default it is half the size of the loader 3 | fontSize?: number; 4 | 5 | // Where to place loaded text 6 | direction?: 'bottom' | 'right'; 7 | 8 | // Type of spinner 9 | spinnerType?: 'loader' | 'wave'; 10 | 11 | // Color of the spinner 12 | spinnerColor?: string; 13 | 14 | // The size of the spinner 15 | size?: number; 16 | 17 | // To load text with spinner 18 | text?: string; 19 | } 20 | -------------------------------------------------------------------------------- /packages/core/src/lib/Logo/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Logo } from './Logo'; 2 | export type { LogoProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Logo/types.ts: -------------------------------------------------------------------------------- 1 | export type Theme = 'icon' | 'default' | 'visa' | 'mastercard' | 'amex' | 'diners'; 2 | export type Color = 'white' | 'blue'; 3 | export type Size = 'small' | 'regular'; 4 | 5 | export interface LogoProps { 6 | /** 7 | * The logo theme 8 | */ 9 | theme: Theme; 10 | 11 | /** 12 | * The color of the Moralis logo 13 | */ 14 | color?: Color; 15 | 16 | /** 17 | * The size of the payment logo 18 | */ 19 | size?: Size; 20 | } 21 | -------------------------------------------------------------------------------- /packages/core/src/lib/Modal/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Modal } from './Modal'; 2 | export type { ModalProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/NewComp/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as NewComp } from './NewComp'; 2 | export type { NewCompProps } from './types'; 3 | // above is boilerplate stuff 4 | // replace with your component & props 5 | -------------------------------------------------------------------------------- /packages/core/src/lib/NftCard/NftCard.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { composeStories } from '@storybook/testing-react'; 4 | import * as stories from './NftCard.stories'; 5 | 6 | const { Default } = composeStories(stories); 7 | 8 | test('Renders - NftCard component', () => { 9 | const { baseElement } = render(); 10 | expect(baseElement).not.toBeNull(); 11 | }); 12 | -------------------------------------------------------------------------------- /packages/core/src/lib/NftCard/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as NftCard } from './NftCard'; 2 | export type { INftCardProps } from './types'; -------------------------------------------------------------------------------- /packages/core/src/lib/Notification/context.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | // @ts-ignore 4 | const NotificationContext = createContext(); 5 | 6 | export default NotificationContext; 7 | -------------------------------------------------------------------------------- /packages/core/src/lib/Notification/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Notification } from './Notification'; 2 | export type { NotificationProps,notifyType,IPosition } from './types'; 3 | export { default as NotificationProvider, useNotification } from './NotificationProvider'; 4 | -------------------------------------------------------------------------------- /packages/core/src/lib/Pagination/Pagination.stories.tsx: -------------------------------------------------------------------------------- 1 | import { action } from '@storybook/addon-actions'; 2 | import { useArgs } from '@storybook/addons'; 3 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 4 | import Pagination from './Pagination'; 5 | 6 | export default { 7 | title: '3.Layout/Pagination', 8 | component: Pagination, 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = (args) => { 12 | const [_, updateArgs] = useArgs(); 13 | const handleChange = (page: number) => { 14 | action('current page-')(page); 15 | updateArgs({ currentPage: page }); 16 | }; 17 | return ( 18 |
19 | 20 |
21 | ); 22 | }; 23 | 24 | export const Default = Template.bind({}); 25 | Default.args = { 26 | currentPage: 5, 27 | pageSize: 2, 28 | totalCount: 20, 29 | siblingCount: 2, 30 | }; 31 | -------------------------------------------------------------------------------- /packages/core/src/lib/Pagination/Pagination.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import { composeStories } from '@storybook/testing-react'; 4 | import * as stories from './Pagination.stories'; 5 | 6 | const { Default } = composeStories(stories); 7 | //TODO: add more tests 8 | test('Renders - Pagination component', () => { 9 | const { baseElement } = render(); 10 | 11 | expect(baseElement).toBeTruthy(); 12 | }); 13 | -------------------------------------------------------------------------------- /packages/core/src/lib/Pagination/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Pagination } from './Pagination'; 2 | export type { IPaginationProps } from './types'; -------------------------------------------------------------------------------- /packages/core/src/lib/Pagination/types.ts: -------------------------------------------------------------------------------- 1 | export interface IPaginationProps extends TUsePaginationProps { 2 | /** 3 | * callback function on page change 4 | */ 5 | onPageChange: (currPage: number) => void; 6 | } 7 | 8 | export type TUsePaginationProps = { 9 | /** 10 | * total length of data to be paginated 11 | */ 12 | totalCount: number; 13 | 14 | /** 15 | * number of elements shown in a single page 16 | */ 17 | pageSize: number; 18 | 19 | /** 20 | * number of elements shown on each side of active page 21 | */ 22 | siblingCount: number; 23 | 24 | /** 25 | * current active page 26 | */ 27 | currentPage: number; 28 | }; 29 | 30 | export interface IPaginationStyleProps { 31 | isActive: boolean; 32 | isDot?: boolean; 33 | } 34 | -------------------------------------------------------------------------------- /packages/core/src/lib/PlanCard/PlanCard.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 2 | import data from './mock'; 3 | import PlanCard from './PlanCard'; 4 | 5 | 6 | export default { 7 | title: '4.UI/PlanCard', 8 | component: PlanCard, 9 | argTypes: { 10 | onChange: { 11 | action: 'onChange value returned', 12 | }, 13 | }, 14 | } as ComponentMeta; 15 | 16 | const Template: ComponentStory = (args) => ( 17 |
23 | 24 |
25 | ); 26 | 27 | export const PlanCardStory = Template.bind({}); 28 | PlanCardStory.args = data.success; 29 | 30 | export const CurrentPlanStory = Template.bind({}); 31 | CurrentPlanStory.args = { ...data.success, isCurrentPlan: true }; 32 | -------------------------------------------------------------------------------- /packages/core/src/lib/PlanCard/index.ts: -------------------------------------------------------------------------------- 1 | export { default as PlanCard } from './PlanCard'; 2 | -------------------------------------------------------------------------------- /packages/core/src/lib/PopoverDropdown/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as PopoverDropdown } from './PopoverDropdown'; 2 | export type { IPopoverDropdownProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/PopoverElement/PopoverElement.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 2 | import { LogOut } from '@web3uikit/icons'; 3 | import { color } from '@web3uikit/styles'; 4 | import PopoverElement from './PopoverElement'; 5 | 6 | export default { 7 | title: '5.Popup/Popover Element', 8 | component: PopoverElement, 9 | argTypes: { onClick: { action: 'clicked' } }, 10 | } as ComponentMeta; 11 | 12 | const Template: ComponentStory = (args) => ( 13 | 14 | ); 15 | 16 | export const Default = Template.bind({}); 17 | Default.args = {}; 18 | 19 | export const Logout = Template.bind({}); 20 | Logout.args = { 21 | icon: , 22 | iconColor: color.red40, 23 | text: 'Logout', 24 | textColor: color.red40, 25 | }; 26 | -------------------------------------------------------------------------------- /packages/core/src/lib/PopoverElement/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as PopoverElement } from './PopoverElement'; 2 | export type { PopoverElementProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/ProgressBar/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as ProgressBar } from './ProgressBar'; 2 | export type { IProgressBarProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/ProgressBar/types.ts: -------------------------------------------------------------------------------- 1 | export interface IProgressBarProps { 2 | id?: string; 3 | name?: string; 4 | nameColor?: string; 5 | progressBarBgColor?: string; 6 | progressBarLineColor?: string; 7 | showInfo?: boolean; 8 | title?: string | JSX.Element; 9 | titleColor?: string; 10 | total: number; 11 | value: number; 12 | } 13 | -------------------------------------------------------------------------------- /packages/core/src/lib/Radios/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Radios } from './Radios'; 2 | export type { RadiosProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Row/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Row } from './Row'; 2 | export type { IRowProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Select/Select.tsx: -------------------------------------------------------------------------------- 1 | import { ISelectProps } from './types'; 2 | import OldSelect from './OldSelect/OldSelect'; 3 | import TraditionalSelect from './TraditionalSelect/TraditionalSelect'; 4 | import SelectBeta from './SelectBeta/SelectBeta'; 5 | 6 | const Select: React.FC = (props: ISelectProps) => { 7 | if (props.tryBeta) return ; 8 | return props.traditionalHTML5 ? ( 9 | 10 | ) : ( 11 | 12 | ); 13 | }; 14 | 15 | export default Select; 16 | -------------------------------------------------------------------------------- /packages/core/src/lib/Select/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Select } from './Select'; 2 | export type { OptionProps, ISelectProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Skeleton/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Skeleton } from './Skeleton'; 2 | export type { SkeletonProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Skeleton/types.ts: -------------------------------------------------------------------------------- 1 | export type Theme = 'image' | 'text' | 'subtitle'; 2 | 3 | export interface SkeletonProps { 4 | /** 5 | * Set the animation color for the 'shine' 6 | */ 7 | animationColor?: string; 8 | 9 | /** 10 | * Set the background color of the skeleton element 11 | */ 12 | backgroundColor?: string; 13 | 14 | /** 15 | * Border Radius of the element 16 | */ 17 | borderRadius?: string; 18 | 19 | /** 20 | * Height of the element 21 | */ 22 | height?: string; 23 | 24 | /** 25 | * Theme of the element 26 | */ 27 | theme: Theme; 28 | 29 | /** 30 | * Width of the element 31 | */ 32 | width?: string; 33 | } 34 | -------------------------------------------------------------------------------- /packages/core/src/lib/Slider/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Slider } from './Slider'; 2 | export type { ISliderProps } from './types'; 3 | 4 | -------------------------------------------------------------------------------- /packages/core/src/lib/Stepper/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Stepper } from './Stepper'; 2 | export type { StepperProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Table/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Table } from './Table'; 2 | export type { ITableProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Tabs/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as TabList } from './TabsList'; 2 | export { Tab } from './TabsList'; 3 | export type { ITabList, ITab } from './types'; 4 | -------------------------------------------------------------------------------- /packages/core/src/lib/Tag/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Tag } from './Tag'; 2 | export type { TagProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/TextArea/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as TextArea } from './TextArea'; 2 | export type { TextAreaProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Todo/Todo.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import type { TodoProps } from './types'; 3 | 4 | type TStyleProps = Pick; 5 | 6 | const DivStyled = styled.section` 7 | display: flex; 8 | gap: 16px; 9 | margin-bottom: 20px; 10 | flex-wrap: wrap; 11 | `; 12 | 13 | const DivStyledContent = styled.div` 14 | display: flex; 15 | flex-direction: ${({ fullWidth }) => (fullWidth ? 'column' : 'row')}; 16 | flex-wrap: wrap; 17 | gap: 16px; 18 | `; 19 | 20 | const SectionStyled = styled.section` 21 | border-radius: 16px; 22 | display: flex; 23 | flex-direction: column; 24 | padding: 16px; 25 | `; 26 | 27 | export default { 28 | DivStyled, 29 | DivStyledContent, 30 | SectionStyled, 31 | }; 32 | -------------------------------------------------------------------------------- /packages/core/src/lib/Todo/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Todo } from './Todo'; 2 | export type { TodoProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Toggle/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Toggle } from './Toggle'; 2 | export type { IToggleProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Tooltip/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Tooltip } from './Tooltip'; 2 | export type { TooltipProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Typography/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Typography } from './Typography'; 2 | export * from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Upload/Upload.stories.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 2 | import Upload from './Upload'; 3 | 4 | export default { 5 | title: '4.UI/Upload', 6 | component: Upload, 7 | argTypes: { 8 | onChange: { action: 'file uploaded' }, 9 | }, 10 | } as ComponentMeta; 11 | 12 | const Template: ComponentStory = (args) => ; 13 | 14 | export const TextOnly = Template.bind({}); 15 | TextOnly.args = { 16 | theme: 'textOnly', 17 | }; 18 | 19 | export const WithIcon = Template.bind({}); 20 | WithIcon.args = { 21 | theme: 'withIcon', 22 | }; 23 | 24 | export const CustomText = Template.bind({}); 25 | CustomText.args = { 26 | theme: 'withIcon', 27 | descriptionText: 'Only .jpeg files are accepted', 28 | acceptedFiles: 'image/jpeg', 29 | style: {} 30 | }; -------------------------------------------------------------------------------- /packages/core/src/lib/Upload/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Upload } from './Upload'; 2 | export type { IUploadProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/VerifyCode/VerifyCode.stories.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import VerifyCode from './VerifyCode'; 4 | 5 | export default { 6 | title: '2.Forms/VerifyCode', 7 | component: VerifyCode, 8 | } as ComponentMeta; 9 | 10 | const Template: ComponentStory = (args) => ( 11 | 12 | ); 13 | 14 | export const Default = Template.bind({}); 15 | 16 | export const Error = Template.bind({}); 17 | Error.args = { 18 | state: 'error', 19 | }; 20 | -------------------------------------------------------------------------------- /packages/core/src/lib/VerifyCode/VerifyCode.test.tsx: -------------------------------------------------------------------------------- 1 | import { composeStories } from '@storybook/testing-react'; 2 | import { render, screen, fireEvent } from '@testing-library/react'; 3 | import * as stories from './VerifyCode.stories'; 4 | import { test, expect, describe, vi } from 'vitest'; 5 | 6 | const { Default } = composeStories(stories); 7 | 8 | const testOnComplete = vi.fn(); 9 | 10 | describe('Test VerifyCode component', () => { 11 | test('renders the component', () => { 12 | render(); 13 | const element = screen.getByTestId('test-verify-code'); 14 | expect(element).not.toBeNull(); 15 | }); 16 | test('triggers the onComplete function', () => { 17 | render(); 18 | for (let i = 0; i < 5; i++) { 19 | const element = screen.getByTestId(`test-verify-code-input-${i}`); 20 | fireEvent.change(element, { target: { value: '1' } }); 21 | } 22 | expect(testOnComplete).toHaveBeenCalledTimes(1); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /packages/core/src/lib/VerifyCode/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as VerifyCode } from './VerifyCode'; 2 | export type { VerifyCodeProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/VerifyCode/types.ts: -------------------------------------------------------------------------------- 1 | export interface VerifyCodeProps { 2 | /** 3 | * On load first code input will be active. 4 | */ 5 | autoFocus?: boolean; 6 | 7 | /** 8 | * Number of code inputs 9 | */ 10 | length?: number; 11 | 12 | /** 13 | * onCompleted callback 14 | */ 15 | onCompleted?: (data: string) => void; 16 | 17 | /** 18 | * if input is not filled then this will be shown. (First character of this string will be taken) 19 | */ 20 | placeholder?: string; 21 | 22 | /** 23 | * Label for the component 24 | */ 25 | label?: string; 26 | 27 | /** 28 | * state of the code component 29 | */ 30 | state?: 'default' | 'error'; 31 | 32 | /** 33 | * error message to display on wrong input 34 | */ 35 | errorMessage?: string; 36 | } 37 | -------------------------------------------------------------------------------- /packages/core/src/lib/Widget/Widget.styles.tsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { color, fonts, resetCSS } from '@web3uikit/styles'; 3 | 4 | const DivStyled = styled.div` 5 | ${resetCSS}; 6 | background-color: ${color.white}; 7 | border: 1px solid ${color.navy20}; 8 | border-radius: 20px; 9 | display: flex; 10 | justify-content: space-between; 11 | padding: 32px; 12 | width: 100%; 13 | :first-child { 14 | :first-child { 15 | ${fonts.openSans}; 16 | font-weight: 400; 17 | } 18 | :nth-child(1) { 19 | ${fonts.openSans}; 20 | font-weight: 600; 21 | } 22 | } 23 | `; 24 | 25 | export default { 26 | DivStyled, 27 | }; 28 | -------------------------------------------------------------------------------- /packages/core/src/lib/Widget/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Widget } from './Widget'; 2 | export type { IWidgetProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/core/src/lib/Widget/types.ts: -------------------------------------------------------------------------------- 1 | export interface IWidgetProps { 2 | /** 3 | * title 4 | */ 5 | title: string; 6 | 7 | /** 8 | * information 9 | */ 10 | info: string; 11 | 12 | /** 13 | * children 14 | */ 15 | children?: JSX.Element | JSX.Element[]; 16 | 17 | /** 18 | * set if info is loading 19 | */ 20 | isLoading?: boolean; 21 | } 22 | -------------------------------------------------------------------------------- /packages/core/src/utils/const.ts: -------------------------------------------------------------------------------- 1 | export const mailToAddress = 'hello@moralis.io'; 2 | 3 | export const validateRegExp = { 4 | alphaNumeric: '[a-zA-Z0-9]', 5 | email: '^[^@s]+@[^@s]+.[^@s]+$', 6 | lettersOnly: '[A-Za-z]', 7 | numbersOnly: '[0-9]', 8 | telephoneNumber: '^(+d{1,2}s)?(?d{3})?[s.-]?d{3}[s.-]?d{4}$', 9 | }; 10 | 11 | export function escapeRegex(val: string) { 12 | return val.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); 13 | } 14 | -------------------------------------------------------------------------------- /packages/core/src/utils/depreciationWarning.ts: -------------------------------------------------------------------------------- 1 | const depreciatedWarning = (description: string) => { 2 | console.log('--------'); 3 | console.log('DEPRECIATION WARNING!'); 4 | console.log( 5 | `${description} has been depreciated, you should remove this from your code as it will soon be fully removed and will cause breaks in your app / dapp`, 6 | ); 7 | console.log( 8 | 'Thanks for using the kit, you can reach us anytime at Discord > Moralis DAO > web3uiKit', 9 | ); 10 | console.log('http://moralis.io/discord'); 11 | console.log('--------'); 12 | }; 13 | 14 | export default depreciatedWarning; 15 | -------------------------------------------------------------------------------- /packages/core/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@web3uikit/config/tsconfig.ui.json", 3 | "compilerOptions": { 4 | "rootDir": "src" 5 | }, 6 | "include": ["src"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/core/vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import { defineConfig, UserConfigExport } from 'vite'; 4 | import config from './node_modules/@web3uikit/config/vite.config'; 5 | 6 | export default defineConfig({ 7 | ...(config(__dirname, [ 8 | 'react', 9 | 'react-dom', 10 | 'react-router-dom', 11 | ]) as UserConfigExport), 12 | test: { 13 | globals: true, 14 | environment: 'jsdom', 15 | setupFiles: ['../../setup.ts'], 16 | coverage: { reporter: ['text', 'json', 'html'] }, 17 | }, 18 | }); 19 | -------------------------------------------------------------------------------- /packages/icons/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "packages/icons", 3 | "sourceRoot": "packages/icons/src", 4 | "projectType": "library", 5 | "targets": { 6 | "version": { 7 | "executor": "@jscutlery/semver:version", 8 | "options": { 9 | "postTargets": ["@web3uikit/icons:publish", "@web3uikit/icons:github"] 10 | }, 11 | "projects": "dependencies" 12 | }, 13 | "github": { 14 | "executor": "@jscutlery/semver:github", 15 | "options": { 16 | "tag": "${tag}", 17 | "notes": "${notes}" 18 | } 19 | }, 20 | "publish": { 21 | "executor": "ngx-deploy-npm:deploy", 22 | "options": { 23 | "access": "public" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/icons/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib'; 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './icons'; 2 | export type {TIconType} from './type'; -------------------------------------------------------------------------------- /packages/icons/src/lib/svg-template.js: -------------------------------------------------------------------------------- 1 | const comments = ` 2 | // Auto-generated file created by svgr-cli source svg-template.js 3 | // Run pnpm icons:create to update 4 | // Do not edit 5 | `; 6 | const importStatements = ` 7 | import { SVGProps } from 'react'; 8 | import { SVGRProps } from '../type'; 9 | `; 10 | 11 | const props = `({ 12 | title, 13 | titleId, 14 | isResponsive=false, 15 | style, 16 | ...props 17 | }: SVGProps & SVGRProps)`; 18 | 19 | const template = (variables, { tpl }) => { 20 | return tpl` 21 | ${comments} 22 | ${importStatements} 23 | 24 | const ${variables.componentName} = (${props}) => ( 25 | ${variables.jsx} 26 | ); 27 | ${variables.exports}; 28 | `; 29 | }; 30 | 31 | module.exports = template; 32 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgr-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript": true, 3 | "icon": true, 4 | "titleProp": true, 5 | "removeViewBox": false, 6 | "replaceAttrValues": {}, 7 | "svgProps": { 8 | "data-testid": "test-icon", 9 | "aria-hidden": "true", 10 | "style": "{isResponsive ? style : {flex:'none',...style} }" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/alert-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/archive.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-circle-down.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-circle-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-circle-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-down-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-down-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-up-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-up-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/avax.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/ban.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/bar-chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/bell.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/bin.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/bit-bucket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/bnb.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/book.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/btc.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/camera.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/cart-bag.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chainlink.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chart.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/check-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/check.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chevron-down.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chevron-left-2x.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chevron-left.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chevron-right-2x.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chevron-right.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/chevron-up.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/clock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/cloud.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/compass.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/credit-card.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/credit-card2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/cross-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/cube.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/download.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/edit.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/eth-colored.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/eth.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/exclamation.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/expand.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/external-link.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/facebook-fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/fil.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/file.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/filter-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/filter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/gmail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/google.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/grid.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/hand-coin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/heart-filled.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/help-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/image.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/info.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/layout.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/learn.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/life-ring.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/link.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/list.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/lock-reset.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/log-out.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/mastercard.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/matic.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/maximize.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/medium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/message-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/message-square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/minimize.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/minus-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/minus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/more-vert.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/more.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/network.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/off.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/paperclip.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/pause-circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/pause.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/phone.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/pin.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/play-cricle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/play.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/plug.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/plus.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/pulse.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/reload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/sandbox2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/save.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/send.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/server.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/shopping.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/solana-colored.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/solana.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/star.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/stars.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/target.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/telegram-fill.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/telegram.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/trending.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/triangle-down.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/triangle-up.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/tv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/twitch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/update.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/user.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/video.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/visa.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/windows.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/withdraw.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/icons/src/lib/svgs/xrp.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/icons/src/lib/type.ts: -------------------------------------------------------------------------------- 1 | import { SVGProps } from 'react'; 2 | 3 | export interface SVGRProps { 4 | title?: string; 5 | titleId?: string; 6 | isResponsive?: boolean; 7 | } 8 | 9 | export type TIconType = SVGProps & SVGRProps; 10 | -------------------------------------------------------------------------------- /packages/icons/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@web3uikit/config/tsconfig.ui.json", 3 | "compilerOptions": { 4 | "rootDir": "src" 5 | }, 6 | "include": ["src"], 7 | "exclude": ["src/lib/svg-template.js"] 8 | } 9 | -------------------------------------------------------------------------------- /packages/icons/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, UserConfigExport } from 'vite'; 2 | import config from './node_modules/@web3uikit/config/vite.config'; 3 | 4 | export default defineConfig({ 5 | ...(config(__dirname, ['react', 'react-dom']) as UserConfigExport), 6 | }); 7 | -------------------------------------------------------------------------------- /packages/nextJs/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "packages/nextJs", 3 | "sourceRoot": "packages/nextJs/src", 4 | "projectType": "library", 5 | "targets": { 6 | "version": { 7 | "executor": "@jscutlery/semver:version", 8 | "options": { 9 | "postTargets": [ 10 | "@web3uikit/nextJs:publish", 11 | "@web3uikit/nextJs:github" 12 | ] 13 | }, 14 | "projects": "dependencies" 15 | }, 16 | "github": { 17 | "executor": "@jscutlery/semver:github", 18 | "options": { 19 | "tag": "${tag}", 20 | "notes": "${notes}" 21 | } 22 | }, 23 | "publish": { 24 | "executor": "ngx-deploy-npm:deploy", 25 | "options": { 26 | "access": "public" 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/nextJs/src/css.module.scss.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.module.scss' { 2 | const classes: { [key: string]: string }; 3 | export default classes; 4 | } 5 | -------------------------------------------------------------------------------- /packages/nextJs/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib'; 2 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/ButtonOutline/ButtonOutline.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { FC } from 'react'; 3 | import { IButtonProps } from '../types'; 4 | import ButtonBase from '../ButtonBase'; 5 | import styles from './styles.module.scss'; 6 | 7 | const ButtonOutline: FC = ({ ...props }: IButtonProps) => { 8 | return ; 9 | }; 10 | 11 | export default ButtonOutline; 12 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/ButtonOutline/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as ButtonOutline } from './ButtonOutline'; 2 | export type { IButtonProps } from '../types'; 3 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/ButtonOutline/styles.module.scss: -------------------------------------------------------------------------------- 1 | @use '../../../styles/modules/color' as color; 2 | 3 | .outline { 4 | background-color: color.$color-white; 5 | border-color: color.$color-primary60; 6 | color: color.$color-primary30; 7 | &:hover { 8 | background-color: color.$color-primary70; 9 | } 10 | &:focus { 11 | border-color: color.$color-primary30; 12 | } 13 | &:active { 14 | background-color: color.$color-primary50; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/ButtonPrimary/ButtonPrimary.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | import { FC } from 'react'; 3 | import { IButtonProps } from '../types'; 4 | import ButtonBase from '../ButtonBase'; 5 | import styles from './styles.module.scss'; 6 | 7 | const ButtonPrimary: FC = ({ ...props }: IButtonProps) => { 8 | return ; 9 | }; 10 | 11 | export default ButtonPrimary; 12 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/ButtonPrimary/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as ButtonPrimary } from './ButtonPrimary'; 2 | export type { IButtonProps } from '../types'; 3 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/ButtonPrimary/styles.module.scss: -------------------------------------------------------------------------------- 1 | @use '../../../styles/modules/color' as color; 2 | 3 | .primary { 4 | background-color: color.$color-primary40; 5 | &:hover { 6 | background-color: color.$color-primary30; 7 | } 8 | &:focus { 9 | border-color: color.$color-primary60; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as ButtonBase } from './ButtonBase'; 2 | export type { IButtonProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/Button/types.ts: -------------------------------------------------------------------------------- 1 | export interface IButtonProps { 2 | /** 3 | * content of the element 4 | */ 5 | children: JSX.Element[] | JSX.Element; 6 | 7 | /** 8 | * content of the element 9 | */ 10 | className?: string; 11 | 12 | /** 13 | * set element to be noninteractive 14 | */ 15 | disabled?: boolean; 16 | 17 | /** 18 | * call back function 19 | */ 20 | onClick: (event: React.MouseEvent) => void; 21 | 22 | /** 23 | * set the size of the element 24 | */ 25 | size?: 'small' | 'regular' | 'large' | 'xl'; 26 | 27 | /** 28 | * apply custom CSS 29 | */ 30 | style?: React.CSSProperties; 31 | 32 | /** 33 | * Set the HTML button type for form interaction 34 | */ 35 | type?: 'button' | 'submit' | 'reset'; 36 | } 37 | -------------------------------------------------------------------------------- /packages/nextJs/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Button/ButtonPrimary'; 2 | -------------------------------------------------------------------------------- /packages/nextJs/src/styles/global.scss: -------------------------------------------------------------------------------- 1 | @use './modules/breakpoints' as breakpoints; 2 | @use './modules/color' as color; 3 | @use './modules/helpers' as helpers; 4 | @use './modules/reset' as reset; 5 | @use './modules/text' as text; 6 | -------------------------------------------------------------------------------- /packages/nextJs/src/styles/modules/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | $breakpoint-xl4k: 3840px; 2 | $breakpoint-xl2k: 2560px; 3 | $breakpoint-xxxl: 1920px; 4 | $breakpoint-xxl: 1400px; 5 | $breakpoint-xl: 1200px; 6 | $breakpoint-lg: 1025px; 7 | $breakpoint-md: 768px; 8 | $breakpoint-sm: 576px; 9 | $breakpoint-xs: 320px; 10 | -------------------------------------------------------------------------------- /packages/nextJs/src/styles/modules/_helpers.scss: -------------------------------------------------------------------------------- 1 | $helpers-borderRadius: 12px; 2 | $helpers-borderRadiusCircle: 50%; 3 | $helpers-borderRadiusMax: 300px; 4 | $helpers-borderRadiusMedium: 8px; 5 | $helpers-borderRadiusSmall: 4px; 6 | -------------------------------------------------------------------------------- /packages/nextJs/src/styles/modules/_reset.scss: -------------------------------------------------------------------------------- 1 | @mixin resetCSS { 2 | border: none; 3 | box-sizing: border-box; 4 | line-height: 1; 5 | margin: 0; 6 | outline: none; 7 | padding: 0; 8 | } 9 | 10 | @mixin resetButtonCSS { 11 | background: none; 12 | border: none; 13 | color: inherit; 14 | cursor: pointer; 15 | font: inherit; 16 | outline: inherit; 17 | padding: 0; 18 | } 19 | -------------------------------------------------------------------------------- /packages/nextJs/src/styles/modules/_text.scss: -------------------------------------------------------------------------------- 1 | @use './color' as color; 2 | 3 | @mixin text { 4 | -webkit-font-smoothing: antialiased; 5 | color: color.$color-default30; 6 | fill: color.$color-default30; 7 | font-family: 'Open Sans', sans-serif; 8 | font-size: 16px; 9 | font-style: normal; 10 | font-weight: 400; 11 | letter-spacing: 0; 12 | line-height: 24px; 13 | } 14 | -------------------------------------------------------------------------------- /packages/nextJs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@web3uikit/config/tsconfig.ui.json", 3 | "compilerOptions": { 4 | "rootDir": "src", 5 | "plugins": [{ "name": "typescript-plugin-css-modules" }], 6 | "baseUrl": ".", 7 | "paths": { 8 | "@/*": ["src/*"] 9 | } 10 | }, 11 | "include": [ 12 | "src/**/*.ts", 13 | "src/**/*.tsx", 14 | "src/**/*.scss", 15 | "src/css-modules.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /packages/styles/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@web3uikit/styles", 3 | "version": "1.2.0", 4 | "sideEffects": false, 5 | "files": [ 6 | "package.json", 7 | "dist" 8 | ], 9 | "main": "./dist/index.cjs.js", 10 | "module": "./dist/index.es.js", 11 | "types": "./dist/index.d.ts", 12 | "exports": { 13 | ".": { 14 | "import": "./dist/index.es.js", 15 | "require": "./dist/index.cjs.js", 16 | "types": "./dist/index.d.ts" 17 | } 18 | }, 19 | "scripts": { 20 | "build": "vite build" 21 | }, 22 | "peerDependencies": { 23 | "react": "^18.0.0", 24 | "react-dom": "^18.0.0" 25 | }, 26 | "devDependencies": { 27 | "react": "^18.0.0", 28 | "react-dom": "^18.0.0", 29 | "styled-components": "^5.3.5" 30 | }, 31 | "dependencies": { 32 | "@web3uikit/config": "*" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/styles/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "packages/styles", 3 | "sourceRoot": "packages/styles/src", 4 | "projectType": "library", 5 | "targets": { 6 | "version": { 7 | "executor": "@jscutlery/semver:version", 8 | "options": { 9 | "postTargets": ["@web3uikit/styles:publish", "@web3uikit/styles:github"] 10 | }, 11 | "projects": "dependencies" 12 | }, 13 | "github": { 14 | "executor": "@jscutlery/semver:github", 15 | "options": { 16 | "tag": "${tag}", 17 | "notes": "${notes}" 18 | } 19 | }, 20 | "publish": { 21 | "executor": "ngx-deploy-npm:deploy", 22 | "options": { 23 | "access": "public" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/styles/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib'; 2 | -------------------------------------------------------------------------------- /packages/styles/src/lib/HexToRgb.ts: -------------------------------------------------------------------------------- 1 | const hexToRgb = (hex: string): string => { 2 | var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 3 | return result 4 | ? ` ${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt( 5 | result[3], 6 | 16, 7 | )} ` 8 | : '66, 135, 245'; 9 | }; 10 | 11 | export default hexToRgb; 12 | -------------------------------------------------------------------------------- /packages/styles/src/lib/StyledElements.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import color from './colors'; 3 | import fonts from './fonts'; 4 | import resetCSS from './reset'; 5 | 6 | export const H1Styled = styled.h1` 7 | ${resetCSS}; 8 | ${fonts.heading}; 9 | ${fonts.h1} 10 | margin-bottom: 12px; 11 | 12 | &:empty { 13 | display: none; 14 | } 15 | `; 16 | 17 | export const H2Styled = styled.h2` 18 | ${resetCSS}; 19 | ${fonts.heading}; 20 | ${fonts.h2} 21 | margin-bottom: 12px; 22 | 23 | &:empty { 24 | display: none; 25 | } 26 | `; 27 | 28 | export const PStyled = styled.p` 29 | ${resetCSS}; 30 | ${fonts.text}; 31 | 32 | span { 33 | ${fonts.textBold}; 34 | color: ${color.navy40}; 35 | } 36 | 37 | &:last-of-type { 38 | margin: 8px 0 16px; 39 | } 40 | `; 41 | -------------------------------------------------------------------------------- /packages/styles/src/lib/breakpoints.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * xl4k - Chad screen 4k 3 | * xl2k - Large High Res 4 | * xxxl - 3x Extra Large 5 | * xxl - Extra Extra Large 6 | * xl - Extra Large 7 | * lg - Large 8 | * md - Medium 9 | * sm - Small 10 | * xs - Extra Small 11 | */ 12 | const breakpoints = { 13 | xl4k: '3840px', 14 | xl2k: '2560px', 15 | xxxl: '1920px', 16 | xxl: '1400px', 17 | xl: '1200px', 18 | lg: '1025px', 19 | md: '768px', 20 | sm: '576px', 21 | xs: '320px', 22 | }; 23 | 24 | export default breakpoints; 25 | -------------------------------------------------------------------------------- /packages/styles/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export { default as color } from './colors'; 2 | export * from './colors'; 3 | 4 | export { default as breakpoints } from './breakpoints'; 5 | 6 | export { default as fonts } from './fonts'; 7 | export * from './fonts'; 8 | 9 | export { default as resetCSS } from './reset'; 10 | export * from './reset'; 11 | 12 | export * from './StyledElements'; 13 | 14 | export { default as rgbToHex } from './rgbToHex'; 15 | export { default as HexToRgb } from './HexToRgb'; 16 | -------------------------------------------------------------------------------- /packages/styles/src/lib/reset.ts: -------------------------------------------------------------------------------- 1 | import { css } from 'styled-components'; 2 | 3 | const resetCSS = css` 4 | border: none; 5 | box-sizing: border-box; 6 | line-height: 1; 7 | margin: 0; 8 | outline: none; 9 | padding: 0; 10 | `; 11 | 12 | export const resetButtonCSS = css` 13 | background: none; 14 | border: none; 15 | color: inherit; 16 | cursor: pointer; 17 | font: inherit; 18 | outline: inherit; 19 | padding: 0; 20 | `; 21 | 22 | export default resetCSS; 23 | -------------------------------------------------------------------------------- /packages/styles/src/lib/rgbToHex.ts: -------------------------------------------------------------------------------- 1 | const rgbToHex = (rgb: string | undefined) => { 2 | if (typeof rgb == 'undefined') throw new Error(); 3 | // Choose correct separator 4 | const sep = rgb.indexOf(',') > -1 ? ',' : ' '; 5 | // Turn "rgb(r,g,b)" into [r,g,b] 6 | const rgbArray = rgb.substr(4).split(')')[0].split(sep); 7 | 8 | let r = (+rgbArray[0]).toString(16); 9 | let g = (+rgbArray[1]).toString(16); 10 | let b = (+rgbArray[2]).toString(16); 11 | 12 | if (r.length == 1) r = '0' + r; 13 | if (g.length == 1) g = '0' + g; 14 | if (b.length == 1) b = '0' + b; 15 | 16 | return '#' + r + g + b; 17 | }; 18 | 19 | export default rgbToHex; 20 | -------------------------------------------------------------------------------- /packages/styles/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@web3uikit/config/tsconfig.ui.json", 3 | "compilerOptions": { 4 | "rootDir": "src" 5 | }, 6 | "include": ["src"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/styles/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite'; 2 | import config from './node_modules/@web3uikit/config/vite.config'; 3 | 4 | export default defineConfig({ ...config(__dirname) }); 5 | -------------------------------------------------------------------------------- /packages/web3/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "packages/web3", 3 | "sourceRoot": "packages/web3/src", 4 | "projectType": "library", 5 | "targets": { 6 | "version": { 7 | "executor": "@jscutlery/semver:version", 8 | "options": { 9 | "postTargets": [ 10 | "@web3uikit/web3:publish", 11 | "@web3uikit/web3:github" 12 | ] 13 | }, 14 | "projects": "dependencies" 15 | }, 16 | "github": { 17 | "executor": "@jscutlery/semver:github", 18 | "options": { 19 | "tag": "${tag}", 20 | "notes": "${notes}" 21 | } 22 | }, 23 | "publish": { 24 | "executor": "ngx-deploy-npm:deploy", 25 | "options": { 26 | "access": "public" 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/web3/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib'; 2 | export * from './web3utils'; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/BlockNumber/BlockNumber.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import BlockNumber from './BlockNumber'; 4 | import { moralisContext } from '../../web3utils/decorators'; 5 | 6 | export default { 7 | title: '1.Web3-Parse/BlockNumber', 8 | component: BlockNumber, 9 | decorators: [moralisContext], 10 | parameters: { 11 | docs: { 12 | source: { 13 | excludeDecorators: true, 14 | }, 15 | }, 16 | }, 17 | } as ComponentMeta; 18 | 19 | const Template: ComponentStory = (args) => ( 20 | 21 | ); 22 | 23 | export const Default = Template.bind({}); 24 | -------------------------------------------------------------------------------- /packages/web3/src/lib/BlockNumber/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as BlockNumber } from './BlockNumber'; 2 | -------------------------------------------------------------------------------- /packages/web3/src/lib/Blockie/Blockie.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import Blockie from './Blockie'; 4 | import { BlockieProps } from './types'; 5 | 6 | export default { 7 | title: '1.Web3-Parse/Blockie', 8 | component: Blockie 9 | } as ComponentMeta; 10 | 11 | const Template: ComponentStory = (args: BlockieProps) => ; 12 | 13 | export const CustomSeed = Template.bind({}); 14 | CustomSeed.args = { 15 | seed: '0x0000000000000000000000000000000000000000' 16 | }; 17 | -------------------------------------------------------------------------------- /packages/web3/src/lib/Blockie/Blockie.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { resetCSS } from '@web3uikit/styles'; 3 | 4 | const DivStyled = styled.div` 5 | ${resetCSS} 6 | border-radius: 50%; 7 | display: inline-flex; 8 | overflow: hidden; 9 | `; 10 | 11 | export default { 12 | DivStyled, 13 | }; 14 | -------------------------------------------------------------------------------- /packages/web3/src/lib/Blockie/Blockie.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react'; 2 | import Blockies from 'react-blockies'; 3 | import styles from './Blockie.styles'; 4 | import { BlockieProps } from './types'; 5 | 6 | const { DivStyled } = styles; 7 | /** 8 | * Shows a blockie image for the provided wallet address 9 | * @param {*} props 10 | * @returns JSX Element 11 | */ 12 | 13 | const Blockie: FC = ({ seed, ...props }) => { 14 | return ( 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default Blockie; 22 | -------------------------------------------------------------------------------- /packages/web3/src/lib/Blockie/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as Blockie } from './Blockie'; 2 | export type { BlockieProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/Blockie/types.ts: -------------------------------------------------------------------------------- 1 | export interface BlockieProps { 2 | seed: string; 3 | size?: number | undefined; 4 | scale?: number | undefined; 5 | color?: string | undefined; 6 | bgColor?: string | undefined; 7 | spotColor?: string | undefined; 8 | className?: string | undefined; 9 | } 10 | -------------------------------------------------------------------------------- /packages/web3/src/lib/ConnectButton/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as ConnectButton } from './ConnectButton'; 2 | export type { IConnectButtonProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/ConnectButton/types.ts: -------------------------------------------------------------------------------- 1 | import type { HTMLAttributes } from 'react'; 2 | 3 | export interface IConnectButtonProps extends HTMLAttributes { 4 | /** 5 | * an optional chain id of the blockchain that the web3 wallet is connected to 6 | */ 7 | chainId?: number; 8 | 9 | /** 10 | * if true & server is connected & web3 is enabled will automatically try to connect user to the server 11 | */ 12 | moralisAuth?: boolean; 13 | 14 | /** 15 | * an optional response message that will be displayed to the user once their sign-in request is successful 16 | */ 17 | signingMessage?: string; 18 | } 19 | -------------------------------------------------------------------------------- /packages/web3/src/lib/ENSAvatar/ENSAvatar.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import ENSAvatar from './ENSAvatar'; 4 | import { moralisContext } from '../../web3utils/decorators'; 5 | 6 | export default { 7 | title: '1.Web3-Parse/ENSAvatar', 8 | component: ENSAvatar, 9 | decorators: [moralisContext], 10 | parameters: { 11 | docs: { 12 | source: { 13 | excludeDecorators: true, 14 | }, 15 | }, 16 | }, 17 | } as ComponentMeta; 18 | 19 | const Template: ComponentStory = (args) => ( 20 | 21 | ); 22 | 23 | export const Default = Template.bind({}); 24 | Default.args = { 25 | address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', 26 | size: 100, 27 | }; 28 | -------------------------------------------------------------------------------- /packages/web3/src/lib/ENSAvatar/ENSAvatar.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { resetCSS } from '@web3uikit/styles'; 3 | import { ENSAvatarProps } from './types'; 4 | 5 | const AvatarImg = styled.img>` 6 | ${resetCSS}; 7 | border-radius: 50%; 8 | height: ${({ size }) => size && size}px; 9 | width: ${({ size }) => size && size}px; 10 | `; 11 | 12 | const DivStyled = styled.div` 13 | ${resetCSS} 14 | border-radius: 50%; 15 | display: inline-flex; 16 | overflow: hidden; 17 | `; 18 | 19 | export default { 20 | AvatarImg, 21 | DivStyled, 22 | }; 23 | -------------------------------------------------------------------------------- /packages/web3/src/lib/ENSAvatar/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as ENSAvatar } from './ENSAvatar'; 2 | export type { ENSAvatarProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/ENSAvatar/types.ts: -------------------------------------------------------------------------------- 1 | export interface ENSAvatarProps { 2 | /** 3 | * Address/ENS name to show the avatar (Avatar on current chain is shown) 4 | */ 5 | address: string; 6 | 7 | /** 8 | * Size of the avatar 9 | */ 10 | size?: number; 11 | } 12 | -------------------------------------------------------------------------------- /packages/web3/src/lib/IPFSInput/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as IPFSInput } from './IPFSInput'; 2 | export type { IPFSInputProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/IPFSInput/types.ts: -------------------------------------------------------------------------------- 1 | export interface IPFSInputProps { 2 | /** 3 | * Set theme either 'textOnly' or 'withIcon' 4 | */ 5 | theme?: 'textOnly' | 'withIcon'; 6 | /** 7 | * Set the nature of upload either ipfs or non-ipfs using boolean 8 | */ 9 | saveToIPFS?: boolean; 10 | /** 11 | * Set name of file to be uploaded 12 | */ 13 | fileName?: string; 14 | /** 15 | * Set the type of file for eg: "image/jpeg" 16 | */ 17 | type?: string; 18 | /** 19 | * get back the information regarding upload and file data using onFinish() 20 | */ 21 | onFinish?: (value: any) => void; 22 | } 23 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NFT/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as NFT } from "./NFT"; 2 | export type { INFTProps } from "./types"; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NFTBalance/NFTBalance.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | const DivStyled = styled.div<{ gap: number }>` 3 | display: grid; 4 | gap: ${({ gap }) => `${gap}px`}; 5 | `; 6 | 7 | const DivFlexStyled = styled.div` 8 | display: flex; 9 | flex-wrap: wrap; 10 | gap: 20px; 11 | `; 12 | 13 | export default { 14 | DivStyled, 15 | DivFlexStyled, 16 | }; 17 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NFTBalance/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as NFTBalance } from "./NFTBalance"; 2 | export type { INFTBalance } from "./types"; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NFTBalance/types.ts: -------------------------------------------------------------------------------- 1 | import { Chain } from '../../web3utils'; 2 | 3 | export interface INFTBalance { 4 | chain: Chain; 5 | address: string; 6 | } 7 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NativeBalance/NativeBalance.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentStory, ComponentMeta } from '@storybook/react'; 3 | import NativeBalance from './NativeBalance'; 4 | import { NativeBalanceProps } from './types'; 5 | import { moralisContext } from '../../web3utils/decorators'; 6 | 7 | export default { 8 | title: '1.Web3-Parse/NativeBalance', 9 | component: NativeBalance, 10 | decorators: [moralisContext], 11 | parameters: { 12 | docs: { 13 | source: { 14 | excludeDecorators: true, 15 | }, 16 | }, 17 | }, 18 | } as ComponentMeta; 19 | 20 | const Template: ComponentStory = ( 21 | args: NativeBalanceProps, 22 | ) => ; 23 | 24 | export const Default = Template.bind({}); 25 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NativeBalance/NativeBalance.styles.ts: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { fonts } from "@web3uikit/styles"; 3 | 4 | const BalanceStyled = styled.span` 5 | ${fonts.semiBold} 6 | white-space: nowrap; 7 | line-height: 25px; 8 | `; 9 | 10 | const NativeBalanceStyles = { 11 | BalanceStyled, 12 | }; 13 | 14 | export default NativeBalanceStyles; 15 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NativeBalance/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as NativeBalance } from './NativeBalance'; 2 | export type { NativeBalanceProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/NativeBalance/types.ts: -------------------------------------------------------------------------------- 1 | import { 2 | UseMoralisWeb3ApiCallOptions, 3 | UseNativeBalancesParams, 4 | } from 'react-moralis'; 5 | 6 | export interface NativeBalanceProps { 7 | params?: UseNativeBalancesParams | undefined; 8 | options?: UseMoralisWeb3ApiCallOptions | undefined; 9 | style?: React.CSSProperties | undefined; 10 | } 11 | -------------------------------------------------------------------------------- /packages/web3/src/lib/SendTransaction/example/VendingMachine.sol: -------------------------------------------------------------------------------- 1 | //SPDX-License-Identifier: MIT 2 | pragma solidity ^0.8.11; 3 | 4 | contract VendingMachine { 5 | address public owner; 6 | mapping(address => uint) public candyBalances; 7 | 8 | constructor(){ 9 | owner = msg.sender; 10 | candyBalances[address(this)]=100; 11 | } 12 | 13 | function getVendingMachineBalance() public view returns (uint){ 14 | return candyBalances[address(this)]; 15 | } 16 | 17 | function restockVendingMachine(uint _amount) public { 18 | require(msg.sender==owner,"Only owner can restock"); 19 | candyBalances[address(this)] += _amount; 20 | } 21 | 22 | function purchaseCandy(uint _amount) public payable { 23 | require(msg.value>=_amount*1 ether,"You must pay atleast 1 ether per candy"); 24 | require(candyBalances[address(this)]>=_amount,"Not enough candy present!!"); 25 | candyBalances[address(this)]-=_amount; 26 | candyBalances[msg.sender]+=_amount; 27 | } 28 | } -------------------------------------------------------------------------------- /packages/web3/src/lib/SendTransaction/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as SendTransaction } from './SendTransaction'; 2 | export type { ISendTransactionProps } from './types'; -------------------------------------------------------------------------------- /packages/web3/src/lib/WalletModal/index.tsx: -------------------------------------------------------------------------------- 1 | export { default as WalletModal } from './WalletModal'; 2 | export type { IWalletModalProps } from './types'; 3 | -------------------------------------------------------------------------------- /packages/web3/src/lib/WalletModal/types.ts: -------------------------------------------------------------------------------- 1 | import { IConnectButtonProps } from '../ConnectButton'; 2 | export interface IWalletModalProps extends IConnectButtonProps { 3 | /** 4 | * an optional chain id of the blockchain that the web3 wallet is connected to 5 | */ 6 | chainId?: number; 7 | 8 | /** 9 | * if true & server is connected & web3 is enabled will automatically try to connect user to the server 10 | */ 11 | moralisAuth?: boolean; 12 | 13 | /** 14 | * an optional response message that will be displayed to the user once their sign-in request is successful 15 | */ 16 | signingMessage?: string; 17 | /** 18 | * Modal is open if true 19 | */ 20 | isOpened: boolean; 21 | 22 | /** 23 | * Set Open state 24 | */ 25 | setIsOpened: (value: boolean) => void; 26 | } 27 | -------------------------------------------------------------------------------- /packages/web3/src/lib/index.ts: -------------------------------------------------------------------------------- 1 | /* PLOP_INJECT_EXPORT */ 2 | export * from './SendTransaction'; 3 | export * from './BlockNumber'; 4 | export * from './Blockie'; 5 | export * from './ConnectButton'; 6 | export * from './ENSAvatar'; 7 | export * from './IPFSInput'; 8 | export * from './NFT'; 9 | export * from './NFTBalance'; 10 | export * from './NativeBalance'; 11 | export * from './WalletModal'; 12 | -------------------------------------------------------------------------------- /packages/web3/src/web3utils/formatters.ts: -------------------------------------------------------------------------------- 1 | export const n6 = new Intl.NumberFormat('en-us', { 2 | style: 'decimal', 3 | minimumFractionDigits: 0, 4 | maximumFractionDigits: 6, 5 | }); 6 | export const n4 = new Intl.NumberFormat('en-us', { 7 | style: 'decimal', 8 | minimumFractionDigits: 0, 9 | maximumFractionDigits: 4, 10 | }); 11 | 12 | export const c2 = new Intl.NumberFormat('en-us', { 13 | style: 'currency', 14 | currency: 'USD', 15 | minimumFractionDigits: 2, 16 | maximumFractionDigits: 2, 17 | }); 18 | 19 | /** 20 | * Returns a string of form "abc...xyz" 21 | * @param {string} str string to string 22 | * @param {number} n number of chars to keep at front/end 23 | * @returns {string} 24 | */ 25 | export const getEllipsisTxt = (str: string, n = 6) => { 26 | if (str) { 27 | return `${str.slice(0, n)}...${str.slice(str.length - n)}`; 28 | } 29 | return ''; 30 | }; 31 | -------------------------------------------------------------------------------- /packages/web3/src/web3utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from './formatters'; 2 | export * from './networks'; 3 | -------------------------------------------------------------------------------- /packages/web3/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@web3uikit/config/tsconfig.ui.json", 3 | "compilerOptions": { 4 | "rootDir": "src" 5 | }, 6 | "include": ["src"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/web3/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, UserConfigExport } from 'vite'; 2 | import config from './node_modules/@web3uikit/config/vite.config'; 3 | 4 | export default defineConfig({ 5 | ...(config(__dirname, [ 6 | 'react', 7 | 'react-dom', 8 | 'moralis', 9 | 'react-moralis', 10 | ]) as UserConfigExport), 11 | }); 12 | -------------------------------------------------------------------------------- /packages/web3uikit/project.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": "packages/web3uikit", 3 | "sourceRoot": "packages/web3uikit/src", 4 | "projectType": "library", 5 | "targets": { 6 | "version": { 7 | "executor": "@jscutlery/semver:version", 8 | "options": { 9 | "postTargets": ["web3uikit:publish", "web3uikit:github"] 10 | }, 11 | "projects": "dependencies" 12 | }, 13 | "github": { 14 | "executor": "@jscutlery/semver:github", 15 | "options": { 16 | "tag": "${tag}", 17 | "notes": "${notes}" 18 | } 19 | }, 20 | "publish": { 21 | "executor": "ngx-deploy-npm:deploy", 22 | "options": { 23 | "access": "public" 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /packages/web3uikit/src/index.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | export * from '@web3uikit/core'; 3 | export * from '@web3uikit/icons'; 4 | export * from '@web3uikit/styles'; 5 | export * from '@web3uikit/web3'; 6 | export { CreditCard as CreditCardIcon } from '@web3uikit/icons'; 7 | export { CreditCard } from '@web3uikit/core'; 8 | -------------------------------------------------------------------------------- /packages/web3uikit/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@web3uikit/config/tsconfig.ui.json", 3 | "compilerOptions": { 4 | "rootDir": "src" 5 | }, 6 | "include": ["src"] 7 | } 8 | -------------------------------------------------------------------------------- /packages/web3uikit/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, UserConfigExport } from 'vite'; 2 | import config from './node_modules/@web3uikit/config/vite.config'; 3 | 4 | export default defineConfig({ 5 | ...(config(__dirname, [ 6 | 'react', 7 | 'react-dom', 8 | 'react-router-dom', 9 | 'moralis', 10 | 'react-moralis', 11 | ]) as UserConfigExport), 12 | }); 13 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - 'apps/**' 3 | - 'packages/**' 4 | -------------------------------------------------------------------------------- /setup.ts: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | import { setGlobalConfig } from '@storybook/testing-react'; 3 | import { getWorker } from 'msw-storybook-addon'; 4 | import * as globalStorybookConfig from './.storybook/preview'; 5 | 6 | setGlobalConfig(globalStorybookConfig); 7 | 8 | afterAll(() => getWorker().resetHandlers()); 9 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "packages/core" }, 5 | { "path": "packages/styles" }, 6 | { "path": "packages/web3" }, 7 | { "path": "packages/icons" }, 8 | { "path": "packages/web3uikit" }, 9 | { "path": "packages/nextJs" } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config'; 2 | import react from '@vitejs/plugin-react'; 3 | import { PluginOption } from 'vite'; 4 | 5 | export default defineConfig({ 6 | plugins: [react() as PluginOption], 7 | test: { 8 | globals: true, 9 | environment: 'jsdom', 10 | setupFiles: ['./setup.ts'], 11 | coverage: { reporter: ['text', 'json', 'html'] }, 12 | }, 13 | }); 14 | --------------------------------------------------------------------------------