From ebcac7edb31f43a9958cc2182b6200db1d4e4e89 Mon Sep 17 00:00:00 2001 From: Hrik Bhowal Date: Wed, 10 May 2023 16:53:22 -0500 Subject: [PATCH 01/11] header-fix --- dapp-oeth/pages/index.js | 4 - dapp-oeth/pages/pool/[pool_name]/index.js | 2 +- .../src/components/AccountStatusDropdown.js | 6 + dapp-oeth/src/components/IPFSDappLink.js | 1 - dapp-oeth/src/components/Nav.js | 129 ++++++++++++++++-- .../src/components/_AccountStatusIndicator.js | 2 +- .../src/components/buySell/BalanceHeader.js | 16 +++ .../components/buySell/SwapCurrencyPill.js | 4 +- .../src/components/buySell/SwapHomepage.js | 2 +- dapp-oeth/src/components/layout.js | 16 +-- 10 files changed, 149 insertions(+), 33 deletions(-) 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..712c3c76a6 100644 --- a/dapp-oeth/src/components/IPFSDappLink.js +++ b/dapp-oeth/src/components/IPFSDappLink.js @@ -33,7 +33,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/Nav.js b/dapp-oeth/src/components/Nav.js index ca7582f4e6..2f445fecb3 100644 --- a/dapp-oeth/src/components/Nav.js +++ b/dapp-oeth/src/components/Nav.js @@ -24,7 +24,7 @@ const environment = process.env.NODE_ENV const DappLinks = ({ page }) => { return ( <> -
+
{
-
+
{
{' '} @@ -220,7 +238,7 @@ const TransactionActivityDropdown = () => { .activity-icon { width: 25px; - height: 25px; + height: 15px; } .dropdown-menu { @@ -277,6 +295,13 @@ const TransactionActivityDropdown = () => { transform: rotate(360deg); } } + + @media (max-width: 799px) { + .activity-toggle { + width: 36px; + height: 36px; + } + } `} ) @@ -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() @@ -350,11 +376,16 @@ const Nav = ({ isMobile, locale, onLocale, page }) => {
- { + {active && (
- } + )} + {active && account && ( +
+ +
+ )} {!active && (
{
-
+
@@ -338,6 +342,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; + } } `} diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js index f8a2ec3a7b..8638ffef70 100644 --- a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js +++ b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js @@ -605,6 +605,7 @@ const SwapCurrencyPill = ({ > {topItem && ( -
-
- - {fbt( - '⚠️ DO NOT RISK ANY FUNDS. ⚠️ Origin Ether is currently being audited. This dapp is for testing only.', - 'Disclaimer usage' - )} - -
-
+
Date: Sat, 13 May 2023 18:55:05 -0400 Subject: [PATCH 02/11] header fix --- dapp-oeth/src/components/Nav.js | 64 ++++++++++++++++++--------------- 1 file changed, 35 insertions(+), 29 deletions(-) diff --git a/dapp-oeth/src/components/Nav.js b/dapp-oeth/src/components/Nav.js index 2f445fecb3..5ac51b0c61 100644 --- a/dapp-oeth/src/components/Nav.js +++ b/dapp-oeth/src/components/Nav.js @@ -225,8 +225,8 @@ const TransactionActivityDropdown = () => { @@ -316,6 +324,7 @@ const BalanceHeader = ({ display: flex; flex-direction: row; justify-content: space-between; + align-items: center; } .title { @@ -457,7 +466,7 @@ const BalanceHeader = ({ } .balance-header { - margin-bottom: 19px; + margin-bottom: 16px; } .balance-header .inaccurate-balance { diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js index 8638ffef70..4e7dd85ad6 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,7 +617,7 @@ const SwapCurrencyPill = ({ }`} >
-
+
{displayBalance && (
{fbt( @@ -653,9 +672,11 @@ const SwapCurrencyPill = ({ fbt.param('coin-balance', displayBalance.balance), 'Coin balance' )} - - {coinToDisplay?.[displayBalance.coin]?.symbol} - + {bottomItem && ( + + {coinToDisplay?.[displayBalance.coin]?.symbol} + + )}
)} {balanceClickable && ( @@ -671,13 +692,13 @@ const SwapCurrencyPill = ({ onSelectChange(coin) if (swapMode === 'mint') { event({ - 'event': 'change_input_currency', - 'change_input_to': coin + event: 'change_input_currency', + change_input_to: coin, }) } else { event({ - 'event': 'change_output_currency', - 'change_output_to': coin + event: 'change_output_currency', + change_output_to: coin, }) } }} @@ -685,26 +706,6 @@ const SwapCurrencyPill = ({ conversion={ethPrice} coinBalances={coinBalances} /> - {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 && ( @@ -760,6 +761,11 @@ const SwapCurrencyPill = ({ font-size: 16px; color: #828699; margin-left: 4px; + overflow: hidden; + width: 100%; + display: block; + white-space: nowrap; + text-overflow: ellipsis; } .multiple-balance { @@ -805,7 +811,10 @@ const SwapCurrencyPill = ({ font-size: 32px; max-width: 100%; text-overflow: ellipsis; - color: #828699; + display: block; + overflow: hidden; + color: #fafafb; + font-weight: 700; } .expected-value .text-loading { @@ -858,11 +867,13 @@ const SwapCurrencyPill = ({ @media (max-width: 799px) { .input-holder { max-width: 50%; + padding: 32px 0; + flex: 1; } input { font-size: 24px; - max-width: 55px; + font-weight: 700; } .expected-value { @@ -874,6 +885,10 @@ const SwapCurrencyPill = ({ margin-left: 4px; white-space: nowrap; } + + .currency-pill { + padding: 0 16px; + } } `} diff --git a/dapp-oeth/src/components/buySell/SwapHomepage.js b/dapp-oeth/src/components/buySell/SwapHomepage.js index db76b6b629..cf17b23531 100644 --- a/dapp-oeth/src/components/buySell/SwapHomepage.js +++ b/dapp-oeth/src/components/buySell/SwapHomepage.js @@ -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 +269,7 @@ const BalanceHeaderWrapped = ({ display: flex; flex-direction: row; justify-content: space-between; + align-items: center; } .title { @@ -283,6 +296,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; + } } `} diff --git a/dapp-oeth/styles/globals.css b/dapp-oeth/styles/globals.css index a41239f15f..0bf9a8f209 100644 --- a/dapp-oeth/styles/globals.css +++ b/dapp-oeth/styles/globals.css @@ -513,10 +513,8 @@ section.dim { background-color: transparent !important; } -@media (min-width: 1200px) { - .container { - max-width: 702px !important; - } +.container { + max-width: 702px !important; } @media (min-width: 1200px) { From 94a28fa0be07cd597f146c7ac3d0765248b598a5 Mon Sep 17 00:00:00 2001 From: Hrik Bhowal Date: Sat, 13 May 2023 23:30:21 -0400 Subject: [PATCH 06/11] routes responsiveness --- .../src/components/buySell/BalanceHeader.js | 24 ++++++++- .../src/components/buySell/ContractsTable.js | 49 ++++++++++++++++--- dapp-oeth/src/components/wrap/WrapHomepage.js | 13 ++++- 3 files changed, 74 insertions(+), 12 deletions(-) diff --git a/dapp-oeth/src/components/buySell/BalanceHeader.js b/dapp-oeth/src/components/buySell/BalanceHeader.js index 26de34f4f4..7026e35515 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 && ( + + )}
@@ -236,6 +251,11 @@ const BalanceHeader = ({ .stat .small { font-size: 14px; } + + .stat img { + margin-left: 0; + height: 20px; + } } `} 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/wrap/WrapHomepage.js b/dapp-oeth/src/components/wrap/WrapHomepage.js index 492c5b20fc..960fed3665 100644 --- a/dapp-oeth/src/components/wrap/WrapHomepage.js +++ b/dapp-oeth/src/components/wrap/WrapHomepage.js @@ -244,7 +244,7 @@ const WrapHomepage = ({ return ( <> {process.browser && ( -
+
{buyErrorToDisplay && ( Date: Sat, 13 May 2023 23:35:33 -0400 Subject: [PATCH 07/11] merge fix --- dapp-oeth/src/components/IPFSDappLink.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dapp-oeth/src/components/IPFSDappLink.js b/dapp-oeth/src/components/IPFSDappLink.js index f52543e1d0..a3510b4ed6 100644 --- a/dapp-oeth/src/components/IPFSDappLink.js +++ b/dapp-oeth/src/components/IPFSDappLink.js @@ -10,8 +10,8 @@ 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.startsWith('oeth-dapp') || - window.location.host.endsWith('.on.fleek.co') + window.location.host.endsWith('.on.fleek.co') || + window.location.host.startsWith('oeth-dapp') ) }, []) From adf6a240f0e6c5db0c3b73f511dccfb2fcd690a6 Mon Sep 17 00:00:00 2001 From: Hrik Bhowal Date: Sat, 13 May 2023 23:37:40 -0400 Subject: [PATCH 08/11] btn fix --- dapp-oeth/styles/globals.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/dapp-oeth/styles/globals.css b/dapp-oeth/styles/globals.css index 0bf9a8f209..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; From bea8d0719442cea24cb6c9adc4d930ae06d1f967 Mon Sep 17 00:00:00 2001 From: Hrik Bhowal Date: Mon, 15 May 2023 16:46:09 -0400 Subject: [PATCH 09/11] swap route header on all browsers --- dapp-oeth/src/components/Nav.js | 5 ++--- .../components/buySell/SwapCurrencyPill.js | 20 +++++++++++++------ 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/dapp-oeth/src/components/Nav.js b/dapp-oeth/src/components/Nav.js index d6fbc09444..ea3ffe935f 100644 --- a/dapp-oeth/src/components/Nav.js +++ b/dapp-oeth/src/components/Nav.js @@ -370,7 +370,6 @@ const Nav = ({ isMobile, locale, onLocale, page }) => { src={assetRootPath('/images/origin-ether-logo.svg')} className="origin-logo" alt="OETH logo" - width={204} /> @@ -560,7 +559,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => { .navbar-brand img { max-height: 24px; - width: fit-content; + max-width: 180px; } .navbar { @@ -863,7 +862,7 @@ const Nav = ({ isMobile, locale, onLocale, page }) => { @media (max-width: 992px) { .navbar-brand img { max-height: 16px; - width: fit-content; + max-width: 120px; } .navbar { diff --git a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js index 4e7dd85ad6..393fbf7f9c 100644 --- a/dapp-oeth/src/components/buySell/SwapCurrencyPill.js +++ b/dapp-oeth/src/components/buySell/SwapCurrencyPill.js @@ -662,7 +662,7 @@ const SwapCurrencyPill = ({ )}`}
-
+
{displayBalance && ( @@ -679,12 +679,12 @@ const SwapCurrencyPill = ({ )}
)} - {balanceClickable && ( - - )}
+ {balanceClickable && ( + + )}
) diff --git a/dapp-oeth/src/components/buySell/BalanceHeader.js b/dapp-oeth/src/components/buySell/BalanceHeader.js index 7026e35515..49347a096f 100644 --- a/dapp-oeth/src/components/buySell/BalanceHeader.js +++ b/dapp-oeth/src/components/buySell/BalanceHeader.js @@ -586,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/earn/modal/StakeModal.js b/dapp-oeth/src/components/earn/modal/StakeModal.js index 515d3ceca5..917ae94f31 100644 --- a/dapp-oeth/src/components/earn/modal/StakeModal.js +++ b/dapp-oeth/src/components/earn/modal/StakeModal.js @@ -449,7 +449,7 @@ const StakeModal = ({ border: 0px; border-radius: 10px; background-color: #1e1f25; - font-size: 28px; + font-size: 24px; color: black; width: 186px; } diff --git a/dapp-oeth/src/components/wrap/BalanceHeaderWrapped.js b/dapp-oeth/src/components/wrap/BalanceHeaderWrapped.js index 2b794059e4..fef060c173 100644 --- a/dapp-oeth/src/components/wrap/BalanceHeaderWrapped.js +++ b/dapp-oeth/src/components/wrap/BalanceHeaderWrapped.js @@ -60,10 +60,21 @@ const BalanceHeaderWrapped = ({
-
+
+ {!small && ( + + )}

{value}

{!small && ( )} @@ -181,6 +192,11 @@ const BalanceHeaderWrapped = ({ .stat .small { font-size: 14px; } + + .stat img { + margin-left: 0; + height: 20px; + } } `} @@ -402,7 +418,7 @@ const BalanceHeaderWrapped = ({ } .balance-header { - margin-bottom: 19px; + margin-bottom: 16px; } .balance-header .inaccurate-balance { @@ -502,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 960fed3665..7cf98ad503 100644 --- a/dapp-oeth/src/components/wrap/WrapHomepage.js +++ b/dapp-oeth/src/components/wrap/WrapHomepage.js @@ -245,34 +245,37 @@ const WrapHomepage = ({ <> {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 ? ( + + ) : ( + + )}