diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/TokenLoading.css b/src/components/Sponsor/Web3Donation/components/Tokens/TokenLoading.css
new file mode 100644
index 00000000..97c1f72b
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/TokenLoading.tsx b/src/components/Sponsor/Web3Donation/components/Tokens/TokenLoading.tsx
new file mode 100644
index 00000000..83cf9a46
--- /dev/null
+++ b/src/components/Sponsor/Web3Donation/components/Tokens/TokenLoading.tsx
@@ -0,0 +1,9 @@
+import './TokenLoading.css'
+
+export function TokenLoading() {
+ return (
+
+
+
+ )
+}
diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css b/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css
index 15a95d01..514f507f 100644
--- a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css
+++ b/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css
@@ -1,8 +1,3 @@
-/* reset */
-button {
- all: unset;
-}
-
.SelectTrigger {
display: inline-flex;
align-items: center;
diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx b/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx
index 99cd92c1..562a301d 100644
--- a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx
+++ b/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) => (
@@ -17,12 +18,16 @@ export function TokenSelect({
return tokens ? (
setToken(value)}
- disabled={!tokens}
+ disabled={!tokens || isLoading}
>
-
-
+
+ {isLoading ? : }
diff --git a/src/pages/thanks.astro b/src/pages/thanks.astro
index 14821beb..74ee3ce8 100644
--- a/src/pages/thanks.astro
+++ b/src/pages/thanks.astro
@@ -37,12 +37,12 @@ const coins = Object.entries(config.author).filter(
-
Send ERC-20 tokens from your browser wallet.
+ Send from your browser wallet.
-
Send Bitcoin or ERC-20 tokens from any wallet.
+ Send from any wallet.
{
coins.map(([key, value]: [key: string, value: string]) => (
diff --git a/src/styles/global.css b/src/styles/global.css
index ccd8bb46..20716d3f 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -56,6 +56,7 @@ textarea {
/* Reset default button element */
button {
+ all: unset;
padding: 0;
cursor: pointer;
background: transparent;