blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add customize trade page layout to settings

This commit is contained in:
saml33 2023-03-23 16:11:29 +11:00
parent 7750942ca5
commit caf98f8354
14 changed files with 1147 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
components/icons/ChartMiddleOBLeft.tsx Normal file
View File

@ -0,0 +1,233 @@
const ChartMiddleOBLeft = ({ className }: { className?: string }) => {
return (
<svg
className={`${className}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 106 60"
fill="none"
>
<rect width="106" height="60" rx="4" fill="var(--bkg-1)" />
<rect x="2" y="2" width="102" height="4" rx="2" fill="var(--bkg-2)" />
<rect x="2" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="14"
y="10"
width="2"
height="12"
transform="rotate(90 14 10)"
fill="var(--down)"
/>
<rect
x="14"
y="54"
width="2"
height="12"
transform="rotate(90 14 54)"
fill="var(--up)"
/>
<rect
x="12"
y="14"
width="2"
height="10"
transform="rotate(90 12 14)"
fill="var(--down)"
/>
<rect
x="12"
y="50"
width="2"
height="10"
transform="rotate(90 12 50)"
fill="var(--up)"
/>
<rect
x="10"
y="18"
width="2"
height="8"
transform="rotate(90 10 18)"
fill="var(--down)"
/>
<rect
x="10"
y="46"
width="2"
height="8"
transform="rotate(90 10 46)"
fill="var(--up)"
/>
<rect
x="8"
y="22"
width="2"
height="6"
transform="rotate(90 8 22)"
fill="var(--down)"
/>
<rect
x="8"
y="42"
width="2"
height="6"
transform="rotate(90 8 42)"
fill="var(--up)"
/>
<rect
x="6"
y="26"
width="2"
height="4"
transform="rotate(90 6 26)"
fill="var(--down)"
/>
<rect
x="6"
y="38"
width="2"
height="4"
transform="rotate(90 6 38)"
fill="var(--up)"
/>
<rect
x="4"
y="30"
width="2"
height="2"
transform="rotate(90 4 30)"
fill="var(--down)"
/>
<rect
x="4"
y="34"
width="2"
height="2"
transform="rotate(90 4 34)"
fill="var(--up)"
/>
<rect x="86" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="94"
y="10"
width="2"
height="6"
transform="rotate(90 94 10)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="14"
width="2"
height="14"
transform="rotate(90 102 14)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="26"
width="2"
height="14"
transform="rotate(90 102 26)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="18"
width="4"
height="14"
transform="rotate(90 102 18)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="10"
width="2"
height="6"
transform="rotate(90 102 10)"
fill="var(--fgd-4)"
/>
<rect x="22" y="44" width="62" height="14" rx="2" fill="var(--bkg-2)" />
<rect
x="38"
y="48"
width="2"
height="12"
transform="rotate(90 38 48)"
fill="var(--fgd-4)"
/>
<rect
x="38"
y="52"
width="2"
height="12"
transform="rotate(90 38 52)"
fill="var(--fgd-4)"
/>
<rect
x="52"
y="48"
width="2"
height="12"
transform="rotate(90 52 48)"
fill="var(--fgd-4)"
/>
<rect
x="52"
y="52"
width="2"
height="12"
transform="rotate(90 52 52)"
fill="var(--fgd-4)"
/>
<rect
x="66"
y="48"
width="2"
height="12"
transform="rotate(90 66 48)"
fill="var(--fgd-4)"
/>
<rect
x="66"
y="52"
width="2"
height="12"
transform="rotate(90 66 52)"
fill="var(--fgd-4)"
/>
<rect
x="80"
y="48"
width="2"
height="12"
transform="rotate(90 80 48)"
fill="var(--fgd-4)"
/>
<rect
x="80"
y="52"
width="2"
height="12"
transform="rotate(90 80 52)"
fill="var(--fgd-4)"
/>
<rect x="22" y="8" width="62" height="34" rx="2" fill="var(--bkg-2)" />
<rect x="26" y="29" width="2" height="7" fill="var(--up)" />
<rect x="30" y="25" width="2" height="7" fill="var(--up)" />
<rect x="38" y="23" width="2" height="7" fill="var(--down)" />
<rect x="50" y="21" width="2" height="7" fill="var(--up)" />
<rect x="58" y="16" width="2" height="7" fill="var(--up)" />
<rect x="70" y="17" width="2" height="7" fill="var(--up)" />
<rect x="34" y="25" width="2" height="3" fill="var(--down)" />
<rect x="42" y="28" width="2" height="3" fill="var(--up)" />
<rect x="46" y="27" width="2" height="3" fill="var(--down)" />
<rect x="54" y="21" width="2" height="3" fill="var(--down)" />
<rect x="62" y="18" width="2" height="3" fill="var(--down)" />
<rect x="66" y="20" width="2" height="3" fill="var(--down)" />
<rect x="74" y="16" width="2" height="3" fill="var(--down)" />
<rect x="78" y="17" width="2" height="3" fill="var(--down)" />
</svg>
)
}
export default ChartMiddleOBLeft

233
components/icons/ChartMiddleOBRight.tsx Normal file
View File

@ -0,0 +1,233 @@
const ChartMiddleOBRight = ({ className }: { className?: string }) => {
return (
<svg
className={`${className}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 106 60"
fill="none"
>
<rect width="106" height="60" rx="4" fill="var(---bkg-1)" />
<rect x="2" y="2" width="102" height="4" rx="2" fill="var(--bkg-2)" />
<rect x="86" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="98"
y="10"
width="2"
height="12"
transform="rotate(90 98 10)"
fill="var(--down)"
/>
<rect
x="98"
y="54"
width="2"
height="12"
transform="rotate(90 98 54)"
fill="var(--up)"
/>
<rect
x="96"
y="14"
width="2"
height="10"
transform="rotate(90 96 14)"
fill="var(--down)"
/>
<rect
x="96"
y="50"
width="2"
height="10"
transform="rotate(90 96 50)"
fill="var(--up)"
/>
<rect
x="94"
y="18"
width="2"
height="8"
transform="rotate(90 94 18)"
fill="var(--down)"
/>
<rect
x="94"
y="46"
width="2"
height="8"
transform="rotate(90 94 46)"
fill="var(--up)"
/>
<rect
x="92"
y="22"
width="2"
height="6"
transform="rotate(90 92 22)"
fill="var(--down)"
/>
<rect
x="92"
y="42"
width="2"
height="6"
transform="rotate(90 92 42)"
fill="var(--up)"
/>
<rect
x="90"
y="26"
width="2"
height="4"
transform="rotate(90 90 26)"
fill="var(--down)"
/>
<rect
x="90"
y="38"
width="2"
height="4"
transform="rotate(90 90 38)"
fill="var(--up)"
/>
<rect
x="88"
y="30"
width="2"
height="2"
transform="rotate(90 88 30)"
fill="var(--down)"
/>
<rect
x="88"
y="34"
width="2"
height="2"
transform="rotate(90 88 34)"
fill="var(--up)"
/>
<rect x="2" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="10"
y="10"
width="2"
height="6"
transform="rotate(90 10 10)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="14"
width="2"
height="14"
transform="rotate(90 18 14)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="26"
width="2"
height="14"
transform="rotate(90 18 26)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="18"
width="4"
height="14"
transform="rotate(90 18 18)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="10"
width="2"
height="6"
transform="rotate(90 18 10)"
fill="var(--fgd-4)"
/>
<rect x="22" y="44" width="62" height="14" rx="2" fill="var(--bkg-2)" />
<rect
x="38"
y="48"
width="2"
height="12"
transform="rotate(90 38 48)"
fill="var(--fgd-4)"
/>
<rect
x="38"
y="52"
width="2"
height="12"
transform="rotate(90 38 52)"
fill="var(--fgd-4)"
/>
<rect
x="52"
y="48"
width="2"
height="12"
transform="rotate(90 52 48)"
fill="var(--fgd-4)"
/>
<rect
x="52"
y="52"
width="2"
height="12"
transform="rotate(90 52 52)"
fill="var(--fgd-4)"
/>
<rect
x="66"
y="48"
width="2"
height="12"
transform="rotate(90 66 48)"
fill="var(--fgd-4)"
/>
<rect
x="66"
y="52"
width="2"
height="12"
transform="rotate(90 66 52)"
fill="var(--fgd-4)"
/>
<rect
x="80"
y="48"
width="2"
height="12"
transform="rotate(90 80 48)"
fill="var(--fgd-4)"
/>
<rect
x="80"
y="52"
width="2"
height="12"
transform="rotate(90 80 52)"
fill="var(--fgd-4)"
/>
<rect x="22" y="8" width="62" height="34" rx="2" fill="var(--bkg-2)" />
<rect x="26" y="29" width="2" height="7" fill="var(--up)" />
<rect x="30" y="25" width="2" height="7" fill="var(--up)" />
<rect x="38" y="23" width="2" height="7" fill="var(--down)" />
<rect x="50" y="21" width="2" height="7" fill="var(--up)" />
<rect x="58" y="16" width="2" height="7" fill="var(--up)" />
<rect x="70" y="17" width="2" height="7" fill="var(--up)" />
<rect x="34" y="25" width="2" height="3" fill="var(--down)" />
<rect x="42" y="28" width="2" height="3" fill="var(--up)" />
<rect x="46" y="27" width="2" height="3" fill="var(--down)" />
<rect x="54" y="21" width="2" height="3" fill="var(--down)" />
<rect x="62" y="18" width="2" height="3" fill="var(--down)" />
<rect x="66" y="20" width="2" height="3" fill="var(--down)" />
<rect x="74" y="16" width="2" height="3" fill="var(--down)" />
<rect x="78" y="17" width="2" height="3" fill="var(--down)" />
</svg>
)
}
export default ChartMiddleOBRight

239
components/icons/ChartOnLeft.tsx Normal file
View File

@ -0,0 +1,239 @@
const ChartOnLeft = ({ className }: { className?: string }) => {
return (
<svg
className={`${className}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 106 60"
fill="none"
>
<rect
width="106"
height="60"
rx="4"
fill="var(--bkg-1)"
// stroke="var(--bkg-4)"
/>
<rect x="2" y="2" width="102" height="4" rx="2" fill="var(--bkg-2)" />
<rect x="66" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="78"
y="10"
width="2"
height="12"
transform="rotate(90 78 10)"
fill="var(--down)"
/>
<rect
x="78"
y="54"
width="2"
height="12"
transform="rotate(90 78 54)"
fill="var(--up)"
/>
<rect
x="76"
y="14"
width="2"
height="10"
transform="rotate(90 76 14)"
fill="var(--down)"
/>
<rect
x="76"
y="50"
width="2"
height="10"
transform="rotate(90 76 50)"
fill="var(--up)"
/>
<rect
x="74"
y="18"
width="2"
height="8"
transform="rotate(90 74 18)"
fill="var(--down)"
/>
<rect
x="74"
y="46"
width="2"
height="8"
transform="rotate(90 74 46)"
fill="var(--up)"
/>
<rect
x="72"
y="22"
width="2"
height="6"
transform="rotate(90 72 22)"
fill="var(--down)"
/>
<rect
x="72"
y="42"
width="2"
height="6"
transform="rotate(90 72 42)"
fill="var(--up)"
/>
<rect
x="70"
y="26"
width="2"
height="4"
transform="rotate(90 70 26)"
fill="var(--down)"
/>
<rect
x="70"
y="38"
width="2"
height="4"
transform="rotate(90 70 38)"
fill="var(--up)"
/>
<rect
x="68"
y="30"
width="2"
height="2"
transform="rotate(90 68 30)"
fill="var(--down)"
/>
<rect
x="68"
y="34"
width="2"
height="2"
transform="rotate(90 68 34)"
fill="var(--up)"
/>
<rect x="86" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="94"
y="10"
width="2"
height="6"
transform="rotate(90 94 10)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="14"
width="2"
height="14"
transform="rotate(90 102 14)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="26"
width="2"
height="14"
transform="rotate(90 102 26)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="18"
width="4"
height="14"
transform="rotate(90 102 18)"
fill="var(--fgd-4)"
/>
<rect
x="102"
y="10"
width="2"
height="6"
transform="rotate(90 102 10)"
fill="var(--fgd-4)"
/>
<rect x="2" y="44" width="62" height="14" rx="2" fill="var(--bkg-2)" />
<rect
x="18"
y="48"
width="2"
height="12"
transform="rotate(90 18 48)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="52"
width="2"
height="12"
transform="rotate(90 18 52)"
fill="var(--fgd-4)"
/>
<rect
x="32"
y="48"
width="2"
height="12"
transform="rotate(90 32 48)"
fill="var(--fgd-4)"
/>
<rect
x="32"
y="52"
width="2"
height="12"
transform="rotate(90 32 52)"
fill="var(--fgd-4)"
/>
<rect
x="46"
y="48"
width="2"
height="12"
transform="rotate(90 46 48)"
fill="var(--fgd-4)"
/>
<rect
x="46"
y="52"
width="2"
height="12"
transform="rotate(90 46 52)"
fill="var(--fgd-4)"
/>
<rect
x="60"
y="48"
width="2"
height="12"
transform="rotate(90 60 48)"
fill="var(--fgd-4)"
/>
<rect
x="60"
y="52"
width="2"
height="12"
transform="rotate(90 60 52)"
fill="var(--fgd-4)"
/>
<rect x="2" y="8" width="62" height="34" rx="2" fill="var(--bkg-2)" />
<rect x="6" y="29" width="2" height="7" fill="var(--up)" />
<rect x="10" y="25" width="2" height="7" fill="var(--up)" />
<rect x="18" y="23" width="2" height="7" fill="var(--down)" />
<rect x="30" y="21" width="2" height="7" fill="var(--up)" />
<rect x="38" y="16" width="2" height="7" fill="var(--up)" />
<rect x="50" y="17" width="2" height="7" fill="var(--up)" />
<rect x="14" y="25" width="2" height="3" fill="var(--down)" />
<rect x="22" y="28" width="2" height="3" fill="var(--up)" />
<rect x="26" y="27" width="2" height="3" fill="var(--down)" />
<rect x="34" y="21" width="2" height="3" fill="var(--down)" />
<rect x="42" y="18" width="2" height="3" fill="var(--down)" />
<rect x="46" y="20" width="2" height="3" fill="var(--down)" />
<rect x="54" y="16" width="2" height="3" fill="var(--down)" />
<rect x="58" y="17" width="2" height="3" fill="var(--down)" />
</svg>
)
}
export default ChartOnLeft

233
components/icons/ChartOnRight.tsx Normal file
View File

@ -0,0 +1,233 @@
const ChartOnRight = ({ className }: { className?: string }) => {
return (
<svg
className={`${className}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 106 60"
fill="none"
>
<rect width="106" height="60" rx="4" fill="var(--bkg-1)" />
<rect x="2" y="2" width="102" height="4" rx="2" fill="var(--bkg-2)" />
<rect x="22" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="34"
y="10"
width="2"
height="12"
transform="rotate(90 34 10)"
fill="var(--down)"
/>
<rect
x="34"
y="54"
width="2"
height="12"
transform="rotate(90 34 54)"
fill="var(--up)"
/>
<rect
x="32"
y="14"
width="2"
height="10"
transform="rotate(90 32 14)"
fill="var(--down)"
/>
<rect
x="32"
y="50"
width="2"
height="10"
transform="rotate(90 32 50)"
fill="var(--up)"
/>
<rect
x="30"
y="18"
width="2"
height="8"
transform="rotate(90 30 18)"
fill="var(--down)"
/>
<rect
x="30"
y="46"
width="2"
height="8"
transform="rotate(90 30 46)"
fill="var(--up)"
/>
<rect
x="28"
y="22"
width="2"
height="6"
transform="rotate(90 28 22)"
fill="var(--down)"
/>
<rect
x="28"
y="42"
width="2"
height="6"
transform="rotate(90 28 42)"
fill="var(--up)"
/>
<rect
x="26"
y="26"
width="2"
height="4"
transform="rotate(90 26 26)"
fill="var(--down)"
/>
<rect
x="26"
y="38"
width="2"
height="4"
transform="rotate(90 26 38)"
fill="var(--up)"
/>
<rect
x="24"
y="30"
width="2"
height="2"
transform="rotate(90 24 30)"
fill="var(--down)"
/>
<rect
x="24"
y="34"
width="2"
height="2"
transform="rotate(90 24 34)"
fill="var(--up)"
/>
<rect x="2" y="8" width="18" height="50" rx="2" fill="var(--bkg-2)" />
<rect
x="10"
y="10"
width="2"
height="6"
transform="rotate(90 10 10)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="14"
width="2"
height="14"
transform="rotate(90 18 14)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="26"
width="2"
height="14"
transform="rotate(90 18 26)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="18"
width="4"
height="14"
transform="rotate(90 18 18)"
fill="var(--fgd-4)"
/>
<rect
x="18"
y="10"
width="2"
height="6"
transform="rotate(90 18 10)"
fill="var(--fgd-4)"
/>
<rect x="42" y="44" width="62" height="14" rx="2" fill="var(--bkg-2)" />
<rect
x="58"
y="48"
width="2"
height="12"
transform="rotate(90 58 48)"
fill="var(--fgd-4)"
/>
<rect
x="58"
y="52"
width="2"
height="12"
transform="rotate(90 58 52)"
fill="var(--fgd-4)"
/>
<rect
x="72"
y="48"
width="2"
height="12"
transform="rotate(90 72 48)"
fill="var(--fgd-4)"
/>
<rect
x="72"
y="52"
width="2"
height="12"
transform="rotate(90 72 52)"
fill="var(--fgd-4)"
/>
<rect
x="86"
y="48"
width="2"
height="12"
transform="rotate(90 86 48)"
fill="var(--fgd-4)"
/>
<rect
x="86"
y="52"
width="2"
height="12"
transform="rotate(90 86 52)"
fill="var(--fgd-4)"
/>
<rect
x="100"
y="48"
width="2"
height="12"
transform="rotate(90 100 48)"
fill="var(--fgd-4)"
/>
<rect
x="100"
y="52"
width="2"
height="12"
transform="rotate(90 100 52)"
fill="var(--fgd-4)"
/>
<rect x="42" y="8" width="62" height="34" rx="2" fill="var(--bkg-2)" />
<rect x="46" y="29" width="2" height="7" fill="var(--up)" />
<rect x="50" y="25" width="2" height="7" fill="var(--up)" />
<rect x="58" y="23" width="2" height="7" fill="var(--down)" />
<rect x="70" y="21" width="2" height="7" fill="var(--up)" />
<rect x="78" y="16" width="2" height="7" fill="var(--up)" />
<rect x="90" y="17" width="2" height="7" fill="var(--up)" />
<rect x="54" y="25" width="2" height="3" fill="var(--down)" />
<rect x="62" y="28" width="2" height="3" fill="var(--up)" />
<rect x="66" y="27" width="2" height="3" fill="var(--down)" />
<rect x="74" y="21" width="2" height="3" fill="var(--down)" />
<rect x="82" y="18" width="2" height="3" fill="var(--down)" />
<rect x="86" y="20" width="2" height="3" fill="var(--down)" />
<rect x="94" y="16" width="2" height="3" fill="var(--down)" />
<rect x="98" y="17" width="2" height="3" fill="var(--down)" />
</svg>
)
}
export default ChartOnRight

63
components/settings/DisplaySettings.tsx
View File

@ -1,5 +1,10 @@
import ButtonGroup from '@components/forms/ButtonGroup'
import Select from '@components/forms/Select'
import ChartMiddleOBLeft from '@components/icons/ChartMiddleOBLeft'
import ChartMiddleOBRight from '@components/icons/ChartMiddleOBRight'
import ChartOnLeft from '@components/icons/ChartOnLeft'
import ChartOnRight from '@components/icons/ChartOnRight'
import Tooltip from '@components/shared/Tooltip'
// import dayjs from 'dayjs'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { useTranslation } from 'next-i18next'
@ -10,6 +15,7 @@ import {
NOTIFICATION_POSITION_KEY,
SIZE_INPUT_UI_KEY,
TRADE_CHART_UI_KEY,
TRADE_LAYOUT_KEY,
} from 'utils/constants'
const NOTIFICATION_POSITIONS = [
@ -65,6 +71,10 @@ const DisplaySettings = () => {
TRADE_CHART_UI_KEY,
'trading-view'
)
const [tradeLayout, setTradeLayout] = useLocalStorageState(
TRADE_LAYOUT_KEY,
'chartLeft'
)
// const handleLangChange = useCallback(
// (l: string) => {
@ -125,6 +135,59 @@ const DisplaySettings = () => {
</Select>
</div>
</div>
<div className="hidden border-t border-th-bkg-3 py-4 md:px-4 lg:flex lg:items-center lg:justify-between">
<p className="mb-2 md:mb-0">{t('settings:trade-layout')}</p>
<div className="flex space-x-3">
<Tooltip content={t('settings:chart-left')}>
<button
className={`flex h-max items-center justify-center rounded border ${
tradeLayout === 'chartLeft'
? 'border-th-active'
: 'border-th-bkg-4 md:hover:border-th-fgd-4'
} p-0.5 `}
onClick={() => setTradeLayout('chartLeft')}
>
<ChartOnLeft className="h-auto w-32" />
</button>
</Tooltip>
<Tooltip content={t('settings:chart-middle-ob-right')}>
<button
className={`flex h-max items-center justify-center rounded border ${
tradeLayout === 'chartMiddleOBRight'
? 'border-th-active'
: 'border-th-bkg-4 md:hover:border-th-fgd-4'
} p-0.5 `}
onClick={() => setTradeLayout('chartMiddleOBRight')}
>
<ChartMiddleOBRight className="h-auto w-32" />
</button>
</Tooltip>
<Tooltip content={t('settings:chart-middle-ob-left')}>
<button
className={`flex h-max items-center justify-center rounded border ${
tradeLayout === 'chartMiddleOBLeft'
? 'border-th-active'
: 'border-th-bkg-4 md:hover:border-th-fgd-4'
} p-0.5 `}
onClick={() => setTradeLayout('chartMiddleOBLeft')}
>
<ChartMiddleOBLeft className="h-auto w-32" />
</button>
</Tooltip>
<Tooltip content={t('settings:chart-right')}>
<button
className={`flex h-max items-center justify-center rounded border ${
tradeLayout === 'chartRight'
? 'border-th-active'
: 'border-th-bkg-4 md:hover:border-th-fgd-4'
} p-0.5 `}
onClick={() => setTradeLayout('chartRight')}
>
<ChartOnRight className="h-auto w-32" />
</button>
</Tooltip>
</div>
</div>
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
<p className="mb-2 md:mb-0">{t('settings:swap-trade-size-selector')}</p>
<div className="w-full min-w-[160px] md:w-auto">

10
components/settings/SettingsPage.tsx
View File

@ -7,19 +7,19 @@ import SoundSettings from './SoundSettings'
const SettingsPage = () => {
return (
<div className="grid grid-cols-12">
<div className="col-span-12 border-b border-th-bkg-3 lg:col-span-8 lg:col-start-3">
<div className="col-span-12 border-b border-th-bkg-3 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
<RpcSettings />
</div>
<div className="col-span-12 border-b border-th-bkg-3 pt-8 lg:col-span-8 lg:col-start-3">
<div className="col-span-12 border-b border-th-bkg-3 pt-8 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
<DisplaySettings />
</div>
<div className="col-span-12 border-b border-th-bkg-3 pt-8 lg:col-span-8 lg:col-start-3">
<div className="col-span-12 border-b border-th-bkg-3 pt-8 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
<AnimationSettings />
</div>
<div className="col-span-12 border-b border-th-bkg-3 pt-8 lg:col-span-8 lg:col-start-3">
<div className="col-span-12 border-b border-th-bkg-3 pt-8 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
<SoundSettings />
</div>
<div className="col-span-12 pt-8 lg:col-span-8 lg:col-start-3">
<div className="col-span-12 pt-8 lg:col-span-10 lg:col-start-2 xl:col-span-8 xl:col-start-3">
<PreferredExplorerSettings />
</div>
</div>

164
components/trade/TradeAdvancedPage.tsx
View File

@ -14,6 +14,14 @@ import OrderbookAndTrades from './OrderbookAndTrades'
// import { useWallet } from '@solana/wallet-adapter-react'
// import TradeOnboardingTour from '@components/tours/TradeOnboardingTour'
import FavoriteMarketsBar from './FavoriteMarketsBar'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { TRADE_LAYOUT_KEY } from 'utils/constants'
type TradeLayout =
| 'chartLeft'
| 'chartMiddleOBRight'
| 'chartMiddleOBLeft'
| 'chartRight'
const TradingChartContainer = dynamic(() => import('./TradingChartContainer'), {
ssr: false,
@ -46,97 +54,147 @@ const TradeAdvancedPage = () => {
// const tourSettings = mangoStore((s) => s.settings.tours)
// const { connected } = useWallet()
// const [isOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
const [tradeLayout] = useLocalStorageState<TradeLayout>(
TRADE_LAYOUT_KEY,
'chartLeft'
)
const defaultLayouts: ReactGridLayout.Layouts = useMemo(() => {
const topnavbarHeight = 67
const innerHeight = Math.max(height - topnavbarHeight, 1000)
const marketHeaderHeight = 48
const balancesXPos = {
chartLeft: { xxxl: 0, xxl: 0, xl: 0, lg: 0 },
chartMiddleOBRight: { xxxl: 4, xxl: 5, xl: 5, lg: 6 },
chartMiddleOBLeft: { xxxl: 4, xxl: 4, xl: 4, lg: 5 },
chartRight: { xxxl: 9, xxl: 9, xl: 9, lg: 11 },
}
const chartXPos = {
chartLeft: { xxxl: 0, xxl: 0, xl: 0, lg: 0 },
chartMiddleOBRight: { xxxl: 4, xxl: 5, xl: 5, lg: 6 },
chartMiddleOBLeft: { xxxl: 4, xxl: 4, xl: 4, lg: 5 },
chartRight: { xxxl: 9, xxl: 9, xl: 9, lg: 11 },
}
const bookXPos = {
chartLeft: { xxxl: 16, xxl: 15, xl: 15, lg: 13 },
chartMiddleOBRight: { xxxl: 20, xxl: 20, xl: 20, lg: 19 },
chartMiddleOBLeft: { xxxl: 0, xxl: 0, xl: 0, lg: 0 },
chartRight: { xxxl: 4, xxl: 5, xl: 5, lg: 6 },
}
const formXPos = {
chartLeft: { xxxl: 20, xxl: 19, xl: 19, lg: 18 },
chartMiddleOBRight: { xxxl: 0, xxl: 0, xl: 0, lg: 0 },
chartMiddleOBLeft: { xxxl: 20, xxl: 19, xl: 19, lg: 18 },
chartRight: { xxxl: 0, xxl: 0, xl: 0, lg: 0 },
}
return {
xxxl: [
{ i: 'market-header', x: 0, y: 0, w: 16, h: marketHeaderHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 16, h: 640 },
{ i: 'market-header', x: 0, y: 0, w: 24, h: marketHeaderHeight },
{ i: 'tv-chart', x: chartXPos[tradeLayout].xxxl, y: 1, w: 16, h: 640 },
{
i: 'balances',
x: 0,
x: balancesXPos[tradeLayout].xxxl,
y: 2,
w: 16,
h: getHeight(innerHeight, 0, 640 + marketHeaderHeight),
},
{
i: 'orderbook',
x: 16,
y: 0,
w: 4,
h: getHeight(innerHeight, 0, 0),
},
{ i: 'trade-form', x: 20, y: 0, w: 4, h: getHeight(innerHeight, 0, 0) },
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 15, h: marketHeaderHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 15, h: 488 },
{
i: 'balances',
x: 0,
y: 2,
w: 15,
h: getHeight(innerHeight, 0, 488 + marketHeaderHeight),
},
{
i: 'orderbook',
x: 15,
y: 0,
w: 4,
h: getHeight(innerHeight, 0, 0),
},
{ i: 'trade-form', x: 19, y: 0, w: 5, h: getHeight(innerHeight, 0, 0) },
],
xl: [
{ i: 'market-header', x: 0, y: 0, w: 15, h: marketHeaderHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 15, h: 488 },
{
i: 'balances',
x: 0,
y: 2,
w: 15,
h: getHeight(innerHeight, 0, 488 + marketHeaderHeight),
},
{
i: 'orderbook',
x: 15,
x: bookXPos[tradeLayout].xxxl,
y: 0,
w: 4,
h: getHeight(innerHeight, 0, 0),
},
{
i: 'trade-form',
x: 19,
x: formXPos[tradeLayout].xxxl,
y: 0,
w: 4,
h: getHeight(innerHeight, 0, 0),
},
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 24, h: marketHeaderHeight },
{ i: 'tv-chart', x: chartXPos[tradeLayout].xxl, y: 1, w: 15, h: 488 },
{
i: 'balances',
x: balancesXPos[tradeLayout].xxl,
y: 2,
w: 15,
h: getHeight(innerHeight, 0, 488 + marketHeaderHeight),
},
{
i: 'orderbook',
x: bookXPos[tradeLayout].xxl,
y: 0,
w: 4,
h: getHeight(innerHeight, 0, 0),
},
{
i: 'trade-form',
x: formXPos[tradeLayout].xxl,
y: 0,
w: 5,
h: getHeight(innerHeight, 0, 0),
},
],
xl: [
{ i: 'market-header', x: 0, y: 0, w: 24, h: marketHeaderHeight },
{ i: 'tv-chart', x: chartXPos[tradeLayout].xl, y: 1, w: 15, h: 488 },
{
i: 'balances',
x: balancesXPos[tradeLayout].xl,
y: 2,
w: 15,
h: getHeight(innerHeight, 0, 488 + marketHeaderHeight),
},
{
i: 'orderbook',
x: bookXPos[tradeLayout].xl,
y: 0,
w: 4,
h: getHeight(innerHeight, 0, 0),
},
{
i: 'trade-form',
x: formXPos[tradeLayout].xl,
y: 0,
w: 5,
h: getHeight(innerHeight, 0, 0),
},
],
lg: [
{ i: 'market-header', x: 0, y: 0, w: 13, h: marketHeaderHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 13, h: 456 },
{ i: 'market-header', x: 0, y: 0, w: 24, h: marketHeaderHeight },
{ i: 'tv-chart', x: chartXPos[tradeLayout].lg, y: 1, w: 13, h: 456 },
{
i: 'balances',
x: 0,
x: balancesXPos[tradeLayout].lg,
y: 2,
w: 13,
h: getHeight(innerHeight, 0, 456 + marketHeaderHeight),
},
{
i: 'orderbook',
x: 13,
x: bookXPos[tradeLayout].lg,
y: 0,
w: 5,
h: getHeight(innerHeight, 0, 0),
},
{ i: 'trade-form', x: 18, y: 0, w: 6, h: getHeight(innerHeight, 0, 0) },
{
i: 'trade-form',
x: formXPos[tradeLayout].lg,
y: 0,
w: 6,
h: getHeight(innerHeight, 0, 0),
},
],
md: [
{ i: 'market-header', x: 0, y: 0, w: 17, h: marketHeaderHeight },
{ i: 'market-header', x: 0, y: 0, w: 24, h: marketHeaderHeight },
{ i: 'tv-chart', x: 0, y: 1, w: 17, h: 464 },
{ i: 'balances', x: 0, y: 2, w: 17, h: 428 + marketHeaderHeight },
{ i: 'orderbook', x: 18, y: 2, w: 7, h: 428 + marketHeaderHeight },
@ -185,14 +243,18 @@ const TradeAdvancedPage = () => {
<TradeInfoTabs />
</div>
<div
className="border-l border-b border-th-bkg-3 lg:border-b-0 lg:border-l-0"
className={`border-y border-l border-th-bkg-3 lg:border-b-0 ${
tradeLayout === 'chartMiddleOBRight' ? 'lg:border-r' : ''
} ${tradeLayout !== 'chartMiddleOBLeft' ? 'lg:border-l-0' : ''}`}
key="trade-form"
>
<AdvancedTradeForm />
</div>
<div
key="orderbook"
className="overflow-hidden border-l border-th-bkg-3 lg:border-r"
className={`overflow-hidden border-l border-th-bkg-3 lg:border-t lg:border-r ${
tradeLayout === 'chartMiddleOBRight' ? 'lg:border-r-0' : ''
} ${tradeLayout === 'chartMiddleOBLeft' ? 'lg:border-l-0' : ''}`}
>
<OrderbookAndTrades />
</div>

5
public/locales/en/settings.json
View File

@ -6,6 +6,10 @@
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",
"chart-left": "Chart Left",
"chart-middle-ob-left": "Chart Middle, Orderbook Left",
"chart-middle-ob-right": "Chart Middle, Orderbook Right",
"chart-right": "Chart Right",
"chinese": "简体中文",
"chinese-traditional": "繁體中文",
"custom": "Custom",
@ -42,6 +46,7 @@
"theme": "Theme",
"top-left": "Top-Left",
"top-right": "Top-Right",
"trade-layout": "Trade Layout",
"transaction-fail": "Transaction Fail",
"transaction-success": "Transaction Success",
"trade-chart": "Trade Chart",

5
public/locales/es/settings.json
View File

@ -6,6 +6,10 @@
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",
"chart-left": "Chart Left",
"chart-middle-ob-left": "Chart Middle, Orderbook Left",
"chart-middle-ob-right": "Chart Middle, Orderbook Right",
"chart-right": "Chart Right",
"chinese": "简体中文",
"chinese-traditional": "繁體中文",
"custom": "Custom",
@ -42,6 +46,7 @@
"theme": "Theme",
"top-left": "Top-Left",
"top-right": "Top-Right",
"trade-layout": "Trade Layout",
"transaction-fail": "Transaction Fail",
"transaction-success": "Transaction Success",
"trade-chart": "Trade Chart",

5
public/locales/ru/settings.json
View File

@ -6,6 +6,10 @@
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",
"chart-left": "Chart Left",
"chart-middle-ob-left": "Chart Middle, Orderbook Left",
"chart-middle-ob-right": "Chart Middle, Orderbook Right",
"chart-right": "Chart Right",
"chinese": "简体中文",
"chinese-traditional": "繁體中文",
"custom": "Custom",
@ -42,6 +46,7 @@
"theme": "Theme",
"top-left": "Top-Left",
"top-right": "Top-Right",
"trade-layout": "Trade Layout",
"transaction-fail": "Transaction Fail",
"transaction-success": "Transaction Success",
"trade-chart": "Trade Chart",

5
public/locales/zh/settings.json
View File

@ -6,6 +6,10 @@
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",
"chart-left": "Chart Left",
"chart-middle-ob-left": "Chart Middle, Orderbook Left",
"chart-middle-ob-right": "Chart Middle, Orderbook Right",
"chart-right": "Chart Right",
"chinese": "简体中文",
"chinese-traditional": "繁體中文",
"custom": "Custom",
@ -42,6 +46,7 @@
"theme": "Theme",
"top-left": "Top-Left",
"top-right": "Top-Right",
"trade-layout": "Trade Layout",
"transaction-fail": "Transaction Fail",
"transaction-success": "Transaction Success",
"trade-chart": "Trade Chart",

5
public/locales/zh_tw/settings.json
View File

@ -6,6 +6,10 @@
"bottom-left": "Bottom-Left",
"bottom-right": "Bottom-Right",
"buttons": "Buttons",
"chart-left": "Chart Left",
"chart-middle-ob-left": "Chart Middle, Orderbook Left",
"chart-middle-ob-right": "Chart Middle, Orderbook Right",
"chart-right": "Chart Right",
"chinese": "简体中文",
"chinese-traditional": "繁體中文",
"custom": "Custom",
@ -42,6 +46,7 @@
"theme": "Theme",
"top-left": "Top-Left",
"top-right": "Top-Right",
"trade-layout": "Trade Layout",
"transaction-fail": "Transaction Fail",
"transaction-success": "Transaction Success",
"trade-chart": "Trade Chart",

2
styles/globals.css
View File

@ -401,7 +401,7 @@ body {
}
button {
@apply tracking-wider focus:outline-none;
@apply default-transition tracking-wider focus:outline-none;
}
svg {

2
utils/constants.ts
View File

@ -49,6 +49,8 @@ export const SHOW_ORDER_LINES_KEY = 'showOrderLines-0.1'
export const SHOW_SWAP_INTRO_MODAL = 'showSwapModal-0.1'
export const TRADE_LAYOUT_KEY = 'tradeLayoutKey-0.1'
// Unused
export const PROFILE_CATEGORIES = [
'borrower',