Skip to content

Commit

Permalink
🧼 prettier (#266)
Browse files Browse the repository at this point in the history 
* prettier

* revert index
  • Loading branch information
@dawsbot
dawsbot committed Feb 13, 2024
1 parent 3e007fc commit e7c80d6
Show file tree
Hide file tree
Showing 23 changed files with 565 additions and 434 deletions.
1 change: 1 addition & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ dist
coverage
docusaurus/build
.docusaurus
.husky
*.png
*.sh
*.un~
Expand Down
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ We have set up a GitHub project [here](https://github.com/dawsbot/essential-eth/

## Quick bootstrap

* All versions of node 12 and higher are supported
- All versions of node 12 and higher are supported

```bash
# Install and build
Expand Down
7 changes: 4 additions & 3 deletions docusaurus/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
/** @type {import('@docusaurus/types').Config} */
const config = {
title: 'Essential Eth',
tagline: "A simple, lightweight library for building applications on Ethereum.",
tagline:
'A simple, lightweight library for building applications on Ethereum.',
url: 'https://eeth.dev/',
baseUrl: '/',
onBrokenLinks: 'throw',
Expand Down Expand Up @@ -72,10 +73,10 @@ const config = {
label: 'Providers',
position: 'left',
},
{
{
href: '/getting_started',
label: 'Getting Started',
position: 'left'
position: 'left',
},
{
href: 'https://github.com/earnifi/essential-eth',
Expand Down
25 changes: 8 additions & 17 deletions docusaurus/src/components/Contributions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,9 @@ function Contribute({ title, src, description }: ContributeItem) {
return (
<div className={clsx('col--9 glossy-border contribute-container')}>
<div className="text--center">
<img
src={src}
className='contribute-img'
/>
<img src={src} className="contribute-img" />
</div>
<div
className={'padding-horiz--md'}
style={{ padding: '3rem' }}
>
<div className={'padding-horiz--md'} style={{ padding: '3rem' }}>
<h3>{title}</h3>
<p>{description}</p>
<div>
Expand All @@ -56,16 +50,13 @@ export default function HomepageContributions(): JSX.Element {
<>
<section>
<div className="container">
<div className="contribute-container">
<div
className="row"
style={{ justifyContent: 'center' }}
>
{ContributeList.map((props, idx) => (
<Contribute key={idx} {...props} />
))}
</div>
<div className="contribute-container">
<div className="row" style={{ justifyContent: 'center' }}>
{ContributeList.map((props, idx) => (
<Contribute key={idx} {...props} />
))}
</div>
</div>
</div>
</section>
</>
Expand Down
143 changes: 83 additions & 60 deletions docusaurus/src/components/HomepageFeatures/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ const FeatureList: FeatureItem[] = [
src: '/img/feather.png',
description: (
<>
Essential Eth was designed from the ground up to be <strong>20x smaller than
ethers.js and web3.js.</strong> This compact form facilitates quicker setups and optimizes storage.
Essential Eth was designed from the ground up to be{' '}
<strong>20x smaller than ethers.js and web3.js.</strong> This compact
form facilitates quicker setups and optimizes storage.
</>
),
},
Expand All @@ -26,9 +27,10 @@ const FeatureList: FeatureItem[] = [
src: '/img/globe.png',
description: (
<>
Choosing Essential Eth means more than using a lean and efficient tool - it
supports Ethereum's decentralized tech stack. This library diversifies front-end tools,
echoing Ethereum's multi-client approach and mitigating risks tied to ecosystem single library reliance.
Choosing Essential Eth means more than using a lean and efficient tool -
it supports Ethereum's decentralized tech stack. This library
diversifies front-end tools, echoing Ethereum's multi-client approach
and mitigating risks tied to ecosystem single library reliance.
</>
),
},
Expand All @@ -38,8 +40,8 @@ const FeatureList: FeatureItem[] = [
description: (
<>
The bundle size of essential-eth is <strong>less than 5kb</strong> for
most functions. Smaller bundles mean faster load times,
leading to a more responsive and efficient user experience.{' '}
most functions. Smaller bundles mean faster load times, leading to a
more responsive and efficient user experience.{' '}
<a
href="https://bundlephobia.com/package/essential-eth"
target="_blank"
Expand All @@ -54,8 +56,9 @@ const FeatureList: FeatureItem[] = [
src: '/img/test-tube.png',
description: (
<>
Thanks to Essential Eth's slim codebase, fortified by full TypeScript integration and
Jest testing, bugs have nowhere to hide – ensuring a delightful coding experience.
Thanks to Essential Eth's slim codebase, fortified by full TypeScript
integration and Jest testing, bugs have nowhere to hide – ensuring a
delightful coding experience.
</>
),
},
Expand All @@ -74,8 +77,9 @@ const FeatureList: FeatureItem[] = [
src: '/img/crossed-swords.png',
description: (
<>
The reliability and stability of Essential Eth are clearly demonstrated by its extensive
real-world usage. It is used in production by over 100,000 visitors per month on{' '}
The reliability and stability of Essential Eth are clearly demonstrated
by its extensive real-world usage. It is used in production by over
100,000 visitors per month on{' '}
<a href="https://earni.fi" target="_blank">
Earnifi 🚁
</a>
Expand Down Expand Up @@ -117,22 +121,30 @@ export default function HomepageFeatures(): JSX.Element {
</section>
<br />
<br />
<div className={clsx('text-margin')} id="core-features" >
<h1 style={{fontSize: '40px'}}> Core Features</h1>
<p style={{fontSize: '18px'}}>Welcome to the Essential Eth library! Designed for both seasoned developers
and those new to the Ethereum blockchain, Essential Eth provides easy-to-use functions for all your
development needs. In the following section, we've outlined some of the most popular features of the library
along with simple examples to get you started:</p>

<h2 style={{fontSize: '28px'}}>Utils 🔧 </h2>
<p style={{fontSize: '18px', lineHeight: '1.6'}}>The Utils module is your go-to for common Ethereum needs.
Whether you're converting between Ether and Wei or validating Ethereum addresses, Utils has you covered.
Check out these examples:</p>

<h3 style={{fontSize: '24px'}}>etherToWei and weiToEther 💸 </h3>
<p style={{fontSize: '16px'}}>These functions allow you to easily convert between the two standard units
of ether: Ether and Wei. Much like dollars and cents, Ether is often used for high-level transactions,
while Wei is the smallest possible unit of the currency, ideal for precision.</p>
<div className={clsx('text-margin')} id="core-features">
<h1 style={{ fontSize: '40px' }}> Core Features</h1>
<p style={{ fontSize: '18px' }}>
Welcome to the Essential Eth library! Designed for both seasoned
developers and those new to the Ethereum blockchain, Essential Eth
provides easy-to-use functions for all your development needs. In the
following section, we've outlined some of the most popular features of
the library along with simple examples to get you started:
</p>

<h2 style={{ fontSize: '28px' }}>Utils 🔧 </h2>
<p style={{ fontSize: '18px', lineHeight: '1.6' }}>
The Utils module is your go-to for common Ethereum needs. Whether
you're converting between Ether and Wei or validating Ethereum
addresses, Utils has you covered. Check out these examples:
</p>

<h3 style={{ fontSize: '24px' }}>etherToWei and weiToEther 💸 </h3>
<p style={{ fontSize: '16px' }}>
These functions allow you to easily convert between the two standard
units of ether: Ether and Wei. Much like dollars and cents, Ether is
often used for high-level transactions, while Wei is the smallest
possible unit of the currency, ideal for precision.
</p>
<CodeBlock language="typescript">
{`import { etherToWei, weiToEther } from 'essential-eth';
Expand All @@ -144,11 +156,14 @@ export default function HomepageFeatures(): JSX.Element {
`}
</CodeBlock>
<br />

<h3 style={{fontSize: '24px'}}>isAddress ✅ </h3>
<p style={{fontSize: '16px'}}>The 'isAddress' function validates Ethereum addresses. It checks whether the
input string meets the formatting rules for a valid Ethereum address, which is essential for preventing errors
during transactions.</p>

<h3 style={{ fontSize: '24px' }}>isAddress ✅ </h3>
<p style={{ fontSize: '16px' }}>
The 'isAddress' function validates Ethereum addresses. It checks
whether the input string meets the formatting rules for a valid
Ethereum address, which is essential for preventing errors during
transactions.
</p>
<CodeBlock language="typescript">
{`import { isAddress } from 'essential-eth';
Expand All @@ -160,19 +175,22 @@ export default function HomepageFeatures(): JSX.Element {
`}
</CodeBlock>
<br />

<h3 style={{fontSize: '24px'}}>toChecksumAddress 🔑</h3>
<p style={{fontSize: '16px'}}>The 'toChecksumAddress' function converts an Ethereum address to a checksum address.
Checksum addresses include a mix of capital and lowercase letters, which can help prevent errors due to typos and
incorrect input.</p>

<h3 style={{ fontSize: '24px' }}>toChecksumAddress 🔑</h3>
<p style={{ fontSize: '16px' }}>
The 'toChecksumAddress' function converts an Ethereum address to a
checksum address. Checksum addresses include a mix of capital and
lowercase letters, which can help prevent errors due to typos and
incorrect input.
</p>
<CodeBlock language="typescript">
{`import { toChecksumAddress } from 'essential-eth';
toChecksumAddress('0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359');
// returns: '0xfB6916095ca1df60bB79Ce92cE3Ea74c37c5d359'
`}
</CodeBlock>

<div>
<Link
className="button button--secondary button--lg"
Expand All @@ -183,18 +201,23 @@ export default function HomepageFeatures(): JSX.Element {
</div>
<br />
<br />
<h2 style={{fontSize: '28px'}}>Providers 🌐 </h2>
<p style={{fontSize: '18px', lineHeight: '1.6'}}>A provider is a connection to an Ethereum node that allows you to communicate with the network.
It serves as an interface between your application and the blockchain. Providers handle the underlying protocol and provide methods to interact
with the Ethereum network, such as sending transactions, retrieving account balances, and querying contract data.
</p>
<h3 style={{fontSize: '24px'}}>JsonRpcProvider 📡 </h3>
<h2 style={{ fontSize: '28px' }}>Providers 🌐 </h2>
<p style={{ fontSize: '18px', lineHeight: '1.6' }}>
The JsonRpcProvider module provides a straightforward way to
interact with Ethereum nodes. Whether you're querying account balances or performing other operations, JsonRpcProvider
simplifies the process. Here's an example of how to use it:
A provider is a connection to an Ethereum node that allows you to
communicate with the network. It serves as an interface between your
application and the blockchain. Providers handle the underlying
protocol and provide methods to interact with the Ethereum network,
such as sending transactions, retrieving account balances, and
querying contract data.
</p>

<h3 style={{ fontSize: '24px' }}>JsonRpcProvider 📡 </h3>
<p style={{ fontSize: '18px', lineHeight: '1.6' }}>
The JsonRpcProvider module provides a straightforward way to interact
with Ethereum nodes. Whether you're querying account balances or
performing other operations, JsonRpcProvider simplifies the process.
Here's an example of how to use it:
</p>

<CodeBlock language="typescript">
{`import { JsonRpcProvider } from 'essential-eth';
Expand All @@ -206,12 +229,15 @@ export default function HomepageFeatures(): JSX.Element {
`}
</CodeBlock>
<br />

<h3 style={{fontSize: '24px'}}>FallthroughProvider 🔄 </h3>
<p style={{fontSize: '18px', lineHeight: '1.6'}}>The FallthroughProvider is designed for reliability. If one Ethereum node
fails to respond, it automatically switches to the next provided URL. This guarantees that your application remains functional,
even if individual nodes become unresponsive. Here's an example:</p>


<h3 style={{ fontSize: '24px' }}>FallthroughProvider 🔄 </h3>
<p style={{ fontSize: '18px', lineHeight: '1.6' }}>
The FallthroughProvider is designed for reliability. If one Ethereum
node fails to respond, it automatically switches to the next provided
URL. This guarantees that your application remains functional, even if
individual nodes become unresponsive. Here's an example:
</p>

<CodeBlock language="typescript">
{`import { FallthroughProvider } from 'essential-eth';
Expand All @@ -228,15 +254,12 @@ export default function HomepageFeatures(): JSX.Element {
</CodeBlock>

<br />
<Link
className="button button--secondary button--lg"
to="/docs/api"
>
<Link className="button button--secondary button--lg" to="/docs/api">
View Full API
</Link>
<br />
<br />
</div>
</>
);
}
);
}
39 changes: 29 additions & 10 deletions docusaurus/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* content-centric websites. You can override its default variables here.
*/

:root {
:root {
--ifm-code-font-size: 95%;
/* Button colors */
--secondary: #52d4e1;
Expand Down Expand Up @@ -79,10 +79,17 @@
.glossy-border {
border: 3px solid var(--glossy-border-color);
padding: 20px;
background: linear-gradient(to bottom right, var(--glossy-border-background-color1), var(--glossy-border-background-color2));
box-shadow: 0px 10px 15px var(--glossy-border-shadow-color), 5px 5px 15px var(--glossy-border-shadow-color),
inset 0px -3px 10px var(--glossy-border-inset-shadow-color1), inset 0px 3px 10px var(--glossy-border-inset-shadow-color2);
border-radius: 15px;
background: linear-gradient(
to bottom right,
var(--glossy-border-background-color1),
var(--glossy-border-background-color2)
);
box-shadow:
0px 10px 15px var(--glossy-border-shadow-color),
5px 5px 15px var(--glossy-border-shadow-color),
inset 0px -3px 10px var(--glossy-border-inset-shadow-color1),
inset 0px 3px 10px var(--glossy-border-inset-shadow-color2);
border-radius: 15px;
margin: 50px;
}

Expand Down Expand Up @@ -117,15 +124,27 @@

/* Gradient background */
.gradient-bg {
background: linear-gradient(45deg, var(--gradient-color1), var(--gradient-color2), var(--gradient-color3), var(--gradient-color4));
background: linear-gradient(
45deg,
var(--gradient-color1),
var(--gradient-color2),
var(--gradient-color3),
var(--gradient-color4)
);
background-size: 200% 200%;
animation: Gradient 10s ease infinite;
}

@keyframes Gradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

/* Miscellaneous styles */
Expand Down Expand Up @@ -189,4 +208,4 @@
margin-left: 50px;
margin-right: 50px;
}
}
}
Loading

0 comments on commit e7c80d6

Please sign in to comment.