1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-23 01:30:01 +01:00

loading state, logo fallback state

This commit is contained in:
Matthias Kretschmann 2023-10-28 18:01:36 +01:00
parent f181ac444d
commit 15130e8d92
Signed by: m
GPG Key ID: 606EEEF3C479A91F
10 changed files with 80 additions and 16 deletions

View File

@ -69,6 +69,11 @@
composes: message from '../../index.module.css';
}
.disclaimer {
font-size: var(--font-size-mini);
color: var(--text-color-light);
}
@keyframes fadeIn {
from {
opacity: 0.01;

View File

@ -3,6 +3,7 @@ import Input from '@components/Input'
import { Conversion } from '../Conversion'
import styles from './InputGroup.module.css'
import { TokenSelect } from '../Tokens'
import config from '@config/blog.config'
export function InputGroup({
amount,
@ -41,6 +42,9 @@ export function InputGroup({
</button>
</div>
<Conversion amount={amount} symbol={symbol} />
<div className={styles.disclaimer}>
This form sends tokens to my account <code>{config.author.ether}</code>
</div>
</>
)
}

View File

@ -21,14 +21,17 @@
}
.TokenLogo {
display: block;
width: 32px;
height: 32px;
width: 34px;
height: 34px;
border-radius: 50%;
margin-right: calc(var(--spacer) / 4);
border: 1px solid var(--border-color);
background: var(--brand-light);
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-mini);
}
.TokenLogo img {

View File

@ -33,7 +33,11 @@ export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
>
<Select.ItemText>
<span className="TokenLogo">
<img src={token.logo || ''} width="32" height="32" />
{token.logo ? (
<img src={token.logo} width="32" height="32" />
) : (
token.symbol?.substring(0, 3)
)}
</span>
</Select.ItemText>
<div>

View File

@ -0,0 +1,38 @@
.loader {
--borderWidth: 10px;
--dashes: 10;
--gap: 10deg;
--color: var(--text-color);
width: 100px;
aspect-ratio: 1;
border-radius: 50%;
padding: 1px;
background: conic-gradient(#0000, var(--color)) content-box;
--_m: repeating-conic-gradient(
#0000 0deg,
#000 1deg calc(360deg / var(--dashes) - var(--gap) - 1deg),
#0000 calc(360deg / var(--dashes) - var(--gap))
calc(360deg / var(--dashes))
),
radial-gradient(
farthest-side,
#0000 calc(98% - var(--borderWidth)),
#000 calc(100% - var(--borderWidth))
);
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-mask: var(--_m);
mask: var(--_m);
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-mask-composite: destination-in;
mask-composite: intersect;
animation: load 1s infinite steps(var(--dashes));
}
@keyframes load {
to {
transform: rotate(1turn);
}
}

View File

@ -0,0 +1,9 @@
import './TokenLoading.css'
export function TokenLoading() {
return (
<div className="TokenLogo TokenLoading">
<span className="loader"></span>
</div>
)
}

View File

@ -1,8 +1,3 @@
/* reset */
button {
all: unset;
}
.SelectTrigger {
display: inline-flex;
align-items: center;

View File

@ -3,13 +3,14 @@ import './TokenSelect.css'
import { Token } from './Token'
import { ChevronDown, ChevronsDown, ChevronsUp } from '@images/components/react'
import { useTokens } from '../../hooks/useTokens'
import { TokenLoading } from './TokenLoading'
export function TokenSelect({
setToken
}: {
setToken: (token: string) => void
}) {
const { data: tokens } = useTokens()
const { data: tokens, isLoading } = useTokens()
const items = tokens?.map((token) => (
<Token key={token.address} token={token} />
@ -17,12 +18,16 @@ export function TokenSelect({
return tokens ? (
<Select.Root
defaultValue={tokens[0].address}
defaultValue={tokens?.[0].address}
onValueChange={(value) => setToken(value)}
disabled={!tokens}
disabled={!tokens || isLoading}
>
<Select.Trigger className="SelectTrigger" aria-label="Token">
<Select.Value />
<Select.Trigger
className="SelectTrigger"
disabled={!tokens || isLoading}
aria-label="Token"
>
{isLoading ? <TokenLoading /> : <Select.Value />}
<Select.Icon>
<ChevronDown />
</Select.Icon>

View File

@ -37,12 +37,12 @@ const coins = Object.entries(config.author).filter(
<BackButton />
<div class="content">
<h3 class="subTitle">Send ERC-20 tokens from your browser wallet.</h3>
<h3 class="subTitle">Send from your browser wallet.</h3>
<Web3 client:only="react" />
</div>
<div class="content">
<h3 class="subTitle">Send Bitcoin or ERC-20 tokens from any wallet.</h3>
<h3 class="subTitle">Send from any wallet.</h3>
{
coins.map(([key, value]: [key: string, value: string]) => (

View File

@ -56,6 +56,7 @@ textarea {
/* Reset default button element */
button {
all: unset;
padding: 0;
cursor: pointer;
background: transparent;