feat: cloudflare worker to inject meta tags (#6901)
* feat: add token and nft injection * feat: basic tests * fix: get jest configured properly * fix: change timeout * fix: uninstall port ready * fix: readd port ready * fix: local tests work * Update yarn.lock * add lint disable for setup files * fix: update dependencies * fix: basic test suite for nfts/tokens * feat: collection data * fix: make tests more comprehensive * fix: change matches to contains * fix: tests for twitter alt image tag * fix: image gen * fix: add patch-package * fix: update yarn install * feat: basic image gen for nfts and collections * fix: remove vibrant attempt * use watermark asset * dynamically grab color * modularize code and prototype for token preview * refactor code * finalize css * fix color grabber * update tests * fix up css * refactor code a bit more * remove console logs * tests * update tests * update images based on design feedback * network logos * update lint * slight refactoring * more refactoring * fix packages * Update yarn.lock * remove dynamically generated image stuff * cleanup return values * Create README.md * Revert "Create README.md" This reverts commit 7a91c98d384995fba914c9bf9a2fb3072793621f. * First round of feedback * comments * feedback round 2 * final feedback * final final feedback * nest twitter:image:alt in image check * better title handling --------- Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>
This commit is contained in:
Brendan Wong
GitHub
parent
0ced5f2402
commit
ef28667d13
403
functions/__snapshots__/collection.test.ts.snap
Normal file
403
functions/__snapshots__/collection.test.ts.snap
Normal file
@ -0,0 +1,403 @@
|
|||||||
|
// 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Azuki on Uniswap"/><meta property="og:image" content="https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?w=500&auto=format"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Azuki on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c544"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Azuki on Uniswap"/><meta property="twitter:image" content="https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?w=500&auto=format"/><meta property="twitter:image:alt" content="Azuki 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> </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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Bored Ape Yacht Club on Uniswap"/><meta property="og:image" content="https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?w=500&auto=format"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Bored Ape Yacht Club on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/collection/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Bored Ape Yacht Club on Uniswap"/><meta property="twitter:image" content="https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?w=500&auto=format"/><meta property="twitter:image:alt" content="Bored Ape Yacht Club 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> </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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="CLONE X - X TAKASHI MURAKAMI on Uniswap"/><meta property="og:image" content="https://i.seadn.io/gae/XN0XuD8Uh3jyRWNtPTFeXJg_ht8m5ofDx6aHklOiy4amhFuWUa0JaR6It49AH8tlnYS386Q0TW_-Lmedn0UET_ko1a3CbJGeu5iHMg?w=500&auto=format"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="CLONE X - X TAKASHI MURAKAMI on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/collection/0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="CLONE X - X TAKASHI MURAKAMI on Uniswap"/><meta property="twitter:image" content="https://i.seadn.io/gae/XN0XuD8Uh3jyRWNtPTFeXJg_ht8m5ofDx6aHklOiy4amhFuWUa0JaR6It49AH8tlnYS386Q0TW_-Lmedn0UET_ko1a3CbJGeu5iHMg?w=500&auto=format"/><meta property="twitter:image:alt" content="CLONE X - X TAKASHI MURAKAMI 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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
403
functions/__snapshots__/nft.test.ts.snap
Normal file
403
functions/__snapshots__/nft.test.ts.snap
Normal file
@ -0,0 +1,403 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid assets 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Azuki #2550"/><meta property="og:image" content="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/2550/d268b7f60a56306ced68b9762709ceaff4f1ee939f3150e7363fae300a59da12.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Azuki #2550"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/2550"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Azuki #2550"/><meta property="twitter:image" content="https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/2550/d268b7f60a56306ced68b9762709ceaff4f1ee939f3150e7363fae300a59da12.png"/><meta property="twitter:image:alt" content="Azuki #2550"/></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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid assets 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Bored Ape Yacht Club #3735"/><meta property="og:image" content="https://cdn.center.app/v2/1/697f69bb495aaa24c66638cae921977354f0b8274fc2e2814e455f355e67f01d/88c2ac6b73288e41051d3fd58ff3cef1f4908403f05f4a7d2a8435d003758529.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Bored Ape Yacht Club #3735"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/asset/0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d/3735"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Bored Ape Yacht Club #3735"/><meta property="twitter:image" content="https://cdn.center.app/v2/1/697f69bb495aaa24c66638cae921977354f0b8274fc2e2814e455f355e67f01d/88c2ac6b73288e41051d3fd58ff3cef1f4908403f05f4a7d2a8435d003758529.png"/><meta property="twitter:image:alt" content="Bored Ape Yacht Club #3735"/></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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid assets 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="CryptoPunk #3947"/><meta property="og:image" content="https://cdn.center.app/1/0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB/3947/62319d784e7a816d190aa184ffe58550d6ed8eb2e117b218e2ac02f126538ee6.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="CryptoPunk #3947"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/nfts/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/3947"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="CryptoPunk #3947"/><meta property="twitter:image" content="https://cdn.center.app/1/0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB/3947/62319d784e7a816d190aa184ffe58550d6ed8eb2e117b218e2ac02f126538ee6.png"/><meta property="twitter:image:alt" content="CryptoPunk #3947"/></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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
671
functions/__snapshots__/token.test.ts.snap
Normal file
671
functions/__snapshots__/token.test.ts.snap
Normal file
@ -0,0 +1,671 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid tokens 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Get USDC on Uniswap"/><meta property="og:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get USDC on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get USDC on Uniswap"/><meta property="twitter:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"/><meta property="twitter:image:alt" content="Get USDC 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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid tokens 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Get ETH on Uniswap"/><meta property="og:image" content="https://token-icons.s3.amazonaws.com/eth.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get ETH on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/ethereum/NATIVE"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get ETH on Uniswap"/><meta property="twitter:image" content="https://token-icons.s3.amazonaws.com/eth.png"/><meta property="twitter:image:alt" content="Get ETH 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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid tokens 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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Get MATIC on Uniswap"/><meta property="og:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get MATIC on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/polygon/NATIVE"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get MATIC on Uniswap"/><meta property="twitter:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png"/><meta property="twitter:image:alt" content="Get MATIC 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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid tokens 4`] = `
|
||||||
|
"<!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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Get FUC on Uniswap"/><meta property="og:image" content="https://assets.coingecko.com/coins/images/30081/large/fuc.png?1683016112"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get FUC on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/arbitrum/0x1f52145666c862ed3e2f1da213d479e61b2892af"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get FUC on Uniswap"/><meta property="twitter:image" content="https://assets.coingecko.com/coins/images/30081/large/fuc.png?1683016112"/><meta property="twitter:image:alt" content="Get FUC 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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should inject metadata for valid tokens 5`] = `
|
||||||
|
"<!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' https://www.google-analytics.com https://www.googletagmanager.com '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="preconnect" href="https://www.google-analytics.com/" />
|
||||||
|
|
||||||
|
<link rel="preload" href="./fonts/Inter-roman.var.woff2" as="font" type="font/woff2" crossorigin />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
Explicitly load Inter var from public/ so it does not block LCP's critical path.
|
||||||
|
*/
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Inter custom';
|
||||||
|
font-weight: 100 900;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: block;
|
||||||
|
font-named-instance: 'Regular';
|
||||||
|
src: url(./fonts/Inter-roman.var.woff2) format('woff2 supports variations(gvar)'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2-variations'),
|
||||||
|
url(./fonts/Inter-roman.var.woff2) format('woff2');
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (font-variation-settings: normal) {
|
||||||
|
* {
|
||||||
|
font-family: 'Inter custom', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 16px;
|
||||||
|
font-variant: none;
|
||||||
|
font-smooth: always;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-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="Get PEPE on Uniswap"/><meta property="og:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="Get PEPE on Uniswap"/><meta property="og:type" content="website"/><meta property="og:url" content="http://127.0.0.1:3000/tokens/ethereum/0x6982508145454ce325ddbe47a25d4ec3d2311933"/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:title" content="Get PEPE on Uniswap"/><meta property="twitter:image" content="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png"/><meta property="twitter:image:alt" content="Get PEPE 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> </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="background-radial-gradient"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
"
|
||||||
|
`;
|
||||||
20
functions/client.ts
Normal file
20
functions/client.ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { ApolloClient, InMemoryCache } from '@apollo/client'
|
||||||
|
const GRAPHQL_ENDPOINT = 'https://api.uniswap.org/v1/graphql'
|
||||||
|
|
||||||
|
//TODO: Figure out how to make ApolloClient global variable
|
||||||
|
export default new ApolloClient({
|
||||||
|
connectToDevTools: true,
|
||||||
|
uri: GRAPHQL_ENDPOINT,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
Origin: 'https://app.uniswap.org',
|
||||||
|
'User-Agent':
|
||||||
|
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.110 Safari/537.36',
|
||||||
|
},
|
||||||
|
cache: new InMemoryCache(),
|
||||||
|
defaultOptions: {
|
||||||
|
watchQuery: {
|
||||||
|
fetchPolicy: 'cache-first',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
63
functions/collection.test.ts
Normal file
63
functions/collection.test.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
const collections = [
|
||||||
|
{
|
||||||
|
address: '0xed5af388653567af2f388e6224dc7c4b3241c544',
|
||||||
|
collectionName: 'Azuki',
|
||||||
|
image:
|
||||||
|
'https://i.seadn.io/gae/H8jOCJuQokNqGBpkBN5wk1oZwO7LM8bNnrHCaekV2nKjnCqw6UB5oaH8XyNeBDj6bA_n1mjejzhFQUP3O1NfjFLHr3FOaeHcTOOT?w=500&auto=format',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
|
||||||
|
collectionName: 'Bored Ape Yacht Club',
|
||||||
|
image:
|
||||||
|
'https://i.seadn.io/gae/Ju9CkWtV-1Okvf45wo8UctR-M9He2PjILP0oOvxE89AyiPPGtrR3gysu1Zgy0hjd2xKIgjJJtWIc0ybj4Vd7wv8t3pxDGHoJBzDB?w=500&auto=format',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '0x49cf6f5d44e70224e2e23fdcdd2c053f30ada28b',
|
||||||
|
collectionName: 'CLONE X - X TAKASHI MURAKAMI',
|
||||||
|
image:
|
||||||
|
'https://i.seadn.io/gae/XN0XuD8Uh3jyRWNtPTFeXJg_ht8m5ofDx6aHklOiy4amhFuWUa0JaR6It49AH8tlnYS386Q0TW_-Lmedn0UET_ko1a3CbJGeu5iHMg?w=500&auto=format',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
test.each(collections)('should inject metadata for valid collections', async (collection) => {
|
||||||
|
const url = 'http://127.0.0.1:3000/nfts/collection/' + collection.address
|
||||||
|
const body = await fetch(new Request(url)).then((res) => res.text())
|
||||||
|
expect(body).toMatchSnapshot()
|
||||||
|
expect(body).toContain(`<meta property="og:title" content="${collection.collectionName} on Uniswap"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image" content="${collection.image}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:type" content="website"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:alt" content="${collection.collectionName} on Uniswap"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:title" content="${collection.collectionName} on Uniswap"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:image" content="${collection.image}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:image:alt" content="${collection.collectionName} on Uniswap"/>`)
|
||||||
|
})
|
||||||
|
|
||||||
|
const invalidCollections = [
|
||||||
|
'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545',
|
||||||
|
'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545/10',
|
||||||
|
'http://127.0.0.1:3000/nfts/collection/0xed5af388653567af2f388e6224dc7c4b3241c545//',
|
||||||
|
'http://127.0.0.1:3000/nfts/collection',
|
||||||
|
]
|
||||||
|
|
||||||
|
test.each(invalidCollections)(
|
||||||
|
'should not inject metadata for invalid urls',
|
||||||
|
async (url) => {
|
||||||
|
const body = await fetch(new Request(url)).then((res) => res.text())
|
||||||
|
expect(body).not.toContain('og:title')
|
||||||
|
expect(body).not.toContain('og:image')
|
||||||
|
expect(body).not.toContain('og:image:width')
|
||||||
|
expect(body).not.toContain('og:image:height')
|
||||||
|
expect(body).not.toContain('og:type')
|
||||||
|
expect(body).not.toContain('og:url')
|
||||||
|
expect(body).not.toContain('og:image:alt')
|
||||||
|
expect(body).not.toContain('twitter:card')
|
||||||
|
expect(body).not.toContain('twitter:title')
|
||||||
|
expect(body).not.toContain('twitter:image')
|
||||||
|
expect(body).not.toContain('twitter:image:alt')
|
||||||
|
},
|
||||||
|
50000
|
||||||
|
)
|
||||||
41
functions/components/metaTagInjector.ts
Normal file
41
functions/components/metaTagInjector.ts
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
type MetaTagInjectorInput = {
|
||||||
|
title: string
|
||||||
|
image?: string
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Listener class for Cloudflare's HTMLRewriter {@link https://developers.cloudflare.com/workers/runtime-apis/html-rewriter}
|
||||||
|
* to inject meta tags into the <head> of an HTML document.
|
||||||
|
*/
|
||||||
|
export class MetaTagInjector {
|
||||||
|
constructor(private input: MetaTagInjectorInput) {}
|
||||||
|
|
||||||
|
append(element, property: string, content: string) {
|
||||||
|
element.append(`<meta property="${property}" content="${content}"/>`, { html: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Event handler for ElementHandler {@link https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/#element-handlers}
|
||||||
|
*/
|
||||||
|
element(element) {
|
||||||
|
//Open Graph Tags
|
||||||
|
this.append(element, 'og:title', this.input.title)
|
||||||
|
if (this.input.image) {
|
||||||
|
this.append(element, 'og:image', this.input.image)
|
||||||
|
this.append(element, 'og:image:width', '1200')
|
||||||
|
this.append(element, 'og:image:height', '630')
|
||||||
|
this.append(element, 'og:image:alt', this.input.title)
|
||||||
|
}
|
||||||
|
this.append(element, 'og:type', 'website')
|
||||||
|
this.append(element, 'og:url', this.input.url)
|
||||||
|
|
||||||
|
//Twitter Tags
|
||||||
|
this.append(element, 'twitter:card', 'summary_large_image')
|
||||||
|
this.append(element, 'twitter:title', this.input.title)
|
||||||
|
if (this.input.image) {
|
||||||
|
this.append(element, 'twitter:image', this.input.image)
|
||||||
|
this.append(element, 'twitter:image:alt', this.input.title)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -5,5 +5,6 @@
|
|||||||
"transform": {
|
"transform": {
|
||||||
"'^.+\\.(ts|tsx)?$'": "ts-jest",
|
"'^.+\\.(ts|tsx)?$'": "ts-jest",
|
||||||
"^.+\\.(js|jsx)$": "babel-jest"
|
"^.+\\.(js|jsx)$": "babel-jest"
|
||||||
}
|
},
|
||||||
}
|
"testTimeout": 50000
|
||||||
|
}
|
||||||
|
|||||||
@ -1,3 +1,64 @@
|
|||||||
test('example', async () => {
|
const assets = [
|
||||||
expect(true).toBe(true)
|
{
|
||||||
|
address: '0xed5af388653567af2f388e6224dc7c4b3241c544',
|
||||||
|
assetId: '2550',
|
||||||
|
collectionName: 'Azuki',
|
||||||
|
image:
|
||||||
|
'https://cdn.center.app/1/0xED5AF388653567Af2F388E6224dC7C4b3241C544/2550/d268b7f60a56306ced68b9762709ceaff4f1ee939f3150e7363fae300a59da12.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '0xbc4ca0eda7647a8ab7c2061c2e118a18a936f13d',
|
||||||
|
assetId: '3735',
|
||||||
|
collectionName: 'Bored Ape Yacht Club',
|
||||||
|
image:
|
||||||
|
'https://cdn.center.app/v2/1/697f69bb495aaa24c66638cae921977354f0b8274fc2e2814e455f355e67f01d/88c2ac6b73288e41051d3fd58ff3cef1f4908403f05f4a7d2a8435d003758529.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb',
|
||||||
|
assetId: '3947',
|
||||||
|
collectionName: 'CryptoPunk',
|
||||||
|
image:
|
||||||
|
'https://cdn.center.app/1/0xb47e3cd837dDF8e4c57F05d70Ab865de6e193BBB/3947/62319d784e7a816d190aa184ffe58550d6ed8eb2e117b218e2ac02f126538ee6.png',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
test.each(assets)('should inject metadata for valid assets', async (nft) => {
|
||||||
|
const url = 'http://127.0.0.1:3000/nfts/asset/' + nft.address + '/' + nft.assetId
|
||||||
|
const body = await fetch(new Request(url)).then((res) => res.text())
|
||||||
|
expect(body).toMatchSnapshot()
|
||||||
|
expect(body).toContain(`<meta property="og:title" content="${nft.collectionName} #${nft.assetId}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image" content="${nft.image}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:type" content="website"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:title" content="${nft.collectionName} #${nft.assetId}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:image" content="${nft.image}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:image:alt" content="${nft.collectionName} #${nft.assetId}"/>`)
|
||||||
|
})
|
||||||
|
|
||||||
|
const invalidAssets = [
|
||||||
|
'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/100000',
|
||||||
|
'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544',
|
||||||
|
'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c545',
|
||||||
|
'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544/-1',
|
||||||
|
'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544//',
|
||||||
|
'http://127.0.0.1:3000/nfts/asset/0xed5af388653567af2f388e6224dc7c4b3241c544//2550',
|
||||||
|
]
|
||||||
|
|
||||||
|
test.each(invalidAssets)('should not inject metadata for invalid calls', async (url) => {
|
||||||
|
const body = await fetch(new Request(url)).then((res) => res.text())
|
||||||
|
expect(body).not.toContain('og:title')
|
||||||
|
expect(body).not.toContain('og:image')
|
||||||
|
expect(body).not.toContain('og:image:width')
|
||||||
|
expect(body).not.toContain('og:image:height')
|
||||||
|
expect(body).not.toContain('og:type')
|
||||||
|
expect(body).not.toContain('og:url')
|
||||||
|
expect(body).not.toContain('og:image:alt')
|
||||||
|
expect(body).not.toContain('twitter:card')
|
||||||
|
expect(body).not.toContain('twitter:title')
|
||||||
|
expect(body).not.toContain('twitter:image')
|
||||||
|
expect(body).not.toContain('twitter:image:alt')
|
||||||
})
|
})
|
||||||
|
|||||||
20
functions/nfts/asset/[[index]].ts
Normal file
20
functions/nfts/asset/[[index]].ts
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
/* eslint-disable import/no-unused-modules */
|
||||||
|
import { MetaTagInjector } from '../../components/metaTagInjector'
|
||||||
|
import getAsset from '../../utils/getAsset'
|
||||||
|
|
||||||
|
export const onRequest: PagesFunction = async ({ params, request, next }) => {
|
||||||
|
const { index } = params
|
||||||
|
const collectionAddress = index[0]?.toString()
|
||||||
|
const tokenId = index[1]?.toString()
|
||||||
|
const assetPromise = getAsset(collectionAddress, tokenId, request.url)
|
||||||
|
const resPromise = next()
|
||||||
|
try {
|
||||||
|
const [data, res] = await Promise.all([assetPromise, resPromise])
|
||||||
|
if (!data) {
|
||||||
|
return resPromise
|
||||||
|
}
|
||||||
|
return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(res)
|
||||||
|
} catch (e) {
|
||||||
|
return resPromise
|
||||||
|
}
|
||||||
|
}
|
||||||
19
functions/nfts/collection/[index].ts
Normal file
19
functions/nfts/collection/[index].ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/* eslint-disable import/no-unused-modules */
|
||||||
|
import { MetaTagInjector } from '../../components/metaTagInjector'
|
||||||
|
import getCollection from '../../utils/getCollection'
|
||||||
|
|
||||||
|
export const onRequest: PagesFunction = async ({ params, request, next }) => {
|
||||||
|
const { index } = params
|
||||||
|
const collectionAddress = index?.toString()
|
||||||
|
const collectionPromise = getCollection(collectionAddress, request.url)
|
||||||
|
const resPromise = next()
|
||||||
|
try {
|
||||||
|
const [data, res] = await Promise.all([collectionPromise, resPromise])
|
||||||
|
if (!data) {
|
||||||
|
return resPromise
|
||||||
|
}
|
||||||
|
return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(res)
|
||||||
|
} catch (e) {
|
||||||
|
return resPromise
|
||||||
|
}
|
||||||
|
}
|
||||||
76
functions/token.test.ts
Normal file
76
functions/token.test.ts
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
const tokens = [
|
||||||
|
{
|
||||||
|
address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
|
||||||
|
network: 'ethereum',
|
||||||
|
symbol: 'USDC',
|
||||||
|
image:
|
||||||
|
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: 'NATIVE',
|
||||||
|
network: 'ethereum',
|
||||||
|
symbol: 'ETH',
|
||||||
|
image: 'https://token-icons.s3.amazonaws.com/eth.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: 'NATIVE',
|
||||||
|
network: 'polygon',
|
||||||
|
symbol: 'MATIC',
|
||||||
|
image:
|
||||||
|
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x7D1AfA7B718fb893dB30A3aBc0Cfc608AaCfeBB0/logo.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '0x1f52145666c862ed3e2f1da213d479e61b2892af',
|
||||||
|
network: 'arbitrum',
|
||||||
|
symbol: 'FUC',
|
||||||
|
image: 'https://assets.coingecko.com/coins/images/30081/large/fuc.png?1683016112',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
address: '0x6982508145454ce325ddbe47a25d4ec3d2311933',
|
||||||
|
network: 'ethereum',
|
||||||
|
symbol: 'PEPE',
|
||||||
|
image:
|
||||||
|
'https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6982508145454Ce325dDbE47a25d4ec3d2311933/logo.png',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
test.each(tokens)('should inject metadata for valid tokens', async (token) => {
|
||||||
|
const url = 'http://127.0.0.1:3000/tokens/' + token.network + '/' + token.address
|
||||||
|
const body = await fetch(new Request(url)).then((res) => res.text())
|
||||||
|
expect(body).toMatchSnapshot()
|
||||||
|
expect(body).toContain(`<meta property="og:title" content="Get ${token.symbol} on Uniswap"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image" content="${token.image}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:width" content="1200"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:height" content="630"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:type" content="website"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:url" content="${url}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="og:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:card" content="summary_large_image"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:title" content="Get ${token.symbol} on Uniswap"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:image" content="${token.image}"/>`)
|
||||||
|
expect(body).toContain(`<meta property="twitter:image:alt" content="Get ${token.symbol} on Uniswap"/>`)
|
||||||
|
})
|
||||||
|
|
||||||
|
const invalidTokens = [
|
||||||
|
'http://127.0.0.1:3000/tokens/ethereum/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb49',
|
||||||
|
'http://127.0.0.1:3000/tokens/ethereum',
|
||||||
|
'http://127.0.0.1:3000/tokens/ethereun',
|
||||||
|
'http://127.0.0.1:3000/tokens/ethereum/0x0',
|
||||||
|
'http://127.0.0.1:3000/tokens/ethereum//',
|
||||||
|
'http://127.0.0.1:3000/tokens/potato/?potato=1',
|
||||||
|
]
|
||||||
|
|
||||||
|
test.each(invalidTokens)('should not inject metadata for invalid tokens', async (url) => {
|
||||||
|
const body = await fetch(new Request(url)).then((res) => res.text())
|
||||||
|
expect(body).not.toContain('og:title')
|
||||||
|
expect(body).not.toContain('og:image')
|
||||||
|
expect(body).not.toContain('og:image:width')
|
||||||
|
expect(body).not.toContain('og:image:height')
|
||||||
|
expect(body).not.toContain('og:type')
|
||||||
|
expect(body).not.toContain('og:url')
|
||||||
|
expect(body).not.toContain('og:image:alt')
|
||||||
|
expect(body).not.toContain('twitter:card')
|
||||||
|
expect(body).not.toContain('twitter:title')
|
||||||
|
expect(body).not.toContain('twitter:image')
|
||||||
|
expect(body).not.toContain('twitter:image:alt')
|
||||||
|
})
|
||||||
27
functions/tokens/[[index]].ts
Normal file
27
functions/tokens/[[index]].ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
/* eslint-disable import/no-unused-modules */
|
||||||
|
import { MetaTagInjector } from '../components/metaTagInjector'
|
||||||
|
import getToken from '../utils/getToken'
|
||||||
|
|
||||||
|
const convertTokenAddress = (tokenAddress: string) => {
|
||||||
|
return tokenAddress && tokenAddress === 'NATIVE' ? '0x0000000000000000000000000000000000000000' : tokenAddress
|
||||||
|
}
|
||||||
|
|
||||||
|
export const onRequest: PagesFunction = async ({ params, request, next }) => {
|
||||||
|
const { index } = params
|
||||||
|
const networkName = index[0]?.toString().toUpperCase()
|
||||||
|
const tokenAddress = convertTokenAddress(index[1]?.toString())
|
||||||
|
if (!tokenAddress) {
|
||||||
|
return next()
|
||||||
|
}
|
||||||
|
const tokenPromise = getToken(networkName, tokenAddress, request.url)
|
||||||
|
const resPromise = next()
|
||||||
|
try {
|
||||||
|
const [data, res] = await Promise.all([tokenPromise, resPromise])
|
||||||
|
if (!data) {
|
||||||
|
return resPromise
|
||||||
|
}
|
||||||
|
return new HTMLRewriter().on('head', new MetaTagInjector(data)).transform(res)
|
||||||
|
} catch (e) {
|
||||||
|
return resPromise
|
||||||
|
}
|
||||||
|
}
|
||||||
38
functions/utils/getAsset.ts
Normal file
38
functions/utils/getAsset.ts
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import { AssetDocument } from '../../src/graphql/data/__generated__/types-and-hooks'
|
||||||
|
import client from '../client'
|
||||||
|
|
||||||
|
function formatTitleName(name: string, collectionName: string, tokenId: string) {
|
||||||
|
if (name) {
|
||||||
|
return name
|
||||||
|
}
|
||||||
|
if (collectionName && tokenId) {
|
||||||
|
return collectionName + ' #' + tokenId
|
||||||
|
}
|
||||||
|
if (tokenId) {
|
||||||
|
return 'Asset #' + tokenId
|
||||||
|
}
|
||||||
|
return 'View NFT on Uniswap'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function getAsset(collectionAddress: string, tokenId: string, url: string) {
|
||||||
|
const { data } = await client.query({
|
||||||
|
query: AssetDocument,
|
||||||
|
variables: {
|
||||||
|
address: collectionAddress,
|
||||||
|
filter: {
|
||||||
|
tokenIds: [tokenId],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const asset = data?.nftAssets?.edges[0]?.node
|
||||||
|
if (!asset) {
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
const title = formatTitleName(asset.name, asset.collection?.name, asset.tokenId)
|
||||||
|
const formattedAsset = {
|
||||||
|
title,
|
||||||
|
image: asset.image?.url,
|
||||||
|
url,
|
||||||
|
}
|
||||||
|
return formattedAsset
|
||||||
|
}
|
||||||
21
functions/utils/getCollection.ts
Normal file
21
functions/utils/getCollection.ts
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { CollectionDocument } from '../../src/graphql/data/__generated__/types-and-hooks'
|
||||||
|
import client from '../client'
|
||||||
|
|
||||||
|
export default async function getCollection(collectionAddress: string, url: string) {
|
||||||
|
const { data } = await client.query({
|
||||||
|
query: CollectionDocument,
|
||||||
|
variables: {
|
||||||
|
addresses: collectionAddress,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const collection = data?.nftCollections?.edges[0]?.node
|
||||||
|
if (!collection || !collection.name) {
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
const formattedAsset = {
|
||||||
|
title: collection.name + ' on Uniswap',
|
||||||
|
image: collection.image?.url,
|
||||||
|
url,
|
||||||
|
}
|
||||||
|
return formattedAsset
|
||||||
|
}
|
||||||
33
functions/utils/getToken.ts
Normal file
33
functions/utils/getToken.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { TokenDocument } from '../../src/graphql/data/__generated__/types-and-hooks'
|
||||||
|
import client from '../client'
|
||||||
|
|
||||||
|
function formatTitleName(symbol: string, name: string) {
|
||||||
|
if (symbol) {
|
||||||
|
return 'Get ' + symbol + ' on Uniswap'
|
||||||
|
}
|
||||||
|
if (name) {
|
||||||
|
return 'Get ' + name + ' on Uniswap'
|
||||||
|
}
|
||||||
|
return 'View Token on Uniswap'
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function getToken(networkName: string, tokenAddress: string, url: string) {
|
||||||
|
const { data } = await client.query({
|
||||||
|
query: TokenDocument,
|
||||||
|
variables: {
|
||||||
|
chain: networkName,
|
||||||
|
address: tokenAddress,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const asset = data?.token
|
||||||
|
if (!asset) {
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
const title = formatTitleName(asset.symbol, asset.name)
|
||||||
|
const formattedAsset = {
|
||||||
|
title,
|
||||||
|
image: asset.project?.logoUrl,
|
||||||
|
url,
|
||||||
|
}
|
||||||
|
return formattedAsset
|
||||||
|
}
|
||||||
@ -19,7 +19,7 @@
|
|||||||
"i18n": "yarn i18n:extract --clean && yarn i18n:compile",
|
"i18n": "yarn i18n:extract --clean && yarn i18n:compile",
|
||||||
"prepare": "concurrently \"npm:ajv\" \"npm:contracts\" \"npm:graphql\" \"npm:i18n\"",
|
"prepare": "concurrently \"npm:ajv\" \"npm:contracts\" \"npm:graphql\" \"npm:i18n\"",
|
||||||
"start": "craco start",
|
"start": "craco start",
|
||||||
"start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --proxy=3001 --port=3000 -- yarn start",
|
"start:cloud": "NODE_OPTIONS=--dns-result-order=ipv4first PORT=3001 npx wrangler pages dev --node-compat --proxy=3001 --port=3000 -- yarn start",
|
||||||
"build": "craco build",
|
"build": "craco build",
|
||||||
"build:e2e": "REACT_APP_CSP_ALLOW_UNSAFE_EVAL=true REACT_APP_ADD_COVERAGE_INSTRUMENTATION=true craco build",
|
"build:e2e": "REACT_APP_CSP_ALLOW_UNSAFE_EVAL=true REACT_APP_ADD_COVERAGE_INSTRUMENTATION=true craco build",
|
||||||
"analyze": "source-map-explorer 'build/static/js/*.js' --only-mapped",
|
"analyze": "source-map-explorer 'build/static/js/*.js' --only-mapped",
|
||||||
|
|||||||
BIN
public/images/324x74_App_Watermark.png
Normal file
BIN
public/images/324x74_App_Watermark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
3
public/images/54x54_Verified_Check.svg
Normal file
3
public/images/54x54_Verified_Check.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.48223 46.7073C7.39664 45.6264 6.85526 43.9605 6.85814 41.7096V36.8327C6.8693 36.41 6.71466 35.9999 6.42734 35.69L2.981 32.2403C1.37846 30.6564 0.577148 29.0983 0.577148 27.5661C0.577148 26.0338 1.36838 24.4786 2.95082 22.9004L6.39716 19.4508C6.68527 19.1414 6.84004 18.7309 6.82795 18.3081L6.82795 13.4182C6.82795 11.1501 7.36932 9.47985 8.45205 8.40759C9.53477 7.33532 11.1876 6.79776 13.4105 6.79488L18.3128 6.79488C18.5176 6.80189 18.7217 6.7673 18.9128 6.69319C19.1038 6.61908 19.2778 6.50698 19.4243 6.36368L22.9138 2.91403C24.4991 1.34732 26.0527 0.559659 27.5749 0.551034C29.097 0.54241 30.6508 1.33007 32.2361 2.91403L35.6824 6.36368C35.834 6.50867 36.0132 6.6216 36.2093 6.69569C36.4055 6.76978 36.6145 6.80351 36.824 6.79488H41.6963C43.9421 6.79488 45.605 7.33677 46.6849 8.42054C47.7647 9.5043 48.3061 11.1702 48.309 13.4182V18.2951C48.2969 18.7179 48.4517 19.1285 48.7398 19.4378L52.1861 22.8875C53.7686 24.4686 54.5655 26.0238 54.577 27.5531C54.5885 29.0825 53.7915 30.6362 52.1861 32.2145L48.7398 35.6641C48.4525 35.974 48.2978 36.3842 48.309 36.8068V41.6837C48.309 43.9289 47.7633 45.5948 46.6719 46.6814C45.5806 47.768 43.922 48.3099 41.6963 48.3071H36.824C36.6144 48.2977 36.4052 48.3311 36.2089 48.4052C36.0127 48.4793 35.8336 48.5927 35.6824 48.7383L32.2361 52.1879C30.6508 53.7546 29.097 54.5423 27.5749 54.5509C26.0527 54.5595 24.4991 53.7719 22.9138 52.1879L19.4243 48.7383C19.2782 48.5943 19.1042 48.4818 18.9131 48.4077C18.7219 48.3335 18.5177 48.2993 18.3128 48.3071H13.4105C11.2077 48.3243 9.56496 47.791 8.48223 46.7073ZM25.225 37.9942C26.0971 37.9942 26.848 37.5581 27.3567 36.783L38.1848 19.8505C38.4997 19.3418 38.7904 18.7604 38.7904 18.2033C38.7904 17.0163 37.7245 16.2169 36.586 16.2169C35.8593 16.2169 35.2052 16.6045 34.6965 17.4281L25.1281 32.786L20.6225 27.045C20.0411 26.294 19.4597 26.0276 18.733 26.0276C17.5461 26.0276 16.6255 26.9723 16.6255 28.1835C16.6255 28.7649 16.8436 29.2978 17.2554 29.8065L22.9722 36.783C23.6262 37.6308 24.3287 37.9942 25.225 37.9942Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
@ -21235,9 +21235,9 @@ yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
|
|||||||
integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
|
integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
|
||||||
|
|
||||||
yaml@^2.1.1:
|
yaml@^2.1.1:
|
||||||
version "2.2.2"
|
version "2.3.1"
|
||||||
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.2.2.tgz#ec551ef37326e6d42872dad1970300f8eb83a073"
|
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
|
||||||
integrity sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==
|
integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
|
||||||
|
|
||||||
yargs-parser@20.2.4:
|
yargs-parser@20.2.4:
|
||||||
version "20.2.4"
|
version "20.2.4"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user