Skip to content

Commit 8c4d5d8

Browse files
behnamjzmrholekamirhabibzadeh
authored
Rainbow (#6)
* Add wagmi component auth to projcet * chore: update dependencies and devDependencies @coreui/chartjs ^3.1.1 → ^3.1.2 @coreui/react ^4.6.0 → ^4.8.0 @coreui/react-chartjs ^2.1.2 → ^2.1.3 @coreui/utils ^2.0.1 → ^2.0.2 core-js ^3.29.0 → ^3.31.0 eslint-config-prettier ^8.7.0 → ^8.8.0 prettier 2.8.4 → 2.8.8 react-redux ^8.0.5 → ^8.1.1 react-router-dom ^6.8.2 → ^6.14.0 sass ^1.58.3 → ^1.63.6 web-vitals ^3.1.1 → ^3.3.2 * chore: update comments * Add rainbow kit to project and configure that * Update gitignore and remove env file * Add redux, saga * Add axios to project * Update redme file * Update package.json file and install necessary packages * Add rainbow button to header and change sidebar show action * Update sidebar acions from redux * Update store address * Update env key name * Update README.md * Update README.md Add rainbow emoji * Remove unused svg * Remove unused files * Add remove token when switch network * Refactor rainbow button code * Remove comment of code --------- Co-authored-by: mrholek <[email protected]> Co-authored-by: Amir Habibzadeh <[email protected]>
1 parent c713371 commit 8c4d5d8

File tree

18 files changed

+377
-193
lines changed

18 files changed

+377
-193
lines changed

.env

Lines changed: 0 additions & 2 deletions
This file was deleted.

.env.example

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
PORT=3000
2+
CHOKIDAR_USEPOLLING=true
3+
REACT_APP_BASE_URL=""
4+
REACT_APP_WALLET_CONNECT_PROJECT_ID=""
5+
REACT_APP_ALCHEMY_ID=""

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ yarn.lock
1919
.env.development.local
2020
.env.test.local
2121
.env.production.local
22+
.env
2223

2324
npm-debug.log*
2425
yarn-debug.log*

README.md

Lines changed: 22 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,20 @@
1-
[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
2-
[![npm package][npm-coreui-badge]][npm-coreui]
3-
[![NPM downloads][npm-coreui-download]][npm-coreui]
4-
[![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react)
5-
[![npm package][npm-coreui-react-badge]][npm-coreui-react]
6-
[![NPM downloads][npm-coreui-react-download]][npm-coreui-react]
7-
8-
[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
9-
[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
10-
[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
11-
[npm-coreui-react]: https://www.npmjs.com/package/@coreui/react
12-
[npm-coreui-react-badge]: https://img.shields.io/npm/v/@coreui/react.png?style=flat-square
13-
[npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
14-
[npm]: https://www.npmjs.com/package/@coreui/react
15-
16-
# CoreUI Free React Admin Template
17-
18-
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
19-
20-
## Table of Contents
21-
22-
* [Versions](#versions)
23-
* [CoreUI Pro](#coreui-pro)
24-
* [Quick Start](#quick-start)
25-
* [Installation](#installation)
26-
* [Basic usage](#basic-usage)
27-
* [What's included](#whats-included)
28-
* [Documentation](#documentation)
29-
* [Versioning](#versioning)
30-
* [Creators](#creators)
31-
* [Community](#community)
32-
* [Support CoreUI Development](#support-coreui-development)
33-
* [Copyright and License](#copyright-and-license)
34-
35-
## Versions
36-
37-
* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
38-
* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
39-
* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
40-
* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
41-
42-
## CoreUI Pro
43-
44-
* 💪 [CoreUI Pro Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
45-
* 💪 [CoreUI Pro Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
46-
* 💪 [CoreUI Pro React Admin Template](https://coreui.io/product/react-dashboard-template/)
47-
* 💪 [CoreUI Pro Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
1+
# CoreUI Web3 React Admin Template
2+
This project is a web3 version of the CoreUI React admin template. It is a fork of the CoreUI admin template built with React.
3+
4+
Overview
5+
We have extended the functionality of the original CoreUI template by adding web3 capabilities using the following libraries:
6+
7+
- 🌈RainBowKit - RainbowKit is a React library that makes it easy to add wallet connection to your dapp. It's intuitive, responsive and customizable.
8+
- Axios - Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
9+
- Redux - For state management.
10+
- Redux Saga - For managing side effects, such as fetching blockchain data.
11+
12+
The CoreUI template already utilizes React and Bootstrap to provide a robust admin template with a wide range of UI components.
4813

4914
## Quick Start
15+
To get started with the project:
5016

51-
- [Download the latest release](https://github.com/coreui/coreui-free-react-admin-template/archive/refs/heads/main.zip)
52-
- Clone the repo: `git clone https://github.com/coreui/coreui-free-react-admin-template.git`
17+
Clone the repository: git clone https://github.com/treejer/coreui-free-react-admin-template-web3
5318

5419
### Installation
5520

@@ -95,101 +60,22 @@ or
9560
$ yarn build
9661
```
9762

98-
## What's included
99-
100-
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
101-
102-
```
103-
coreui-free-react-admin-template
104-
├── public/ # static files
105-
│ └── index.html # html template
106-
107-
├── src/ # project root
108-
│ ├── assets/ # images, icons, etc.
109-
│ ├── components/ # common components - header, footer, sidebar, etc.
110-
│ ├── layouts/ # layout containers
111-
│ ├── scss/ # scss styles
112-
│ ├── views/ # application views
113-
│ ├── _nav.js # sidebar navigation config
114-
│ ├── App.js
115-
│ ├── ...
116-
│ ├── index.js
117-
│ ├── routes.js # routes config
118-
│ └── store.js # template state example
119-
120-
└── package.json
63+
## Env Setup
64+
Duplicate the environment file and modify its variable values.
65+
```bash
66+
cp .env.example .env
12167
```
12268

12369
## Documentation
12470

12571
The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/)
12672

127-
## Versioning
128-
129-
For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
130-
131-
See [the Releases section of our project](https://github.com/coreui/coreui-free-react-admin-template/releases) for changelogs for each release version.
132-
133-
## Creators
134-
135-
**Łukasz Holeczek**
136-
* <https://twitter.com/lukaszholeczek>
137-
* <https://github.com/mrholek>
138-
* <https://github.com/coreui>
139-
140-
**CoreUI team**
141-
* https://github.com/orgs/coreui/people
142-
143-
## Community
144-
145-
Get updates on CoreUI's development and chat with the project maintainers and community members.
146-
147-
- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
148-
- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/).
149-
150-
## Support CoreUI Development
151-
152-
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
153-
154-
<!--- StartOpenCollectiveBackers -->
15573

156-
### Platinum Sponsors
74+
### About
15775

158-
Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website.
76+
This project is built and maintained by the [Treejer Team](https://github.com/treejer). The source code is available on [GitHub]([https://github.com/treejer](https://github.com/treejer/coreui-free-react-admin-template-web3)).
77+
Please feel free to reach out if you have any questions or need further assistance. We are happy to help!
15978

160-
<a href="https://opencollective.com/coreui/contribute/platinum-sponsor-40959/checkout"><img src="https://opencollective.com/coreui/tiers/platinum-sponsor/0/avatar.svg?avatarHeight=100"></a>
161-
162-
### Gold Sponsors
163-
164-
Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website.
165-
166-
<a href="https://opencollective.com/coreui/contribute/gold-sponsor-40960/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a>
167-
168-
### Silver Sponsors
169-
170-
Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website.
171-
172-
<a href="https://opencollective.com/coreui/contribute/silver-sponsor-40967/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a>
173-
174-
### Bronze Sponsors
175-
176-
Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile.
177-
178-
<a href="https://opencollective.com/coreui/contribute/bronze-sponsor-40966/checkout"><img src="https://opencollective.com/coreui/tiers/bronze-sponsor/0/avatar.svg?avatarHeight=100"></a>
179-
180-
### Backers
181-
182-
Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/).
183-
184-
<a href="https://opencollective.com/coreui/contribute/backer-40965/checkout" target="_blank" rel="noopener"><img src="https://opencollective.com/coreui/backers.svg?width=890"></a>
185-
186-
<!--- EndOpenCollectiveBackers -->
187-
188-
## Copyright and License
189-
190-
copyright 2023 creativeLabs Łukasz Holeczek.
79+
## Documentation
19180

192-
19381
Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE).
194-
There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
195-

package.json

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,38 +22,45 @@
2222
"test:debug": "react-scripts --inspect-brk test --runInBand"
2323
},
2424
"dependencies": {
25-
"@coreui/chartjs": "^3.1.2",
26-
"@coreui/coreui": "^4.2.6",
27-
"@coreui/icons": "^3.0.1",
28-
"@coreui/icons-react": "^2.1.0",
29-
"@coreui/react": "^4.9.0-rc.0",
30-
"@coreui/react-chartjs": "^2.1.3",
31-
"@coreui/utils": "^2.0.2",
32-
"chart.js": "^3.9.1",
33-
"classnames": "^2.3.2",
34-
"core-js": "^3.31.0",
35-
"prop-types": "^15.8.1",
36-
"react": "^18.2.0",
37-
"react-app-polyfill": "^3.0.0",
38-
"react-dom": "^18.2.0",
39-
"react-redux": "^8.1.1",
40-
"react-router-dom": "^6.14.0",
25+
"@coreui/chartjs": "3.1.2",
26+
"@coreui/coreui": "4.2.6",
27+
"@coreui/icons": "3.0.1",
28+
"@coreui/icons-react": "2.1.0",
29+
"@coreui/react": "4.9.0-rc.0",
30+
"@coreui/react-chartjs": "2.1.3",
31+
"@coreui/utils": "2.0.2",
32+
"@rainbow-me/rainbowkit": "1.0.7",
33+
"@reduxjs/toolkit": "1.9.5",
34+
"axios": "1.4.0",
35+
"chart.js": "3.9.1",
36+
"classnames": "2.3.2",
37+
"core-js": "3.31.0",
38+
"prop-types": "15.8.1",
39+
"react": "18.2.0",
40+
"react-app-polyfill": "3.0.0",
41+
"react-dom": "18.2.0",
42+
"react-redux": "8.1.1",
43+
"react-router-dom": "6.14.0",
4144
"redux": "4.2.1",
42-
"simplebar-react": "^2.4.3"
45+
"redux-fetch-state": "0.2.4",
46+
"redux-saga": "1.2.3",
47+
"simplebar-react": "2.4.3",
48+
"viem": "1.4.2",
49+
"wagmi": "1.3.9"
4350
},
4451
"devDependencies": {
45-
"@testing-library/jest-dom": "^5.16.5",
46-
"@testing-library/react": "^14.0.0",
47-
"@testing-library/user-event": "^14.4.3",
48-
"eslint-config-prettier": "^8.8.0",
49-
"eslint-plugin-prettier": "^4.2.1",
52+
"@testing-library/jest-dom": "5.16.5",
53+
"@testing-library/react": "14.0.0",
54+
"@testing-library/user-event": "14.4.3",
55+
"eslint-config-prettier": "8.8.0",
56+
"eslint-plugin-prettier": "4.2.1",
5057
"prettier": "2.8.8",
5158
"react-scripts": "5.0.1",
52-
"sass": "^1.63.6",
53-
"web-vitals": "^3.3.2"
59+
"sass": "1.63.6",
60+
"web-vitals": "3.3.2"
5461
},
5562
"engines": {
5663
"node": ">=10",
5764
"npm": ">=6"
5865
}
59-
}
66+
}

src/components/AppHeader.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import { NavLink } from 'react-router-dom'
3-
import { useSelector, useDispatch } from 'react-redux'
43
import {
54
CContainer,
65
CHeader,
@@ -13,22 +12,19 @@ import {
1312
} from '@coreui/react'
1413
import CIcon from '@coreui/icons-react'
1514
import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
16-
15+
import { useToggleSidebar } from '../redux/modules/init'
1716
import { AppBreadcrumb } from './index'
1817
import { AppHeaderDropdown } from './header/index'
1918
import { logo } from 'src/assets/brand/logo'
19+
import { WalletButton } from './rainbow/index'
2020

2121
const AppHeader = () => {
22-
const dispatch = useDispatch()
23-
const sidebarShow = useSelector((state) => state.sidebarShow)
22+
const { toggleSidebar } = useToggleSidebar()
2423

2524
return (
2625
<CHeader position="sticky" className="mb-4">
2726
<CContainer fluid>
28-
<CHeaderToggler
29-
className="ps-1"
30-
onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
31-
>
27+
<CHeaderToggler className="ps-1" onClick={toggleSidebar}>
3228
<CIcon icon={cilMenu} size="lg" />
3329
</CHeaderToggler>
3430
<CHeaderBrand className="mx-auto d-md-none" to="/">
@@ -47,6 +43,9 @@ const AppHeader = () => {
4743
<CNavLink href="#">Settings</CNavLink>
4844
</CNavItem>
4945
</CHeaderNav>
46+
<CHeaderNav>
47+
<WalletButton />
48+
</CHeaderNav>
5049
<CHeaderNav>
5150
<CNavItem>
5251
<CNavLink href="#">

src/components/AppSidebar.js

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
11
import React from 'react'
2-
import { useSelector, useDispatch } from 'react-redux'
3-
2+
import { useSelector } from 'react-redux'
43
import { CSidebar, CSidebarBrand, CSidebarNav, CSidebarToggler } from '@coreui/react'
54
import CIcon from '@coreui/icons-react'
6-
75
import { AppSidebarNav } from './AppSidebarNav'
8-
96
import { logoNegative } from 'src/assets/brand/logo-negative'
107
import { sygnet } from 'src/assets/brand/sygnet'
11-
128
import SimpleBar from 'simplebar-react'
139
import 'simplebar/dist/simplebar.min.css'
14-
15-
// sidebar nav config
1610
import navigation from '../_nav'
11+
import { useToggleSidebar } from '../redux/modules/init'
1712

1813
const AppSidebar = () => {
19-
const dispatch = useDispatch()
2014
const unfoldable = useSelector((state) => state.sidebarUnfoldable)
21-
const sidebarShow = useSelector((state) => state.sidebarShow)
15+
const { sidebarShow, toggleSidebar } = useToggleSidebar()
2216

2317
return (
24-
<CSidebar
25-
position="fixed"
26-
unfoldable={unfoldable}
27-
visible={sidebarShow}
28-
onVisibleChange={(visible) => {
29-
dispatch({ type: 'set', sidebarShow: visible })
30-
}}
31-
>
18+
<CSidebar position="fixed" unfoldable={unfoldable} visible={sidebarShow}>
3219
<CSidebarBrand className="d-none d-md-flex" to="/">
3320
<CIcon className="sidebar-brand-full" icon={logoNegative} height={35} />
3421
<CIcon className="sidebar-brand-narrow" icon={sygnet} height={35} />
@@ -38,10 +25,7 @@ const AppSidebar = () => {
3825
<AppSidebarNav items={navigation} />
3926
</SimpleBar>
4027
</CSidebarNav>
41-
<CSidebarToggler
42-
className="d-none d-lg-flex"
43-
onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
44-
/>
28+
<CSidebarToggler className="d-none d-lg-flex" onClick={toggleSidebar} />
4529
</CSidebar>
4630
)
4731
}

0 commit comments

Comments
 (0)