feat: explore UI (#4262) · Uniswap/interface@25ea7f9

vercel · 2022-08-05T15:42:05Z

Successfully deployed to the following URLs:

interface – ./

interface-uniswap.vercel.app
interface-git-main-uniswap.vercel.app

-Original file line number
+Diff line change
@@ Expand Up / @@ -135,6 +135,12 @@ @@
         "@uniswap/v3-core": "1.0.0",
         "@uniswap/v3-periphery": "^1.1.1",
         "@uniswap/v3-sdk": "^3.9.0",
+        "@visx/axis": "^2.12.2",
+        "@visx/event": "^2.6.0",
+        "@visx/glyph": "^2.10.0",
+        "@visx/group": "^2.10.0",
+        "@visx/responsive": "^2.10.0",
+        "@visx/shape": "^2.11.1",
         "@walletconnect/ethereum-provider": "1.7.1",
         "@web3-react/coinbase-wallet": "^8.0.34-beta.0",
         "@web3-react/core": "^8.0.35-beta.0",
@@ Expand All / @@ -151,7 +157,8 @@ @@
         "array.prototype.flatmap": "^1.2.4",
         "cids": "^1.0.0",
         "copy-to-clipboard": "^3.2.0",
-        "d3": "^7.0.0",
+        "d3": "^7.6.1",
+        "d3-curve-circlecorners": "^0.1.6",
         "ethers": "^5.1.4",
         "firebase": "^9.1.3",
         "fortmatic": "^2.4.0",
@@ Expand All / @@ -165,6 +172,7 @@ @@
         "multicodec": "^3.0.1",
         "multihashes": "^4.0.2",
         "node-vibrant": "^3.2.1-alpha.1",
+        "numbro": "^2.3.6",
         "polished": "^3.3.2",
         "polyfill-object.fromentries": "^1.0.1",
         "popper-max-size-modifier": "^0.2.0",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,6 +8,7 @@ export enum EventName { @@
       APP_LOADED = 'Application Loaded',
       APPROVE_TOKEN_TXN_SUBMITTED = 'Approve Token Transaction Submitted',
       CONNECT_WALLET_BUTTON_CLICKED = 'Connect Wallet Button Clicked',
+      EXPLORE_TOKEN_ROW_CLICKED = 'Explore Token Row Clicked',
       PAGE_VIEWED = 'Page Viewed',
       SWAP_AUTOROUTER_VISUALIZATION_EXPANDED = 'Swap Autorouter Visualization Expanded',
       SWAP_DETAILS_EXPANDED = 'Swap Details Expanded',
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -0,0 +1,177 @@
+    import { localPoint } from '@visx/event'
+    import { EventType } from '@visx/event/lib/types'
+    import { GlyphCircle } from '@visx/glyph'
+    import { Group } from '@visx/group'
+    import { Line, LinePath } from '@visx/shape'
+    import { bisect, scaleLinear } from 'd3'
+    import { radius } from 'd3-curve-circlecorners'
+    import useTheme from 'hooks/useTheme'
+    import { useCallback, useState } from 'react'
+    import { ArrowDownRight, ArrowUpRight } from 'react-feather'
+    import styled from 'styled-components/macro'
+    import data from './data.json'
+    type PricePoint = { value: number; timestamp: number }
+    function getPriceBounds(pricePoints: PricePoint[]): [number, number] {
+      const prices = pricePoints.map((x) => x.value)
+      const min = Math.min(...prices)
+      const max = Math.max(...prices)
+      return [min, max]
+    }
+    const StyledUpArrow = styled(ArrowUpRight)`
+      color: ${({ theme }) => theme.accentSuccess};
+    `
+    const StyledDownArrow = styled(ArrowDownRight)`
+      color: ${({ theme }) => theme.accentFailure};
+    `
+    function getDelta(start: number, current: number) {
+      const delta = (current / start - 1) * 100
+      const isPositive = Math.sign(delta) > 0
+      const formattedDelta = delta.toFixed(2) + '%'
+      if (isPositive) {
+        return ['+' + formattedDelta, <StyledUpArrow size={16} key="arrow-up" />]
+      } else if (delta === 0) {
+        return [formattedDelta, null]
+      }
+      return [formattedDelta, <StyledDownArrow size={16} key="arrow-down" />]
+    }
+    export const ChartWrapper = styled.div`
+      position: relative;
+    `
+    export const ChartHeader = styled.div`
+      position: absolute;
+    `
+    export const TokenPrice = styled.span`
+      font-size: 36px;
+      line-height: 44px;
+    `
+    export const DeltaContainer = styled.div`
+      height: 16px;
+      display: flex;
+      align-items: center;
+    `
+    const ArrowCell = styled.div`
+      padding-left: 2px;
+      display: flex;
+    `
+    interface PriceChartProps {
+      width: number
+      height: number
+    }
+    export function PriceChart({ width, height }: PriceChartProps) {
+      const margin = { top: 80, bottom: 20, crosshair: 72 }
+      // defining inner measurements
+      const innerHeight = height - margin.top - margin.bottom
+      const theme = useTheme()
+      const pricePoints = data.priceHistory
+      const startingPrice = pricePoints[0]
+      const endingPrice = pricePoints[pricePoints.length - 1]
+      const initialState = { pricePoint: endingPrice, xCoordinate: null }
+      const [selected, setSelected] = useState<{ pricePoint: PricePoint; xCoordinate: number | null }>(initialState)
+      // Defining scales
+      // x scale
+      const timeScale = scaleLinear().domain([startingPrice.timestamp, endingPrice.timestamp]).range([0, width])
+      // y scale
+      const rdScale = scaleLinear().domain(getPriceBounds(pricePoints)).range([innerHeight, 0])
+      const handleHover = useCallback(
+        (event: Element | EventType) => {
+          const { x } = localPoint(event) || { x: 0 }
+          const x0 = timeScale.invert(x) // get timestamp from the scale
+          const index = bisect(
+            data.priceHistory.map((x) => x.timestamp),
+            x0,
+          )
+          const d0 = data.priceHistory[index - 1]
+          const d1 = data.priceHistory[index]
+          let pricePoint = d0
+          const hasPreviousData = d1 && d1.timestamp
+          if (hasPreviousData) {
+            pricePoint = x0.valueOf() - d0.timestamp.valueOf() > d1.timestamp.valueOf() - x0.valueOf() ? d1 : d0
+          }
+          setSelected({ pricePoint, xCoordinate: x })
+        },
+        [timeScale]
+      )
+      const [delta, arrow] = getDelta(startingPrice.value, selected.pricePoint.value)
+      return (
+        <ChartWrapper>
+          <ChartHeader>
+            <TokenPrice>${selected.pricePoint.value.toFixed(2)}</TokenPrice>
+            <DeltaContainer>
+              {delta}
+              <ArrowCell>{arrow}</ArrowCell>
+            </DeltaContainer>
+          </ChartHeader>
+          <svg width={width} height={height}>
+            {selected.xCoordinate && (
+              <g>
+                <Line
+                  from={{ x: selected.xCoordinate, y: margin.crosshair }}
+                  to={{ x: selected.xCoordinate, y: height }}
+                  stroke={'#99A1BD3D'}
+                  strokeWidth={1}
+                  pointerEvents="none"
+                  strokeDasharray="4,4"
+                />
+              </g>
+            )}
+            <Group top={margin.top}>
+              <LinePath
+                curve={radius(1)}
+                stroke={theme.accentActive}
+                strokeWidth={2}
+                data={data.priceHistory}
+                x={(d: PricePoint) => timeScale(d.timestamp) ?? 0}
+                y={(d: PricePoint) => rdScale(d.value) ?? 0}
+              />
+              {selected.xCoordinate && (
+                <g>
+                  <GlyphCircle
+                    left={selected.xCoordinate}
+                    top={rdScale(selected.pricePoint.value)}
+                    size={50}
+                    fill={theme.accentActive}
+                    stroke={theme.backgroundOutline}
+                    strokeWidth={2}
+                  />
+                </g>
+              )}
+            </Group>
+            <rect
+              x={0}
+              y={0}
+              width={width}
+              height={height}
+              fill={'transparent'}
+              onTouchStart={handleHover}
+              onTouchMove={handleHover}
+              onMouseMove={handleHover}
+              onMouseLeave={() => setSelected(initialState)}
+            />
+          </svg>
+        </ChartWrapper>
+      )
+    }
+    export default PriceChart

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Commit

There are no files selected for viewing

1 comment on commit `25ea7f9`

vercel bot commented on `25ea7f9` Aug 5, 2022

Commit

There are no files selected for viewing

1 comment on commit 25ea7f9

vercel bot commented on 25ea7f9 Aug 5, 2022

Choose a reason for hiding this comment

interface – ./

1 comment on commit `25ea7f9`

vercel bot commented on `25ea7f9` Aug 5, 2022