Jetswap UIkit Fantom is a set of React components and hooks used to build pages on Jetswap's apps. It also contains a theme file for dark and light mode.
npm i jetswap-uikit-fantom
first go to src/widgets/Menu/components/CakePrice.tsx
, find PriceLink
tag and change the WINGS token address to current mainnet address.
https://fantom-info.jetswap.finance/token/0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82
--> https://fantom-info.jetswap.finance/token/[wings-address]
then go to package.json
and increase version.
then run
npm run build
npm login
npm publish
Before using Jetswap UIkit Fantom, you need to provide the theme file to styled-component.
import { ThemeProvider } from 'styled-components'
import { light, dark } from 'jetswap-uikit-fantom'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
A reset CSS is available as a global styled component.
import { ResetCSS } from 'jetswap-uikit-fantom'
...
<ResetCSS />
This project is built with Typescript and export all the relevant types.
If you want to use components from the UIkit, check the Storybook documentation
First clone this repo to local and then start editing the components, theme, etc.
When is finished the Customization of the UIkit build it using:
npm run build
Commit everything to the git repo and if you are using a diferent repo just change it in package.json.
If you have a commit error due to husky you can try:
git commit -am 'commit' --no-verify
That should solve the problem, then push to remote repo.
After this you need to publish the npm packege
Be aware of the versions, If you make an update change the version in package.json so when you publish this's not gonna throw you an error.
Go to the npm package you create an you are ready to use it.