From f181ac444d68d44271eba14a2eb99c6c7ad0bc64 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 28 Oct 2023 17:08:46 +0100
Subject: [PATCH] styling

---
 .../Sponsor/Web3Donation/api/getTokens.ts     |  4 ++
 .../components/Input/InputGroup.tsx           |  1 +
 .../Web3Donation/components/Tokens/Token.css  | 44 +++++++++----------
 .../Web3Donation/components/Tokens/Token.tsx  | 24 ++++++----
 .../components/Tokens/TokenSelect.css         | 12 ++---
 .../components/Tokens/TokenSelect.tsx         |  3 +-
 .../Sponsor/Web3Donation/hooks/useTokens.tsx  |  4 +-
 src/components/Sponsor/Web3Donation/index.tsx |  2 +-
 .../Sponsor/Web3Donation/lib/rainbowkit.ts    | 16 +++----
 src/pages/thanks.astro                        |  2 +-
 10 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/src/components/Sponsor/Web3Donation/api/getTokens.ts b/src/components/Sponsor/Web3Donation/api/getTokens.ts
index b34ec85b..dc1ac35c 100644
--- a/src/components/Sponsor/Web3Donation/api/getTokens.ts
+++ b/src/components/Sponsor/Web3Donation/api/getTokens.ts
@@ -6,6 +6,10 @@ export type GetToken = {
   symbol: string | null
   decimals: number | null
   logo: string | null
+  price: {
+    usd: number | null
+    eur: number | null
+  }
 }
 
 export async function getTokens(
diff --git a/src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx b/src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx
index 2ea3bac1..9e5051b0 100644
--- a/src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx
+++ b/src/components/Sponsor/Web3Donation/components/Input/InputGroup.tsx
@@ -28,6 +28,7 @@ export function InputGroup({
           inputMode="decimal"
           pattern="[0-9.]*"
           value={amount}
+          placeholder="0.00"
           onChange={(e) => setAmount(e.target.value)}
           className={styles.inputInput}
           disabled={isDisabled}
diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/Token.css b/src/components/Sponsor/Web3Donation/components/Tokens/Token.css
index 8122d35b..68032e25 100644
--- a/src/components/Sponsor/Web3Donation/components/Tokens/Token.css
+++ b/src/components/Sponsor/Web3Donation/components/Tokens/Token.css
@@ -1,4 +1,4 @@
-.SelectItem {
+.Token {
   font-size: var(--font-size-small);
   line-height: 1;
   color: var(--text-color);
@@ -10,40 +10,29 @@
   user-select: none;
 }
 
-.SelectItem[data-disabled] {
+.Token[data-disabled] {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.SelectItem[data-highlighted] {
+.Token[data-highlighted] {
   outline: none;
-  background-color: var(--text-color);
+  background-color: var(--box-background-color);
 }
 
-.SelectItem[data-highlighted],
-.SelectItem[data-highlighted] * {
-  color: var(--body-background-color);
-}
-
-.SelectItem,
-.Token {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.Token {
-  min-width: 200px;
-}
-
-.Token img {
+.TokenLogo {
+  display: block;
   width: 32px;
   height: 32px;
-  margin: 0;
-  margin-right: calc(var(--spacer) / 4);
   border-radius: 50%;
+  margin-right: calc(var(--spacer) / 4);
   border: 1px solid var(--border-color);
   background: var(--brand-light);
+  overflow: hidden;
+}
+
+.TokenLogo img {
+  margin: 0;
 }
 
 .TokenName,
@@ -58,7 +47,14 @@
 
 .TokenBalance {
   font-size: var(--font-size-small);
-  font-variant: tabular-nums;
+}
+
+.TokenValue {
+  font-size: var(--font-size-small);
+  display: inline-flex;
+  align-self: flex-start;
+  margin-left: auto;
+  padding-left: calc(var(--spacer) * 2);
 }
 
 .SelectItemIndicator {
diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx b/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx
index 154c13a2..005af9c3 100644
--- a/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx
+++ b/src/components/Sponsor/Web3Donation/components/Tokens/Token.tsx
@@ -19,23 +19,29 @@ export const Token = forwardRef<HTMLDivElement, SelectItemProps>(
           })
         : 0
 
-    return balance && parseInt(balance) !== 0 ? (
+    const valueInUsd =
+      token.balance && token.price?.usd ? token.balance * token.price.usd : 0
+    const valueInUsdFormatted = formatCurrency(valueInUsd, 'USD', 'en')
+
+    return balance && parseInt(balance) !== 0 && valueInUsd >= 1 ? (
       <Select.Item
-        className={`${className} SelectItem`}
+        className={`${className ? className : ''} Token`}
         {...props}
         value={token.address}
         title={token.address}
         ref={forwardedRef}
       >
-        <div className="Token">
-          <Select.ItemText>
+        <Select.ItemText>
+          <span className="TokenLogo">
             <img src={token.logo || ''} width="32" height="32" />
-          </Select.ItemText>
-          <div>
-            <h3 className="TokenName">{token.name}</h3>
-            <p className="TokenBalance">{balance}</p>
-          </div>
+          </span>
+        </Select.ItemText>
+        <div>
+          <h3 className="TokenName">{token.name}</h3>
+          <p className="TokenBalance">{balance}</p>
         </div>
+        <div className="TokenValue">{valueInUsdFormatted}</div>
+
         <Select.ItemIndicator className="SelectItemIndicator">
           <Check />
         </Select.ItemIndicator>
diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css b/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css
index 90d512ba..15a95d01 100644
--- a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css
+++ b/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.css
@@ -16,8 +16,7 @@ button {
 }
 
 .SelectTrigger:hover {
-  background-color: var(--text-color);
-  color: var(--body-background-color);
+  background-color: var(--box-background-color);
 }
 
 /* .SelectTrigger:focus {
@@ -29,13 +28,8 @@ button {
   pointer-events: none;
 }
 
-.SelectTrigger img {
-  width: 32px;
-  height: 32px;
-  margin: 0;
-  border-radius: 50%;
-  border: 1px solid var(--border-color);
-  background: var(--brand-light);
+.SelectTrigger .TokenLogo {
+  margin-right: calc(var(--spacer) / 12);
 }
 
 .SelectContent {
diff --git a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx b/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx
index a0de1a60..99cd92c1 100644
--- a/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx
+++ b/src/components/Sponsor/Web3Donation/components/Tokens/TokenSelect.tsx
@@ -19,9 +19,10 @@ export function TokenSelect({
     <Select.Root
       defaultValue={tokens[0].address}
       onValueChange={(value) => setToken(value)}
+      disabled={!tokens}
     >
       <Select.Trigger className="SelectTrigger" aria-label="Token">
-        <Select.Value placeholder="…" />
+        <Select.Value />
         <Select.Icon>
           <ChevronDown />
         </Select.Icon>
diff --git a/src/components/Sponsor/Web3Donation/hooks/useTokens.tsx b/src/components/Sponsor/Web3Donation/hooks/useTokens.tsx
index ee4fc10b..79a64b30 100644
--- a/src/components/Sponsor/Web3Donation/hooks/useTokens.tsx
+++ b/src/components/Sponsor/Web3Donation/hooks/useTokens.tsx
@@ -1,12 +1,12 @@
 import { useState, useEffect } from 'react'
 import { useAccount, useNetwork } from 'wagmi'
-import { getTokens, type GetTokens } from '../api/getTokens'
+import { getTokens, type GetToken } from '../api/getTokens'
 
 export function useTokens() {
   const { address } = useAccount()
   const { chain } = useNetwork()
 
-  const [data, setData] = useState<GetTokens[]>()
+  const [data, setData] = useState<GetToken[]>()
   const [isLoading, setIsLoading] = useState<boolean>()
   const [isError, setIsError] = useState<boolean>()
 
diff --git a/src/components/Sponsor/Web3Donation/index.tsx b/src/components/Sponsor/Web3Donation/index.tsx
index ad2960de..3aaf6957 100644
--- a/src/components/Sponsor/Web3Donation/index.tsx
+++ b/src/components/Sponsor/Web3Donation/index.tsx
@@ -21,7 +21,7 @@ export default function Web3Donation({
   const { address: account } = useAccount()
   const { chain } = useNetwork()
 
-  const [amount, setAmount] = useState('0.005')
+  const [amount, setAmount] = useState('')
   const [debouncedAmount] = useDebounce(amount, 500)
   const [token, setToken] = useState<string>()
   const [message, setMessage] = useState<{ status: string; text: string }>()
diff --git a/src/components/Sponsor/Web3Donation/lib/rainbowkit.ts b/src/components/Sponsor/Web3Donation/lib/rainbowkit.ts
index 1437ab59..cf841265 100644
--- a/src/components/Sponsor/Web3Donation/lib/rainbowkit.ts
+++ b/src/components/Sponsor/Web3Donation/lib/rainbowkit.ts
@@ -33,24 +33,24 @@ export const theme = {
   colors: {
     accentColor: 'var(--brand-cyan)',
     accentColorForeground: '#161a1b',
-    actionButtonBorder: 'var(--body-background-color)',
-    actionButtonBorderMobile: 'var(--body-background-color)',
+    actionButtonBorder: 'var(--border-color)',
+    actionButtonBorderMobile: 'var(--border-color)',
     actionButtonSecondaryBackground: 'var(--box-background-color)',
     closeButton: 'var(--text-color)',
     closeButtonBackground: 'var(--box-background-color)',
     connectButtonBackground: 'var(--body-background-color)',
     connectButtonBackgroundError: 'var(--alert-error)',
-    connectButtonInnerBackground: 'var(--box-background-color)',
+    connectButtonInnerBackground: 'var(--body-background-color)',
     connectButtonText: 'var(--text-color)',
     connectButtonTextError: '#161a1b',
     connectionIndicator: 'var(--alert-success)',
     error: 'var(--alert-error)',
     generalBorder: 'var(--border-color)',
     generalBorderDim: 'var(--border-color)',
-    menuItemBackground: 'var(--link-color)',
+    menuItemBackground: 'var(--border-color)',
     modalBackdrop: 'rgba(0, 0, 0, 0.5)',
     modalBackground: 'var(--body-background-color)',
-    modalBorder: 'var(--body-background-color)',
+    modalBorder: 'var(--border-color)',
     modalText: 'var(--text-color)',
     modalTextDim: 'var(--text-color-dimmed)',
     modalTextSecondary: 'var(--text-color-light)',
@@ -71,11 +71,11 @@ export const theme = {
     modalMobile: 'var(--border-radius)'
   },
   shadows: {
-    connectButton: 'var(--box-shadow)',
+    connectButton: 'none',
     dialog: 'var(--box-shadow)',
     profileDetailsAction: 'none',
-    selectedOption: 'var(--box-shadow)',
-    selectedWallet: 'var(--box-shadow)',
+    selectedOption: 'none',
+    selectedWallet: 'none',
     walletLogo: 'var(--box-shadow)'
   }
 } as Theme
diff --git a/src/pages/thanks.astro b/src/pages/thanks.astro
index 3bad5f00..14821beb 100644
--- a/src/pages/thanks.astro
+++ b/src/pages/thanks.astro
@@ -37,7 +37,7 @@ const coins = Object.entries(config.author).filter(
   <BackButton />
 
   <div class="content">
-    <h3 class="subTitle">Send ETH from your browser wallet.</h3>
+    <h3 class="subTitle">Send ERC-20 tokens from your browser wallet.</h3>
     <Web3 client:only="react" />
   </div>