loading state, logo fallback state

src/components/Sponsor/Web3Donation/components/Input/InputGroup.module.css

@@ -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;

src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx

@@ -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>
     </>
   )
 }

src/components/Sponsor/Web3Donation/components/Tokens/Token.css

@@ -21,14 +21,17 @@
 }
 
 .TokenLogo {
-  display: block;
+  width: 34px;
-  width: 32px;
+  height: 34px;
-  height: 32px;
   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 {

src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx

@@ -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>

src/components/Sponsor/Web3Donation/components/Tokens/TokenLoading.css

@@ -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);
+  }
+}

src/components/Sponsor/Web3Donation/components/Tokens/TokenLoading.tsx

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

src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css

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

src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx

@@ -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.Trigger
-        <Select.Value />
+        className="SelectTrigger"
+        disabled={!tokens || isLoading}
+        aria-label="Token"
+      >
+        {isLoading ? <TokenLoading /> : <Select.Value />}
         <Select.Icon>
           <ChevronDown />
         </Select.Icon>

src/pages/thanks.astro

@@ -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]) => (

src/styles/global.css

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