From 0728c63b178e84afc4fea60d76a1572e7f06f7a1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 2 Nov 2023 23:33:06 +0000
Subject: [PATCH] more form interactions

---
 src/components/Input/index.module.css         |  4 +-
 .../Web3/components/Form/index.module.css     |  2 +-
 .../components/Input/InputGroup.module.css    | 34 +++++++++-------
 src/features/Web3/components/Send/Send.tsx    |  6 +++
 .../Web3/components/Send/SendTable.module.css | 20 ++++++----
 .../Web3/components/Send/SendTable.tsx        | 28 +++++++++----
 .../Web3/components/TokenSelect/Token.css     |  1 -
 .../components/TokenSelect/TokenLoading.css   | 39 -------------------
 .../components/TokenSelect/TokenLoading.tsx   |  9 -----
 .../components/TokenSelect/TokenSelect.css    | 12 +++---
 .../components/TokenSelect/TokenSelect.tsx    | 14 +++----
 src/pages/thanks.astro                        |  2 +-
 src/styles/_variables.css                     |  4 +-
 13 files changed, 79 insertions(+), 96 deletions(-)
 delete mode 100644 src/features/Web3/components/TokenSelect/TokenLoading.css
 delete mode 100644 src/features/Web3/components/TokenSelect/TokenLoading.tsx

diff --git a/src/components/Input/index.module.css b/src/components/Input/index.module.css
index 3162105a..b06bb3a5 100644
--- a/src/components/Input/index.module.css
+++ b/src/components/Input/index.module.css
@@ -1,6 +1,5 @@
 .input {
   display: block;
-  width: 100%;
   padding: var(--padding-base-vertical) var(--padding-base-horizontal);
   font-size: var(--input-font-size);
   font-weight: var(--input-font-weight);
@@ -25,7 +24,8 @@
 /* stylelint-enable selector-no-vendor-prefix */
 
 .input:focus {
-  border-color: var(--input-border-focus);
+  /* box-shadow: 0 0 0 var(--border-width) var(--input-border-focus); */
+  border-color: var(--input-border-focus) !important;
   outline: 0;
 }
 
diff --git a/src/features/Web3/components/Form/index.module.css b/src/features/Web3/components/Form/index.module.css
index 4c04d339..14a7aabf 100644
--- a/src/features/Web3/components/Form/index.module.css
+++ b/src/features/Web3/components/Form/index.module.css
@@ -1,6 +1,6 @@
 .web3 {
   margin: calc(var(--spacer) / 2) auto calc(var(--spacer) / 4) auto;
-  max-width: 25rem;
+  max-width: 100%;
   width: 100%;
   text-align: center;
   min-height: 165px;
diff --git a/src/features/Web3/components/Input/InputGroup.module.css b/src/features/Web3/components/Input/InputGroup.module.css
index bfcadd5b..53f5da50 100644
--- a/src/features/Web3/components/Input/InputGroup.module.css
+++ b/src/features/Web3/components/Input/InputGroup.module.css
@@ -1,11 +1,13 @@
 .inputGroup {
+  --height: 60px;
+
   margin: auto;
   position: relative;
   animation: fadeIn 0.8s ease-out backwards;
   margin-top: calc(var(--spacer) / 3);
   display: flex;
   flex-direction: column;
-  min-height: 54px;
+  min-height: var(--height);
 }
 
 @media (min-width: 40rem) {
@@ -21,31 +23,31 @@
 }
 
 .token {
-  width: 80px;
-  height: 55px;
+  width: 90px;
+  height: var(--height);
   background: var(--box-background-color);
   border-top-left-radius: var(--border-radius);
   border-bottom-left-radius: var(--border-radius);
-  border: 1px solid var(--border-color);
-  margin-right: -1px;
+  border: var(--border-width) solid var(--border-color);
+  border-right-color: var(--box-background-color);
 }
 
 .inputInput {
   text-align: center;
-  border: 1px solid var(--border-color);
+  border: var(--border-width) solid var(--border-color);
   font-size: var(--font-size-large);
   padding: 0 calc(var(--spacer) / 4);
   border-bottom: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  height: 55px;
+  height: var(--height);
 }
 
 @media (min-width: 40rem) {
   .inputInput {
     border-radius: 0;
-    border-bottom: 1px solid var(--border-color);
-    border-right: 0;
+    border-bottom: var(--border-width) solid var(--border-color);
+    width: 70%;
   }
 }
 
@@ -60,16 +62,15 @@
 .submit {
   width: calc(100% - calc(var(--spacer) / 2) - 2px);
   max-width: none;
-  height: 53px;
+  height: calc(- var(--border-width));
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-color: var(--link-color-hover);
-  padding: 0 calc(var(--spacer) / 2);
+  border: var(--border-width) solid var(--link-color);
 }
 
 @media (min-width: 40rem) {
   .submit {
-    width: 115px;
+    width: fit-content;
     border-top-right-radius: var(--border-radius);
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
@@ -77,6 +78,13 @@
   }
 }
 
+/* .submit:disabled {
+  opacity: 0.8;
+  background: var(--text-color-light);
+  color: var(--text-color);
+  border-color: var(--text-color-light);
+} */
+
 @keyframes fadeIn {
   from {
     opacity: 0.01;
diff --git a/src/features/Web3/components/Send/Send.tsx b/src/features/Web3/components/Send/Send.tsx
index 71a36088..82082b45 100644
--- a/src/features/Web3/components/Send/Send.tsx
+++ b/src/features/Web3/components/Send/Send.tsx
@@ -46,6 +46,12 @@ export function Send({ amount }: { amount: string }) {
     init()
   }, [selectedToken || amount || to || chain?.id])
 
+  // Cancel send flow if chain changes as this can mess with token selection
+  // useEffect(() => {
+  //   if (!chain?.id || $isInitSend.get() === false) return
+  //   $isInitSend.set(false)
+  // }, [chain?.id])
+
   async function handleSend(event: FormEvent<HTMLButtonElement>) {
     event?.preventDefault()
     try {
diff --git a/src/features/Web3/components/Send/SendTable.module.css b/src/features/Web3/components/Send/SendTable.module.css
index c3449425..8c7ee558 100644
--- a/src/features/Web3/components/Send/SendTable.module.css
+++ b/src/features/Web3/components/Send/SendTable.module.css
@@ -4,23 +4,26 @@
   /* font-weight: var(--font-weight-bold); */
 }
 
-.to {
+.to,
+.from {
   display: block;
   word-break: break-all;
   background: none;
   padding: 0;
-}
-
-.to:last-child {
-  padding-left: 14px;
   font-size: var(--font-size-mini);
 }
 
-.to:last-child::first-letter {
+.to:last-child:not(:only-child),
+.from:last-child:not(:only-child) {
+  padding-left: 14px;
+}
+
+.to:last-child:not(:only-child)::first-letter,
+.from:last-child:not(:only-child)::first-letter {
   margin-left: -14px;
 }
 
-.table {
+.from .table {
   /* max-width: 386px; */
   margin-bottom: calc(var(--spacer) / 1.5);
 }
@@ -31,10 +34,11 @@ table[aria-disabled='true'] {
 }
 
 .table td {
-  padding: calc(var(--spacer) / 4);
+  padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
 }
 
 .label {
   color: var(--text-color-light);
   vertical-align: top;
+  width: 6rem;
 }
diff --git a/src/features/Web3/components/Send/SendTable.tsx b/src/features/Web3/components/Send/SendTable.tsx
index 25348be5..19788dca 100644
--- a/src/features/Web3/components/Send/SendTable.tsx
+++ b/src/features/Web3/components/Send/SendTable.tsx
@@ -1,5 +1,5 @@
 import { formatEther } from 'viem'
-import { useNetwork } from 'wagmi'
+import { useAccount, useEnsName, useNetwork } from 'wagmi'
 import type {
   SendTransactionArgs,
   WriteContractPreparedArgs
@@ -20,6 +20,8 @@ export function SendTable({
   isDisabled: boolean
 }) {
   const { chain } = useNetwork()
+  const { address: from } = useAccount()
+  const { data: ensFrom } = useEnsName({ address: from, chainId: 1 })
   const selectedToken = useStore($selectedToken)
 
   // Derive display values in preview from actual tx config
@@ -34,25 +36,35 @@ export function SendTable({
     <table className={styles.table} aria-disabled={isDisabled}>
       <tbody>
         <tr>
-          <td className={styles.label}>Sending</td>
+          <td className={styles.label}>You are</td>
+          {ensFrom ? (
+            <td title={`${ensFrom} successfully resolved to ${from}`}>
+              <code className={styles.from}>{ensFrom}</code>
+              <code className={styles.from}>{`→ ${from}`}</code>
+            </td>
+          ) : (
+            <td>
+              <code className={styles.from}>{from}</code>
+            </td>
+          )}
+        </tr>
+
+        <tr>
+          <td className={styles.label}>sending</td>
           <td>
             <span className={styles.amount}>
               {displayAmountFromConfig} {selectedToken?.symbol}
             </span>
           </td>
         </tr>
+
         <tr>
           <td className={styles.label}>on</td>
           <td>
             <span className={styles.network}>{chain?.name}</span>
           </td>
         </tr>
-        {/* <tr>
-        <td>From</td>
-        <td>
-          <code className={styles.from}>{from}</code>
-        </td>
-      </tr> */}
+
         <tr>
           <td className={styles.label}>to</td>
           <td title={`${ensResolved} successfully resolved to ${to}`}>
diff --git a/src/features/Web3/components/TokenSelect/Token.css b/src/features/Web3/components/TokenSelect/Token.css
index 8271fb98..ba0f6268 100644
--- a/src/features/Web3/components/TokenSelect/Token.css
+++ b/src/features/Web3/components/TokenSelect/Token.css
@@ -26,7 +26,6 @@
   border-radius: 50%;
   margin-right: calc(var(--spacer) / 4);
   border: 1px solid var(--border-color);
-  background: var(--brand-light);
   display: inline-flex;
   align-items: center;
   justify-content: center;
diff --git a/src/features/Web3/components/TokenSelect/TokenLoading.css b/src/features/Web3/components/TokenSelect/TokenLoading.css
deleted file mode 100644
index 5356e400..00000000
--- a/src/features/Web3/components/TokenSelect/TokenLoading.css
+++ /dev/null
@@ -1,39 +0,0 @@
-.TokenLogo .loader {
-  --borderWidth: 5px;
-  --dashes: 10;
-  --gap: 5deg;
-  --color: var(--text-color);
-
-  display: block;
-  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/features/Web3/components/TokenSelect/TokenLoading.tsx b/src/features/Web3/components/TokenSelect/TokenLoading.tsx
deleted file mode 100644
index 83cf9a46..00000000
--- a/src/features/Web3/components/TokenSelect/TokenLoading.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import './TokenLoading.css'
-
-export function TokenLoading() {
-  return (
-    <div className="TokenLogo TokenLoading">
-      <span className="loader"></span>
-    </div>
-  )
-}
diff --git a/src/features/Web3/components/TokenSelect/TokenSelect.css b/src/features/Web3/components/TokenSelect/TokenSelect.css
index 514f507f..0a1d61b0 100644
--- a/src/features/Web3/components/TokenSelect/TokenSelect.css
+++ b/src/features/Web3/components/TokenSelect/TokenSelect.css
@@ -1,8 +1,8 @@
 .SelectTrigger {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: 80px;
+  width: 100%;
   height: 100%;
   font-size: var(--font-size-small);
   line-height: 1;
@@ -14,9 +14,11 @@
   background-color: var(--box-background-color);
 }
 
-/* .SelectTrigger:focus {
-  box-shadow: 0 0 0 2px blue;
-} */
+.SelectTrigger:focus {
+  box-shadow: 0 0 0 var(--border-width) var(--input-border-focus);
+
+  /* border-color: var(--input-border-focus) !important; */
+}
 
 .SelectTrigger[data-disabled] {
   opacity: 0.5;
diff --git a/src/features/Web3/components/TokenSelect/TokenSelect.tsx b/src/features/Web3/components/TokenSelect/TokenSelect.tsx
index 9c02e260..c0dbd0e2 100644
--- a/src/features/Web3/components/TokenSelect/TokenSelect.tsx
+++ b/src/features/Web3/components/TokenSelect/TokenSelect.tsx
@@ -4,7 +4,6 @@ import { Token } from './Token'
 import { Icon as ChevronDown } from '@images/components/react/ChevronDown'
 import { Icon as ChevronsDown } from '@images/components/react/ChevronsDown'
 import { Icon as ChevronsUp } from '@images/components/react/ChevronsUp'
-import { TokenLoading } from './TokenLoading'
 import { useFetchTokens } from '@features/Web3/hooks/useFetchTokens'
 import { useStore } from '@nanostores/react'
 import { $tokens } from '@features/Web3/stores/tokens'
@@ -12,6 +11,7 @@ import {
   $selectedToken,
   $setSelectedToken
 } from '@features/Web3/stores/selectedToken'
+import { Loader } from '@components/Loader'
 
 export function TokenSelect() {
   const { isLoading } = useFetchTokens()
@@ -28,7 +28,7 @@ export function TokenSelect() {
     $setSelectedToken(token)
   }
 
-  return tokens ? (
+  return tokens && selectedToken ? (
     <Select.Root
       defaultValue={selectedToken?.address}
       onValueChange={(value: `0x${string}`) => handleValueChange(value)}
@@ -40,7 +40,7 @@ export function TokenSelect() {
         aria-label="Token"
         placeholder="..."
       >
-        {isLoading ? <TokenLoading /> : <Select.Value />}
+        <Select.Value />
         <Select.Icon>
           <ChevronDown />
         </Select.Icon>
@@ -67,10 +67,10 @@ export function TokenSelect() {
       </Select.Portal>
     </Select.Root>
   ) : isLoading ? (
-    <>
-      <div className="Token">
-        <TokenLoading />
+    <div className="Token">
+      <div className="TokenLogo TokenLoading">
+        <Loader />
       </div>
-    </>
+    </div>
   ) : null
 }
diff --git a/src/pages/thanks.astro b/src/pages/thanks.astro
index b73b58d3..a170ad68 100644
--- a/src/pages/thanks.astro
+++ b/src/pages/thanks.astro
@@ -15,7 +15,7 @@ import CodeCopy from '@components/CopyCode.astro'
 
   @media (min-width: 40rem) {
     .grid {
-      grid-template-columns: 2fr 1fr;
+      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
     }
   }
 
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 1fc75b0c..7e5b34a7 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -22,7 +22,7 @@
   ///////////////////////////////////// */
 
   --body-background-color: var(--brand-light);
-  --box-background-color: rgba(255 255 255 / 40%);
+  --box-background-color: #f1f5f8;
 
   --box-shadow: 0 1.3px 5.4px rgba(1 85 101 / 15%),
     0 4.5px 18.1px rgba(1 85 101 / 5%), 0 20px 81px rgba(1 85 101 / 2.5%);
@@ -125,7 +125,7 @@
 
 [data-theme='dark'] {
   --body-background-color: #161a1b;
-  --box-background-color: rgba(255 255 255 / 3%);
+  --box-background-color: #1e2122;
 
   --box-shadow: 0 1.3px 5.4px rgba(0 7 8 / 50%),
     0 4.5px 18.1px rgba(0 7 8 / 30%), 0 20px 81px rgba(0 7 8 / 10%);