styling

src/components/CopyCode.astro

@@ -0,0 +1,29 @@
+---
+import Copy from '@components/Copy.astro'
+
+type Props = {
+  address: string
+}
+
+const { address }: Props = Astro.props
+---
+
+<style>
+  .code {
+    position: relative;
+    padding: 0;
+    width: 100%;
+  }
+
+  .code code {
+    display: block;
+    padding: calc(var(--spacer) / 2);
+    padding-right: 2rem;
+    font-size: var(--font-size-mini);
+  }
+</style>
+
+<div class="code">
+  <code>{address}</code>
+  <Copy text={address} />
+</div>

src/components/Thanks/Coin.astro

@@ -1,47 +0,0 @@
----
-import Copy from '@components/Copy.astro'
-
-type Props = {
-  address: string
-  title?: string
-}
-
-const { address }: Props = Astro.props
----
-
-<style>
-  .coin {
-    margin-top: calc(var(--spacer) / 6);
-  }
-
-  .titleCoin {
-    font-size: var(--font-size-base);
-    margin-top: var(--spacer);
-    margin-bottom: calc(var(--spacer) / 6);
-  }
-
-  .titleCoin:empty {
-    display: none;
-  }
-
-  .code {
-    position: relative;
-    padding: 0;
-    width: 100%;
-  }
-
-  .code code {
-    display: block;
-    padding: calc(var(--spacer) / 2);
-    padding-right: 2rem;
-    font-size: var(--font-size-mini);
-  }
-</style>
-
-<div class="coin">
-  <h4 class="titleCoin"><slot /></h4>
-  <div class="code">
-    <code>{address}</code>
-    <Copy text={address} />
-  </div>
-</div>

src/features/Web3/components/Conversion/Conversion.tsx

@@ -25,9 +25,12 @@ export function Conversion({ amount }: { amount: string }): ReactElement {
   }, [selectedToken?.price, amount])
 
   return (
-    <div className={styles.conversion}>
+    <div
-      <span>{dollar !== '0.00' && `= $ ${dollar}`}</span>
+      className={styles.conversion}
-      <span>{euro !== '0.00' && `= € ${euro}`}</span>
+      title="Value in USD & EUR at current spot price for selected token on Coingecko."
+    >
+      <span>{`= $ ${dollar}`}</span>
+      <span>{`= € ${euro}`}</span>
     </div>
   )
 }

src/features/Web3/components/Form/index.module.css

@@ -6,10 +6,20 @@
   text-align: center;
 }
 
-.rainbowkit button div {
+.rainbowkit button > div {
   padding-left: 0 !important;
 }
 
+/* hide the account icon, and hope nothing else */
+.rainbowkit button [aria-hidden] {
+  display: none;
+}
+
+/* hide the network icon, and hope nothing else */
+.rainbowkit [aria-label='Chain Selector'] [role='img'] {
+  display: none;
+}
+
 .rainbowkit > div:first-child {
   display: flex;
   flex-direction: row-reverse;
@@ -19,14 +29,13 @@
 
 /* connect button */
 .rainbowkit > div:first-child > button:only-child {
-  margin-left: auto;
   margin-right: auto;
 }
 
 .disclaimer {
-  text-align: left;
   font-size: var(--font-size-mini);
-  margin-top: calc(var(--spacer) / 3);
+  margin-top: calc(var(--spacer) / 1.5);
+  margin-bottom: calc(var(--spacer) / 6);
 }
 
 .message {

src/features/Web3/components/Form/index.tsx

@@ -34,7 +34,7 @@ export default function Web3Form(): ReactElement {
       }}
     >
       <div className={styles.rainbowkit}>
-        <ConnectButton chainStatus="icon" showBalance={false} />
+        <ConnectButton chainStatus="full" showBalance={false} />
       </div>
 
       {message ? (
@@ -57,8 +57,7 @@ export default function Web3Form(): ReactElement {
       )}
 
       <div className={styles.disclaimer}>
-        This form sends tokens to the following account which you can also use
+        Sends tokens to this address, suitable for any ERC-20 token.
-        for manually sending any ERC-20 token.
       </div>
     </form>
   )

src/features/Web3/components/Input/InputGroup.tsx

@@ -31,7 +31,7 @@ export function InputGroup({
         />
         <button
           className={`${styles.submit} btn btn-primary`}
-          disabled={isDisabled}
+          disabled={isDisabled || !amount}
         >
           Make it rain
         </button>

src/features/Web3/lib/rainbowkit.ts

@@ -29,7 +29,7 @@ export const wagmiConfig = createConfig({
   publicClient
 })
 
-export const theme = {
+export const theme: Theme = {
   colors: {
     accentColor: 'var(--brand-cyan)',
     accentColorForeground: '#161a1b',
@@ -58,7 +58,9 @@ export const theme = {
     profileActionHover: 'var(--box-background-color)',
     profileForeground: 'var(--body-background-color)',
     selectedOptionBorder: 'var(--border-color)',
-    standby: 'var(--text-color-dimmed)'
+    standby: 'var(--text-color-light)',
+    downloadBottomCardBackground: 'var(--body-background-color)',
+    downloadTopCardBackground: 'var(--body-background-color)'
   },
   fonts: {
     body: 'var(--font-family-base)'
@@ -77,5 +79,8 @@ export const theme = {
     selectedOption: 'none',
     selectedWallet: 'none',
     walletLogo: 'var(--box-shadow)'
+  },
+  blurs: {
+    modalOverlay: 'initial'
   }
-} as Theme
+}

src/images/wallet.svg

@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  class="lucide lucide-wallet-2"
+>
+  <path d="M17 14h.01" />
+  <path
+    d="M7 7h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14"
+  />
+</svg>

src/pages/thanks.astro

@@ -3,8 +3,8 @@
 import LayoutBase from '@layouts/Base/index.astro'
 import { Web3 } from '@features/Web3'
 import config from '@config/blog.config'
-import Coin from '@components/Thanks/Coin.astro'
+import { Bitcoin, Wallet } from '@images/components'
-import { Bitcoin } from '@images/components'
+import CodeCopy from '@components/CopyCode.astro'
 ---
 
 <style>
@@ -45,10 +45,10 @@ import { Bitcoin } from '@images/components'
     margin-right: calc(var(--spacer) / -1.5);
   }
 
-  .coinTitle {
+  .titleCoin {
-    margin-top: calc(var(--spacer) / 1.5);
-    margin-bottom: calc(var(--spacer) / 3);
     font-size: var(--font-size-base);
+    margin-top: var(--spacer);
+    margin-bottom: calc(var(--spacer) / 2);
   }
 </style>
 
@@ -59,15 +59,12 @@ import { Bitcoin } from '@images/components'
     <div class="content">
       <h3 class="subTitle">Send Magic Internet Money</h3>
 
-      <h4 class="coinTitle">Browser wallet</h4>
+      <h4 class="titleCoin"><Wallet /> Browser wallet</h4>
-
       <Web3 client:load />
+      <CodeCopy address={config.author.ether} />
 
-      <Coin address={config.author.ether} />
+      <h4 class="titleCoin"><Bitcoin /> Bitcoin</h4>
-
+      <CodeCopy address={config.author.bitcoin} />
-      <Coin address={config.author.bitcoin}>
-        <Bitcoin /> Bitcoin
-      </Coin>
     </div>
 
     <div>