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 - + +
+ {selectedToken?.name +
{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; }