diff --git a/src/components/Sponsor/Web3Donation/components/Input/InputGroup.module.css b/src/components/Sponsor/Web3Donation/components/Input/InputGroup.module.css index a046c9d7..6fb0c48f 100644 --- a/src/components/Sponsor/Web3Donation/components/Input/InputGroup.module.css +++ b/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; diff --git a/src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx b/src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx index 9e5051b0..3fe4f3ab 100644 --- a/src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx +++ b/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({ +
+ This form sends tokens to my account {config.author.ether} +
) } diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/Token.css b/src/components/Sponsor/Web3Donation/components/Tokens/Token.css index 68032e25..d8e072d4 100644 --- a/src/components/Sponsor/Web3Donation/components/Tokens/Token.css +++ b/src/components/Sponsor/Web3Donation/components/Tokens/Token.css @@ -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 { diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx b/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx index 005af9c3..8987f930 100644 --- a/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx +++ b/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx @@ -33,7 +33,11 @@ export const Token = forwardRef( > - + {token.logo ? ( + + ) : ( + token.symbol?.substring(0, 3) + )}
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;