Merge branch 'main' into alpha

components/MangoProvider.tsx

@@ -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

components/profile/EditProfileForm.tsx

@@ -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"

components/trade/TradingViewChartKline.tsx

@@ -9,8 +9,8 @@ import Switch from '@components/forms/Switch'
 import {
   BASE_CHART_QUERY,
   CHART_QUERY,
-  DEFAULT_MAIN_INDICATORS,
+  // DEFAULT_MAIN_INDICATORS,
-  DEFAULT_SUB_INDICATOR,
+  // 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
+  // init default technical indicators after init of chart
-  useEffect(() => {
+  // useEffect(() => {
-    if (chart !== null && previousChart === null) {
+  //   if (chart !== null && previousChart === null) {
-      if (DEFAULT_SUB_INDICATOR) {
+  //     if (DEFAULT_SUB_INDICATOR) {
-        const subId = chart.createTechnicalIndicator(
+  //       const subId = chart.createTechnicalIndicator(
-          DEFAULT_SUB_INDICATOR,
+  //         DEFAULT_SUB_INDICATOR,
-          true
+  //         true
-        )
+  //       )
-        setSubTechnicalIndicators({ [DEFAULT_SUB_INDICATOR]: subId })
+  //       setSubTechnicalIndicators({ [DEFAULT_SUB_INDICATOR]: subId })
-      }
+  //     }
-      if (DEFAULT_MAIN_INDICATORS?.length) {
+  //     if (DEFAULT_MAIN_INDICATORS?.length) {
-        for (const type of DEFAULT_MAIN_INDICATORS) {
+  //       for (const type of DEFAULT_MAIN_INDICATORS) {
-          chart?.createTechnicalIndicator(type, true, {
+  //         chart?.createTechnicalIndicator(type, true, {
-            id: MAIN_INDICATOR_CLASS,
+  //           id: MAIN_INDICATOR_CLASS,
-          })
+  //         })
-        }
+  //       }
-        setMainTechnicalIndicators(DEFAULT_MAIN_INDICATORS)
+  //       setMainTechnicalIndicators(DEFAULT_MAIN_INDICATORS)
-      }
+  //     }
-    }
+  //   }
-  }, [chart !== null])
+  // }, [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,
+          show: false,
-          horizontal: {
-            style: 'solid',
-            color: gridColor,
-          },
-          vertical: {
-            style: 'solid',
-            color: gridColor,
-          },
         },
         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 &&
+        isFullView
-          'left-[64px] top-0 right-0 bottom-0 bg-th-bkg-1 text-th-fgd-1'
+          ? 'left-0 top-0 right-0 bottom-0 z-40 bg-th-bkg-1 text-th-fgd-1'
+          : ''
       )}
     >
-      <div className="flex w-full">
+      <div className="mb-1 flex w-full items-center justify-between border-b border-th-bkg-3 p-1 text-th-fgd-2">
-        {Object.keys(RES_NAME_TO_RES_VAL).map((key) => (
+        <div className="flex text-th-fgd-3">
-          <div
+          {Object.keys(RES_NAME_TO_RES_VAL).map((key) => (
-            className={clsx(
+            <button
-              'cursor-pointer py-1 px-2',
+              className={clsx(
-              resolution === RES_NAME_TO_RES_VAL[key] && 'text-th-active'
+                '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={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}
+            Indicator
-          </div>
+          </button>
-        ))}
-        <div
-          className="cursor-pointer py-1 px-2 "
-          onClick={() => setIsTechnicalModalOpen(true)}
-        >
-          Indicator
         </div>
-        {setIsFullView && (
+        {setIsFullView ? (
-          <div className="cursor-pointer py-1 px-2">
+          <IconButton
-            <ArrowsPointingOutIcon
+            className="text-th-fgd-3"
-              onClick={() => setIsFullView(!isFullView)}
+            size="small"
-              className="w-5"
+            hideBg
-            ></ArrowsPointingOutIcon>
+            onClick={() => setIsFullView(!isFullView)}
-          </div>
+          >
-        )}
+            {isFullView ? (
-        <div className="py-1 px-2">
+              <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

components/wallet/ConnectedMenu.tsx

@@ -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
+                      {publicKey ? abbreviateAddress(publicKey) : ''}
-                        ? abbreviateAddress(
-                            new PublicKey(profileDetails?.wallet_pk)
-                          )
-                        : ''}
                     </p>
                     <p className="truncate pr-2 text-sm font-bold capitalize text-th-fgd-1">
                       {profileDetails?.profile_name

hooks/useUnsettledSpotBalances.ts

@@ -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 {}

public/locales/en/profile.json

@@ -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",

public/locales/es/profile.json

@@ -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",

public/locales/ru/profile.json

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

public/locales/zh/profile.json

@@ -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": "设置头像失败",

public/locales/zh_tw/profile.json

@@ -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": "設置頭像失敗",

tailwind.config.js

@@ -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)',