preview tweaks

src/features/Web3/components/Conversion/Conversion.module.css

@@ -1,19 +1,8 @@
 .conversion {
   font-size: var(--font-size-mini);
   color: var(--text-color-light);
-  text-align: center;
-  margin-top: calc(var(--spacer) / 6);
-  animation: fadeIn 0.5s 0.8s ease-out backwards;
-}
-
-@media screen and (min-width: 40rem) {
-  .conversion {
-    text-align: left;
-    margin-top: 0;
-    margin-left: calc(var(--spacer) * 2.4);
-  }
 }
 
 .conversion span {
-  margin-left: calc(var(--spacer) / 2);
+  margin-left: calc(var(--spacer) / 3);
 }

src/features/Web3/components/Input/InputGroup.module.css

@@ -78,7 +78,7 @@
 .submit {
   width: 100%;
   max-width: none;
-  height: calc(var(--height) - 2px);
+  height: var(--height);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border: 0;
@@ -90,10 +90,7 @@
   .submit {
     width: fit-content;
     padding: 0 calc(var(--spacer) / 1.5);
-    border-top-right-radius: var(--border-radius);
+    border-radius: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    margin-right: 1px;
   }
 }
 
@@ -113,3 +110,17 @@
   width: 100%;
   text-align: right;
 }
+
+.conversion {
+  text-align: center;
+  margin-top: calc(var(--spacer) / 6);
+  animation: fadeIn 0.5s 0.8s ease-out backwards;
+}
+
+@media screen and (min-width: 40rem) {
+  .conversion {
+    text-align: left;
+    margin-top: 0;
+    margin-left: calc(var(--spacer) * 3);
+  }
+}

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

@@ -60,7 +60,9 @@ export function InputGroup({
         {error ? <span className={styles.errorOutput}>{error}</span> : null}
       </div>
 
+      <div className={styles.conversion}>
         <Conversion />
+      </div>
     </>
   )
 }

src/features/Web3/components/Preview/Data.module.css

@@ -1,26 +1,6 @@
-.to,
-.from {
-  display: block;
-  word-break: break-all;
-  background: none;
-  padding: 0;
-}
-
-code.to,
-code.from {
-  font-size: var(--font-size-mini);
-}
-
-.to:last-child {
-  padding-left: 14px;
-}
-
-.to:last-child::first-letter {
-  margin-left: -14px;
-}
-
 .table {
-  /* max-width: 386px; */
+  width: 100%;
+  display: table;
   margin-bottom: calc(var(--spacer) / 1.5);
 }
 
@@ -33,8 +13,27 @@ table[aria-disabled='true'] {
   padding: calc(var(--spacer) / 4) calc(var(--spacer) / 3);
 }
 
+.to,
+.from {
+  display: block;
+  word-break: break-all;
+  background: none;
+  padding: 0;
+}
+
 .label {
   color: var(--text-color-light);
   vertical-align: top;
   width: 6rem;
 }
+
+.amount {
+  display: flex;
+  align-items: center;
+}
+
+.table :global(.TokenLogo),
+.table :global(.TokenLogo) img {
+  width: 18px;
+  height: 18px;
+}

src/features/Web3/components/Preview/Data.tsx

@@ -7,6 +7,7 @@ import type {
 import styles from './Data.module.css'
 import { useStore } from '@nanostores/react'
 import { $selectedToken } from '@features/Web3/stores'
+import { truncateAddress } from '@features/Web3/lib/truncateAddress'
 
 export function Data({
   to,
@@ -42,20 +43,28 @@ export function Data({
       <tbody>
         <tr>
           <td className={styles.label}>You are</td>
-          {ensFrom ? (
-            <td title={`${ensFrom} successfully resolved to ${from}`}>
-              <span className={styles.from}>{ensFrom}</span>
-            </td>
-          ) : (
           <td>
-              <code className={styles.from}>{from}</code>
+            {ensFrom ? (
-            </td>
+              <abbr title={`${ensFrom} successfully resolved to ${from}`}>
+                <span className={styles.from}>{ensFrom}</span>
+              </abbr>
+            ) : (
+              <code className={styles.from}>
+                {from ? truncateAddress(from) : ''}
+              </code>
             )}
+          </td>
         </tr>
 
         <tr>
           <td className={styles.label}>sending</td>
-          <td>
+          <td className={styles.amount}>
+            <div className="TokenLogo">
+              <img
+                src={selectedToken?.logo || ''}
+                alt={selectedToken?.name || ''}
+              />
+            </div>
             <span className={styles.amount}>
               {displayAmountFromConfig} {selectedToken?.symbol}
             </span>
@@ -71,9 +80,10 @@ export function Data({
 
         <tr>
           <td className={styles.label}>to</td>
-          <td title={`${ensResolved} successfully resolved to ${to}`}>
+          <td>
+            <abbr title={`${ensResolved} successfully resolved to ${to}`}>
               <span className={styles.to}>{ensResolved}</span>
-            <code className={styles.to}>{`→ ${to}`}</code>
+            </abbr>
           </td>
         </tr>
       </tbody>

src/features/Web3/components/Preview/Preview.tsx

@@ -39,6 +39,8 @@ export function Preview() {
         isDisabled={isLoading}
       />
 
+      {console.log(txConfig)}
+
       {error || prepareError ? (
         <div className={styles.alert}>{error || prepareError}</div>
       ) : null}

src/features/Web3/components/RainbowKit/RainbowKit.module.css

@@ -2,21 +2,6 @@
   padding-left: 0 !important;
 }
 
-/* hide the account icon, and hope nothing else */
-.rainbowkit button [aria-hidden] {
-  display: none;
-}
-
-.rainbowkit [aria-label='Chain Selector'],
-.rainbowkit [data-testid='rk-account-button'] div {
-  font-weight: var(--font-weight-base);
-}
-
-/* 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;
@@ -24,6 +9,32 @@
   font-size: var(--font-size-small);
 }
 
+/* hide the account icon, and hope nothing else */
+
+/* .rainbowkit button [aria-hidden] {
+  display: none;
+} */
+
+.rainbowkit [aria-label='Chain Selector'],
+.rainbowkit [data-testid='rk-account-button'] div {
+  font-weight: var(--font-weight-base);
+}
+
+.rainbowkit [aria-label='Chain Selector']:hover,
+.rainbowkit [data-testid='rk-account-button']:hover,
+.rainbowkit [data-testid='rk-account-button']:hover div,
+.rainbowkit [aria-label='Chain Selector']:focus,
+.rainbowkit [data-testid='rk-account-button']:focus,
+.rainbowkit [data-testid='rk-account-button']:focus div {
+  transform: none !important;
+  color: var(--link-color-hover) !important;
+}
+
+/* hide the network icon, and hope nothing else */
+.rainbowkit [aria-label='Chain Selector'] [role='img'] {
+  display: none;
+}
+
 /* connect button */
 .rainbowkit [data-testid='rk-connect-button'] {
   margin-right: auto;

src/features/Web3/components/TokenSelect/TokenSelect.css

@@ -6,8 +6,6 @@
   height: 100%;
   font-size: var(--font-size-small);
   line-height: 1;
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
 }
 
 .SelectTrigger:hover {
@@ -16,10 +14,6 @@
 
 .SelectTrigger:focus {
   background-color: var(--text-color-dimmed);
-
-  /* box-shadow: 0 0 0 var(--border-width) var(--input-border-focus); */
-
-  /* border-color: var(--input-border-focus) !important; */
 }
 
 .SelectTrigger[data-disabled] {

src/features/Web3/hooks/usePrepareSend/prepare.ts

@@ -1,4 +1,3 @@
-import type { GetToken } from '@features/Web3/stores/tokens'
 import { parseEther, parseUnits } from 'viem'
 import {
   prepareSendTransaction,
@@ -7,6 +6,7 @@ import {
   type WriteContractPreparedArgs
 } from 'wagmi/actions'
 import { abiErc20Transfer } from './abiErc20Transfer'
+import type { GetToken } from '../useFetchTokens'
 
 export async function prepare(
   selectedToken: GetToken | undefined,

src/features/Web3/hooks/useSend/useSend.tsx

@@ -31,8 +31,8 @@ export function useSend({
 
       // only expose useful errors in UI
       const terribleErrorMessages = [
-        'User rejected the request.',
+        'User rejected the request',
-        'User denied transaction signature.',
+        'User denied transaction signature',
         'Cannot read properties of undefined'
       ]
 

src/features/Web3/lib/truncateAddress.ts

@@ -0,0 +1,9 @@
+export function truncateAddress(
+  address: `0x${string}`,
+  startLength = 6,
+  endLength = 4
+) {
+  return `${address.substring(0, startLength)}...${address.substring(
+    address.length - endLength
+  )}`
+}

src/styles/global.css

@@ -257,9 +257,10 @@ em,
 abbr[title],
 dfn {
   text-transform: none;
+  text-decoration-color: var(--text-color-dimmed);
+  text-underline-offset: 0.15em;
   font-style: normal;
   font-size: inherit;
-  border-bottom: 1px dashed var(--brand-grey-dimmed);
   cursor: help;
   font-feature-settings: inherit;
 }