Update account generation

src/components/CopyText.tsx

@@ -37,13 +37,16 @@ function getTextToCopy({
 }
 
 export type CopyTextProps = CommonCopyTextProps &
-  VariantProps<typeof copyTextStyles>
+  VariantProps<typeof copyTextStyles> & {
+    wordBreakType?: 'words' | 'all'
+  }
 export function CopyText({
   text,
   textToCopy,
   onCopyClick,
   isCodeText,
   withHideButton,
+  wordBreakType = 'words',
   size,
   ...props
 }: CopyTextProps) {
@@ -75,7 +78,8 @@ export function CopyText({
       >
         <div
           className={cx(
-            'cursor-pointer select-all break-all px-4 py-2',
+            'cursor-pointer select-all break-words px-4 py-2',
+            wordBreakType === 'words' ? 'break-words' : 'break-all',
             copyTextStyles({ size }),
             isHidden && 'blur-sm'
           )}

src/components/auth/LoginModal/LoginModal.tsx

@@ -82,6 +82,7 @@ export default function LoginModal({
 
   useEffect(() => {
     if (props.isOpen) setCurrentStep(initialOpenState)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.isOpen])
 
   const ModalContent = loginModalContents[currentStep]

src/components/auth/LoginModal/LoginModalContent.tsx

@@ -119,6 +119,7 @@ export const EnterSecretKeyContent = ({
   const onSubmit = async (e: SyntheticEvent) => {
     e.preventDefault()
     beforeLogin?.()
+
     if (await login(privateKey)) {
       afterLogin?.()
       setPrivateKey('')

src/components/auth/ProfileModal/contents/PrivateKeyContent.tsx

@@ -1,11 +1,22 @@
 import { CopyText } from '@/components/CopyText'
 import { useSendEvent } from '@/stores/analytics'
 import { useMyAccount } from '@/stores/my-account'
-import { decodeSecretKey } from '@/utils/account'
+import { decodeSecretKey, isSecretKeyUsingMiniSecret } from '@/utils/account'
+import { useMemo } from 'react'
 
 function PrivateKeyContent() {
   const encodedSecretKey = useMyAccount((state) => state.encodedSecretKey)
-  const secretKey = decodeSecretKey(encodedSecretKey ?? '')
+  const { secretKey, isUsingMiniSecret } = useMemo(() => {
+    const decodedSecretKey = decodeSecretKey(encodedSecretKey ?? '')
+    if (isSecretKeyUsingMiniSecret(decodedSecretKey)) {
+      return { secretKey: `0x${decodedSecretKey}`, isUsingMiniSecret: true }
+    }
+
+    return {
+      secretKey: decodedSecretKey,
+      isUsingMiniSecret: false,
+    }
+  }, [encodedSecretKey])
 
   const sendEvent = useSendEvent()
   const onCopyClick = () => {
@@ -18,7 +29,12 @@ function PrivateKeyContent() {
         Grill secret key is like a long password. We recommend keeping it in a
         safe place, so you can recover your account.
       </p>
-      <CopyText onCopyClick={onCopyClick} isCodeText text={secretKey || ''} />
+      <CopyText
+        onCopyClick={onCopyClick}
+        isCodeText
+        wordBreakType={isUsingMiniSecret ? 'all' : 'words'}
+        text={secretKey || ''}
+      />
     </div>
   )
 }

src/components/auth/ProfileModal/contents/ShareSessionContent.tsx

@@ -21,7 +21,11 @@ function ShareSessionContent() {
   return (
     <div className='mt-2 flex flex-col gap-4'>
       <QrCode url={shareSessionLink} />
-      <CopyText text={shareSessionLink} onCopyClick={onCopyClick} />
+      <CopyText
+        wordBreakType='all'
+        text={shareSessionLink}
+        onCopyClick={onCopyClick}
+      />
     </div>
   )
 }

src/stores/my-account.ts

@@ -2,6 +2,7 @@ import {
   decodeSecretKey,
   encodeSecretKey,
   generateAccount,
+  isSecretKeyUsingMiniSecret,
   loginWithSecretKey,
   Signer,
 } from '@/utils/account'
@@ -58,6 +59,13 @@ export const useMyAccount = create<State & Actions>()((set, get) => ({
     try {
       if (!secretKey) {
         secretKey = (await generateAccount()).secretKey
+      } else {
+        if (secretKey.startsWith('0x')) {
+          const augmented = secretKey.substring(2)
+          if (isSecretKeyUsingMiniSecret(augmented)) {
+            secretKey = augmented
+          }
+        }
       }
 
       const signer = await loginWithSecretKey(secretKey)

src/utils/account.ts

@@ -13,24 +13,29 @@ async function getKeyring() {
 }
 
 export async function generateAccount() {
-  const { mnemonicGenerate, mnemonicToMiniSecret } = await import(
-    '@polkadot/util-crypto'
-  )
+  const { mnemonicGenerate } = await import('@polkadot/util-crypto')
   const keyring = await getKeyring()
 
   const mnemonic = mnemonicGenerate()
-  const seed = mnemonicToMiniSecret(mnemonic)
-  const pair = keyring.addFromSeed(seed, {}, 'sr25519')
+  const pair = keyring.addFromMnemonic(mnemonic, {}, 'sr25519')
 
-  const secretKey = Buffer.from(seed).toString('hex')
-  return { publicKey: pair.address, secretKey }
+  return { publicKey: pair.address, secretKey: mnemonic }
+}
+
+export function isSecretKeyUsingMiniSecret(secretKey: string) {
+  return secretKey.length === 64
 }
 
 export async function loginWithSecretKey(secretKey: string): Promise<Signer> {
   const keyring = await getKeyring()
 
-  const secret = Buffer.from(secretKey, 'hex')
-  const signer = keyring.addFromSeed(secret, {}, 'sr25519')
+  if (isSecretKeyUsingMiniSecret(secretKey)) {
+    const secret = Buffer.from(secretKey, 'hex')
+    const signer = keyring.addFromSeed(secret, {}, 'sr25519')
+    return signer
+  }
+
+  const signer = keyring.addFromMnemonic(secretKey, {}, 'sr25519')
   return signer
 }
 
@@ -39,13 +44,19 @@ export function truncateAddress(address: string) {
 }
 
 export function encodeSecretKey(secretKey: string) {
-  return encodeURIComponent(Buffer.from(secretKey, 'hex').toString('base64'))
+  let buffer
+  if (isSecretKeyUsingMiniSecret(secretKey))
+    buffer = Buffer.from(secretKey, 'hex')
+  else buffer = Buffer.from(secretKey)
+
+  return encodeURIComponent(buffer.toString('base64'))
 }
 
 export function decodeSecretKey(encodedSecretKey: string) {
-  return Buffer.from(decodeURIComponent(encodedSecretKey), 'base64').toString(
-    'hex'
-  )
+  const buffer = Buffer.from(decodeURIComponent(encodedSecretKey), 'base64')
+  const hexString = buffer.toString('hex')
+  if (isSecretKeyUsingMiniSecret(hexString)) return hexString
+  return buffer.toString()
 }
 
 export async function validateAddress(address: string) {