defi-wonderland · 0xArdy · Jun 30, 2023 · Mar 3, 2023 · Mar 6, 2023 · Mar 6, 2023
@@ -31,8 +31,6 @@
     <meta name="theme-color" content="#10152A" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
-    <script async src="/libs/blotter.min.js"></script>
-
     <title>Wonderland</title>
   </head>
   <body>

@@ -21,9 +21,9 @@
     "react-markdown": "8.0.5",
     "react-responsive-carousel": "3.2.23",
     "react-router-dom": "6.8.0",
-    "react-text-fun": "1.0.0",
     "react-transition-group": "4.4.5",
     "rehype-katex": "6.0.2",
+    "rehype-raw": "6.1.1",
     "remark-math": "5.1.1",
     "styled-components": "5.3.5"
   },

@@ -1,7 +1,3 @@
-# Oracle Manipulation 101 (Math edition)
-
-Dec 26 2022
-
 This article is divided into two.
 
 In the first part, we will present a quick refresher on how Uniswap works specifically tailored to the needs of computing manipulation costs. It'll explore how to move the spot price in an AMM to the desired target for Uniswap v2 and v3.

@@ -1,7 +1,3 @@
-# Oracle Manipulation 101
-
-Dec 26 2022
-
 In our [last post](https://mirror.xyz/price-oracle.eth/wf_eF-PLnaoXeHRbiZ3VJiTn0Y8hwUrvmKwCK0M4M_I), we talked about the risks of using systems with centralized incentives and the issues that structure poses. Today, we would like to discuss the dangers of using liquidity pools (Uniswap v3 in particular) as a price oracle for any DeFi system.
 
 Price manipulation is the primary concern with liquidity pool-based oracles such as Uniswap v3. With enough liquidity, anyone can manipulate any price in any market. But why would someone manipulate a market? How and when does that happen? If incentives are in place, manipulations WILL eventually occur. Despite the regulatory landscape, we even see this [behaviour](https://www.investopedia.com/terms/l/libor-scandal.asp) in Traditional Finance (TradFi).

@@ -1,7 +1,3 @@
-# RIP, Oracles
-
-Dec 26 2022
-
 Oracles are a single point of failure and can make or break a DeFi protocol. They are reliable until a black swan event happens…
 
 Unfortunately, crypto is a flock of black swans, so you better be prepared.

@@ -1,13 +1,13 @@
 import { FC } from 'react';
 import styled from 'styled-components';
 
-import { FONT_MEDIUM_L, SPACING_12, SPACING_16, SPACING_24, SPACING_40, SPACING_48 } from './Variables';
+import { FONT_MEDIUM_L, SPACING_12, SPACING_16, SPACING_24, SPACING_40 } from './Variables';
 
 const StyledButton = styled.button`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: ${SPACING_48};
   padding: ${SPACING_16} ${SPACING_40};
   height: ${SPACING_24};
   text-transform: uppercase;
@@ -18,22 +18,97 @@ const StyledButton = styled.button`
   letter-spacing: 0.2rem;
   cursor: pointer;
 
-  border: 1px solid var(--text-light);
   color: var(--text-light);
-  background: var(--background-surface-primary);
+  background-color: transparent;
 
-  transition: all 500ms ease-in-out;
+  &:before,
+  &:after,
+  .line-container .line,
+  a {
+    transition: all 200ms ease-in-out;
+  }
 
   &:hover {
-    background: white;
-    color: black;
+    .line-container .line,
+    &:before,
+    &:after {
+      border-color: rgba(255, 255, 255, 0.6);
+    }
+  }
+
+  &:hover a,
+  &:hover span {
+    opacity: 0.8;
+  }
+
+  & .line-container {
+    margin: unset;
+    width: 5rem;
+    height: 2rem;
+    position: absolute;
+    display: flex;
+    align-items: center;
+    background: transparent;
+
+    &:first-of-type {
+      left: 0;
+      transform: translateX(-50%);
+    }
+
+    &:last-of-type {
+      right: 0;
+      transform: translateX(50%);
+    }
+
+    & .line {
+      width: 100%;
+      display: block;
+      height: 1px;
+      background-color: white;
+      border-bottom: 1px solid white;
+      margin: 0 auto;
+    }
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    width: 100%;
+    position: absolute;
+    border-radius: 4.8rem;
+    height: 50%;
+    margin: 0;
+  }
+
+  &:before {
+    top: 0;
+    border-top: 1px solid var(--text-light);
+  }
+
+  &:after {
+    bottom: 0;
+    border-bottom: 1px solid var(--text-light);
   }
 `;
 
 export interface ButtonProps {
   children?: any;
 }
 
+export const SideLine = () => {
+  return (
+    <span className='line-container'>
+      <span className='line'></span>
+    </span>
+  );
+};
+
 export const Button: FC<ButtonProps> = ({ children, ...props }) => {
-  return <StyledButton {...props}>{children}</StyledButton>;
+  return (
+    <StyledButton {...props}>
+      <SideLine />
+      {children}
+      <SideLine />
+    </StyledButton>
+  );
 };
@@ -99,6 +99,10 @@ const StyledSection = styled.section<{
     background-size: cover;
     background-position: center;
   `}
+
+  @media screen and (max-width: 665px) {
+    min-height: 80vh;
+  }
 `;
 
 export interface SectionProps {

@@ -19,6 +19,7 @@ export const TextContainer = styled.p`
   letter-spacing: inherit;
   display: inline;
   position: relative;
+  text-transform: uppercase;
 `;
 
 export const ArticleTitle = styled(DisplayText)``;
@@ -300,6 +301,7 @@ const Star = styled.img.attrs({ src: STAR })`
   position: absolute;
   width: 3.5rem;
   top: 8.3rem;
+  pointer-events: none;
 `;
 
 export const SectionArticle: FC<SectionArticleProps> = ({ title, center, children, ...props }) => {

@@ -1,11 +1,9 @@
 export * from './AnimationIn';
 export * from './Ball';
 export * from './Button';
-export * from './DistortionText';
 export * from './DisplayText';
 export * from './GradientTitle';
 export * from './Link';
-export * from './LiquidDistortion';
 export * from './Ring';
 export * from './Section';
 export * from './SectionArticle';

@@ -1,28 +1,37 @@
 export const POSTS = [
   {
-    id: '3',
+    id: 'a-mev-racing-story',
+    name: 'A (MEV) racing story',
+    description: 'What do we know about the dark forest 2.0?',
+    date: new Date('05/04/23').toDateString().slice(4),
+    tags: ['MEV', 'Flashbots'],
+    image:
+      'https://images.unsplash.com/photo-1536909526839-8f10e29ba80c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=7200',
+  },
+  {
+    id: 'oracle-manipulation-101',
     name: 'Oracle Manipulation 101',
     description: 'What does an Uniswap v3 oracle manipulation look like?',
     date: new Date('12/26/22').toDateString().slice(4),
-    tags: ['oracles', 'Uniswap V3'],
+    tags: ['Price', 'Oracles', 'Uniswap V3'],
     image:
       'https://price-oracle.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9297e650-550e-4395-97f6-84ea64d688fd%2Fimage.jpeg?table=block&id=cbcea67b-7796-4969-9543-7907d3b1b4ba&spaceId=de552277-5ae2-4d88-932f-dd538421d024&width=2000&userId=&cache=v2',
   },
   {
-    id: '2',
+    id: 'oracle-manipulation-101-math-edition',
     name: 'Oracle Manipulation 101 (Math edition)',
     description: 'What does an Uniswap v3 oracle manipulation look like?',
     date: new Date('12/26/22').toDateString().slice(4),
-    tags: ['oracles', 'Uniswap V3', 'math'],
+    tags: ['Price', 'Oracles', 'Uniswap V3', 'Math'],
     image:
       'https://price-oracle.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F645a9912-e67f-4cca-a108-4d9ea0dbc64c%2Fimage.png?table=block&id=e9ceba01-98dc-4cc3-84bb-7de919806a9c&spaceId=de552277-5ae2-4d88-932f-dd538421d024&width=1360&userId=&cache=v2',
   },
   {
-    id: '1',
+    id: 'rip-oracles',
     name: 'RIP, Oracles',
     description: 'Status quo: Current dangers and how to solve it.',
     date: new Date('12/26/22').toDateString().slice(4),
-    tags: ['oracles'],
+    tags: ['Price', 'Oracles'],
     image:
       'https://mirror-media.imgix.net/publication-images/Go3xqXtpWA1ze8b-ULayp.png?height=1440&width=2880&h=1440&w=2880&auto=compress',
   },