Feature/dashboard sdk (#756)

* finish

* fix lint

* remove unused code

.npmrc

@@ -0,0 +1,3 @@
+legacy-peer-deps = false
+auto-install-peers=true
+strict-peer-dependencies=false

dashboard/src/@core/layouts/components/shared-components/LanguageDropdown.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 // ** React Imports
-import { useEffect } from 'react'
+// import { useEffect } from 'react'
 
 // ** Icon Imports
 import Icon from 'src/@core/components/icon'
@@ -28,14 +28,15 @@ const LanguageDropdown = ({ settings, saveSettings }: Props) => {
   // ** Vars
   const { layout } = settings
 
-  const handleLangItemClick = (lang: 'en' | 'fr' | 'ar') => {
-    i18n.changeLanguage(lang)
+  const handleLangItemClick = (lang: 'en' | 'cn') => {
+    // TODO: Chinese has not been configured
+    // i18n.changeLanguage(lang)
   }
 
   // ** Change html `lang` attribute when changing locale
-  useEffect(() => {
-    document.documentElement.setAttribute('lang', i18n.language)
-  }, [i18n.language])
+  // useEffect(() => {
+  //   document.documentElement.setAttribute('lang', i18n.language)
+  // }, [i18n.language])
 
   return (
     <OptionsMenu
@@ -63,27 +64,16 @@ const LanguageDropdown = ({ settings, saveSettings }: Props) => {
           },
         },
         {
-          text: 'French',
+          text: '中文',
           menuItemProps: {
             sx: { py: 2 },
             selected: i18n.language === 'fr',
             onClick: () => {
-              handleLangItemClick('fr')
+              handleLangItemClick('cn')
               saveSettings({ ...settings, direction: 'ltr' })
             },
           },
         },
-        {
-          text: 'Arabic',
-          menuItemProps: {
-            sx: { py: 2 },
-            selected: i18n.language === 'ar',
-            onClick: () => {
-              handleLangItemClick('ar')
-              saveSettings({ ...settings, direction: 'rtl' })
-            },
-          },
-        },
       ]}
     />
   )

dashboard/src/@core/layouts/components/shared-components/LanguageToggler.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) RoochNetwork
+// SPDX-License-Identifier: Apache-2.0
+
+// ** Mui Imports
+import Button from '@mui/material/Button'
+
+// ** Third Party Import
+import { useTranslation } from 'react-i18next'
+
+// ** Types Import
+import { Settings } from 'src/@core/context/settingsContext'
+
+interface Props {
+  settings: Settings
+  saveSettings: (values: Settings) => void
+}
+
+const LanguageToggler = (props: Props) => {
+  // ** Props
+  // const { settings, saveSettings } = props
+
+  // ** Hook
+  const { i18n } = useTranslation()
+
+  const handleLangItemClick = () => {
+    if (i18n.language === 'en') {
+      i18n.changeLanguage('en')
+    } else {
+      i18n.changeLanguage('cn')
+    }
+  }
+
+  return (
+    <Button color="inherit" aria-haspopup="true" onClick={handleLangItemClick}>
+      {i18n.language === 'en' ? 'EN' : 'CN'}
+    </Button>
+  )
+}
+
+export default LanguageToggler

dashboard/src/@core/layouts/components/shared-components/UserDropdown.tsx

@@ -23,38 +23,21 @@ import { useAuth } from 'src/hooks/useAuth'
 
 // ** Type Imports
 import { Settings } from 'src/@core/context/settingsContext'
+import { formatAddress } from '../../../utils/format'
 
-interface DataType {
+interface AccountType {
   title: string
   address: string
 }
 
-const data: DataType[] = [
-  {
-    title: 'Rooch Account1',
-    address: '0x123456asdasx',
-  },
-  {
-    title: 'Rooch Account1',
-    address: '0x123456asddffff',
-  },
-  {
-    title: 'Rooch Account1',
-    address: '0x123456aas',
-  },
-  {
-    title: 'Rooch Account1',
-    address: '0x123456',
-  },
-]
-
 interface Props {
   settings: Settings
+  data: AccountType[]
 }
 
 const UserDropdown = (props: Props) => {
   // ** Props
-  const { settings } = props
+  const { settings, data } = props
 
   // ** States
   const [anchorEl, setAnchorEl] = useState<Element | null>(null)
@@ -97,17 +80,15 @@ const UserDropdown = (props: Props) => {
     handleDropdownClose()
   }
 
-  // TODO: sm not support
   return (
     <Fragment>
-      <Box sx={{ mr: 6, display: 'flex', flexDirection: 'column' }}>
-        <Typography sx={{ fontWeight: 500 }}>Rooch Account</Typography>
-        <Typography variant="body2" sx={{ mb: 0.5, color: 'text.disabled' }}>
-          0x123456...
-        </Typography>
-      </Box>
-      <Button size="small" variant="outlined" onClick={handleDropdownOpen}>
-        Switch Account
+      <Button variant="text" size="small" onClick={handleDropdownOpen}>
+        <Box sx={{ mr: 0, display: 'flex', flexDirection: 'column', textAlign: 'center' }}>
+          <Typography sx={{ fontWeight: 500 }}>{data[0].title}</Typography>
+          <Typography variant="body2" sx={{ mb: 0.5, color: 'text.disabled' }}>
+            {formatAddress(data[0].address)}
+          </Typography>
+        </Box>
       </Button>
       <Menu
         anchorEl={anchorEl}
@@ -124,13 +105,39 @@ const UserDropdown = (props: Props) => {
               <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                 <Typography sx={{ fontWeight: 500 }}>{value.title}</Typography>
                 <Typography variant="body2" noWrap={true} sx={{ mb: 0.5, color: 'text.disabled' }}>
-                  {value.address}
+                  {formatAddress(value.address)}
                 </Typography>
               </Box>
             </Box>
           </MenuItem>
         ))}
         <Divider />
+        <MenuItem
+          onClick={handleLogout}
+          sx={{
+            py: 2,
+            px: 4,
+            color: 'text.secondary',
+            '& svg': { mr: 2, fontSize: '1.25rem', color: 'text.secondary' },
+          }}
+        >
+          <Icon icon="bxs-user-x" />
+          Create Account
+        </MenuItem>
+        <Divider />
+        <MenuItem
+          onClick={handleLogout}
+          sx={{
+            py: 2,
+            px: 4,
+            color: 'text.secondary',
+            '& svg': { mr: 2, fontSize: '1.25rem', color: 'text.secondary' },
+          }}
+        >
+          <Icon icon="bxs-user-account" />
+          Connect Wallet
+        </MenuItem>
+        <Divider />
         <MenuItem
           onClick={handleLogout}
           sx={{

dashboard/src/@core/utils/format.ts

@@ -3,6 +3,14 @@
 
 import { PaymentTypes } from './types'
 
+export const formatAddress = (address: string) => {
+  let shortAddress = address.substring(0, 6)
+  shortAddress += '...'
+  shortAddress += address.substring(address.length - 6, address.length)
+
+  return shortAddress
+}
+
 /**
  ** Format and return date in Humanize format
  ** Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format

dashboard/src/context/auth/AuthContext.tsx

@@ -26,18 +26,18 @@ import { ErrCallbackType } from 'src/context/types'
 import { useMetamask } from 'src/hooks/useMetamask'
 
 // ** Rooch SDK
-import { Ed25519Keypair } from '@rooch/sdk'
+import { bcsTypes, Ed25519Keypair } from '@rooch/sdk'
 
 // ** Defaults
 const defaultProvider: AuthValuesType = {
   loading: true,
   setLoading: () => Boolean,
   accounts: null,
   supportWallets: [],
-  addAccount: () => null,
   defaultAccount: () => null,
   logout: () => Promise.resolve(),
   loginByWallet: () => Promise.resolve(),
+  loginByNewAccount: () => Promise.resolve(),
   loginBySecretKey: () => Promise.resolve(),
 }
 
@@ -63,22 +63,18 @@ const AuthProvider = ({ children }: Props) => {
     const initAuth = async (): Promise<void> => {
       setLoading(true)
 
-      const kp = Ed25519Keypair.generate()
+      const secretKey = window.localStorage.getItem(authConfig.secretKey)
 
-      console.log(kp.getPublicKey().toRoochAddress())
+      if (secretKey) {
+        const sk = bcsTypes.fromB64(secretKey)
+        const kp = Ed25519Keypair.fromSecretKey(sk)
 
-      const allSecretKey = window.localStorage.getItem(authConfig.secretKey)
-
-      if (allSecretKey) {
-        // TODO: Parse key
-        const acc = new Map<string, AccountDataType>()
-        acc.set('0x12345', {
-          address: '0x12345',
-          kp: null,
+        setAccountWrapper({
+          address: kp.toRoochAddress(),
+          kp: kp,
           activate: true,
           type: AccountType.ROOCH,
         })
-        setAccounts(acc)
       }
     }
 
@@ -102,6 +98,19 @@ const AuthProvider = ({ children }: Props) => {
     loginSuccess()
   }
 
+  const setAccountWrapper = (account: AccountDataType) => {
+    let _accounts = accounts
+    if (!_accounts) {
+      _accounts = new Map()
+    }
+
+    _accounts.set(account.address, {
+      ...account,
+    })
+
+    setAccounts(_accounts)
+  }
+
   /// ** Impl fun
   const supportWallets = (): SupportWalletType[] => {
     const result: SupportWalletType[] = []
@@ -150,8 +159,19 @@ const AuthProvider = ({ children }: Props) => {
     tmpLogin()
   }
 
-  const addAccount = () => {
-    tmpLogin()
+  const loginByNewAccount = () => {
+    const kp = Ed25519Keypair.generate()
+
+    window.localStorage.setItem(authConfig.secretKey, kp.export().privateKey)
+
+    setAccountWrapper({
+      address: kp.toRoochAddress(),
+      kp: kp,
+      activate: true,
+      type: AccountType.ROOCH,
+    })
+
+    loginSuccess()
   }
 
   const handleLogout = () => {
@@ -163,7 +183,7 @@ const AuthProvider = ({ children }: Props) => {
   const defaultAccount = (): AccountDataType => {
     return {
       address: 'aa',
-      kp: 'aa',
+      kp: null,
       activate: true,
       type: AccountType.ROOCH,
     }
@@ -193,10 +213,10 @@ const AuthProvider = ({ children }: Props) => {
     accounts: getAccounts(),
     setAccounts,
     supportWallets: supportWallets(),
-    addAccount,
     defaultAccount,
     loginByWallet,
     loginBySecretKey,
+    loginByNewAccount,
     logout: handleLogout,
   }
 

dashboard/src/context/auth/types.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ErrCallbackType } from 'src/context/types'
+import { Ed25519Keypair } from '@rooch/sdk'
 
 export type AddAccountBySecretKeyParams = {
   key: string
@@ -14,8 +15,8 @@ export enum WalletType {
 }
 
 export enum AccountType {
-  ETH,
-  ROOCH,
+  ETH = 'ETH',
+  ROOCH = 'Rooch',
 }
 
 export type SupportWalletType = {
@@ -25,7 +26,7 @@ export type SupportWalletType = {
 
 export type AccountDataType = {
   address: string
-  kp: string | null
+  kp: Ed25519Keypair | null
   activate: boolean
   type: AccountType
 }
@@ -36,8 +37,8 @@ export type AuthValuesType = {
   setLoading: (value: boolean) => void
   supportWallets: SupportWalletType[]
   accounts: Map<string, AccountDataType> | null
-  addAccount: (value: AccountDataType | null) => void
   defaultAccount: () => AccountDataType | null
   loginByWallet: (walletType: WalletType, errorCallback?: ErrCallbackType) => void
+  loginByNewAccount: (errorCallback?: ErrCallbackType) => void
   loginBySecretKey: (params: AddAccountBySecretKeyParams, errorCallback?: ErrCallbackType) => void
 }