ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test: fix cloud tests (#7280)

Browse Source
This commit is contained in:
Zach Pomerantz 2023-09-08 10:53:22 -07:00 committed by GitHub
parent 63bf1c0ac8
commit 16cefb9cdb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 441 additions and 945 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.github/workflows/test.yml vendored
View File

@ -224,8 +224,9 @@ jobs:
path: node_modules/.cache path: node_modules/.cache
key: ${{ runner.os }}-cloud-jest-${{ github.run_id }} key: ${{ runner.os }}-cloud-jest-${{ github.run_id }}
restore-keys: ${{ runner.os }}-cloud-jest- restore-keys: ${{ runner.os }}-cloud-jest-
# Only use 1 worker, so the other can be used for the proxy server under test. # Ignore start:cloud output so it doesn't flood the test output.
- run: yarn test:cloud --coverage --maxWorkers=1 # Only use 1 worker for testing, as the other is used to run start:cloud (the proxy server under test).
- run: yarn start-server-and-test 'yarn start:cloud >/dev/null' 3000 'yarn test:cloud --coverage --maxWorkers=1'
- uses: codecov/codecov-action@v3 - uses: codecov/codecov-action@v3
with: with:
token: ${{ secrets.CODECOV_TOKEN }} token: ${{ secrets.CODECOV_TOKEN }}
@ -251,7 +252,7 @@ jobs:
post: post:
if: ${{ github.ref_name == 'main' || github.ref_name == 'releases/staging' }} if: ${{ github.ref_name == 'main' || github.ref_name == 'releases/staging' }}
needs: [pre, lint, typecheck, deps-tests, unit-tests, cypress-test-matrix] needs: [pre, lint, typecheck, deps-tests, unit-tests, cypress-test-matrix, cloud-tests]
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/github-script@v6.4.1 - uses: actions/github-script@v6.4.1
@ -272,4 +273,5 @@ jobs:
${{ needs.typecheck.result == 'success' }} && ${{ needs.typecheck.result == 'success' }} &&
${{ needs.deps-tests.result == 'success' }} && ${{ needs.deps-tests.result == 'success' }} &&
${{ needs.unit-tests.result == 'success' }} && ${{ needs.unit-tests.result == 'success' }} &&
${{ needs.cypress-test-matrix.result == 'success' }} ${{ needs.cypress-test-matrix.result == 'success' }} &&
${{ needs.cloud-tests.result == 'success' }}

6
functions/README.md
View File

@ -18,9 +18,9 @@ Currently, there are 2 types of cloudflare functions developed
## Testing ## Testing
Testing is done utilizing a custom jest environment as well as Cloudflare's local tester: `wrangler`. Wrangler enables testing locally by running a proxy to wrap `localhost`. Testing can be done the following ways. Testing is done utilizing a custom jest environment as well as Cloudflare's local tester: `wrangler`. Wrangler enables testing locally by running a proxy to wrap `localhost`. Tests run against a proxy server, so you'll need to start it before running tests:
- Manually by running `yarn start:cloud` to setup wrangler on `localhost:3000` - Manually run `yarn start:cloud` to setup wrangler on `localhost:3000`
- Automated tests by running `yarn test:cloud` to setup both a jest and wrangler environment and automatically test features - Run unit tests with `yarn test:cloud`
## Deployment ## Deployment

439
functions/__snapshots__/default.test.ts.snap
View File

@ -1,439 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should inject metadata for valid collections 1`] = `
"<!DOCTYPE html>
<html translate="no">
<head>
<meta charset="utf-8" />
<title>Uniswap Interface</title>
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<!--
will be replaced with the URL of the \`public\` folder during build.
Only files inside the \`public\` folder can be referenced from the HTML.
-->
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/images/512x512_App_Icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#FC72FF" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
/>
<!--
Apple Smart App Banner for Safari on iOS
https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
-->
<meta name="apple-itunes-app" content="app-id=6443944476">
<!--
manifest.json provides metadata used when the app is installed as a PWA.
See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
<style>
* {
font-family: 'Basel', sans-serif;
box-sizing: border-box;
}
/**
Explicitly load Basel var from public/ so it does not block LCP's critical path.
*/
@font-face {
font-family: 'Basel';
font-weight: 535;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Medium.woff) format('woff');
}
@font-face {
font-family: 'Basel';
font-weight: 485;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Book.woff) format('woff');
}
@supports (font-variation-settings: normal) {
* {
font-family: 'Basel', sans-serif;
}
}
html,
body {
margin: 0;
padding: 0;
}
button {
user-select: none;
}
html {
font-size: 16px;
font-weight: 485;
font-variant: none;
font-smooth: always;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
#background-radial-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
}
html,
body,
#root {
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
html {
background: linear-gradient(180deg, #202738 0%, #070816 100%);
}
}
@media (prefers-color-scheme: light) {
html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
}
}
</style>
<script defer src="/static/js/bundle.js"></script><meta property="og:title" content="Uniswap Interface"/><meta property="og:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Uniswap Interface"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Uniswap Interface"/><meta property="twitter:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/><meta property="twitter:image:alt" content="Uniswap Interface"/></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
<div id="background-radial-gradient"></div>
</body>
</html>
"
`;
exports[`should inject metadata for valid collections 2`] = `
"<!DOCTYPE html>
<html translate="no">
<head>
<meta charset="utf-8" />
<title>Uniswap Interface</title>
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<!--
will be replaced with the URL of the \`public\` folder during build.
Only files inside the \`public\` folder can be referenced from the HTML.
-->
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/images/512x512_App_Icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#FC72FF" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
/>
<!--
Apple Smart App Banner for Safari on iOS
https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
-->
<meta name="apple-itunes-app" content="app-id=6443944476">
<!--
manifest.json provides metadata used when the app is installed as a PWA.
See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
<style>
* {
font-family: 'Basel', sans-serif;
box-sizing: border-box;
}
/**
Explicitly load Basel var from public/ so it does not block LCP's critical path.
*/
@font-face {
font-family: 'Basel';
font-weight: 535;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Medium.woff) format('woff');
}
@font-face {
font-family: 'Basel';
font-weight: 485;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Book.woff) format('woff');
}
@supports (font-variation-settings: normal) {
* {
font-family: 'Basel', sans-serif;
}
}
html,
body {
margin: 0;
padding: 0;
}
button {
user-select: none;
}
html {
font-size: 16px;
font-weight: 485;
font-variant: none;
font-smooth: always;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
#background-radial-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
}
html,
body,
#root {
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
html {
background: linear-gradient(180deg, #202738 0%, #070816 100%);
}
}
@media (prefers-color-scheme: light) {
html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
}
}
</style>
<script defer src="/static/js/bundle.js"></script><meta property="og:title" content="Uniswap Interface"/><meta property="og:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Uniswap Interface"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/swap"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Uniswap Interface"/><meta property="twitter:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/><meta property="twitter:image:alt" content="Uniswap Interface"/></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
<div id="background-radial-gradient"></div>
</body>
</html>
"
`;
exports[`should inject metadata for valid collections 3`] = `
"<!DOCTYPE html>
<html translate="no">
<head>
<meta charset="utf-8" />
<title>Uniswap Interface</title>
<meta name="description" content="Swap or provide liquidity on the Uniswap Protocol" />
<!--
will be replaced with the URL of the \`public\` folder during build.
Only files inside the \`public\` folder can be referenced from the HTML.
-->
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/images/512x512_App_Icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#FC72FF" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
/>
<!--
Apple Smart App Banner for Safari on iOS
https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
-->
<meta name="apple-itunes-app" content="app-id=6443944476">
<!--
manifest.json provides metadata used when the app is installed as a PWA.
See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
<style>
* {
font-family: 'Basel', sans-serif;
box-sizing: border-box;
}
/**
Explicitly load Basel var from public/ so it does not block LCP's critical path.
*/
@font-face {
font-family: 'Basel';
font-weight: 535;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Medium.woff) format('woff');
}
@font-face {
font-family: 'Basel';
font-weight: 485;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Book.woff) format('woff');
}
@supports (font-variation-settings: normal) {
* {
font-family: 'Basel', sans-serif;
}
}
html,
body {
margin: 0;
padding: 0;
}
button {
user-select: none;
}
html {
font-size: 16px;
font-weight: 485;
font-variant: none;
font-smooth: always;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
#background-radial-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
}
html,
body,
#root {
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
html {
background: linear-gradient(180deg, #202738 0%, #070816 100%);
}
}
@media (prefers-color-scheme: light) {
html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF
}
}
</style>
<script defer src="/static/js/bundle.js"></script><meta property="og:title" content="Uniswap Interface"/><meta property="og:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Uniswap Interface"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/pools"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Uniswap Interface"/><meta property="twitter:image" content="http://127.0.0.1:3000/images/1200x630_Rich_Link_Preview_Image.png"/><meta property="twitter:image:alt" content="Uniswap Interface"/></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
<div id="background-radial-gradient"></div>
</body>
</html>
"
`;

19
functions/api/image/nfts/collection/collectionImage.test.ts
View File

@ -1,20 +1,25 @@
const collectionImageUrl = [ import * as matchers from 'jest-extended'
expect.extend(matchers)
const collectionImageUrls = [
'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c544', 'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c544',
'http://127.0.0.1:3000/api/image/nfts/collection/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d', 'http://127.0.0.1:3000/api/image/nfts/collection/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
'http://127.0.0.1:3000/api/image/nfts/collection/0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b', 'http://127.0.0.1:3000/api/image/nfts/collection/0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b',
] ]
test.each(collectionImageUrl)('collectionImageUrl', async (url) => { const nonexistentImageUrls = [
'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545',
]
test.each([...collectionImageUrls, ...nonexistentImageUrls])('collectionImageUrl', async (url) => {
const response = await fetch(new Request(url)) const response = await fetch(new Request(url))
expect(response.status).toBe(200) expect(response.status).toBe(200)
expect(response.headers.get('content-type')).toBe('image/png') expect(response.headers.get('content-type')).toBe('image/png')
}) })
const invalidCollectionImageUrl = [ const invalidCollectionImageUrls = ['http://127.0.0.1:3000/api/image/nfts/collection/0xd3adb33f']
'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545',
]
test.each(invalidCollectionImageUrl)('invalidAssetImageUrl', async (url) => { test.each(invalidCollectionImageUrls)('invalidAssetImageUrl', async (url) => {
const response = await fetch(new Request(url)) const response = await fetch(new Request(url))
expect(response.status).toBe(404) expect(response.status).toBeOneOf([404, 500])
}) })

19
functions/global-setup.ts
View File

@ -1,19 +0,0 @@
import { setup } from 'jest-dev-server'
module.exports = async function globalSetup() {
globalThis.servers = await setup({
command: `yarn start:cloud`,
port: 3000,
launchTimeout: 120000, // takes ~2m on CI
})
// Wait for wrangler to return a request before running tests
for (let i = 0; i < 3; i++) {
const res = await fetch(new Request('http://127.0.0.1:3000/tokens/ethereum/NATIVE'))
if (res.ok) {
return
}
// Set timeout to make sure the server isn't flooded with requests if wrangler is not running
await new Promise((resolve) => setTimeout(resolve, 500 * (i + 1)))
}
throw new Error('Failed to start server')
}

5
functions/global-teardown.ts
View File

@ -1,5 +0,0 @@
import { teardown } from 'jest-dev-server'
module.exports = async function globalTeardown() {
await teardown(globalThis.servers)
}

6
functions/global.d.ts vendored
View File

@ -1,6 +0,0 @@
import { setup } from 'jest-dev-server'
declare global {
// eslint-disable-next-line no-var
var servers: Awaited<ReturnType<typeof setup>>
}

2
functions/jest.config.json
View File

@ -1,6 +1,4 @@
{ {
"globalSetup": "<rootDir>/global-setup.ts",
"globalTeardown": "<rootDir>/global-teardown.ts",
"setupFilesAfterEnv": ["<rootDir>/setupAfterEnv.ts"], "setupFilesAfterEnv": ["<rootDir>/setupAfterEnv.ts"],
"preset": "ts-jest", "preset": "ts-jest",
"transform": { "transform": {

12
functions/nfts/asset/__snapshots__/nft.test.ts.snap
View File

@ -119,13 +119,13 @@ exports[`should inject metadata for valid assets 1`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -264,13 +264,13 @@ exports[`should inject metadata for valid assets 2`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -409,13 +409,13 @@ exports[`should inject metadata for valid assets 3`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>

163
functions/nfts/collection/__snapshots__/collection.test.ts.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should inject metadata for valid collections 1`] = ` exports[`should inject metadata for collections 1`] = `
"<!DOCTYPE html> "<!DOCTYPE html>
<html translate="no"> <html translate="no">
<head> <head>
@ -119,13 +119,13 @@ exports[`should inject metadata for valid collections 1`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -145,7 +145,7 @@ exports[`should inject metadata for valid collections 1`] = `
" "
`; `;
exports[`should inject metadata for valid collections 2`] = ` exports[`should inject metadata for collections 2`] = `
"<!DOCTYPE html> "<!DOCTYPE html>
<html translate="no"> <html translate="no">
<head> <head>
@ -264,13 +264,13 @@ exports[`should inject metadata for valid collections 2`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -290,7 +290,7 @@ exports[`should inject metadata for valid collections 2`] = `
" "
`; `;
exports[`should inject metadata for valid collections 3`] = ` exports[`should inject metadata for collections 3`] = `
"<!DOCTYPE html> "<!DOCTYPE html>
<html translate="no"> <html translate="no">
<head> <head>
@ -409,13 +409,13 @@ exports[`should inject metadata for valid collections 3`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -434,3 +434,148 @@ exports[`should inject metadata for valid collections 3`] = `
</html> </html>
" "
`; `;
exports[`should inject metadata for collections 4`] = `
"<!DOCTYPE html>
<html translate="no">
<head>
<meta charset="utf-8" />
<title>Uniswap Interface</title>
<!--
will be replaced with the URL of the \`public\` folder during build.
Only files inside the \`public\` folder can be referenced from the HTML.
-->
<link rel="shortcut icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="192x192" href="/images/192x192_App_Icon.png" />
<link rel="apple-touch-icon" sizes="512x512" href="/images/512x512_App_Icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="theme-color" content="#FC72FF" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline'"
/>
<!--
Apple Smart App Banner for Safari on iOS
https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners
-->
<meta name="apple-itunes-app" content="app-id=6443944476">
<!--
manifest.json provides metadata used when the app is installed as a PWA.
See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="/manifest.json" />
<link rel="preload" href="/fonts/Basel-Book.woff" as="font" type="font/woff" crossorigin />
<link rel="preload" href="/fonts/Basel-Medium.woff" as="font" type="font/woff" crossorigin />
<style>
* {
font-family: 'Basel', sans-serif;
box-sizing: border-box;
}
/**
Explicitly load Basel var from public/ so it does not block LCP's critical path.
*/
@font-face {
font-family: 'Basel';
font-weight: 535;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Medium.woff) format('woff');
}
@font-face {
font-family: 'Basel';
font-weight: 485;
font-style: normal;
font-display: block;
font-named-instance: 'Book';
src:
url(/fonts/Basel-Book.woff) format('woff');
}
@supports (font-variation-settings: normal) {
* {
font-family: 'Basel', sans-serif;
}
}
html,
body {
margin: 0;
padding: 0;
}
button {
user-select: none;
}
html {
font-size: 16px;
font-weight: 485;
font-variant: none;
font-smooth: always;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Use this to apply network-specific gradient backgrounds, in RadialGradientByChainUpdater.ts */
#background-radial-gradient {
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
width: 200vw;
height: 200vh;
transform: translate(-50vw, -100vh);
z-index: -1;
}
html,
body,
#root {
min-height: 100%;
}
@media (prefers-color-scheme: dark) {
html {
background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
}
}
@media (prefers-color-scheme: light) {
html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
}
}
</style>
<script defer src="/static/js/bundle.js"></script><meta property="og:title" content="0xed5af388653567af2f388e6224dc7c4b3241c545 on Uniswap"/><meta property="og:image" content="http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="0xed5af388653567af2f388e6224dc7c4b3241c545 on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="0xed5af388653567af2f388e6224dc7c4b3241c545 on Uniswap"/><meta property="twitter:image" content="http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545"/><meta property="twitter:image:alt" content="0xed5af388653567af2f388e6224dc7c4b3241c545 on Uniswap"/></head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<!-- Triggers the font to load immediately and then is replaced by the app -->
<div>&emsp;</div>
</div>
<div id="background-radial-gradient"></div>
</body>
</html>
"
`;

24
functions/nfts/collection/collection.test.ts
View File

@ -16,7 +16,15 @@ const collections = [
}, },
] ]
test.each(collections)('should inject metadata for valid collections', async (collection) => { const nonexistentCollections = [
{
address: '0xed5af388653567af2f388e6224dc7c4b3241c545',
collectionName: '0xed5af388653567af2f388e6224dc7c4b3241c545',
image: 'http://127.0.0.1:3000/api/image/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545',
},
]
test.each([...collections, ...nonexistentCollections])('should inject metadata for collections', async (collection) => {
const url = 'http://127.0.0.1:3000/nfts/collection/' + collection.address const url = 'http://127.0.0.1:3000/nfts/collection/' + collection.address
const body = await fetch(new Request(url)).then((res) => res.text()) const body = await fetch(new Request(url)).then((res) => res.text())
expect(body).toMatchSnapshot() expect(body).toMatchSnapshot()
@ -35,13 +43,13 @@ test.each(collections)('should inject metadata for valid collections', async (co
}) })
const invalidCollections = [ const invalidCollections = [
'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545', {
'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545//', address: '0xd3adb33f',
},
] ]
test.each(invalidCollections)( test.each(invalidCollections)('should not inject metadata for nonexistent collections', async (collection) => {
'should not inject metadata for invalid collection urls', const url = 'http://127.0.0.1:3000/nfts/collection/' + collection.address
async (url) => {
const body = await fetch(new Request(url)).then((res) => res.text()) const body = await fetch(new Request(url)).then((res) => res.text())
expect(body).not.toContain('og:title') expect(body).not.toContain('og:title')
expect(body).not.toContain('og:image') expect(body).not.toContain('og:image')
@ -54,6 +62,4 @@ test.each(invalidCollections)(
expect(body).not.toContain('twitter:title') expect(body).not.toContain('twitter:title')
expect(body).not.toContain('twitter:image') expect(body).not.toContain('twitter:image')
expect(body).not.toContain('twitter:image:alt') expect(body).not.toContain('twitter:image:alt')
}, })
50000
)

16
functions/tokens/__snapshots__/token.test.ts.snap
View File

@ -119,13 +119,13 @@ exports[`should inject metadata for valid tokens 1`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -264,13 +264,13 @@ exports[`should inject metadata for valid tokens 2`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -409,13 +409,13 @@ exports[`should inject metadata for valid tokens 3`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>
@ -554,13 +554,13 @@ exports[`should inject metadata for valid tokens 4`] = `
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { html {
background: linear-gradient(180deg, #202738 0%, #070816 100%); background: linear-gradient(rgb(19, 19, 19) 0%, rgb(19, 19, 19) 100%);
} }
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
html { html {
background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0.51) 0%, rgba(255, 255, 255, 0) 100%), #FFFFFF background: radial-gradient(100% 100% at 50% 0%, rgba(255, 184, 226, 0) 0%, rgba(255, 255, 255, 0) 100%), rgb(255, 255, 255);
} }
} }
</style> </style>

6
package.json
View File

@ -27,7 +27,7 @@
"typecheck:cloud": "tsc -p functions/tsconfig.json", "typecheck:cloud": "tsc -p functions/tsconfig.json",
"typecheck:cypress": "tsc -p cypress/tsconfig.json", "typecheck:cypress": "tsc -p cypress/tsconfig.json",
"test": "craco test", "test": "craco test",
"test:cloud": "NODE_OPTIONS=--experimental-vm-modules yarn jest functions --config=functions/jest.config.json", "test:cloud": "yarn jest functions --config=functions/jest.config.json",
"cypress:open": "cypress open --browser chrome --e2e", "cypress:open": "cypress open --browser chrome --e2e",
"cypress:run": "cypress run --browser chrome --e2e", "cypress:run": "cypress run --browser chrome --e2e",
"deduplicate": "yarn-deduplicate --strategy=highest", "deduplicate": "yarn-deduplicate --strategy=highest",
@ -133,7 +133,6 @@
"hardhat": "^2.14.0", "hardhat": "^2.14.0",
"husky": "^8.0.3", "husky": "^8.0.3",
"jest": "^29.6.1", "jest": "^29.6.1",
"jest-dev-server": "^9.0.0",
"jest-extended": "^4.0.1", "jest-extended": "^4.0.1",
"jest-fail-on-console": "^3.1.1", "jest-fail-on-console": "^3.1.1",
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",
@ -151,6 +150,7 @@
"resize-observer-polyfill": "^1.5.1", "resize-observer-polyfill": "^1.5.1",
"serve": "^11.3.2", "serve": "^11.3.2",
"source-map-explorer": "^2.5.3", "source-map-explorer": "^2.5.3",
"start-server-and-test": "^2.0.0",
"swc-loader": "^0.2.3", "swc-loader": "^0.2.3",
"terser-webpack-plugin": "^5.3.9", "terser-webpack-plugin": "^5.3.9",
"ts-jest": "^29.1.1", "ts-jest": "^29.1.1",
@ -160,7 +160,7 @@
"typescript": "^4.9.4", "typescript": "^4.9.4",
"webpack": "^5.88.2", "webpack": "^5.88.2",
"webpack-retry-chunk-load-plugin": "^3.1.1", "webpack-retry-chunk-load-plugin": "^3.1.1",
"wrangler": "^3.5.0", "wrangler": "^3.7.0",
"yarn-deduplicate": "^6.0.0" "yarn-deduplicate": "^6.0.0"
}, },
"dependencies": { "dependencies": {

15
patches/@vercel+og+0.5.8.patch
View File

@ -1,5 +1,5 @@
diff --git a/node_modules/@vercel/og/dist/index.edge.js b/node_modules/@vercel/og/dist/index.edge.js diff --git a/node_modules/@vercel/og/dist/index.edge.js b/node_modules/@vercel/og/dist/index.edge.js
index 5187f88..c4a1c41 100644 index 5187f88..eda01d0 100644
--- a/node_modules/@vercel/og/dist/index.edge.js --- a/node_modules/@vercel/og/dist/index.edge.js
+++ b/node_modules/@vercel/og/dist/index.edge.js +++ b/node_modules/@vercel/og/dist/index.edge.js
@@ -18673,8 +18673,8 @@ var Resvg2 = class extends Resvg { @@ -18673,8 +18673,8 @@ var Resvg2 = class extends Resvg {
@ -13,12 +13,11 @@ index 5187f88..c4a1c41 100644
// src/emoji/index.ts // src/emoji/index.ts
var U200D = String.fromCharCode(8205); var U200D = String.fromCharCode(8205);
@@ -18809,18 +18809,18 @@ async function render(satori, resvg, opts, defaultFonts, element) { @@ -18809,18 +18809,15 @@ async function render(satori, resvg, opts, defaultFonts, element) {
// src/index.edge.ts // src/index.edge.ts
var initializedResvg = initWasm(resvg_wasm); var initializedResvg = initWasm(resvg_wasm);
var initializedYoga = initYoga(yoga_wasm).then((yoga2) => Ll(yoga2)); var initializedYoga = initYoga(yoga_wasm).then((yoga2) => Ll(yoga2));
-var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url)).then((res) => res.arrayBuffer()); -var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url)).then((res) => res.arrayBuffer());
+// var fallbackFont = fetch(new URL("https://fonts.gstatic.com/s/notosans/v28/o-0IIpQlx3QUlC5A4PNr6zRF.ttf", import.meta.url)).then((res) => res.arrayBuffer());
var ImageResponse = class { var ImageResponse = class {
constructor(element, options = {}) { constructor(element, options = {}) {
const result = new ReadableStream({ const result = new ReadableStream({
@ -26,22 +25,22 @@ index 5187f88..c4a1c41 100644
await initializedYoga; await initializedYoga;
await initializedResvg; await initializedResvg;
- const fontData = await fallbackFont; - const fontData = await fallbackFont;
+ // const fontData = await fallbackFont;
const fonts = [ const fonts = [
{ {
name: "sans serif", name: "sans serif",
- data: fontData, - data: fontData,
+ // data: fontData,
weight: 700, weight: 700,
style: "normal" style: "normal"
} }
diff --git a/node_modules/@vercel/og/dist/types.d.ts b/node_modules/@vercel/og/dist/types.d.ts diff --git a/node_modules/@vercel/og/dist/types.d.ts b/node_modules/@vercel/og/dist/types.d.ts
index dde26cc..eb59ff4 100644 index dde26cc..d075e99 100644
--- a/node_modules/@vercel/og/dist/types.d.ts --- a/node_modules/@vercel/og/dist/types.d.ts
+++ b/node_modules/@vercel/og/dist/types.d.ts +++ b/node_modules/@vercel/og/dist/types.d.ts
@@ -30,7 +30,7 @@ declare type ImageOptions = { @@ -28,9 +28,8 @@ declare type ImageOptions = {
* A list of fonts to use.
*
* @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]} * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
* @default Noto Sans Latin Regular. - * @default Noto Sans Latin Regular.
*/ */
- fonts?: SatoriOptions['fonts']; - fonts?: SatoriOptions['fonts'];
+ fonts: SatoriOptions['fonts']; + fonts: SatoriOptions['fonts'];

620
yarn.lock
View File

File diff suppressed because it is too large Load Diff