https://github.com/phantasma-io/explorerfrontend
Explorer Frontend
https://github.com/phantasma-io/explorerfrontend
blockchain crypto explorer layer1 mui next phantasma phantasmachain react typescript
Last synced: 10 months ago
JSON representation
Explorer Frontend
- Host: GitHub
- URL: https://github.com/phantasma-io/explorerfrontend
- Owner: phantasma-io
- License: apache-2.0
- Created: 2024-03-11T12:30:45.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-03T20:21:19.000Z (10 months ago)
- Last Synced: 2025-07-03T21:27:46.192Z (10 months ago)
- Topics: blockchain, crypto, explorer, layer1, mui, next, phantasma, phantasmachain, react, typescript
- Language: TypeScript
- Homepage: https://explorer-frontend-phantasmaio.vercel.app/
- Size: 1.77 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Explorer Frontend
## Installation with docker
### User
Create user 'pha'. All following steps will be using this user and home directory '/home/pha'.
### Docker
Install Docker according to the following instruction: https://docs.docker.com/engine/install/
Create folder for containers:
```
mkdir /home/pha/docker
```
### Frontend
Create following folder:
```
mkdir -p /home/pha/docker/explorer-frontend
```
Copy content of ExplorerFrontend/docker folder into /home/pha/docker/explorer-frontend.
Add file /home/pha/docker/explorer-frontend/.env with the following content:
```
# Github branch to be used
BUILD_BRANCH=main
```
where 'main' is main github branch of backend project which we use for production deployment.
Launch frontend service from folder /home/pha/docker/explorer-frontend by either using sh script 'deploy.sh'
```
deploy.sh
```
or by running commands
```
docker compose pull
docker compose up -d
```
### Nginx
Switch to 'root' user or use sudo.
Install Nginx package.
Place list of Cloudflare IP addresses into this file:
/etc/nginx/cloudflare-allow.conf
Content for this file can be obtained here: https://www.cloudflare.com/ips
Set these rights:
```
chmod 644 /etc/nginx/cloudflare-allow.conf
```
Place phantasma.info certificate and certificate key into following locations:
/etc/ssl/certs/cf-phantasma.info.pem
/etc/ssl/private/cf-phantasma.info.key
Set rights for these files
```
chmod 644 /etc/ssl/certs/cf-phantasma.info.pem
chmod 600 /etc/ssl/private/cf-phantasma.info.key
```
Add following file:
```
/etc/nginx/sites-available/explorer.phantasma.info
```
with the following content:
```
server {
listen 443 ssl;
include /etc/nginx/cloudflare-allow.conf;
deny all;
server_name explorer.phantasma.info;
ssl_certificate /etc/ssl/certs/cf-phantasma.info.pem;
ssl_certificate_key /etc/ssl/private/cf-phantasma.info.key;
location / {
proxy_pass http://127.0.0.1:4500;
# https://nginx.org/en/docs/http/websocket.html
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
```
Set these rights:
```
chmod 644 /etc/nginx/sites-available/explorer.phantasma.info
```
Create link with the following command:
```
ln -s /etc/nginx/sites-available/explorer.phantasma.info /etc/nginx/sites-enabled/explorer.phantasma.info
```
Test Nginx configuration using command:
```
sudo nginx -t
```
Restart Nginx to apply changes:
```
sudo /etc/init.d/nginx restart
```
### Test frontend
To test if deployment was successful, following url can be used:
https://explorer.phantasma.info/
## Installation without docker
### Requirements
Baseline:
- Display chains
- Display addresses
- Display blocks
- Display transactions
- Display contracts
- Display tokens
- Display DAOs
- Search
- Export CSV
Extra spice:
- Refreshed design
- Mobile friendly
- Dark mode
- White label
- Localization
- Data visualization
- Component library with `storybook`
- Unit tests with `jest` and `react-testing-library`
- Integration / e2e tests with `cypress`
- CI workflows with `github-actions`
- CD workflows with `vercel`
- Auto generated changelogs on release
### Scripts
```tsx
// install deps
yarn install
// run dev server
yarn dev
// build app
yarn build
// start app
yarn start
// export app
yarn export
// run lint
yarn lint
// run unit tests
yarn test
// run e2e tests
yarn cy:run
// run storybook
yarn sb
```
### Dev Dependencies
- `Yarn`
- `Typescript`
- `React`
- `Material-UI`
- `Next`
- `Prettier`
- `ESLint`
- `Commit Lint`
- `Lint Staged`
- `Husky`
- `Jest`
- `React Testing Library`
- `Cypress`
- `Storybook`
- `Webpack`
- `Semantic Release`