mirror of https://github.com/kremalicious/blog.git
preview tweaks
This commit is contained in:
parent
324d032326
commit
73d966e3be
GPG Key ID:
606EEEF3C479A91F
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,9 @@ export function InputGroup({
|
|||
{error ? <span className={styles.errorOutput}>{error}</span> : null}
|
||||
</div>
|
||||
|
||||
<Conversion />
|
||||
<div className={styles.conversion}>
|
||||
<Conversion />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</td>
|
||||
)}
|
||||
<td>
|
||||
{ensFrom ? (
|
||||
<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}`}>
|
||||
<span className={styles.to}>{ensResolved}</span>
|
||||
<code className={styles.to}>{`→ ${to}`}</code>
|
||||
<td>
|
||||
<abbr title={`${ensResolved} successfully resolved to ${to}`}>
|
||||
<span className={styles.to}>{ensResolved}</span>
|
||||
</abbr>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ export function Preview() {
|
|||
isDisabled={isLoading}
|
||||
/>
|
||||
|
||||
{console.log(txConfig)}
|
||||
|
||||
{error || prepareError ? (
|
||||
<div className={styles.alert}>{error || prepareError}</div>
|
||||
) : null}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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] {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
export function truncateAddress(
|
||||
address: `0x${string}`,
|
||||
startLength = 6,
|
||||
endLength = 4
|
||||
) {
|
||||
return `${address.substring(0, startLength)}...${address.substring(
|
||||
address.length - endLength
|
||||
)}`
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue