State of wallet report (#174)

* adding state of wallet report and support figures * Remove spaces from image filenames in state wallet reports Ran a script to replace all spaces in image filenames with underscores to prevent issues when referencing image paths. * Add Ambire wallet logo * Fix image links and formatting in "State of Wallets 2024" document - Corrected image captions and paths for better clarity and consistency. - Updated figure references to ensure proper display in the document. - Improved overall formatting for enhanced readability. * Fix image path reference * Remove package-lock.json as the project uses yarn for build. * Update State of Wallets 2024 post - Add import statements for Figure and LogoGrid components - Restructure headings and improve formatting - Implement Figure component for images with captions - Add LogoGrid component to display wallet logos - Update custom styles for better heading hierarchy - Fix react-loadable dependency in yarn.lock * Rename file to lowercase to avoid case sensitivity issues between local and build environments. * Add light/dark background to logo grid for better PNG visibility - Implemented background colors to ensure PNG logos with white main body are displayed correctly in light mode. * Fix some misplaced headings * Fix figure caption text color for light and dark modes Adjusted figure caption text color using INFIMA variable in global CSS to ensure it matches the main text color in both light and dark modes. * Merge final edits from Reid * Conduct a final formatting of the code * fix: update EIP-712 section layout for improved readability - Refactored the EIP-712 section to use a responsive grid layout for figures. - Changed the structure from individual Figure components to a row/column format for better alignment and presentation. --------- Co-authored-by: tho <[email protected]>
flashbots · Oct 4, 2024 · dec6859 · dec6859
1 parent b353656
commit dec6859
Show file tree

Hide file tree

Showing 37 changed files with 917 additions and 23,644 deletions.
diff --git a/content/2024-08-17-state-of-wallets.mdx b/content/2024-08-17-state-of-wallets.mdx
diff --git a/content/authors.yml b/content/authors.yml
@@ -115,6 +115,12 @@ angela:
   url: https://twitter.com/0xangelfish
   image_url: https://pbs.twimg.com/profile_images/1547456118787489792/L3_9GSdZ_400x400.jpg
 
+tesa:
+  name: Tesa Ho
+  title: Market Research @Flashbots
+  url: https://twitter.com/defin00b
+  image_url: https://x.com/defin00b/photo
+
 brock:
   name: Brock Smedley
   title: Searcher Experience @ Flashbots

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Figure/Figure.tsx b/src/components/Figure/Figure.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface FigureProps {
+  src: string;
+  number: number;
+  caption: string;
+  captionUrl?: string;
+}
+
+const Figure: React.FC<FigureProps> = ({ src, number, caption, captionUrl }) => {
+  const fullCaption = `Figure ${number}. ${caption}`;
+
+  return (
+    <figure style={{ textAlign: 'center', margin: '20px 0', maxWidth: '100%' }}>
+      <div style={{ maxWidth: '1000px', margin: '0 auto', overflow: 'hidden' }}>
+        <img
+          src={src}
+          alt={fullCaption}
+          style={{ maxWidth: '100%', height: 'auto', maxHeight: '500px', objectFit: 'contain' }}
+        />
+      </div>
+      <figcaption 
+        className="figure-caption"
+        style={{ 
+          marginTop: '2px', // Further reduced from 5px to 2px
+          fontStyle: 'italic', 
+          maxWidth: '600px', 
+          margin: '2px auto 0', // Adjusted top margin here as well
+          lineHeight: 1.2, // Reduced line height for tighter text
+          fontSize: '0.9em', // Slightly smaller font size
+        }}
+      >
+        Figure {number}.{' '}
+        {captionUrl ? (
+          <a href={captionUrl} target="_blank" rel="noopener noreferrer">
+            {caption}
+          </a>
+        ) : (
+          caption
+        )}
+      </figcaption>
+    </figure>
+  );
+};
+
+export default Figure;
diff --git a/src/components/LogoGrid/LogoGrid.js b/src/components/LogoGrid/LogoGrid.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './styles.module.scss';
+
+const LogoGrid = ({ children }) => {
+  return <div className={styles.logoGrid}>{children}</div>;
+};
+
+export default LogoGrid;
diff --git a/src/components/LogoGrid/styles.module.scss b/src/components/LogoGrid/styles.module.scss
@@ -0,0 +1,61 @@
+.logoGrid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px;
+  align-items: center;
+  justify-items: center;
+  background-color: #2c2c2c; // Slightly lighter than the logo containers
+  padding: 20px;
+  border-radius: 12px; // Optional: adds rounded corners to the entire grid
+}
+
+.logoGrid img {
+  max-width: 100%;
+  height: auto;
+}
+
+.LogoGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 30px;
+  justify-items: center;
+  align-items: start;
+  padding: 20px;
+}
+
+.logo-item {
+  width: 100%;
+  max-width: 150px;
+
+  figure {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.logo-image-container {
+  width: 100px;
+  height: 100px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 10px;
+  background-color: #1e1e1e; // Dark background color
+  border-radius: 8px; // Optional: adds rounded corners
+}
+
+.logo-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+figcaption {
+  font-size: 14px;
+  margin: 0;
+  line-height: 1.2;
+  text-align: center;
+  color: #ffffff; // White text for better visibility on dark background
+}
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
@@ -105,6 +105,11 @@ h1, h2, h3, h4, h5, h6 {
   margin: 4rem auto 2rem;
 }
 
+.markdown > h4 {
+  margin: 2rem auto 1rem;
+  font-size: 1.1em;
+}
+
 // Align writings' hero with website's hero
 .margin-top--md,
 .margin-vert--md {
@@ -155,3 +160,7 @@ h1, h2, h3, h4, h5, h6 {
   max-width: var(--ifm-container-width-xl);
   width: 88vw;
 }
+
+.figure-caption {
+  color: var(--ifm-color-content);
+}
diff --git a/static/img/state_of_wallets_figures/ambire_wallet_logo.png b/static/img/state_of_wallets_figures/ambire_wallet_logo.png
diff --git a/static/img/state_of_wallets_figures/base_wallet_logo.png b/static/img/state_of_wallets_figures/base_wallet_logo.png
diff --git a/static/img/state_of_wallets_figures/block_daemon_logo.png b/static/img/state_of_wallets_figures/block_daemon_logo.png
diff --git a/static/img/state_of_wallets_figures/cw_logo.png b/static/img/state_of_wallets_figures/cw_logo.png
diff --git a/static/img/state_of_wallets_figures/figure_10_maestro_multiplexed_blocks.png b/static/img/state_of_wallets_figures/figure_10_maestro_multiplexed_blocks.png
diff --git a/static/img/state_of_wallets_figures/figure_11_mev_supply_chain.png b/static/img/state_of_wallets_figures/figure_11_mev_supply_chain.png
diff --git a/...ic/img/state_of_wallets_figures/figure_12_eof_from_seven_most_eof_providers.png b/...ic/img/state_of_wallets_figures/figure_12_eof_from_seven_most_eof_providers.png
diff --git a/static/img/state_of_wallets_figures/figure_13_erc-4337_workflow_stream.png b/static/img/state_of_wallets_figures/figure_13_erc-4337_workflow_stream.png
diff --git a/static/img/state_of_wallets_figures/figure_14_weekly_active_smart_accounts.png b/static/img/state_of_wallets_figures/figure_14_weekly_active_smart_accounts.png
diff --git a/static/img/state_of_wallets_figures/figure_15_weekly_bundler_revenue.png b/static/img/state_of_wallets_figures/figure_15_weekly_bundler_revenue.png
diff --git a/static/img/state_of_wallets_figures/figure_16_weekly_paymaster_gas_spend.png b/static/img/state_of_wallets_figures/figure_16_weekly_paymaster_gas_spend.png
diff --git a/static/img/state_of_wallets_figures/figure_17_based_preconfs_for_rollups.png b/static/img/state_of_wallets_figures/figure_17_based_preconfs_for_rollups.png
diff --git a/...c/img/state_of_wallets_figures/figure_18_mobile_authentication_via_passkeys.png b/...c/img/state_of_wallets_figures/figure_18_mobile_authentication_via_passkeys.png
diff --git a/static/img/state_of_wallets_figures/figure_19_current_message_signature.png b/static/img/state_of_wallets_figures/figure_19_current_message_signature.png
diff --git a/...img/state_of_wallets_figures/figure_1_overview_of_ethereum_wallet_ecosystem.png b/...img/state_of_wallets_figures/figure_1_overview_of_ethereum_wallet_ecosystem.png
diff --git a/static/img/state_of_wallets_figures/figure_20_message_signature_with_eip-712.png b/static/img/state_of_wallets_figures/figure_20_message_signature_with_eip-712.png
diff --git a/...e_of_wallets_figures/figure_21_uniswap_interest_in_transaction_flow_control.png b/...e_of_wallets_figures/figure_21_uniswap_interest_in_transaction_flow_control.png
diff --git a/static/img/state_of_wallets_figures/figure_2_orderflow_sankey.png b/static/img/state_of_wallets_figures/figure_2_orderflow_sankey.png
diff --git a/static/img/state_of_wallets_figures/figure_3._frontend_trading_volume.png b/static/img/state_of_wallets_figures/figure_3._frontend_trading_volume.png
diff --git a/static/img/state_of_wallets_figures/figure_4._frontend_transaction_count.png b/static/img/state_of_wallets_figures/figure_4._frontend_transaction_count.png
diff --git a/static/img/state_of_wallets_figures/figure_5_frontend_trade_sizes.png b/static/img/state_of_wallets_figures/figure_5_frontend_trade_sizes.png
diff --git a/static/img/state_of_wallets_figures/figure_6._30-day_builder_market_share.png b/static/img/state_of_wallets_figures/figure_6._30-day_builder_market_share.png
diff --git a/static/img/state_of_wallets_figures/figure_7_banana_gun_eof_blocks.png b/static/img/state_of_wallets_figures/figure_7_banana_gun_eof_blocks.png
diff --git a/static/img/state_of_wallets_figures/figure_8_banana_gun_multiplexed_blocks.png b/static/img/state_of_wallets_figures/figure_8_banana_gun_multiplexed_blocks.png
diff --git a/static/img/state_of_wallets_figures/figure_9_maestro_eof_blocks.png b/static/img/state_of_wallets_figures/figure_9_maestro_eof_blocks.png
diff --git a/static/img/state_of_wallets_figures/im_wallet_logo.png b/static/img/state_of_wallets_figures/im_wallet_logo.png
diff --git a/static/img/state_of_wallets_figures/okx_wallet_logo.png b/static/img/state_of_wallets_figures/okx_wallet_logo.png
diff --git a/static/img/state_of_wallets_figures/rainbow_wallet_logo.svg b/static/img/state_of_wallets_figures/rainbow_wallet_logo.svg
diff --git a/static/img/state_of_wallets_figures/safe_wallet_logo.png b/static/img/state_of_wallets_figures/safe_wallet_logo.png
diff --git a/yarn.lock b/yarn.lock
@@ -1679,7 +1679,7 @@
   dependencies:
     prop-types "^15.6.2"
 
-"@docusaurus/[email protected]", "react-loadable@npm:@docusaurus/[email protected]":
+"@docusaurus/[email protected]":
   version "5.5.2"
   resolved "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -9150,6 +9150,14 @@ react-loadable@^5.5.0:
   dependencies:
     prop-types "^15.5.0"
 
+"react-loadable@npm:@docusaurus/[email protected]":
+  version "5.5.2"
+  resolved "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz"
+  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
+  dependencies:
+    "@types/react" "*"
+    prop-types "^15.6.2"
+
 react-router-config@^5.1.1:
   version "5.1.1"
   resolved "https://registry.npmjs.org/react-router-config/-/react-router-config-5.1.1.tgz"