m/asi-calculator
1
0
Fork 0
mirror of https://github.com/kremalicious/asi-calculator.git synced 2025-02-12 08:31:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

add new ASI logo

Browse Source 
* add throughout UI as token logo
* add all favicon files, social image
This commit is contained in:
Matthias Kretschmann 2024-06-10 14:54:58 +01:00
parent bd0a2733a0
commit ef42f24ab5
Signed by: m
GPG Key ID: 606EEEF3C479A91F
22 changed files with 103 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/layout.tsx
View File

@ -19,6 +19,11 @@ export default function RootLayout({
return (
<html lang="en">
<head>
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest/manifest.webmanifest" />
{isProduction ? (
<Script
async

BIN
app/opengraph-image-assets/HankenGrotesk-Bold.ttf
View File

Binary file not shown.

BIN
app/opengraph-image-assets/HankenGrotesk-Regular.ttf
View File

Binary file not shown.

BIN
app/opengraph-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

102
app/opengraph-image.tsx
View File

@ -1,102 +0,0 @@
import { Logo } from '@/components/Logo'
import { title, description, font } from '@/constants'
import { ImageResponse } from 'next/og'
export const runtime = 'edge'
export const alt = title
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
export default async function Image() {
const fontDataBold = await fetch(
new URL('./opengraph-image-assets/HankenGrotesk-Bold.ttf', import.meta.url)
).then((res) => res.arrayBuffer())
const fontDataRegular = await fetch(
new URL(
'./opengraph-image-assets/HankenGrotesk-Regular.ttf',
import.meta.url
)
).then((res) => res.arrayBuffer())
return new ImageResponse(
(
<div
style={{
backgroundImage:
'radial-gradient(circle at 30% 0%, rgb(27, 40, 62) 0%, rgb(15, 18, 33) 30%, rgb(0, 0, 0) 100%)',
color: 'rgba(220, 220, 220, .7)',
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
textAlign: 'left',
padding: '0 120px 0 180px'
}}
>
<h1
style={{
fontSize: 90,
marginBottom: '0',
color: 'white',
display: 'flex',
alignItems: 'center'
}}
>
<Logo
style={{
width: '1.1em',
height: '.8em',
marginRight: '.5rem'
}}
/>
{title}
</h1>
<p style={{ fontSize: 43, marginTop: '0', paddingLeft: '6.5rem' }}>
{description}
</p>
<p
style={{
fontSize: 30,
display: 'flex',
alignItems: 'center',
paddingLeft: '6.5rem'
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 512 512"
style={{ marginRight: '0.25em', borderRadius: '50%' }}
>
<rect fill="#e7eef4" width="512" height="512" />
<path
fill="#6b7f88"
d="M397,91 L421,115 L114,421 L91,398 L397,91 Z M397,182 L421,206 L205,421 L182,398 L397,182 Z M307,91 L330,115 L114,330 L91,307 L307,91 Z"
/>
</svg>
<span>krema.eth</span>
</p>
</div>
),
{
...size,
fonts: [
{
name: 'Hanken Grotesk',
data: fontDataBold,
style: 'normal',
weight: 700
},
{
name: 'Hanken Grotesk',
data: fontDataRegular,
style: 'normal',
weight: 400
}
]
}
)
}

BIN
app/xxxopengraph-image.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

24
components/Header/Header.module.css
View File

@ -1,15 +1,33 @@
.header {
max-width: var(--max-width);
margin: auto;
margin-top: 5vh;
}
.title,
.description {
color: rgb(var(--foreground-rgb-highlight));
max-width: var(--max-width);
margin: auto;
}
.title {
font-size: clamp(1.5rem, 10vw, 2.75rem);
margin-top: 5vh;
display: flex;
align-items: center;
}
.description {
font-size: clamp(1.1rem, 5vw, 1.75rem);
color: var(--text-light);
}
@media (min-width: 22rem) {
.description {
padding-left: 3.75rem;
}
}
.logo {
height: 0.8em;
width: auto;
margin-right: 0.5rem;
}

7
components/Header/Header.tsx
View File

@ -1,10 +1,13 @@
import { title, description } from '@/constants'
import styles from './Header.module.css'
import { Logo } from '@/components/Logo'
export function Header() {
return (
<header>
<h1 className={styles.title}>{`${title}`}</h1>
<header className={styles.header}>
<h1 className={styles.title}>
<Logo className={styles.logo} /> {`${title}`}
</h1>
<p className={styles.description}>{`${description}`}</p>
</header>
)

16
components/Logo/Logo.tsx Normal file
View File

@ -0,0 +1,16 @@
export function Logo(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="425"
height="282"
viewBox="0 0 425 282"
{...props}
>
<path
fill="currentColor"
d="M175.571415,14.0787055 C184.808914,23.4029964 188.096837,31.950263 188.096837,47.4907477 C188.096837,58.2136822 187.313998,61.9433986 184.495778,67.2271634 C175.571415,84.1662917 163.359129,91.6257244 141.283072,94.112202 C125.000024,95.9770601 115.292822,100.328396 106.838162,109.652687 C98.2269341,119.132382 94.9390108,127.990459 94.9390108,141.355276 C94.9390108,167.7741 113.100873,185.801062 141.909343,188.28754 C158.035824,189.686183 166.960188,193.726709 176.354254,203.983429 C203.910183,233.976565 182.460397,282.462877 141.909343,281.996663 C136.272904,281.996663 128.914218,280.908829 125.626295,279.66559 C107.307865,272.983181 95.8784174,256.976482 93.9996041,235.530613 C92.7470619,221.388772 88.2065964,210.510433 79.9085043,202.429381 C70.9841411,193.571304 63.1557523,190.152398 48.1252458,188.598349 C26.362325,186.422681 11.9580897,177.564605 3.81656532,161.091691 C-1.35017127,150.990376 -1.1936035,130.476936 3.81656532,120.997241 C12.7409285,104.213517 25.1097828,96.132465 45.6201614,94.112202 C74.8983355,91.1595099 90.2419775,76.7068591 93.5299008,49.3556059 C95.5652819,32.5718824 98.8532052,24.0246158 106.055323,15.7881589 C124.060617,-4.56987617 156.000443,-5.3469004 175.571415,14.0787055 Z M316.325846,14.8908632 C325.250209,24.3705589 328.068429,31.2083722 329.790674,47.2150715 C331.356352,62.4447465 335.583682,71.9244422 344.19491,80.316304 C352.962705,88.7081657 361.417365,92.2824772 376.917575,93.9919306 C393.670327,95.8567887 399.619902,98.1878614 408.857401,106.735128 C425.766721,122.120208 429.524347,145.58634 418.0949,165.011946 C409.953375,179.153787 397.114818,186.30241 376.291304,188.633483 C347.482833,191.74158 332.765462,206.81585 329.634107,235.721151 C327.598725,256.545401 320.396608,268.200765 304.583262,276.748031 C293.623518,282.498011 276.401063,283.741249 265.441318,279.389914 C250.097676,273.17372 240.547042,262.29538 236.319712,245.822467 C233.65806,236.187366 233.65806,234.944127 236.319712,225.464432 C239.451068,213.032044 246.183482,203.086133 255.107845,197.025344 C263.24937,191.43077 269.512081,189.565912 283.60318,188.167268 C296.754874,187.079434 305.209534,183.505123 314.133897,175.579475 C324.46737,166.255185 328.851268,156.464679 328.851268,141.545814 C329.007835,131.444499 328.381564,127.714782 325.250209,121.498589 C316.952117,104.87027 303.800424,96.4784081 282.037503,93.9919306 C260.43115,91.6608578 246.496618,82.336567 238.824797,65.3974386 C233.971196,54.9853138 233.971196,38.8232097 238.511661,28.7218946 C252.759329,-2.66988457 292.997247,-9.81850756 316.325846,14.8908632 Z M244.461237,107.756149 C262.623099,125.472301 262.466531,157.4857 244.148101,173.492399 C228.804459,186.701811 209.546623,189.499098 192.324167,180.951832 C175.101712,172.55997 166.960188,158.884344 166.960188,139.303333 C167.116755,99.5196918 215.809334,79.6278713 244.461237,107.756149 Z"
/>
</svg>
)
}

1
components/Logo/index.tsx Normal file
View File

@ -0,0 +1 @@
export * from './Logo'

3
components/TokenLogo/TokenLogo.module.css
View File

@ -24,7 +24,8 @@
@media (prefers-color-scheme: dark) {
.logo[data-symbol='OCEAN'] img,
.logo[data-symbol='FET'] img {
.logo[data-symbol='FET'] img,
.logo[data-symbol='ASI'] img {
filter: invert(1) grayscale(1);
}

5
components/TokenLogo/TokenLogo.tsx
View File

@ -3,6 +3,7 @@ import styles from './TokenLogo.module.css'
import oceanImage from '@/images/ocean.png'
import agixImage from '@/images/agix.png'
import fetImage from '@/images/fet.png'
import asiImage from '@/images/asi.png'
export function TokenLogo({
token,
@ -16,7 +17,9 @@ export function TokenLogo({
? oceanImage
: token?.symbol === 'AGIX'
? agixImage
: fetImage
: token?.symbol === 'ASI'
? asiImage
: fetImage
return token ? (
<span className={styles.logo} data-symbol={token.symbol}>

2
content.md
View File

@ -1,6 +1,6 @@
## The Calculator
The **→ lines** show what you would get with the given token amount at the moment of the ASI swap, along with the converted USD value based on the current price of FET.
The **ASI rows** show what you would get with the given token amount at the moment of the ASI swap, along with the converted USD value based on the current price of FET.
The _All Markets_ scenario uses current spot prices fetched from [Coingecko](https://coingecko.com), ignoring the actual liquidity situation but these values should be pretty close to what you would get on big centralized exchanges like Coinbase or Binance. The swap estimations for _Uniswap_ scenario are fetched directly from [Uniswap](https://uniswap.org) v3 routes on-chain, reflecting the actual liquidity situation for direct swaps between shown tokens.

2
features/strategies/components/Result/Result.tsx
View File

@ -55,7 +55,7 @@ export function Result({
</div>
<div className={styles.resultLine}>
<ArrowRightIcon className={styles.iconArrow} />
<TokenLogo token={{ symbol: 'ASI', address: '0x' }} />
<p>
<strong title={`${amountAsi} ASI`} className={feedbackClasses}>

BIN
images/asi.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 542 B

BIN
public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

27
public/favicon.svg Normal file
View File

@ -0,0 +1,27 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
>
<style>
@media (prefers-color-scheme: dark) {
#background {
fill: #000;
}
#logomark {
fill: #fff;
}
}
</style>
<g fill="none" fill-rule="evenodd">
<rect id="background" width="512" height="512" fill="#FFF" />
<path
id="logomark"
fill="#000"
fill-rule="nonzero"
d="M175.571415,14.0787055 C184.808914,23.4029964 188.096837,31.950263 188.096837,47.4907477 C188.096837,58.2136822 187.313998,61.9433986 184.495778,67.2271634 C175.571415,84.1662917 163.359129,91.6257244 141.283072,94.112202 C125.000024,95.9770601 115.292822,100.328396 106.838162,109.652687 C98.2269341,119.132382 94.9390108,127.990459 94.9390108,141.355276 C94.9390108,167.7741 113.100873,185.801062 141.909343,188.28754 C158.035824,189.686183 166.960188,193.726709 176.354254,203.983429 C203.910183,233.976565 182.460397,282.462877 141.909343,281.996663 C136.272904,281.996663 128.914218,280.908829 125.626295,279.66559 C107.307865,272.983181 95.8784174,256.976482 93.9996041,235.530613 C92.7470619,221.388772 88.2065964,210.510433 79.9085043,202.429381 C70.9841411,193.571304 63.1557523,190.152398 48.1252458,188.598349 C26.362325,186.422681 11.9580897,177.564605 3.81656532,161.091691 C-1.35017127,150.990376 -1.1936035,130.476936 3.81656532,120.997241 C12.7409285,104.213517 25.1097828,96.132465 45.6201614,94.112202 C74.8983355,91.1595099 90.2419775,76.7068591 93.5299008,49.3556059 C95.5652819,32.5718824 98.8532052,24.0246158 106.055323,15.7881589 C124.060617,-4.56987617 156.000443,-5.3469004 175.571415,14.0787055 Z M316.325846,14.8908632 C325.250209,24.3705589 328.068429,31.2083722 329.790674,47.2150715 C331.356352,62.4447465 335.583682,71.9244422 344.19491,80.316304 C352.962705,88.7081657 361.417365,92.2824772 376.917575,93.9919306 C393.670327,95.8567887 399.619902,98.1878614 408.857401,106.735128 C425.766721,122.120208 429.524347,145.58634 418.0949,165.011946 C409.953375,179.153787 397.114818,186.30241 376.291304,188.633483 C347.482833,191.74158 332.765462,206.81585 329.634107,235.721151 C327.598725,256.545401 320.396608,268.200765 304.583262,276.748031 C293.623518,282.498011 276.401063,283.741249 265.441318,279.389914 C250.097676,273.17372 240.547042,262.29538 236.319712,245.822467 C233.65806,236.187366 233.65806,234.944127 236.319712,225.464432 C239.451068,213.032044 246.183482,203.086133 255.107845,197.025344 C263.24937,191.43077 269.512081,189.565912 283.60318,188.167268 C296.754874,187.079434 305.209534,183.505123 314.133897,175.579475 C324.46737,166.255185 328.851268,156.464679 328.851268,141.545814 C329.007835,131.444499 328.381564,127.714782 325.250209,121.498589 C316.952117,104.87027 303.800424,96.4784081 282.037503,93.9919306 C260.43115,91.6608578 246.496618,82.336567 238.824797,65.3974386 C233.971196,54.9853138 233.971196,38.8232097 238.511661,28.7218946 C252.759329,-2.66988457 292.997247,-9.81850756 316.325846,14.8908632 Z M244.461237,107.756149 C262.623099,125.472301 262.466531,157.4857 244.148101,173.492399 C228.804459,186.701811 209.546623,189.499098 192.324167,180.951832 C175.101712,172.55997 166.960188,158.884344 166.960188,139.303333 C167.116755,99.5196918 215.809334,79.6278713 244.461237,107.756149 Z"
transform="translate(44 116)"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
public/manifest/icon-192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
public/manifest/icon-512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

18
public/manifest/manifest.webmanifest Normal file
View File

@ -0,0 +1,18 @@
{
"name": "ASI Calculator",
"short_name": "ASI",
"display": "standalone",
"start_url": "/?homescreen=1",
"icons": [
{
"src": "/manifest/icon-192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/manifest/icon-512.png",
"type": "image/png",
"sizes": "512x512"
}
]
}

3
styles/_variables.css
View File

@ -12,7 +12,8 @@
rgb(255, 255, 255) 100%
);
--text-dimmed: rgba(var(--foreground-rgb), 0.6);
--text-light: rgba(var(--foreground-rgb), 0.7);
--text-dimmed: rgba(var(--foreground-rgb), 0.5);
}
@media (prefers-color-scheme: dark) {