diff --git a/.eslintrc.json b/.eslintrc.json index 3722418..1a1ad7a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,6 @@ { - "extends": ["next/core-web-vitals", "next/typescript"] + "extends": ["next/core-web-vitals", "next/typescript"], + "rules": { + "@next/next/no-img-element": "off" + } } diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 18717bd..3cf6e88 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -20,9 +20,8 @@ jobs: # - name: Install dependencies # run: yarn - # - name: Prettify code - # uses: creyD/prettier_action@v4.3 - # with: - # # This part is also where you can pass other options, for example: - # prettier_options: --check '**/*.{ts,tsx,js,json,html,css,scss,md}' - # dry: true \ No newline at end of file + # - name: Check .prettierignore content + # run: cat .prettierignore + + # - name: Check formatting + # run: yarn format:check \ No newline at end of file diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 36bf30b..d4aceb9 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/blog_content/blog.ts b/blog_content/blog.ts index 7d38c54..6637f1d 100644 --- a/blog_content/blog.ts +++ b/blog_content/blog.ts @@ -3,7 +3,6 @@ import matter from "gray-matter"; import path from "path"; import { cache } from "react"; -// Define the blog post type export interface BlogPost { slug: string; content: string; diff --git a/blog_content/posts/about-jito-restaking/about-jito-restaking.md b/blog_content/posts/about-jito-restaking/about-jito-restaking.md index 5a17555..41454e7 100644 --- a/blog_content/posts/about-jito-restaking/about-jito-restaking.md +++ b/blog_content/posts/about-jito-restaking/about-jito-restaking.md @@ -32,7 +32,7 @@ Jito has been working on MEV solutions on Solana. However, this system faced a c #### The Previous Process with MEV Distribution -- Each validator has a unique tip distribution account, owned by the Jito Tip Distribution Program, where SOL is collected for a given epoch. +- Each validator has a unique tip distribution account, owned by the [Jito Tip Distribution Program], where SOL is collected for a given epoch. At the end of the epoch, an off-chain process takes place which produces a merkle tree and merkle root for each validator's tip distribution account. - Validators can run this process themselves or delegate it to another party. @@ -40,6 +40,10 @@ Jito has been working on MEV solutions on Solana. However, this system faced a c - After the merkle root has been uploaded, merkle proofs are uploaded on-chain and the program will transfer SOL from the tip distribution account to the validator's vote account and stake accounts. +![Uploading MEV Airdrop Merkle Root & Claiming](uploading_mev_merkle_root.png) + +[Jito Tip Distribution Program]: https://jito-foundation.gitbook.io/mev/mev-payment-and-distribution/tip-distribution-program + #### The Centralization Problem - Merkle root upload authority is permissioned with opt-in from each Jito-Solana validator. This mechanism creates a single point of potential failure with adverse impacts on network stakeholders and lacks transparency on the calculation. @@ -143,25 +147,37 @@ Implements penalties for misbehavior, ensuring the security and integrity of the Jito Restaking consists of two main programs: -1. **Restaking Program** +1. [**Restaking Program**](https://github.com/jito-foundation/restaking/blob/master/restaking_program/Cargo.toml) The Restaking Program acts as a node consensus network and operator registry. The program leverages a flexbile system of admins so NCNs can customize the operators and vaults supported and operators can custimoize the NCNs they stake to and vaults they can receive delegations from. -2. **Vault Program** +![Restaking Accounts](restaking_accounts.png) + +2. [**Vault Program**](https://github.com/jito-foundation/restaking/blob/master/vault_program/Cargo.toml) The Vault Program manages the minting and burning of Vault Receipt Tokens (VRTs). VRTs are SPL tokens that represent a pro-rata stake of asssets in the vault. VRTs provide enhanced liquidity, composability, and interoperability with other Solana programs. The program also leverages a flexible system of admins so vaults can customize the capacity, operators that can receive delegations from the vault, the NCNs supported by the vault, and the fee structure for staking and unstaking. +![Vault Accounts](vault_accounts.png) + ### The Three Pillars of Jito Restaking #### 1. Node Consensus Networks (NCNs) -Node Consensus Networks are services that provide infrastructure to the broader network. These can include: +Node Consensus Networks (NCNs) provide essential infrastructure services to the broader network ecosystem. +These services operate off-chain but are verified on-chain, creating a flexible framework for specialized functionality. +The design scope includes any service that can be cryptographically verified through on-chain evidence. + +Example include: -- Blockchains -- Bridges -- Oracles -- Keepers -- Layer 2 solutions +- Blockchains and Layer 2 solutions +- Bridges and interoperability protocols +- Oracles and data verification services +- Keepers and automation services +- Rollup services and co-processors +- Zero-knowledge proof generation +- Specialized cryptography services + +This architecture allows developers to create custom verification mechanism tailored to their specific service requirements, with the only constraint being that verification evidence must be accessible on-chain. Learn more about NCNs [here](https://www.jito.network/blog/understanding-node-consensus-networks/) @@ -206,6 +222,8 @@ Vaults securely hold staked assets and delegate them to operators. The vault pro 6. Think of this like depositing cash in a bank and receiving a bank statement showing your balance - the cash is in the bank, but you have proof of ownership. +![Deposit Process](deposit_process.png) + #### Delegation Process: Putting Your Tokens to Work 1. The vault administrator decides which operators to support by delegating tokens to them. @@ -220,6 +238,8 @@ Vaults securely hold staked assets and delegate them to operators. The vault pro 4. This is similar to how a bank might use customer deposits to make loans, while ensuring they keep enough cash on hand for customer withdrawals. +![Delegation Process](delegation_process.png) + #### Withdrawal Process: Getting Your Tokens Back 1. Starting Withdrawal: @@ -239,6 +259,8 @@ Vaults securely hold staked assets and delegate them to operators. The vault pro - Your VRTs are exchanged back for the original tokens, minus a small withdrawal fee. - The tokens are transferred to your account, and the withdrawal ticket is closed. +![Withdrawal Process](withdrawal_process.png) + #### Regular System Updates: Keeping Everything in Balance 1. The system performs regular updates at the end of each epoch (time period). diff --git a/components/ImageModal.tsx b/components/ImageModal.tsx new file mode 100644 index 0000000..da7f716 --- /dev/null +++ b/components/ImageModal.tsx @@ -0,0 +1,31 @@ +const ImageModal: React.FC<{ + src: string; + alt: string; + onClose: () => void; +}> = ({ src, alt, onClose }) => { + return ( +
+
+ + {alt} +
+ {alt} +
+
+
+ ); +}; + +export default ImageModal; diff --git a/components/MarkdownRenderer.tsx b/components/MarkdownRenderer.tsx index 574bdae..18b8832 100644 --- a/components/MarkdownRenderer.tsx +++ b/components/MarkdownRenderer.tsx @@ -1,10 +1,14 @@ +"use client"; + /* eslint-disable @typescript-eslint/no-unused-vars */ -import React from "react"; +import React, { useState } from "react"; import ReactMarkdown from "react-markdown"; import { Prism, SyntaxHighlighterProps } from "react-syntax-highlighter"; import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism"; import remarkGfm from "remark-gfm"; +import ImageModal from "./ImageModal"; + /* eslint-disable @typescript-eslint/no-explicit-any */ const SyntaxHighlighter = Prism as any as React.FC; @@ -13,125 +17,172 @@ interface MarkdownRendererProps { } const MarkdownRenderer: React.FC = ({ content }) => { + const [modalImage, setModalImage] = useState<{ + src: string; + alt: string; + } | null>(null); + + const openModal = (src: string, alt: string) => { + setModalImage({ src, alt }); + // Prevent body scrolling when modal is open + document.body.style.overflow = "hidden"; + }; + + const closeModal = () => { + setModalImage(null); + // Restore body scrolling + document.body.style.overflow = ""; + }; + return ( - - + + + {String(children).replace(/\n$/, "")} + + + ) : ( + - {String(children).replace(/\n$/, "")} - + {children} + + ); + }, + h1: ({ node, ...props }) => ( +

+ ), + h2: ({ node, ...props }) => ( +

+ ), + h3: ({ node, ...props }) => ( +

+ ), + h4: ({ node, ...props }) => ( +

+ ), + + // Larger paragraph text + p: ({ node, ...props }) => ( +

+ ), + + // Larger lists + ul: ({ node, ...props }) => ( +