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

Merge branch 'main' into alpha

This commit is contained in:
tjs 2022-12-26 16:04:26 -05:00
parent d21c5ac383 3bf6ace4bf
commit 22986301ac
11 changed files with 329 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/MangoProvider.tsx
View File

@ -6,18 +6,19 @@ import { MangoAccount } from '@blockworks-foundation/mango-v4'
import useMangoAccount from 'hooks/useMangoAccount'
import useInterval from './shared/useInterval'
const set = mangoStore.getState().set
const actions = mangoStore.getState().actions
const HydrateStore = () => {
const router = useRouter()
const { name: marketName } = router.query
const { mangoAccount } = useMangoAccount()
const fetchData = useCallback(async () => {
const actions = mangoStore.getState().actions
await actions.fetchGroup()
}, [])
useEffect(() => {
const set = mangoStore.getState().set
if (marketName && typeof marketName === 'string') {
set((s) => {
s.selectedMarket.name = marketName
@ -34,7 +35,6 @@ const HydrateStore = () => {
useEffect(() => {
const connection = mangoStore.getState().connection
const client = mangoStore.getState().client
const set = mangoStore.getState().set
if (!mangoAccount) return
@ -65,7 +65,7 @@ const HydrateStore = () => {
decodedMangoAccount
)
await newMangoAccount.reloadAccountData(client)
actions.fetchOpenOrders()
// newMangoAccount.spotOpenOrdersAccounts =
// mangoAccount.spotOpenOrdersAccounts
// newMangoAccount.advancedOrders = mangoAccount.advancedOrders

12
components/profile/EditProfileForm.tsx
View File

@ -129,12 +129,21 @@ const EditProfileForm = ({
<InlineNotification type="error" desc={updateError} />
</div>
) : null}
{!profile ? (
<div className="py-3">
<InlineNotification
type="error"
desc={t('profile:profile-api-error')}
/>
</div>
) : null}
<div className="my-6 flex justify-center">
<div className="relative ">
<IconButton
className="absolute -top-2 -right-2 bg-th-button md:hover:bg-th-button-hover"
size="small"
onClick={onEditProfileImage}
disabled={!profile}
>
{profile?.profile_image_url ? (
<PencilIcon className="h-4 w-4" />
@ -186,7 +195,8 @@ const EditProfileForm = ({
disabled={
!!Object.keys(inputError).length ||
loadUniquenessCheck ||
!profileName
!profileName ||
!profile
}
onClick={saveProfile}
size="large"

346
components/trade/TradingViewChartKline.tsx
View File

@ -9,8 +9,8 @@ import Switch from '@components/forms/Switch'
import {
BASE_CHART_QUERY,
CHART_QUERY,
DEFAULT_MAIN_INDICATORS,
DEFAULT_SUB_INDICATOR,
// DEFAULT_MAIN_INDICATORS,
// DEFAULT_SUB_INDICATOR,
HISTORY,
mainTechnicalIndicatorTypes,
MAIN_INDICATOR_CLASS,
@ -18,10 +18,13 @@ import {
RES_NAME_TO_RES_VAL,
subTechnicalIndicatorTypes,
} from 'utils/kLineChart'
import { ArrowsPointingOutIcon } from '@heroicons/react/24/outline'
import Loading from '@components/shared/Loading'
// import Loading from '@components/shared/Loading'
import clsx from 'clsx'
import { API_URL, BE_API_KEY } from 'apis/birdeye/helpers'
import { useTheme } from 'next-themes'
import { COLORS } from 'styles/colors'
import { IconButton } from '@components/shared/Button'
import { ArrowsPointingOutIcon, XMarkIcon } from '@heroicons/react/20/solid'
const UPDATE_INTERVAL = 10000
@ -32,6 +35,7 @@ type Props = {
const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
const { width } = useViewport()
const { theme } = useTheme()
const prevWidth = usePrevious(width)
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
const selectedMarketName = selectedMarket?.name
@ -43,15 +47,15 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
//indicatorName: class
[indicatorName: string]: string
}>({})
const [isLoading, setIsLoading] = useState(false)
// const [isLoading, setIsLoading] = useState(false)
const [resolution, setResolution] = useState(RES_NAME_TO_RES_VAL['1H'])
const [chart, setChart] = useState<klinecharts.Chart | null>(null)
const previousChart = usePrevious(chart)
// const previousChart = usePrevious(chart)
const [baseChartQuery, setQuery] = useState<BASE_CHART_QUERY | null>(null)
const clearTimerRef = useRef<NodeJS.Timeout | null>(null)
const fetchData = async (baseQuery: BASE_CHART_QUERY, from: number) => {
try {
setIsLoading(true)
// setIsLoading(true)
const query: CHART_QUERY = {
...baseQuery,
time_from: from,
@ -77,10 +81,10 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
}
dataList.push(kLineModel)
}
setIsLoading(false)
// setIsLoading(false)
return dataList
} catch (e) {
setIsLoading(false)
// setIsLoading(false)
console.log(e)
return []
}
@ -155,67 +159,248 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
}
}, [selectedMarketName, resolution])
//init default technical indicators after init of chart
useEffect(() => {
if (chart !== null && previousChart === null) {
if (DEFAULT_SUB_INDICATOR) {
const subId = chart.createTechnicalIndicator(
DEFAULT_SUB_INDICATOR,
true
)
setSubTechnicalIndicators({ [DEFAULT_SUB_INDICATOR]: subId })
}
if (DEFAULT_MAIN_INDICATORS?.length) {
for (const type of DEFAULT_MAIN_INDICATORS) {
chart?.createTechnicalIndicator(type, true, {
id: MAIN_INDICATOR_CLASS,
})
}
setMainTechnicalIndicators(DEFAULT_MAIN_INDICATORS)
}
}
}, [chart !== null])
// init default technical indicators after init of chart
// useEffect(() => {
// if (chart !== null && previousChart === null) {
// if (DEFAULT_SUB_INDICATOR) {
// const subId = chart.createTechnicalIndicator(
// DEFAULT_SUB_INDICATOR,
// true
// )
// setSubTechnicalIndicators({ [DEFAULT_SUB_INDICATOR]: subId })
// }
// if (DEFAULT_MAIN_INDICATORS?.length) {
// for (const type of DEFAULT_MAIN_INDICATORS) {
// chart?.createTechnicalIndicator(type, true, {
// id: MAIN_INDICATOR_CLASS,
// })
// }
// setMainTechnicalIndicators(DEFAULT_MAIN_INDICATORS)
// }
// }
// }, [chart !== null])
//init chart without data
useEffect(() => {
const initKline = async () => {
const style = getComputedStyle(document.body)
const gridColor = style.getPropertyValue('--bkg-3')
const kLineChart = init('update-k-line')
kLineChart.setStyleOptions({
grid: {
show: true,
horizontal: {
style: 'solid',
color: gridColor,
},
vertical: {
style: 'solid',
color: gridColor,
},
show: false,
},
candle: {
bar: {
upColor: COLORS.UP[theme],
downColor: COLORS.DOWN[theme],
},
tooltip: {
labels: ['T: ', 'O: ', 'C: ', 'H: ', 'L: ', 'V: '],
labels: ['', 'O:', 'C:', 'H:', 'L:', 'V:'],
text: {
size: 12,
family: 'TT Mono',
weight: 'normal',
color: COLORS.FGD4[theme],
marginLeft: 8,
marginTop: 6,
marginRight: 8,
marginBottom: 0,
},
},
priceMark: {
show: true,
high: {
show: true,
color: COLORS.FGD4[theme],
textMargin: 5,
textSize: 10,
textFamily: 'TT Mono',
textWeight: 'normal',
},
low: {
show: true,
color: COLORS.FGD4[theme],
textMargin: 5,
textSize: 10,
textFamily: 'TT Mono',
textWeight: 'normal',
},
last: {
show: true,
upColor: COLORS.BKG4[theme],
downColor: COLORS.BKG4[theme],
noChangeColor: COLORS.BKG4[theme],
line: {
show: true,
// 'solid'|'dash'
style: 'dash',
dashValue: [4, 4],
size: 1,
},
text: {
show: true,
size: 10,
paddingLeft: 2,
paddingTop: 2,
paddingRight: 2,
paddingBottom: 2,
color: '#FFFFFF',
family: 'TT Mono',
weight: 'normal',
borderRadius: 2,
},
},
},
},
xAxis: {
axisLine: {
show: true,
color: gridColor,
color: COLORS.BKG4[theme],
size: 1,
},
tickLine: {
show: true,
size: 1,
length: 3,
color: COLORS.BKG4[theme],
},
tickText: {
show: true,
color: COLORS.FGD4[theme],
family: 'TT Mono',
weight: 'normal',
size: 10,
},
},
yAxis: {
axisLine: {
show: true,
color: gridColor,
color: COLORS.BKG4[theme],
size: 1,
},
tickLine: {
show: true,
size: 1,
length: 3,
color: COLORS.BKG4[theme],
},
tickText: {
show: true,
color: COLORS.FGD4[theme],
family: 'TT Mono',
weight: 'normal',
size: 10,
},
},
crosshair: {
show: true,
horizontal: {
show: true,
line: {
show: true,
style: 'dash',
dashValue: [4, 2],
size: 1,
color: COLORS.FGD4[theme],
},
text: {
show: true,
color: '#FFFFFF',
size: 10,
family: 'TT Mono',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderSize: 1,
borderColor: COLORS.FGD4[theme],
borderRadius: 2,
backgroundColor: COLORS.FGD4[theme],
},
},
vertical: {
show: true,
line: {
show: true,
style: 'dash',
dashValue: [4, 2],
size: 1,
color: COLORS.FGD4[theme],
},
text: {
show: true,
color: '#FFFFFF',
size: 10,
family: 'TT Mono',
weight: 'normal',
paddingLeft: 2,
paddingRight: 2,
paddingTop: 2,
paddingBottom: 2,
borderSize: 1,
borderColor: COLORS.FGD4[theme],
borderRadius: 2,
backgroundColor: COLORS.FGD4[theme],
},
},
},
technicalIndicator: {
margin: {
top: 0.2,
bottom: 0.1,
},
bar: {
upColor: COLORS.UP[theme],
downColor: COLORS.DOWN[theme],
noChangeColor: '#888888',
},
line: {
size: 1,
colors: ['#FF9600', '#9D65C9', '#2196F3', '#E11D74', '#01C5C4'],
},
circle: {
upColor: '#26A69A',
downColor: '#EF5350',
noChangeColor: '#888888',
},
lastValueMark: {
show: false,
text: {
show: false,
color: '#ffffff',
size: 12,
family: 'Helvetica Neue',
weight: 'normal',
paddingLeft: 3,
paddingTop: 2,
paddingRight: 3,
paddingBottom: 2,
borderRadius: 2,
},
},
tooltip: {
// 'always' | 'follow_cross' | 'none'
showRule: 'always',
// 'standard' | 'rect'
showType: 'standard',
showName: true,
showParams: true,
defaultValue: 'n/a',
text: {
size: 12,
family: 'TT Mono',
weight: 'normal',
color: COLORS.FGD4[theme],
marginTop: 6,
marginRight: 8,
marginBottom: 0,
marginLeft: 8,
},
},
},
separator: {
size: 2,
color: gridColor,
color: COLORS.BKG4[theme],
},
})
setChart(kLineChart)
@ -230,43 +415,52 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
<div
className={clsx(
'fixed h-full w-full',
isFullView &&
'left-[64px] top-0 right-0 bottom-0 bg-th-bkg-1 text-th-fgd-1'
isFullView
? 'left-0 top-0 right-0 bottom-0 z-40 bg-th-bkg-1 text-th-fgd-1'
: ''
)}
>
<div className="flex w-full">
{Object.keys(RES_NAME_TO_RES_VAL).map((key) => (
<div
className={clsx(
'cursor-pointer py-1 px-2',
resolution === RES_NAME_TO_RES_VAL[key] && 'text-th-active'
)}
key={key}
onClick={() => setResolution(RES_NAME_TO_RES_VAL[key])}
<div className="mb-1 flex w-full items-center justify-between border-b border-th-bkg-3 p-1 text-th-fgd-2">
<div className="flex text-th-fgd-3">
{Object.keys(RES_NAME_TO_RES_VAL).map((key) => (
<button
className={clsx(
'default-transition px-2 md:hover:text-th-fgd-2',
resolution === RES_NAME_TO_RES_VAL[key] && 'text-th-active'
)}
key={key}
onClick={() => setResolution(RES_NAME_TO_RES_VAL[key])}
>
{key}
</button>
))}
<button
className="default-transition px-2 md:hover:text-th-fgd-2"
onClick={() => setIsTechnicalModalOpen(true)}
>
{key}
</div>
))}
<div
className="cursor-pointer py-1 px-2 "
onClick={() => setIsTechnicalModalOpen(true)}
>
Indicator
Indicator
</button>
</div>
{setIsFullView && (
<div className="cursor-pointer py-1 px-2">
<ArrowsPointingOutIcon
onClick={() => setIsFullView(!isFullView)}
className="w-5"
></ArrowsPointingOutIcon>
</div>
)}
<div className="py-1 px-2">
{setIsFullView ? (
<IconButton
className="text-th-fgd-3"
size="small"
hideBg
onClick={() => setIsFullView(!isFullView)}
>
{isFullView ? (
<XMarkIcon className="h-5 w-5" />
) : (
<ArrowsPointingOutIcon className="h-5 w-5" />
)}
</IconButton>
) : null}
{/* <div className="px-2">
{isLoading && <Loading className="w-4"></Loading>}
</div>
</div> */}
</div>
<div
style={{ height: 'calc(100% - 30px)', width: '100%' }}
style={{ height: 'calc(100% - 48px)', width: '100%' }}
id="update-k-line"
className="k-line-chart"
/>
@ -275,7 +469,7 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
onClose={() => setIsTechnicalModalOpen(false)}
>
<div className="hide-scroll flex max-h-96 flex-col overflow-auto text-left">
<h2 className="py-4">Main Indicator</h2>
<h2 className="py-4 text-base">Main Indicator</h2>
{mainTechnicalIndicatorTypes.map((type) => {
return (
<IndicatorSwitch
@ -301,7 +495,7 @@ const TradingViewChartKline = ({ setIsFullView, isFullView }: Props) => {
></IndicatorSwitch>
)
})}
<h2 className="py-4">Sub Indicator</h2>
<h2 className="py-4 text-base">Bottom Indicator</h2>
{subTechnicalIndicatorTypes.map((type) => {
return (
<IndicatorSwitch

7
components/wallet/ConnectedMenu.tsx
View File

@ -11,7 +11,6 @@ import mangoStore from '@store/mangoStore'
import { notify } from '../../utils/notifications'
import ProfileImage from '../profile/ProfileImage'
import { abbreviateAddress } from '../../utils/formatting'
import { PublicKey } from '@solana/web3.js'
import { useViewport } from 'hooks/useViewport'
import { breakpoints } from '../../utils/theme'
import EditProfileModal from '@components/modals/EditProfileModal'
@ -91,11 +90,7 @@ const ConnectedMenu = () => {
{!loadProfileDetails && !isMobile ? (
<div className="ml-2.5 overflow-hidden text-left">
<p className="font-mono text-xs text-th-fgd-3">
{profileDetails?.wallet_pk
? abbreviateAddress(
new PublicKey(profileDetails?.wallet_pk)
)
: ''}
{publicKey ? abbreviateAddress(publicKey) : ''}
</p>
<p className="truncate pr-2 text-sm font-bold capitalize text-th-fgd-1">
{profileDetails?.profile_name

1
hooks/useUnsettledSpotBalances.ts
View File

@ -9,7 +9,6 @@ export function useUnsettledSpotBalances() {
const { mangoAccount } = useMangoAccount()
const openOrdersAccounts =
mangoStore.getState().mangoAccount.openOrderAccounts
console.log('openOrdersAccount', openOrdersAccounts)
const unsettledSpotBalances = useMemo(() => {
if (!group || !mangoAccount || !openOrdersAccounts) return {}

1
public/locales/en/profile.json
View File

@ -19,6 +19,7 @@
"no-nfts": "😞 No NFTs found...",
"no-profile-exists": "This profile doesn't exist...",
"profile": "Profile",
"profile-api-error": "Profile update is unavailable. Please try again later",
"profile-fetch-fail": "Failed to fetch profile details",
"profile-name": "Profile Name",
"profile-pic-failure": "Failed to set profile pic",

3
public/locales/es/profile.json
View File

@ -17,8 +17,9 @@
"no-following": "No Accounts Followed",
"no-following-desc": "The lone sheep is in danger of the wolf",
"no-nfts": "😞 No NFTs found...",
"profile": "Profile",
"no-profile-exists": "This profile doesn't exist...",
"profile": "Profile",
"profile-api-error": "Profile update is unavailable. Please try again later",
"profile-fetch-fail": "Failed to fetch profile details",
"profile-name": "Profile Name",
"profile-pic-failure": "Failed to set profile pic",

75
public/locales/ru/profile.json
View File

@ -1,43 +1,44 @@
{
"browse-profiles": "瀏覽",
"choose-profile": "選擇頭像",
"connect-view-profile": "連接錢包來查看帳戶",
"day-trader": "日內交易者",
"browse-profiles": "Browse",
"choose-profile": "Profile Image",
"connect-view-profile": "Connect your wallet to view your profile",
"day-trader": "Day Trader",
"degen": "Degen",
"discretionary": "零錢",
"edit-profile": "編輯帳戶",
"edit-profile-pic": "切換頭像",
"follow": "追蹤",
"following": "追蹤中",
"invalid-characters": "限制於字母、数字和空格",
"discretionary": "Discretionary",
"edit-profile": "Edit Profile",
"edit-profile-pic": "Edit Profile Pic",
"follow": "Follow",
"following": "Following",
"invalid-characters": "Only alphanumeric characters and single spaces allowed",
"length-error": "Names must be less than 20 characters",
"market-maker": "做市商",
"no-followers": "無追蹤者",
"no-followers-desc": "以隱身模式交易😎",
"no-following": "還沒追蹤別帳戶",
"no-following-desc": "跟朋友團結比較安全吧",
"no-nfts": "😞 未找到NFT...",
"no-profile-exists": "此帳戶不存在...",
"profile": "帳戶",
"profile-fetch-fail": "查帳戶細節出錯",
"profile-name": "帳戶標籤",
"profile-pic-failure": "設置頭像失敗",
"profile-pic-success": "設置頭像成功",
"profile-pic-remove-failure": "刪除頭像失敗",
"profile-pic-remove-success": "刪除頭像成功",
"profile-update-fail": "更新帳戶出錯",
"profile-update-success": "帳戶已更新",
"remove": "刪除",
"save-profile": "保存帳戶",
"set-profile-pic": "設置頭像",
"swing-trader": "擺動交易者",
"total-pnl": "組合總盈虧",
"total-value": "組合總價值",
"trader": "交易者",
"trader-category": "交易模式",
"unfollow": "取消追蹤",
"market-maker": "Market Maker",
"no-followers": "No Followers",
"no-followers-desc": "Trading in stealth mode 😎",
"no-following": "No Accounts Followed",
"no-following-desc": "The lone sheep is in danger of the wolf",
"no-nfts": "😞 No NFTs found...",
"no-profile-exists": "This profile doesn't exist...",
"profile": "Profile",
"profile-api-error": "Profile update is unavailable. Please try again later",
"profile-fetch-fail": "Failed to fetch profile details",
"profile-name": "Profile Name",
"profile-pic-failure": "Failed to set profile pic",
"profile-pic-success": "Successfully set profile pic",
"profile-pic-remove-failure": "Failed to remove profile pic",
"profile-pic-remove-success": "Successfully removed profile pic",
"profile-update-fail": "Failed to update profile",
"profile-update-success": "Profile updated",
"remove": "Remove",
"save-profile": "Save Profile",
"set-profile-pic": "Set Profile Pic",
"swing-trader": "Swing Trader",
"total-pnl": "Total Portfolio PnL",
"total-value": "Total Portfolio Value",
"trader": "Trader",
"trader-category": "Trader Category",
"unfollow": "Unfollow",
"uniqueness-api-fail": "Failed to check profile name uniqueness",
"uniqueness-fail": "Profile name is taken. Try another one",
"yolo": "YOLO",
"your-profile": "您的帳戶"
}
"your-profile": "Your Profile"
}

1
public/locales/zh/profile.json
View File

@ -19,6 +19,7 @@
"no-nfts": "😞 未找到NFT...",
"no-profile-exists": "此帐户不存在...",
"profile": "帐户",
"profile-api-error": "Profile update is unavailable. Please try again later",
"profile-fetch-fail": "查帐户细节出错",
"profile-name": "帐户标签",
"profile-pic-failure": "设置头像失败",

1
public/locales/zh_tw/profile.json
View File

@ -19,6 +19,7 @@
"no-nfts": "😞 未找到NFT...",
"no-profile-exists": "此帳戶不存在...",
"profile": "帳戶",
"profile-api-error": "Profile update is unavailable. Please try again later",
"profile-fetch-fail": "查帳戶細節出錯",
"profile-name": "帳戶標籤",
"profile-pic-failure": "設置頭像失敗",

1
tailwind.config.js
View File

@ -412,7 +412,6 @@ module.exports = {
'th-link-hover': 'var(--link-hover)',
'th-button': 'var(--button)',
'th-button-hover': 'var(--button-hover)',
'th-warning': 'var(--warning)',
'th-input-bkg': 'var(--input-bkg)',
'th-input-border': 'var(--input-border)',
'th-input-border-hover': 'var(--input-border-hover)',