diff --git a/dapp-oeth/pages/index.js b/dapp-oeth/pages/index.js index ea49269274..66e49d6b37 100644 --- a/dapp-oeth/pages/index.js +++ b/dapp-oeth/pages/index.js @@ -21,10 +21,6 @@ export default function DApp({ locale, onLocale }) { ) diff --git a/dapp-oeth/src/components/IPFSDappLink.js b/dapp-oeth/src/components/IPFSDappLink.js index 7db92fd25e..a3510b4ed6 100644 --- a/dapp-oeth/src/components/IPFSDappLink.js +++ b/dapp-oeth/src/components/IPFSDappLink.js @@ -10,6 +10,7 @@ export default function IPFSDappLink({ css }) { ['app.oeth.com', 'staging.app.oeth.com'].includes(window.location.host) || window.location.host.startsWith('localhost:') || window.location.host.startsWith('oeth-dapp-staging') || + window.location.host.endsWith('.on.fleek.co') || window.location.host.startsWith('oeth-dapp') ) }, []) @@ -33,7 +34,6 @@ export default function IPFSDappLink({ css }) { margin-right: 10px; background-color: #1e1f25; color: #fafbfb; - padding: 0px 10px; } .ipfs-link span { diff --git a/dapp-oeth/src/components/MissionControl.js b/dapp-oeth/src/components/MissionControl.js index 8acad56c0d..498dd6dfb0 100644 --- a/dapp-oeth/src/components/MissionControl.js +++ b/dapp-oeth/src/components/MissionControl.js @@ -10,7 +10,7 @@ const MissionControl = ({}) => { @@ -207,8 +225,8 @@ const TransactionActivityDropdown = () => { ) @@ -316,6 +341,7 @@ const useSticky = ({ defaultSticky = false, stickAt = 80 }) => { return [{ elRef, fromTop, isSticky }] } +const SHOW_DISCLAIMER = true const Nav = ({ isMobile, locale, onLocale, page }) => { const { pathname } = useRouter() @@ -344,17 +370,21 @@ const Nav = ({ isMobile, locale, onLocale, page }) => { src={assetRootPath('/images/origin-ether-logo.svg')} className="origin-logo" alt="OETH logo" - width={204} />
- { + {active && (
- } + )} + {active && account && ( +
+ +
+ )} {!active && (
{ loading="lazy" /> -
+
- {environment !== 'production' && ( - - )} - -
- -
- {active && account && ( -
-
- -
- + {' '} +
+ +
) diff --git a/dapp-oeth/src/components/buySell/BalanceHeader.js b/dapp-oeth/src/components/buySell/BalanceHeader.js index 0572ff8b7b..49347a096f 100644 --- a/dapp-oeth/src/components/buySell/BalanceHeader.js +++ b/dapp-oeth/src/components/buySell/BalanceHeader.js @@ -119,9 +119,24 @@ const BalanceHeader = ({
-
+
+ {!small && ( + + )}

{value}

- {!small && } + {!small && ( + + )}
@@ -206,6 +221,10 @@ const BalanceHeader = ({ margin-bottom: 10px; } + .title .big { + font-size: 14px; + } + .holder { width: 100%; } @@ -224,6 +243,19 @@ const BalanceHeader = ({ .stat .value p { color: #fafafb; } + + .stat .big { + font-size: 20px; + } + + .stat .small { + font-size: 14px; + } + + .stat img { + margin-left: 0; + height: 20px; + } } `} @@ -312,6 +344,7 @@ const BalanceHeader = ({ display: flex; flex-direction: row; justify-content: space-between; + align-items: center; } .title { @@ -338,6 +371,18 @@ const BalanceHeader = ({ font-size: 20px; text-align: left; } + + .value p { + background: -webkit-linear-gradient( + 90deg, + #b361e6 -28.99%, + #6a36fc 144.97% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 20px; + margin-bottom: 0; + } } `} @@ -441,7 +486,7 @@ const BalanceHeader = ({ } .balance-header { - margin-bottom: 19px; + margin-bottom: 16px; } .balance-header .inaccurate-balance { @@ -541,7 +586,7 @@ const BalanceHeader = ({ .box.box-black { background-color: #1e1f25; - margin-right: 10px; + margin-right: 24px; min-width: 230px; } diff --git a/dapp-oeth/src/components/buySell/ContractsTable.js b/dapp-oeth/src/components/buySell/ContractsTable.js index ae06fa2e38..f9971b2b18 100644 --- a/dapp-oeth/src/components/buySell/ContractsTable.js +++ b/dapp-oeth/src/components/buySell/ContractsTable.js @@ -223,18 +223,17 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => { {fbt( `${fbt.param( 'afterFeeDisplay', - `≈ $${formatCurrency( - amountReceivedUsd, - 2 - )} after fees` + `≈ $${formatCurrency(amountReceivedUsd, 2)}` )}`, 'After Fee Price' )} +
+ after fees {approveAllowanceNeeded ? '*' : ''}
- + {fbt( `Effective Price: ${fbt.param( 'effectivePriceDisplay', @@ -276,6 +275,15 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => { '' )} + + {fbt( + `Effective Price: ${fbt.param( + 'effectivePriceDisplay', + `$${formatCurrency(effectivePrice, 2)}` + )}`, + 'Effective Price' + )} + {error === 'unsupported' ? unsupportedDisplay(name, swapMode) @@ -291,7 +299,6 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => { {parseFloat(gasEstimateEth)?.toFixed(4)}{' '} ETH{' '} - {`(≈ $${formatCurrency(gasEstimate, 2)})`} )} @@ -340,6 +347,12 @@ const Estimates = ({ estimates, selected, isLoading, isActive, onSelect }) => { @@ -671,6 +696,7 @@ const ContractsTable = () => { .contracts-header .title { color: #fafbfb; font-size: 14px; + margin-bottom: 0; } .contracts-main { @@ -692,6 +718,13 @@ const ContractsTable = () => { } @media (max-width: 799px) { + .contracts-header { + padding: 16px; + } + + .contracts-main { + padding-bottom: 16px; + } } `} diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js index f8a2ec3a7b..393fbf7f9c 100644 --- a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js +++ b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js @@ -46,8 +46,9 @@ const CoinImage = ({ small, coin }) => { )} ) @@ -326,15 +333,25 @@ const CoinSelect = ({ @@ -363,7 +380,7 @@ const CoinSelect = ({ }} > - + {selected === 'mix' ? 'Mix' : coinToDisplay?.[selected]?.symbol} @@ -449,6 +466,8 @@ const SwapCurrencyPill = ({ const coinBalances = useStoreState(AccountStore, (s) => s.balances) const [error, setError] = useState(null) + console.log(selectedSwap, selectedCoin, swapMode) + const coinMintOptions = [ 'eth', 'weth', @@ -598,13 +617,14 @@ const SwapCurrencyPill = ({ }`} >
{topItem && (
-
+
-
+
{displayBalance && (
{fbt( @@ -652,17 +672,19 @@ const SwapCurrencyPill = ({ fbt.param('coin-balance', displayBalance.balance), 'Coin balance' )} - - {coinToDisplay?.[displayBalance.coin]?.symbol} - + {bottomItem && ( + + {coinToDisplay?.[displayBalance.coin]?.symbol} + + )}
)} - {balanceClickable && ( - - )}
+ {balanceClickable && ( + + )}
- {bottomItem && ( -
- {minReceived !== null - ? fbt( - 'Min. received: ' + - fbt.param( - 'oeth-amount', - `${formatCurrency(minReceived, 8)} ${ - selectedCoin === 'mix' - ? 'Mix LSDs' - : coinToDisplay?.[selectedCoin]?.symbol - }` - ), - 'Min amount received' - ) - : topItem - ? '' - : '-'} -
- )}
{coinSplits && ( @@ -734,6 +736,10 @@ const SwapCurrencyPill = ({ )}
diff --git a/dapp-oeth/src/components/buySell/SwapHomepage.js b/dapp-oeth/src/components/buySell/SwapHomepage.js index a7d7453e42..cf17b23531 100644 --- a/dapp-oeth/src/components/buySell/SwapHomepage.js +++ b/dapp-oeth/src/components/buySell/SwapHomepage.js @@ -38,7 +38,7 @@ const SwapHomepage = ({ const [swapMode, setSwapMode] = useState( process.browser && localStorage.getItem(lastSelectedSwapModeKey) !== null ? localStorage.getItem(lastSelectedSwapModeKey) - : 'mint' + : 'redeem' ) const [buyErrorToDisplay, setBuyErrorToDisplay] = useState(false) @@ -211,13 +211,15 @@ const SwapHomepage = ({ } const onSwapOeth = async () => { - const swapTokenUsed = swapMode === 'mint' ? selectedBuyCoin : selectedRedeemCoin - const swapTokenAmount = swapMode === 'mint' ? selectedBuyCoinAmount : selectedRedeemCoinAmount + const swapTokenUsed = + swapMode === 'mint' ? selectedBuyCoin : selectedRedeemCoin + const swapTokenAmount = + swapMode === 'mint' ? selectedBuyCoinAmount : selectedRedeemCoinAmount event({ - 'event': 'swap_started', - 'swap_token': swapTokenUsed, - 'swap_amount': swapTokenAmount + event: 'swap_started', + swap_token: swapTokenUsed, + swap_amount: swapTokenAmount, }) const metadata = swapMetadata() @@ -259,12 +261,12 @@ const SwapHomepage = ({ await rpcProvider.waitForTransaction(result.hash) event({ - 'event': 'swap_complete', - 'swap_type': swapMode, - 'swap_token': swapTokenUsed, - 'swap_amount': swapTokenAmount, - 'swap_address': '', - 'swap_tx': '' + event: 'swap_complete', + swap_type: swapMode, + swap_token: swapTokenUsed, + swap_amount: swapTokenAmount, + swap_address: '', + swap_tx: '', }) } catch (e) { const metadata = swapMetadata() @@ -272,20 +274,20 @@ const SwapHomepage = ({ if (e.code !== 4001) { await storeTransactionError(swapMode, selectedBuyCoin) event({ - 'event': 'swap_failed', - 'swap_type': swapMode, - 'swap_token': swapTokenUsed, - 'swap_amount': swapTokenAmount, - 'swap_address': '', - 'swap_tx': '' + event: 'swap_failed', + swap_type: swapMode, + swap_token: swapTokenUsed, + swap_amount: swapTokenAmount, + swap_address: '', + swap_tx: '', }) } else { event({ - 'event': 'swap_rejected', - 'swap_type': swapMode, - 'swap_token': swapTokenUsed, - 'swap_amount': swapTokenAmount, - 'swap_address': '' + event: 'swap_rejected', + swap_type: swapMode, + swap_token: swapTokenUsed, + swap_amount: swapTokenAmount, + swap_address: '', }) } @@ -331,8 +333,8 @@ const SwapHomepage = ({ setSelectedRedeemCoinAmount(amount) if (amount > 0) { event({ - 'event': 'change_input_amount', - 'change_amount_to': amount + event: 'change_input_amount', + change_amount_to: amount, }) } }} @@ -378,11 +380,10 @@ const SwapHomepage = ({ /> @@ -257,6 +285,7 @@ const BalanceHeaderWrapped = ({ display: flex; flex-direction: row; justify-content: space-between; + align-items: center; } .title { @@ -283,6 +312,18 @@ const BalanceHeaderWrapped = ({ font-size: 20px; text-align: left; } + + .value p { + background: -webkit-linear-gradient( + 90deg, + #b361e6 -28.99%, + #6a36fc 144.97% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 20px; + margin-bottom: 0; + } } `} @@ -377,7 +418,7 @@ const BalanceHeaderWrapped = ({ } .balance-header { - margin-bottom: 19px; + margin-bottom: 16px; } .balance-header .inaccurate-balance { @@ -477,7 +518,7 @@ const BalanceHeaderWrapped = ({ .box.box-black { background-color: #1e1f25; - margin-right: 10px; + margin-right: 24px; min-width: 230px; } diff --git a/dapp-oeth/src/components/wrap/WrapHomepage.js b/dapp-oeth/src/components/wrap/WrapHomepage.js index 492c5b20fc..7cf98ad503 100644 --- a/dapp-oeth/src/components/wrap/WrapHomepage.js +++ b/dapp-oeth/src/components/wrap/WrapHomepage.js @@ -244,35 +244,38 @@ const WrapHomepage = ({ return ( <> {process.browser && ( -
-
- {buyErrorToDisplay && ( - { - setBuyErrorToDisplay(false) - }} - /> - )} -
- { - setInputAmount(amount) - }} - coinValue={inputAmount} - rate={rate} - topItem - onErrorChange={setBalanceError} - ethPrice={ethPrice} - /> - - +
+
+

Wrap

+
+ {buyErrorToDisplay && ( + { + setBuyErrorToDisplay(false) + }} + /> + )} +
+ { + setInputAmount(amount) + }} + coinValue={inputAmount} + rate={rate} + topItem + onErrorChange={setBalanceError} + ethPrice={ethPrice} + /> + + +
diff --git a/dapp-oeth/src/components/wrap/WrapOETHPill.js b/dapp-oeth/src/components/wrap/WrapOETHPill.js index febad2bc4b..371a547ada 100644 --- a/dapp-oeth/src/components/wrap/WrapOETHPill.js +++ b/dapp-oeth/src/components/wrap/WrapOETHPill.js @@ -70,18 +70,15 @@ const CoinSelect = ({ selected }) => { return ( <>
-
{`${ - selected === 'woeth' ? 'w' : '' - }OETH`}
+
{`${selected === 'woeth' ? 'w' : ''}OETH`}
) @@ -226,7 +229,7 @@ const WrapOETHPill = ({ }`} >
)} -
- {bottomItem - ? `$${formatCurrency( - truncateDecimals(expectedAmount, 18) * parseFloat(ethPrice), - 2 - )}` - : `$${formatCurrency( - truncateDecimals(coinValue, 18) * parseFloat(ethPrice), - 2 - )}`} -
-
-
-
- {displayBalance && ( -
- {fbt( - 'Balance: ' + - fbt.param( - 'coin-balance', - formatCurrency(displayBalance.balance, 6) - ), - 'Coin balance' - )} - - {coinToDisplay?.[displayBalance.coin]?.symbol} - -
- )} - {balanceClickable && ( - - )} -
-
+
{topItem ? ( - +
+
+ {displayBalance && ( +
+

+ {fbt( + 'Balance: ' + + fbt.param( + 'coin-balance', + formatCurrency(displayBalance.balance, 6) + ), + 'Coin balance' + )}{' '} +

+
+ )} + {balanceClickable && ( + + )} +
+
) : ( - - )} - {topItem && (
{rate !== null ? fbt( @@ -313,14 +300,23 @@ const WrapOETHPill = ({ : '-'}
)} + {topItem ? ( + + ) : ( + + )}
diff --git a/dapp-oeth/styles/globals.css b/dapp-oeth/styles/globals.css index 6918e002f5..50302dc563 100644 --- a/dapp-oeth/styles/globals.css +++ b/dapp-oeth/styles/globals.css @@ -474,6 +474,10 @@ section.dim { } @media (max-width: 799px) { + .btn-blue { + height: 48px; + } + .container { padding-left: 0px; padding-right: 0px; @@ -513,10 +517,8 @@ section.dim { background-color: transparent !important; } -@media (min-width: 1200px) { - .container { - max-width: 940px !important; - } +.container { + max-width: 702px !important; } @media (min-width: 1200px) {