• This repository has been archived on 05/Nov/2023
  • Stars
    star
    124
  • Rank 288,207 (Top 6 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A Helium Blockchain Explorer

Helium Blockchain Explorer

Code that powers the official Helium Blockchain Explorer.

Development and Contribution

Any and all contributions from the community are encouraged.

  • Guidelines for how to contribute to this repository are here.
  • Discussion about the development and usage of the Helium Blockchain Explorer takes place in the official Helium Discord Server, specifically in the #explorer channel. Join us!
  • For a list of issues and prioritization, please go to our Project page.

Getting Started

  1. First, clone the repository to your local machine and navigate into the folder. For example:
git clone https://github.com/helium/explorer.git
cd explorer
  1. Second, install all the dependencies:
yarn
  1. Edit your environment variables
NEXT_PUBLIC_MAPBOX_KEY=pk.ey[...the rest of your access token...]
  • Rename the file ".env" (delete ".sample" from the file name)
  1. Then run the development server:
yarn dev
# or
npm run dev

And open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file and save your changes.

  1. Create a new logically-named branch. For example:
git checkout -b witness-list-enhancements
  1. Push your changes to GitHub and create a PR against the master branch, linking the PR to any relevant issues.

Styling

Right now, the Explorer is styled using a combination of the Ant Design system, inline styles, and classes found in the /styles/Explorer.css file.

Ant Design is a really powerful way to quickly implement various complex UI elements that would take a long time to build manually (e.g.: tables with pagination, date pickers, search bars) as well as common UI elements that have a lot of nuance in functionality (e.g.: checkboxes, buttons, tooltips, etc.) But sometimes systems like Ant can be very limiting and opinionated when it comes to customizing those UI elements. And systems like Ant Design can also become hard to work with when something like their column and row system doesn't quite align with the way you think a layout should look, or you want to remove or add extra padding somewhere for example.

And on the other hand, inline styles are a nice option for keeping the styles attached to the JSX code, and for conditionally styling things based on some logic. But inline styles don't allow for media queries, which are increasingly necessary to create a good mobile-first experience.

As the Explorer website becomes more mature and the broader Helium product family adopts a more cohesive design, customizing UI elements in a consistent way across the Explorer will become more necessary, especially considering that around 50% of the Explorer's visitors are visiting from mobile devices. Because everything Helium makes is intended to become open-source over time, ensuring that the design stays consistent across the entire family of Helium products (the Hotspot app, Console, helium.com, etc.) can become difficult the more one-off solutions are used to fix specific UI problems.

So in order to help us minimize the following things in Explorer:

  • hardcoded hex colors, font sizes, font weights, padding and margin values
  • long CSS files with confusing media queries, inconsistent class and ID names
  • one-off solutions to override or fight against design systems like Ant

we are trying out TailwindCSS. There is a /tailwind.config.js file at the root of the project which defines things like the website's color palette, breakpoints (sm, md, lg, xl), and in the future, things like font sizes, font weights, spacing tokens, and whatever else makes sense to include.

Moving the Explorer's styling code to Tailwind will be a gradual transition, and it might turn out that Tailwind isn't the best fit for Explorer in the end, in which case this section of the README will be updated accordingly.

How to use Tailwind

The Tailwind docs are a really great resource for getting up to speed quickly on the syntax, but here is a brief example to show the power of Tailwind. Something like this is common to see in the Explorer codebase right now:

<div
  style={{
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: '#222E46',
    alignItems: 'center',
    justifyContent: 'center',
    maxWidth: 1200,
    margin: '0 auto',
    padding: '16px 32px',
  }}
>
  <p
    style={{
      color: '#FFFFFF',
      fontSize: 16,
    }}
  >
    Example text
  </p>
  <p
    style={{
      color: '#EEEEEE',
      fontSize: 16,
    }}
  >
    Example text
  </p>
</div>

In Tailwind, the same code could be written like this:

<div className="flex flex-row bg-navy-500 items-center justify-center max-w-xl mx-auto py-4 px-8">
  <p className="text-white">Example text</p>
</div>

But the real power of Tailwind shows when you want to change the styling between mobile and desktop screen sizes.

In the first code snippet above, to make the styling different between screen sizes, you'd need to do something like this:

<div
  className='container'
  // ^^^ come up with a logical class name and add it
  style={{
    display: 'flex',
    flexDirection: 'row',
    // ^^^ delete this row
    backgroundColor: '#222E46',
    alignItems: 'center',
    justifyContent: 'center',
    maxWidth: 1200,
    margin: '0 auto',
    padding: '16px 32px',
  }}>

and then add some CSS code like this:

.container {
  flex-direction: row;
}

@media screen and (max-width: 576px) {
  .container {
    flex-direction: column;
  }
}

In Tailwind, you could accomplish the same thing without having to come up with a new class name or adding any CSS by simply changing the first few utility classes in the above div to read like this:

<div className='flex flex-col sm:flex-row ...

That might seem confusing at first glance, but another reason Tailwind is powerful is because it encourages us as frontend developers to take a mobile-first approach when styling things. The above set of utility classes in plain English translates to:

flex direction is "column", but if the screen size is bigger than "small" (mobile), flex-direction is "row"

Another nice use case for Tailwind is styling things conditionally while keeping the design system tokens intact. For example:

<p
  className={`font-bold text-xl ${
    status === 'online' ? 'text-green-400' : 'text-red-400'
  }`}
>
  {status}
</p>

The syntax takes some getting used to, and sometimes the class names can start to get unwieldy, but the utility class model fits really nicely with components, so any time you find yourself repeating a string of Tailwind utility classes is probably a good time to encapsulate that JSX as a component.

Questions

If you run into any issues or you have any questions about how to get started contributing, feel free to reach out on the #explorer channel in the official Helium Community Discord server!

Learn More

This is a Next.js project.

To learn more about Next.js, take a look at the following resources:

More Repositories

1

miner

Miner for the helium blockchain
Erlang
609
star
2

HIP

Helium Improvement Proposals
Jupyter Notebook
582
star
3

gateway-rs

The Helium Gateway
Rust
280
star
4

helium-wallet-rs

Rust implementation of a helium wallet CLI
Rust
258
star
5

blockchain-core

Erlang
214
star
6

denylist

Shell
201
star
7

plumtree

Epidemic Broadcast Trees
Erlang
193
star
8

hotspot-app

Helium hotspot app for iOS and Android
TypeScript
187
star
9

docs

Helium Documentation
MDX
120
star
10

helium-program-library

Helium programs to run on the Solana blockchain
TypeScript
118
star
11

erlang-libp2p

An Erlang implementation of libp2p swarms
Erlang
111
star
12

helium-js

Official TypeScript packages for interacting with the Helium blockchain
TypeScript
110
star
13

console

A management console to onboard and manage devices running on the Helium blockchain network.
JavaScript
104
star
14

router

router combines a LoRaWAN Network Server with an API for console, and provides a proxy to the Helium blockchain
Erlang
69
star
15

mappers

Mappers Frontend and API
Elixir
68
star
16

erlang-hbbft

Erlang implementation of HoneyBadgerBFT
Erlang
67
star
17

blockchain-etl

Blockchain follower that follows and stores the Helium blockchain
Erlang
64
star
18

longfi-arduino

C++
62
star
19

wallet-app

TypeScript
59
star
20

console-decoders

Payload decoder functions for console.
JavaScript
59
star
21

blockchain-node

A Heilum Blockchain Node
Erlang
58
star
22

network-explorer

TypeScript
57
star
23

angry-purple-tiger

animal-based hash digests for humans
JavaScript
48
star
24

blockchain-http

An http API for the helium blockchain database
Erlang
47
star
25

erlang-dkg

Distributed key generation for Erlang (using pairing based cryptography)
Erlang
41
star
26

erlang-h3

Erlang binding for Uber's H3 spatial coordinate library
Erlang
41
star
27

maker-starter-app

TypeScript
37
star
28

gateway-config

The Helium configuration application. Enables configuring the Helium Hotspot over Bluetooth
Erlang
37
star
29

helium-ledger-app

The official Helium app for the Ledger Nano S
C
32
star
30

helium-vote

TypeScript
30
star
31

helium-ledger-cli

Rust
26
star
32

virtual-lorawan-device

A utility that attaches to a Semtech UDP Host and pretends to be a LoRaWAN Device
Rust
23
star
33

proto

Rust
22
star
34

whitepaper

The Helium Whitepaper
TeX
19
star
35

oracles

Oracles for Helium subDAOs
Rust
19
star
36

gateway-mfr-rs

Rust
18
star
37

angry-purple-tiger-rs

animal-based hash digests for humans.. in rust
Rust
18
star
38

merkerl

A Merkle Tree implementation in Erlang
Erlang
18
star
39

rosetta-helium

Rosetta implementation for helium
Go
18
star
40

longfi-platformio

C++
16
star
41

packet-purchaser

Erlang
16
star
42

relcast

Relcast library
Erlang
15
star
43

gateway_mfr

Erlang Manufacturing Suppport Code
Erlang
15
star
44

erlang-lorawan

Erlang
15
star
45

cargo-elixir

JavaScript
15
star
46

ecc508

Library to communicate with the Microchip cryptoauthentication device
Erlang
14
star
47

lorawan-sniffer

Rust
14
star
48

helium-api-rs

A Rust library for accessing Helium API servers
Rust
14
star
49

erlang-multihash

Erlang implementation of multihash
Erlang
13
star
50

react-native-helium

TypeScript
13
star
51

onboarding-server

JavaScript
13
star
52

erlang-tpke

Threshold encryption
Erlang
11
star
53

helium-console-cli

A command line interface for interacting with Helium Console API
Rust
11
star
54

ebus

An Erlang binding to libdbus
Erlang
11
star
55

libp2p-crypto

Erlang cypto library used by the libp2p system
Erlang
11
star
56

psql-migration

A SQL migration script for Erlang
Erlang
10
star
57

kdtree

Simple kdtree library in erlang
Erlang
10
star
58

semtech-udp

Rust
9
star
59

ecc608-linux-rs

A linux rust library for the i2c ecc508 and ecc608 family of crypto chips
Rust
9
star
60

modular-governance

A modular set of governance contracts on solana
JavaScript
9
star
61

helium-packet-router

Erlang
9
star
62

erlang-erasure

Simple Erlang binding for Jerasure's Reed-Solomon erasure encoding/decoding
C
9
star
63

longfi-core

Platform agnostic implementation of core LongFi primitives.
C
9
star
64

erlang-splicer

Splice 2 sockets together in Erlang
Erlang
9
star
65

stm32-lora-disco-rs

Unofficial Rust Board Support Crate for B-L072Z-LRWAN1
GDB
8
star
66

longfi-erlang

LongFi core bindings for Erlang
C
8
star
67

ecc_compact

Unpatented ECC point compression for NIST p-256 public keys
C
8
star
68

xorf-generator

public key filter tool
Rust
8
star
69

erlang-multiaddr

Erlang implementation of multiaddr
Erlang
8
star
70

longfi-arduino-legacy

C
7
star
71

vincenty

Vincenty's formulae implementation in Erlang
Rust
7
star
72

erlang-pbc

Pairwise crypto
C
7
star
73

erlang-ubx

Erlang support for speaking to ublox gps modules using the ubx protocol
Erlang
6
star
74

lorawan-h3

LoRaWAN regions represented as H3 polyfills
Rust
6
star
75

account-compression-anchor-gen

Anchor generated CPI clients for account compression and bubblegum
Rust
6
star
76

explorer-api

JavaScript
6
star
77

ebus-gatt

A bluetooth gatt server implementation using ebus
Erlang
6
star
78

cortex-mpu

Cortex-M MPU library
Rust
6
star
79

packet-forwarder-test

Rust
6
star
80

erlang-tc

Erlang NIF for threshold_crypto
Erlang
5
star
81

helium-crypto-rs

Rust
5
star
82

well-known

Well known addresses, OUIs, etc. for the Helium network
5
star
83

gwmp-mux

Multiplexer for Semtech's GWMP over UDP
Rust
5
star
84

erl_angry_purple_tiger

Erlang port of angry_purple_tiger
Erlang
5
star
85

erlang-sss

Erlang binding for Shamir Secret Sharing
Erlang
5
star
86

sibyl

Erlang
4
star
87

miner-test

Helium miner testing utilities
Erlang
4
star
88

cream

An Erlang cache backed by the performant Moka library
Erlang
4
star
89

connman

Connection Manager
C
4
star
90

erlang-stats

A NIF wrapper around kthohr/stats
Makefile
4
star
91

ebus-connman

An erlang connman client using ebus
Erlang
4
star
92

helium-foundation-k8s

Helium foundation k8s defs
4
star
93

helium-data

Utilities for processing helium data
Rust
4
star
94

ipython-target-modeling

Testing targeting models
Jupyter Notebook
3
star
95

module-sdk

Libraries and example applications for developing Helium embedded Applications
C
3
star
96

wallet-issues-tracker

Issue tracker for the Helium Wallet app
3
star
97

longfi-st-hal

Helium LongFi Examples Using ST HAL
C
3
star
98

etl-extract

Extracts ETL data that can be used for display or further analysis
Rust
3
star
99

elixir-reed-solomon-erasure

Reed solomon erasure coding NIFs for Elixir
Elixir
3
star
100

intercept

Erlang
3
star