Prettier formatting fixes

components/common/newsletter.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 export const Newsletter: React.FC = () => {
   return (
     <section id="newsletter" className="container mx-auto my-12 max-w-5xl px-4 md:my-24 lg:my-48">
-      <div className="rounded-lg border border-grey-800 bg-[url('/images/newsletter/[email protected]')] bg-cover bg-center bg-no-repeat py-3 px-3 md:bg-contain md:bg-right md:py-12 md:px-16">
-        <div className="rounded bg-grey-900 p-4 md:rounded-none md:bg-transparent md:py-2 md:px-0">
+      <div className="rounded-lg border border-grey-800 bg-[url('/images/newsletter/[email protected]')] bg-cover bg-center bg-no-repeat px-3 py-3 md:bg-contain md:bg-right md:px-16 md:py-12">
+        <div className="rounded bg-grey-900 p-4 md:rounded-none md:bg-transparent md:px-0 md:py-2">
           <h3 className="my-4 text-3xl font-medium md:text-4xl lg:text-6xl">Stay tuned</h3>
           <p className="max-w-lg md:text-lg">
             Subscribe to our newsletter and never miss updates, announcements and opportunities.{' '}
@@ -46,7 +46,7 @@ const NewsletterForm: React.FC = () => {
         </div>
         <input
           type="submit"
-          className="curso mt-4 rounded-lg bg-grey-700 py-4 px-4 text-white hover:bg-grey-800 md:mt-0 md:rounded-l-none md:px-8"
+          className="curso mt-4 rounded-lg bg-grey-700 px-4 py-4 text-white hover:bg-grey-800 md:mt-0 md:rounded-l-none md:px-8"
           value="Sign up"
         />
       </fieldset>

components/layout/footer/layout-footer.tsx

@@ -7,7 +7,7 @@ import { footerLinks } from './footer-nav-items';
 
 export const Footer = () => {
   return (
-    <footer className="relative z-10 py-6 text-white sm:mt-12 md:mt-24 md:py-12 lg:mt-48 lg:py-24 lg:pt-12 lg:pb-24">
+    <footer className="relative z-10 py-6 text-white sm:mt-12 md:mt-24 md:py-12 lg:mt-48 lg:py-24 lg:pb-24 lg:pt-12">
       <div className="container mx-auto max-w-7xl">
         <div className="flex flex-col justify-between p-4 md:flex-row md:flex-wrap">
           {footerLinks.map((group, index) => (

components/layout/header/header-nav.tsx

@@ -29,7 +29,7 @@ const NavOverlay = ({ isOpen, onNavigation }: NavOverlayProps) => {
       leave="transition-opacity duration-150"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
-      className="fixed left-0 top-0 right-0 bottom-0 z-10 bg-black"
+      className="fixed bottom-0 left-0 right-0 top-0 z-10 bg-black"
     >
       <div className="flex flex-col justify-start px-4 pt-24 md:pt-36">
         {Object.entries(NAV_ITEMS).map((entry) => (

components/layout/header/header.tsx

@@ -12,7 +12,7 @@ export const Header = ({ overlayHeader = false }: HeaderProps) => {
   const [isMobileNavOpen, setIsMobileNavOpen] = React.useState(false);
 
   return (
-    <header className={overlayHeader ? 'absolute top-0 left-0 right-0' : 'relative'}>
+    <header className={overlayHeader ? 'absolute left-0 right-0 top-0' : 'relative'}>
       <div className="container mx-auto my-4 max-w-7xl md:py-8 lg:py-12">
         <div className="flex flex-row items-center justify-between px-4">
           <Link href="/">

components/pages/binance/binance-edgeware-intro.tsx

@@ -4,9 +4,9 @@ export const BinanceEdgewareIntro = () => {
   return (
     <section
       id="edgeware"
-      className="container my-24 mx-auto max-w-3xl rounded-md border border-grey-700"
+      className="container mx-auto my-24 max-w-3xl rounded-md border border-grey-700"
     >
-      <div className="bg-[url('/images/backgrounds/edg-logomark-bg.svg')] bg-[center_top_25%] bg-no-repeat py-8 px-16 text-center">
+      <div className="bg-[url('/images/backgrounds/edg-logomark-bg.svg')] bg-[center_top_25%] bg-no-repeat px-16 py-8 text-center">
         <p className="my-12 text-2xl">
           Edgeware is a scalable, sovereign and cooperatively owned smart contract platform with a
           large public treasury, strong governing community, and a focus on DAO deployments.
@@ -23,7 +23,7 @@ export const BinanceEdgewareIntro = () => {
         <div className="my-12">
           <a
             href={socialMediaUrls.discordUrl}
-            className="inline-block rounded-lg bg-grey-500 py-4 px-12 text-xl font-medium text-white hover:bg-grey-600 hover:text-white"
+            className="inline-block rounded-lg bg-grey-500 px-12 py-4 text-xl font-medium text-white hover:bg-grey-600 hover:text-white"
           >
             Join our community on Discord
           </a>

components/pages/binance/binance-governance.tsx

@@ -15,7 +15,7 @@ export const BinanceGovernance: React.FC = () => {
         <div className="my-4">
           <a
             href="https://www.edgeware.app/#/delegation"
-            className="inline-block rounded-lg bg-primary-500 py-4 px-12 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
+            className="inline-block rounded-lg bg-primary-500 px-12 py-4 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -44,7 +44,7 @@ export const BinanceGovernance: React.FC = () => {
         <div className="my-4">
           <a
             href="https://www.edgeware.app/#/delegation"
-            className="inline-block rounded-lg bg-primary-500 py-4 px-12 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
+            className="inline-block rounded-lg bg-primary-500 px-12 py-4 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
             target="_blank"
             rel="noopener noreferrer"
           >

components/pages/binance/binance-kabocha.tsx

@@ -1,6 +1,6 @@
 export const BinanceKabocha: React.FC = () => {
   return (
-    <section className="container my-32 mx-auto flex max-w-4xl" id="kabocha-network">
+    <section className="container mx-auto my-32 flex max-w-4xl" id="kabocha-network">
       <div className="text-center">
         <div className="flex flex-col items-center justify-center">
           <img
@@ -26,7 +26,7 @@ export const BinanceKabocha: React.FC = () => {
         <div className="my-4">
           <a
             href="https://www.kabocha.network/"
-            className="inline-block rounded-lg bg-primary-500 py-4 px-12 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
+            className="inline-block rounded-lg bg-primary-500 px-12 py-4 text-xl font-medium text-white hover:bg-primary-600 hover:text-white"
           >
             Learn more about Kabocha
           </a>

components/pages/binance/binance-stake.tsx

@@ -3,11 +3,11 @@ import { StakingRewardsWidget } from './binance-stake-widget';
 
 export const BinanceStake = () => {
   return (
-    <section className="container my-32 mx-auto max-w-4xl" id="stake">
+    <section className="container mx-auto my-32 max-w-4xl" id="stake">
       <div className="text-center">
         <div className="text-center">
           <h2 className="text-6xl font-medium">Stake and Earn</h2>
-          <p className="my-8 mx-auto max-w-2xl text-lg">
+          <p className="mx-auto my-8 max-w-2xl text-lg">
             Grow your holdings by staking your EDG.
             <br />
             Calculate your earnings with the Staking Rewards Widget Calculator

components/pages/build/build-builders.tsx

@@ -1,8 +1,8 @@
 export const BuildBuilders = () => {
   return (
-    <section className="container mx-auto max-w-6xl py-6 px-4 md:py-12 lg:py-24" id="builders">
+    <section className="container mx-auto max-w-6xl px-4 py-6 md:py-12 lg:py-24" id="builders">
       {/* Intro text*/}
-      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-16">
+      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-x-16 md:space-y-0">
         <div className="w-full md:w-1/2">
           <img
             src="/images/build/code-s-slash-large.png"

components/pages/build/build-get-started.tsx

@@ -20,7 +20,7 @@ import { LinksList } from '../get-started/links-list';
 
 export const BuildGetStarted = () => {
   return (
-    <section className="container mx-auto max-w-7xl py-8 px-4 md:py-16 lg:py-24" id="get-started">
+    <section className="container mx-auto max-w-7xl px-4 py-8 md:py-16 lg:py-24" id="get-started">
       {/* Intro text*/}
       <div className="flex flex-col items-stretch md:flex-row md:space-x-24">
         <div className="my-8 w-full md:my-0 md:w-1/2">
@@ -132,7 +132,7 @@ const NetworksInfo = () => {
             <Tab
               key={network}
               className={({ selected }) =>
-                `py-4 px-2 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
+                `px-2 py-4 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
               }
             >
               {network}
@@ -148,7 +148,7 @@ const NetworksInfo = () => {
                     <Tab
                       key={chain}
                       className={({ selected }) =>
-                        `py-4 px-2 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
+                        `px-2 py-4 text-sm ${selected ? 'border-b border-b-primary-500' : ''}`
                       }
                     >
                       {chain}

components/pages/build/build-hero.tsx

@@ -1,7 +1,7 @@
 export const BuildHero = () => {
   return (
     <section
-      className="container mx-auto max-w-7xl py-6 px-4 md:py-12 lg:py-24"
+      className="container mx-auto max-w-7xl px-4 py-6 md:py-12 lg:py-24"
       id="build-on-cutting-edge"
     >
       {/* Intro text*/}

components/pages/build/build-quotes.tsx

@@ -12,7 +12,7 @@ export const BuildQuotes = () => {
   };
 
   return (
-    <section className="container mx-auto my-24 max-w-3xl py-24 px-4" id="quotes">
+    <section className="container mx-auto my-24 max-w-3xl px-4 py-24" id="quotes">
       <Slider {...settings}>
         <BuildQuoteEntry author="Depth Hoar" imageUrl="/images/build/quotes/depth.jpg">
           Working for Edgeware lets me choose my work while being part of a DAO of like-minded

components/pages/build/build-resources.tsx

@@ -5,7 +5,7 @@ import Apps2LineIcon from 'remixicon/icons/System/apps-2-line.svg';
 export const BuildResources = () => {
   return (
     <section id="resources" className="container mx-auto my-6 max-w-4xl md:my-12 lg:my-24">
-      <div className="flex flex-col items-center space-y-4 px-4 md:flex-row md:space-y-0 md:space-x-24">
+      <div className="flex flex-col items-center space-y-4 px-4 md:flex-row md:space-x-24 md:space-y-0">
         <div className="f-full flex flex-col items-center text-center md:w-1/2">
           <div className="py-4">
             <div className="mx-auto h-fit w-fit rounded-full bg-white p-6">

components/pages/build/build-tech-features.tsx

@@ -3,11 +3,11 @@ import AsteriskIcon from 'remixicon/icons/Editor/asterisk.svg';
 export const BuildTechFeatures = () => {
   return (
     <section
-      className="md-my-12 container mx-auto my-6 max-w-5xl py-24 px-4 lg:my-24"
+      className="md-my-12 container mx-auto my-6 max-w-5xl px-4 py-24 lg:my-24"
       id="technical-features"
     >
       {/* Intro text*/}
-      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-16">
+      <div className="flex flex-col items-center space-y-4 md:flex-row md:space-x-16 md:space-y-0">
         <div className="w-full md:w-1/2">
           <h2 className="my-4 text-3xl font-medium md:text-4xl lg:text-5xl">Technical Features</h2>
           <p className="text-md my-4 leading-loose">

components/pages/contribute/contribute-edgizen.tsx

@@ -5,8 +5,8 @@ import OpenArmLineIcon from 'remixicon/icons/User & Faces/open-arm-line.svg';
 
 export const ContributeEDGizen = () => {
   return (
-    <div className="container mx-auto max-w-5xl py-24 px-4">
-      <div className="flex flex-col items-end space-y-8 md:flex-row md:space-y-0 md:space-x-32">
+    <div className="container mx-auto max-w-5xl px-4 py-24">
+      <div className="flex flex-col items-end space-y-8 md:flex-row md:space-x-32 md:space-y-0">
         <div className="w-full md:w-1/2">
           <OpenArmLineIcon className="h-12 w-12 fill-white text-white" />
           <h2 className="my-4 text-3xl font-medium md:text-4xl">Become an EDGizen</h2>
@@ -26,7 +26,7 @@ export const ContributeEDGizen = () => {
         <div className="w-full bg-[url(/images/contribute/edgizen-bg.jpg)] bg-cover md:w-1/2">
           <div className="rounded-xl border border-green-600 p-4 py-8 md:p-8">
             <span>Requirements:</span>
-            <ol className="mt-4 ml-5 list-decimal space-y-2 text-green-600">
+            <ol className="ml-5 mt-4 list-decimal space-y-2 text-green-600">
               <li>Have EDG</li>
               <li>Stake, Delegate or Vote</li>
               <li>Claim your custom on-chain ID</li>

components/pages/contribute/contribute-hero.tsx

@@ -1,6 +1,6 @@
 export const ContributeHero = () => {
   return (
-    <div className="container mx-auto max-w-4xl py-24 px-4">
+    <div className="container mx-auto max-w-4xl px-4 py-24">
       {/* Intro text & CTAs */}
       <div className="text-center">
         <h1 className="my-4 text-3xl font-medium md:text-4xl lg:text-5xl">

components/pages/contribute/contribute-proposal.tsx

@@ -5,7 +5,7 @@ import CompassDiscoverLineIcon from 'remixicon/icons/Map/compass-discover-line.s
 export const ContributeProposal = () => {
   return (
     <div className="container mx-auto max-w-6xl px-4">
-      <div className="flex flex-col items-center rounded-md bg-white py-8 px-4 text-center md:py-16">
+      <div className="flex flex-col items-center rounded-md bg-white px-4 py-8 text-center md:py-16">
         <CompassDiscoverLineIcon className="h-12 w-12 fill-black text-black" />
         <h2 className="my-4 text-3xl font-medium text-black md:text-4xl">Design a Proposal</h2>
         <p className="max-w-prose text-grey-400">

components/pages/ecosystem/ecosystem-hero.tsx

@@ -4,7 +4,7 @@ export const EcosystemHero: React.FC = () => {
       <div className="container mx-auto flex min-h-[75vh] max-w-6xl">
         <div className="my-auto w-full text-center">
           <h1 className="my-4 text-6xl font-medium">Home to next generation networks</h1>
-          <p className="my-8 mx-auto max-w-prose text-lg">
+          <p className="mx-auto my-8 max-w-prose text-lg">
             Edgeware partners with leading cryptocurrency teams, projects and collectives to create
             the future of Web3.
           </p>

components/pages/ecosystem/ecosystem-list-card.tsx

@@ -43,7 +43,7 @@ export const PartnerCard = ({
       )}
 
       {protocol && (
-        <span className="absolute right-0 bottom-0 flex flex-row rounded-tl-md bg-primary-500 p-1 px-2 text-xs text-grey-800">
+        <span className="absolute bottom-0 right-0 flex flex-row rounded-tl-md bg-primary-500 p-1 px-2 text-xs text-grey-800">
           {protocol}
         </span>
       )}

components/pages/ecosystem/ecosystem-list.tsx

@@ -34,10 +34,10 @@ type EcosystemPartnersListNavProps = {
 
 const EcosystemPartnersListNav = ({ items }: EcosystemPartnersListNavProps) => {
   return (
-    <nav className="my-8 mx-auto flex max-w-4xl flex-row flex-wrap items-center justify-center">
+    <nav className="mx-auto my-8 flex max-w-4xl flex-row flex-wrap items-center justify-center">
       {items.map((cat) => (
         <a
-          className="my-2 mx-4 rounded-md bg-grey-800 px-8 py-2 hover:bg-grey-500 hover:text-white"
+          className="mx-4 my-2 rounded-md bg-grey-800 px-8 py-2 hover:bg-grey-500 hover:text-white"
           href={`#category-${slugify(cat, { lower: true })}`}
           key={cat}
         >

components/pages/ecosystem/widget/ecosystem-widget.tsx

@@ -10,7 +10,7 @@ export const EcosystemWidget = () => {
           You can convert your EdgeWASM tokens to EdgeEVM tokens and vice versa.
         </p>
       </div>
-      <div className="mx-auto mt-16 mb-8 max-w-4xl rounded-lg border border-grey-800 p-8">
+      <div className="mx-auto mb-8 mt-16 max-w-4xl rounded-lg border border-grey-800 p-8">
         <Web3ContextProvider>
           <WidgetForm />
         </Web3ContextProvider>

components/pages/ecosystem/widget/web3-context.tsx

@@ -175,7 +175,9 @@ export const Web3ContextProvider = ({ children }) => {
 
         const accounts = await Promise.all(
           allAccounts.map(async (a) => {
-            const accountInfo = (await api.query.system.account(a.address)) as AccountInfo;
+            const accountInfo = (await api.query.system.account(
+              a.address
+            )) as unknown as AccountInfo;
             const amount = accountInfo.data.free;
 
             return {

components/pages/ecosystem/widget/widget-form.tsx

@@ -96,7 +96,7 @@ export const WidgetForm = () => {
             {state.errors.global || 'Something went wrong. Please try again.'}
           </p>
           <button
-            className="text-blue-500 mt-2 ml-2 rounded bg-grey-400 p-2 px-4 text-sm"
+            className="text-blue-500 ml-2 mt-2 rounded bg-grey-400 p-2 px-4 text-sm"
             onClick={handleReset}
           >
             Start again
@@ -118,7 +118,7 @@ export const WidgetForm = () => {
 
       {state.formState === 'in-progress' && (
         <p className="animate-pulse pt-4 text-center">
-          <IconFunds className="mr-2 -mt-1 inline-block h-5 w-5 animate-spin fill-white" />
+          <IconFunds className="-mt-1 mr-2 inline-block h-5 w-5 animate-spin fill-white" />
           <span className=" ">Processing request... Please wait!</span>
         </p>
       )}

components/pages/home/homepage-economics.tsx

@@ -57,7 +57,7 @@ export const HomepageEconomics = () => {
             })}
           </div>
 
-          <ul className="my-4 flex flex-col justify-between space-y-2 md:my-8 md:flex-row md:space-y-0 md:space-x-2">
+          <ul className="my-4 flex flex-col justify-between space-y-2 md:my-8 md:flex-row md:space-x-2 md:space-y-0">
             {Object.entries(LOCKDROP_STATS).map(([name, stat]) => {
               return (
                 <li

components/pages/home/homepage-edgeware-intro.tsx

@@ -1,6 +1,6 @@
 export const HomepageEdgewareIntro = () => {
   return (
-    <section id="way-of-edgeware" className={`container my-24 mx-auto max-w-3xl`}>
+    <section id="way-of-edgeware" className={`container mx-auto my-24 max-w-3xl`}>
       <div className="bg-[url('/images/backgrounds/edg-logomark-bg.svg')] bg-contain bg-center bg-no-repeat p-6 text-center md:p-12 lg:p-24">
         <h2 className="text-3xl font-medium md:text-4xl lg:text-5xl">The Way of Edgeware</h2>
         <p className="my-4 leading-relaxed md:text-lg">

components/pages/home/homepage-hero.tsx

@@ -7,7 +7,7 @@ export const HomepageHero = () => {
   return (
     <section className="bg-[url('/images/home/hero/[email protected]')] bg-cover bg-center pt-24">
       <div className="container mx-auto flex min-h-[75vh] max-w-7xl">
-        <div className="my-auto py-4 px-4 md:py-8 lg:py-24">
+        <div className="my-auto px-4 py-4 md:py-8 lg:py-24">
           {/* Intro text & CTAs */}
           <div className="max-w-screen-md">
             <h1 className="my-8 text-3xl font-medium md:text-4xl lg:text-6xl">
@@ -21,7 +21,7 @@ export const HomepageHero = () => {
 
             <div
               id="actions"
-              className="my-8 flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-8"
+              className="my-8 flex flex-col space-y-4 sm:flex-row sm:space-x-8 sm:space-y-0"
             >
               <Button href={socialMediaUrls.discordUrl} sizing="large" colorStyle="primary">
                 Join Discord
@@ -40,7 +40,7 @@ export const HomepageHero = () => {
 
           {/* Highlights */}
           <div className="my-8">
-            <ul className="flex flex-col space-y-4 md:flex-row md:space-y-0 md:space-x-10">
+            <ul className="flex flex-col space-y-4 md:flex-row md:space-x-10 md:space-y-0">
               <li className="flex flex-row align-middle">
                 <CheckboxCircleFill className="mr-2 h-6 w-6 fill-green-500" />
                 Oldest Substrate Solochain