diff --git a/src/features/Web3/components/Conversion/Conversion.module.css b/src/features/Web3/components/Conversion/Conversion.module.css
index e278a5dc..05cbc097 100644
--- a/src/features/Web3/components/Conversion/Conversion.module.css
+++ b/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);
}
diff --git a/src/features/Web3/components/Input/InputGroup.module.css b/src/features/Web3/components/Input/InputGroup.module.css
index 4330d333..c00fd53f 100644
--- a/src/features/Web3/components/Input/InputGroup.module.css
+++ b/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-top-left-radius: 0;
- border-bottom-left-radius: 0;
- margin-right: 1px;
+ border-radius: 0;
}
}
@@ -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);
+ }
+}
diff --git a/src/features/Web3/components/Input/InputGroup.tsx b/src/features/Web3/components/Input/InputGroup.tsx
index 2652dbf2..44067515 100644
--- a/src/features/Web3/components/Input/InputGroup.tsx
+++ b/src/features/Web3/components/Input/InputGroup.tsx
@@ -60,7 +60,9 @@ export function InputGroup({
{error ? {error} : null}
-
+
+
+
>
)
}
diff --git a/src/features/Web3/components/Preview/Data.module.css b/src/features/Web3/components/Preview/Data.module.css
index bf65ce0f..8f2b52d6 100644
--- a/src/features/Web3/components/Preview/Data.module.css
+++ b/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;
+}
diff --git a/src/features/Web3/components/Preview/Data.tsx b/src/features/Web3/components/Preview/Data.tsx
index f6728275..a5394c3d 100644
--- a/src/features/Web3/components/Preview/Data.tsx
+++ b/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({
You are |
- {ensFrom ? (
-
- {ensFrom}
- |
- ) : (
-
- {from}
- |
- )}
+
+ {ensFrom ? (
+
+ {ensFrom}
+
+ ) : (
+
+ {from ? truncateAddress(from) : ''}
+
+ )}
+ |
sending |
-
+ |
+
+
+
{displayAmountFromConfig} {selectedToken?.symbol}
@@ -71,9 +80,10 @@ export function Data({
|
to |
-
- {ensResolved}
- {`→ ${to}`}
+ |
+
+ {ensResolved}
+
|
diff --git a/src/features/Web3/components/Preview/Preview.tsx b/src/features/Web3/components/Preview/Preview.tsx
index b75f1c75..bad330dd 100644
--- a/src/features/Web3/components/Preview/Preview.tsx
+++ b/src/features/Web3/components/Preview/Preview.tsx
@@ -39,6 +39,8 @@ export function Preview() {
isDisabled={isLoading}
/>
+ {console.log(txConfig)}
+
{error || prepareError ? (
{error || prepareError}
) : null}
diff --git a/src/features/Web3/components/RainbowKit/RainbowKit.module.css b/src/features/Web3/components/RainbowKit/RainbowKit.module.css
index 764ab81c..78e23b8b 100644
--- a/src/features/Web3/components/RainbowKit/RainbowKit.module.css
+++ b/src/features/Web3/components/RainbowKit/RainbowKit.module.css
@@ -2,28 +2,39 @@
padding-left: 0 !important;
}
+.rainbowkit > div:first-child {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ font-size: var(--font-size-small);
+}
+
/* hide the account icon, and hope nothing else */
-.rainbowkit button [aria-hidden] {
+
+/* .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;
}
-.rainbowkit > div:first-child {
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- font-size: var(--font-size-small);
-}
-
/* connect button */
.rainbowkit [data-testid='rk-connect-button'] {
margin-right: auto;
diff --git a/src/features/Web3/components/TokenSelect/TokenSelect.css b/src/features/Web3/components/TokenSelect/TokenSelect.css
index d894f9a9..b1bb31fa 100644
--- a/src/features/Web3/components/TokenSelect/TokenSelect.css
+++ b/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] {
diff --git a/src/features/Web3/hooks/usePrepareSend/prepare.ts b/src/features/Web3/hooks/usePrepareSend/prepare.ts
index 90a107b1..ee0ef9fb 100644
--- a/src/features/Web3/hooks/usePrepareSend/prepare.ts
+++ b/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,
diff --git a/src/features/Web3/hooks/useSend/useSend.tsx b/src/features/Web3/hooks/useSend/useSend.tsx
index 9aea35f3..ff08104e 100644
--- a/src/features/Web3/hooks/useSend/useSend.tsx
+++ b/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 denied transaction signature.',
+ 'User rejected the request',
+ 'User denied transaction signature',
'Cannot read properties of undefined'
]
diff --git a/src/features/Web3/lib/truncateAddress.ts b/src/features/Web3/lib/truncateAddress.ts
new file mode 100644
index 00000000..ccdfdc59
--- /dev/null
+++ b/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
+ )}`
+}
diff --git a/src/styles/global.css b/src/styles/global.css
index 66ffcee8..caf5e055 100644
--- a/src/styles/global.css
+++ b/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;
}