feat: share pnl (#911)

* style: design ready for bull

* feat: post tweet via tweet intent

* feat: bull share feature ready

* feat: share pnl ready in crab

* feat: horizontal alignment of pnl

* feat: share pnl with @vercel/og (#916)

* chore: set node version to 16

for compatibility with @vercel/og

* fix: more adjustments required to upgrade next and node versions

* feat: add /share-pnl page meta attributes

* fix: use preview link

* style: center social logo

* fix: fix routing

* style: increase loader height

* feat: use image from vercel

* refactor: remove console.log

* feat: use depositedAt query param from share pnl page

* feat: get pnl from query param and fetch pnl data

* fix: fix formatDuration

* feat: svg chart ready without axes

* feat: add opyn logo

* style: reduce top margin

* use bigger image for logo

* style: adjust styling to match final figma design

* feat: update logo image resolution

* style: final style adjustments

* refactor: general refactoring

* feat: working on adding zen bull share pnl

* feat: check if deposit date is before launch date

* fix: use correct colors

* feat: get deposit timestamp from user's tx list

* refactor

* fix: change copy and show correct y axis label

* fix: encode url

* feat: add more meta tags

* test: log async data

* remove _app meta tags

* feat: remove flower brackets

* test: test with catch all share-pnl slug

* feat: server side get share pnl page dynamic params

* test: check if the problem was server side props only

* feat: have a single route for share-pnl

* fix: fix link in post

* fix: add back meta tags in _app

* fix: test meta tags on home page

* feat: add og metatags to each of the individual pages

* feat: add og:type

* feat: remove strategy url

* feat: add back strategyUrl, seems to be working

* fix: add back DM Sans font to the image generated

* feat: share pnl page ready for crab

* feat: zen bull share pnl ready

* style: responsiveness and refactor

* pr self review

* feat: change base url

* style: chart label responsiveness

* feat: use dynamic routing for share-pnl to hide the params

* feat: add twitter handle to tweet

* feat: add tooltips to share button

* feat: change base url

* feat: hide share buttons for now

packages/frontend/pages/_middleware.ts → packages/frontend/middleware.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server'
 
-export default function middleware(request: NextRequest) {
+export function middleware(request: NextRequest) {
   const cloudfareCountry = request.headers.get('cf-ipcountry')
   const country = cloudfareCountry ?? request.geo?.country
   const url = request.nextUrl
@@ -12,6 +12,13 @@ export default function middleware(request: NextRequest) {
   }
 
   url.searchParams.set('ct', country!)
-
   return NextResponse.redirect(url)
 }
+
+/*
+  matcher for excluding public assets/api routes/_next
+  link: https://github.com/vercel/next.js/discussions/36308#discussioncomment-3758041
+*/
+export const config = {
+  matcher: '/((?!api|static|.*\\..*|_next).*)',
+}

packages/frontend/package.json

@@ -2,6 +2,9 @@
     "name": "@squeeth/frontend",
     "version": "0.1.0",
     "private": true,
+    "engines": {
+        "node": "^16"
+    },
     "scripts": {
         "dev": "next dev",
         "build": "next build",
@@ -38,6 +41,7 @@
         "@uniswap/sdk-core": "^3.0.1",
         "@uniswap/smart-order-router": "^2.5.30",
         "@uniswap/v3-sdk": "^3.3.2",
+        "@vercel/og": "^0.0.25",
         "axios": "^0.24.0",
         "bignumber.js": "^9.0.1",
         "bnc-notify": "^1.9.1",
@@ -60,7 +64,8 @@
         "lodash": "^4.17.21",
         "lodash.isequal": "^4.5.0",
         "markdown-to-jsx": "^7.1.5",
-        "next": "^12.0.7",
+        "next": "^12.2.3",
+        "next-seo": "^5.15.0",
         "react": "17.0.2",
         "react-chartjs-2": "^2.11.1",
         "react-cookie-consent": "^8.0.1",
@@ -107,4 +112,4 @@
     "resolutions": {
         "assemblyscript": "git+https://github.com/AssemblyScript/assemblyscript.git#v0.6"
     }
-}
+}

packages/frontend/pages/_app.tsx

@@ -147,19 +147,6 @@ const TradeApp = ({ Component, pageProps }: any) => {
   return (
     <React.Fragment>
       <Head>
-        <title>Opyn</title>
-        <meta
-          name="description"
-          content="Opyn builds DeFi strategies and derivatives like squeeth, a new financial primitive providing perpetual leverage without liqudations"
-        />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="Opyn" />
-        <meta
-          name="twitter:description"
-          content="Opyn builds DeFi strategies and derivatives like squeeth, a new financial primitive providing perpetual leverage without liqudations"
-        />
-        <meta name="twitter:image" content="https://squeeth.opyn.co/images/SqueethLogoMetadata-WhiteBg.png" />
-        <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
       </Head>
 

packages/frontend/pages/_document.tsx

@@ -7,6 +7,9 @@ export default class MyDocument extends Document {
     return (
       <Html lang="en">
         <Head>
+          <link rel="icon" href="/favicon.ico" />
+
+          {/*  preload fonts */}
           <link
             href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;300;400;500;700&display=swap"
             rel="stylesheet"

packages/frontend/pages/api/historicalprice.ts

@@ -13,8 +13,12 @@ const handleRequest = async (req: NextApiRequest, res: NextApiResponse) => {
     res.status(400).json({ status: 'error', message: 'Array params is not supported' })
     return
   }
+  if (!interval) {
+    res.status(400).json({ status: 'error', message: 'Interval param is required' })
+    return
+  }
 
-  const timestampArr = timestamps.split(',')
+  const timestampArr = timestamps?.split(',') ?? []
   const methods = generateMethodData(timestampArr, interval)
 
   const resp = await fetch(`${TWELVE_DATA_API}/complex_data?apikey=${process.env.NEXT_PUBLIC_TWELVEDATA_APIKEY}`, {