inlinesvg (#1)

* use inlinesvg * update deps * update content
velodrome-finance · Jan 28, 2025 · a2d38f2 · a2d38f2
1 parent bbf76b2
commit a2d38f2
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 318 deletions.
diff --git a/content/emissions.mdx b/content/emissions.mdx
@@ -23,12 +23,8 @@ The weekly rebase amount is calculated with the following formula:
 `$veVELO` supply does not affect weekly emissions distributed to liquidity
 providers.
 
-<br />
-
 ## Emission Schedule
 
-<br />
-
 <Chart
   chartType="LineChart"
   data={[
@@ -58,7 +54,7 @@ providers.
       title: "Week",
       titleTextStyle: { color: "#000" },
     },
-    backgroundColor: "#EBE9E4",
+    backgroundColor: "#ffffff",
     lineWidth: 3,
     colors: ["#79F8DB", "#2180DF", "#EA1000", "#59BFD8", "#0281FF"],
     legend: { textStyle: { color: "#666" } },
@@ -68,8 +64,6 @@ providers.
   height={"600px"}
 />
 
-<br />
-
 ## Emission Rewards
 
 Liquidity providers (LPs) receive `$VELO` emissions as rewards for staking their liquidity positions.

diff --git a/content/helpers.tsx b/content/helpers.tsx
diff --git a/content/intro.mdx b/content/intro.mdx
@@ -1,4 +1,4 @@
-import { SvgLoader } from "react-svgmt";
+import SVG from "react-inlinesvg";
 
 # About Velodrome
 
@@ -9,21 +9,17 @@ Velodrome's flywheel allows protocols to build deep liquidity in a capital-effic
 Velodrome first launched on <strong>2nd of June, 2022</strong>. Velodrome V2, a
 full protocol redesign, launched on <strong>22nd of June, 2023</strong>.
 
-<SvgLoader
-  src="/svg/info-graph.svg"
-  className="text-neutral-900 dark:hidden mt-12 w-full"
-  svgAttributes={{
-    viewBox: "0 0 560 500",
-    preserveAspectRatio: "xMidYMid meet",
-  }}
+<SVG
+  src="/svg/VELO/info-graph.svg"
+  className="text-body dark:hidden mt-12 w-full"
+  viewBox="0 0 560 500"
+  preserveAspectRatio="xMidYMid meet"
 />
-<SvgLoader
-  src="/svg/info-graph-dark.svg"
-  className="text-white hidden dark:block mt-12 w-full"
-  svgAttributes={{
-    viewBox: "0 0 560 500",
-    preserveAspectRatio: "xMidYMid meet",
-  }}
+<SVG
+  src="/svg/VELO/info-graph-dark.svg"
+  className="text-body hidden dark:block mt-12 w-full"
+  viewBox="0 0 560 500"
+  preserveAspectRatio="xMidYMid meet"
 />
 
 1. The protocol is designed to enable token swaps and generate fees (from

diff --git a/content/security.mdx b/content/security.mdx
@@ -1,6 +1,6 @@
 import { Button, Table, Tabs } from "flowbite-react";
 
-import { SvgLoader } from "react-svgmt";
+import SVG from "react-inlinesvg";
 
 <div id="overview"></div>
 
@@ -16,32 +16,35 @@ smart contracts.
   every user should read and agree to our legal disclaimer before they continue
   using this website.
 
-For security reports, please reach out to us on <a className="text-primary underline hover:no-underline underline-offset-2" href="https://discord.gg/velodrome">Discord</a>, or to the contacts provided on our Github page.
+For security reports, please reach out to us on <a className="text-brand-500 no-underline hover:underline underline-offset-2" href="https://discord.gg/velodrome">Discord</a>, or to the contacts provided on our Github page.
 
 </div>
 
 <div id="bug-bounty"></div>
-<br />
-## Bug Bounty Programs
-
-<SvgLoader src="/partners/immunefi.svg" className="my-8 w-48" />
 
-Velodrome Finance launched a bug bounty program on **29th of June** in
-collaboration with Immunefi.
+## Bug Bounty Programs
 
-<Button
-  href="https://immunefi.com/bounty/velodromefinance/"
-  className="my-8 w-1/2"
-  size="sm"
-  color="white"
->
-  <strong>Velodrome on Immunefi</strong>
-</Button>
+<div className="bg-primary rounded-2xl py-12 space-y-6 mb-8 flex flex-col items-center">
+  <SVG src="/partners/immunefi.svg" className="w-32" />
+  <span className="w-80 text-center">
+    Velodrome Finance launched a bug bounty program on **29th of June** in
+    collaboration with Immunefi.
+  </span>
+  <Button
+    href="https://immunefi.com/bounty/velodromefinance/"
+    className="w-64"
+    size="md"
+    pill
+    color="primary-white"
+  >
+    <strong>Velodrome on Immunefi</strong>
+  </Button>
+</div>
 
 The Velodrome team's $100,000 bounty was matched by the Optimism Foundation. The program is offering up to **$200,000** in bounty for smart contract reports.
 
 <div id="emergency"></div>
-<br />
+
 ## Emergency Council
 
 To support the health of the protocol and ecosystem, there is a Council
@@ -62,7 +65,6 @@ The Council address is at **`0x838352F4E3992187a33a04826273dB3992Ee2b3f`** and i
 <div id="contracts"></div>
 <div id="releases"></div>
 <div id="audits"></div>
-<br />
 
 ## Releases
 
@@ -83,7 +85,7 @@ by Code4Rena on <strong>23rd-30th of May</strong>.
 
 ### v2 and Relay v1 Releases
 
-<SvgLoader src="/partners/spearbit.svg" className="my-8 w-48" />
+<SVG src="/partners/spearbit.svg" className="my-8 w-48" />
 
 Velodrome Finance was audited by our partners from Spearbit.
 The audit took place between **7th and 20th of February in 2023**, followed by
@@ -104,7 +106,7 @@ forks.
 
 ### Slipstream Release
 
-<SvgLoader src="/partners/spearbit.svg" className="my-8 w-48" />
+<SVG src="/partners/spearbit.svg" className="my-8 w-48" />
 
 Slipstream, the concentrated liquidity audit was completed by Spearbit on 5th
 of December 2023 and the report was published on 22nd of January 2024.
@@ -113,14 +115,14 @@ of December 2023 and the report was published on 22nd of January 2024.
 - [Codebase](https://github.com/velodrome-finance/slipstream)
 - [Universal Router Codebase](https://github.com/velodrome-finance/universal-router)
 - [Contracts](https://github.com/velodrome-finance/slipstream#deployment)
-- [Universal Router Contracts](https://github.com/velodrome-finance/universal-router/tree/main/deploy-addresses)
+- [Universal Router Contracts](https://github.com/velodrome-finance/universal-router/tree/main/deployment-addresses)
 
 ### Superchain Release
 
-<div className="flex space-x-12 items-center">
-  <SvgLoader src="/partners/chainsecurity.svg" className="my-8 h-10" />
+<div className="flex space-x-6 items-center mb-12">
+  <SVG src="/partners/chainsecurity.svg" className="h-10" />
   <span className="opacity-30 last:hidden">&middot;</span>
-  <SvgLoader src="/partners/sherlock.svg" className="my-8 h-6" />
+  <SVG src="/partners/sherlock.svg" className="h-6" />
 </div>
 
 Superchain release took place on <strong>8th of November 2024</strong> after

diff --git a/content/tokenomics.mdx b/content/tokenomics.mdx
@@ -33,10 +33,8 @@ The initial distribution of `$VELO` and `$veVELO` was done for users and
 protocols likeliest to contribute to protocol mission to become the liquidity
 base layer of the Optimism ecosystem.
 
-<br />
-
-<Table>
-  <Table.Head className="bg-primary text-white dark:bg-50">
+<Table striped>
+  <Table.Head>
     <Table.HeadCell className="w-3/4">VELO</Table.HeadCell>
     <Table.HeadCell></Table.HeadCell>
     <Table.HeadCell></Table.HeadCell>

diff --git a/content/v1-v2.mdx b/content/v1-v2.mdx
@@ -1,4 +1,4 @@
-import { SvgLoader } from "react-svgmt";
+import SVG from "react-inlinesvg";
 
 ## Version 1
 
@@ -11,19 +11,19 @@ providers must stake their deposited liquidity (in a Gauge) to receive VELO
 tokens. VELO holders can lock their tokens to vote on the distribution of
 emissions.
 
-<SvgLoader
-  src="/svg/v1-simplified.svg"
-  className="bg-neutral-200 dark:bg-neutral-200 rounded my-16 w-full"
-  svgAttributes={{
-    viewBox: "0 0 780 220",
-    preserveAspectRatio: "xMidYMid meet",
-  }}
+<SVG
+  src="/svg/VELO/v1-simplified.svg"
+  className="bg-white rounded my-16 w-full"
+  viewBox="0 0 780 220"
+  preserveAspectRatio="xMidYMid meet"
 />
 
 The protocol is 100% immutable, so changes to the protocol mechanics are not
 supported. As a result, the Minter will distribute tokens based on the same
 rules in perpetuity.
 
+<br />
+
 ## Version 2
 
 A second version of the protocol was launched in order to enable major features
@@ -39,13 +39,11 @@ such as:
 To allow the new functionality, the protocol was redesigned and rewritten from
 the ground up (see the simplified diagram for changes).
 
-<SvgLoader
-  src="/svg/v2-simplified.svg"
-  className="bg-neutral-200 dark:bg-neutral-200 rounded my-16 w-full h-auto py-4"
-  svgAttributes={{
-    viewBox: "0 1000 900 420",
-    preserveAspectRatio: "xMidYMid meet",
-  }}
+<SVG
+  src="/svg/VELO/v2-simplified.svg"
+  className="bg-white rounded my-16 w-full h-auto py-4"
+  viewBox="0 1000 900 420"
+  preserveAspectRatio="xMidYMid meet"
 />
 
 Velodrome V2 is still 100% immutable and brings an important architectural

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "velodrome-docs",
-  "version": "4.0.0-beta",
+  "version": "4.0.1-beta",
   "description": "Velodrome Finance Help Content",
   "author": "Velodrome Finance",
   "license": "GPL-3.0-or-later",
@@ -10,11 +10,14 @@
     "lint": "prettier -c --write ."
   },
   "devDependencies": {
-    "@types/mdx": "^2.0.13",
-    "flowbite-react": "0.4.10",
     "islandjs": "^0.7.6",
-    "prettier": "^3.3.3",
+    "prettier": "^3.3.3"
+  },
+  "peerDependencies": {
+    "flowbite-react": "^0.4.11",
     "react-google-charts": "^4.0.0",
-    "react-svgmt": "^1.2.0"
+    "react-inlinesvg": "^4.1.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }