Merge pull request #49 from SimpleHold/nano_support

Nano support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "extension",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "description": "extension",
   "private": false,
   "repository": "https://github.com/SimpleHold/extension.git",
@@ -45,6 +45,7 @@
     "detect-browser": "^5.2.0",
     "digibyte-lib": "https://github.com/DigiByte-Core/digibyte-lib",
     "lodash": "^4.17.21",
+    "nanocurrency": "^2.5.0",
     "neblio-lib": "https://github.com/NeblioTeam/bitcore-lib#neblcore-lib",
     "nerve-sdk-js": "^1.0.8",
     "nuls-sdk-js": "^2.5.0",

src/components/CurrencyAddress/CurrencyAddress.tsx

@@ -7,7 +7,7 @@ import CheckBox from '@components/CheckBox'
 
 // Utils
 import { short, toUpper } from '@utils/format'
-import { getBalance } from '@utils/api'
+import { getBalance } from '@utils/currencies'
 import { getCurrency } from '@config/currencies'
 
 // Styles
@@ -33,7 +33,7 @@ const CurrencyAddress: React.FC<Props> = (props) => {
   const currency = getCurrency(symbol)
 
   const onGetBalance = async (): Promise<void> => {
-    const request = await getBalance(address, currency?.chain)
+    const request = await getBalance(symbol, address, currency?.chain)
 
     setBalance(request.balance)
   }

src/components/CurrencyLogo/CurrencyLogo.tsx

@@ -25,7 +25,7 @@ const CurrencyLogo: React.FC<Props> = (props) => {
 
   const [logo, setLogo] = React.useState<string | null>(null)
 
-  const getChainogo = chain ? getCurrencyByChain(chain) : null
+  const getChainLogo = chain ? getCurrencyByChain(chain) : null
   const currency = chain ? getToken(symbol, chain) : getCurrency(symbol)
 
   React.useEffect(() => {
@@ -47,7 +47,7 @@ const CurrencyLogo: React.FC<Props> = (props) => {
       <Styles.LogoRow
         width={size}
         height={size}
-        background={background || currency?.background || getChainogo?.background}
+        background={background || currency?.background || getChainLogo?.background}
         br={br}
       >
         {currency || logo ? (
@@ -57,9 +57,9 @@ const CurrencyLogo: React.FC<Props> = (props) => {
           <Styles.LetterLogo>{toUpper(name[0])}</Styles.LetterLogo>
         ) : null}
       </Styles.LogoRow>
-      {getChainogo ? (
+      {getChainLogo ? (
         <Styles.TokenRow size={size}>
-          <Styles.TokenLogo size={size} src={getChainogo.logo} />
+          <Styles.TokenLogo size={size} src={getChainLogo.logo} />
         </Styles.TokenRow>
       ) : null}
     </Styles.Container>

src/components/WalletCard/WalletCard.tsx

@@ -7,7 +7,8 @@ import CurrencyLogo from '@components/CurrencyLogo'
 import Skeleton from '@components/Skeleton'
 
 // Utils
-import { getBalance } from '@utils/api'
+import { updateWalletActivationStatus } from '@utils/currencies/nano'
+import { getBalance } from '@utils/currencies'
 import { toUpper, numberFriendly, formatEstimated, getFormatBalance } from '@utils/format'
 import {
   updateBalance,
@@ -94,6 +95,7 @@ const WalletCard: React.FC<Props> = React.memo((props) => {
   const [balance, setBalance] = React.useState<number | null>(null)
   const [estimated, setEstimated] = React.useState<number | null>(null)
   const [pendingBalance, setPendingBalance] = React.useState<number>(0)
+  const [notActivatedStatus, setActivationStatus] = React.useState<boolean>(!!isNotActivated)
 
   const walletData: TTxWallet = {
     chain: getWalletChain(symbol, chain),
@@ -104,23 +106,34 @@ const WalletCard: React.FC<Props> = React.memo((props) => {
   }
 
   React.useEffect(() => {
+    checkActivatedStatus()
     loadBalance()
   }, [])
 
+  const checkActivatedStatus = () => {
+    if (symbol === 'xno') {
+      updateWalletActivationStatus(address).then(res => {
+        if (res) {
+          setActivationStatus(true)
+        }
+      })
+    }
+  }
+
   const loadBalance = async (): Promise<void> => {
     const savedData = getLatestBalance(address, chain, symbol)
 
     const isFetchReady = checkIfTimePassed(savedData.lastBalanceCheck || 0, { seconds: 20 })
     const isFullData = !Object.entries(savedData).find(v => v[1] === null)
 
-    let data = isNotActivated ? emptyData : savedData
+    let data = notActivatedStatus ? emptyData : savedData
 
-    const isFetchRequired = !isNotActivated && (isFetchReady || !isFullData)
+    const isFetchRequired = !notActivatedStatus && (isFetchReady || !isFullData)
 
     if (isFetchRequired) {
       updateLast('lastBalanceCheck', address, chain)
 
-      const fetchedData = await getBalance(address, currency?.chain || chain, tokenSymbol, contractAddress)
+      const fetchedData = await getBalance(symbol, address, currency?.chain || chain, tokenSymbol, contractAddress)
       data = { ...data, ...fetchedData }
     }
 
@@ -185,7 +198,7 @@ const WalletCard: React.FC<Props> = React.memo((props) => {
     <Styles.Wrapper onClick={openWallet}>
       <Styles.Container className={'container'}>
         <CurrencyLogo size={40} symbol={symbol} chain={chain} name={name} />
-        <Styles.Row gridColumns={isNotActivated ? 'auto' : 'repeat(2,1fr)'}>
+        <Styles.Row gridColumns={notActivatedStatus ? 'auto' : 'repeat(2,1fr)'}>
           <Styles.AddressInfo>
             <Styles.CurrencyInfo>
               {hardware ? (
@@ -199,17 +212,17 @@ const WalletCard: React.FC<Props> = React.memo((props) => {
               ) : null}
               <Styles.WalletName className='wallet-name'>{walletName}</Styles.WalletName>
             </Styles.CurrencyInfo>
-            {isNotActivated ? (
+            {notActivatedStatus ? (
               <Styles.ActivateBlock>
-                <Styles.ActivateLabel>Need activation</Styles.ActivateLabel>
+                <Styles.ActivateLabel>Activation is required</Styles.ActivateLabel>
               </Styles.ActivateBlock>
             ) : (
               <Styles.AddressRow>
                 <Styles.Address>{address}</Styles.Address>
               </Styles.AddressRow>
             )}
           </Styles.AddressInfo>
-          {!isNotActivated ? (
+          {!notActivatedStatus ? (
             <Styles.Balances>
               <Skeleton width={110} height={16} type='gray' br={4} isLoading={balance === null}>
                 <Styles.BalanceRow>

src/config/currencies.ts

@@ -30,6 +30,7 @@ import toncoinLogo from '@assets/currencies/toncoin.svg'
 import ravencoinLogo from '@assets/currencies/rvn.svg'
 import digibyteLogo from '@assets/currencies/dgb.svg'
 import ftmLogo from '@assets/currencies/ftm.svg'
+import xnoLogo from '@assets/currencies/xno.svg'
 
 // Utils
 import { toLower } from '@utils/format'
@@ -314,6 +315,15 @@ const currencies: ICurrency[] = [
     chain: 'ftm',
     minSendAmount: 1000,
     isCustomFee: true,
+  },
+  {
+    name: 'Nano',
+    symbol: 'xno',
+    logo: xnoLogo,
+    background: '#209CE9',
+    chain: 'xno',
+    minSendAmount: 1000000000000000,
+    isCustomFee: false,
   }
 ]
 

src/drawers/Wallets/components/Wallet/Wallet.tsx

@@ -7,7 +7,7 @@ import CurrencyLogo from '@components/CurrencyLogo'
 import Skeleton from '@components/Skeleton'
 
 // Utils
-import { getBalance } from '@utils/api'
+import { getBalance } from '@utils/currencies'
 import { toUpper, numberFriendly, short, formatEstimated } from '@utils/format'
 import { updateBalance, THardware } from '@utils/wallet'
 
@@ -58,6 +58,7 @@ const Wallet: React.FC<Props> = (props) => {
 
   const fetchBalance = async (): Promise<void> => {
     const { balance, balance_usd, balance_btc, pending } = await getBalance(
+      symbol,
       address,
       currency?.chain || chain,
       chain ? symbol : undefined,

src/externalPages/RestoreBackup/RestoreBackup.tsx

@@ -47,7 +47,7 @@ const initialState: IState = {
   activeDrawer: null,
   password: '',
   passwordErrorLabel: null,
-  isPageActive: false,
+  isPageActive: false
 }
 
 const RestoreBackup: React.FC = () => {
@@ -77,15 +77,15 @@ const RestoreBackup: React.FC = () => {
 
   const onConfirm = (): void => {
     logEvent({
-      name: START_RESTORE_CONFIRM,
+      name: START_RESTORE_CONFIRM
     })
 
     updateState({ activeDrawer: 'confirm' })
   }
 
   const onConfirmRestore = (): void => {
     logEvent({
-      name: START_RESTORE_PASSWORD,
+      name: START_RESTORE_PASSWORD
     })
 
     if (state.passwordErrorLabel) {
@@ -137,7 +137,7 @@ const RestoreBackup: React.FC = () => {
   }
 
   return (
-    <ExternalPageContainer onClose={onClose} headerStyle="white">
+    <ExternalPageContainer onClose={onClose} headerStyle='white'>
       <>
         <Styles.Body>
           <Styles.Title>Restore</Styles.Title>
@@ -151,9 +151,9 @@ const RestoreBackup: React.FC = () => {
           <AgreeTerms isAgreed={state.isAgreed} setIsAgreed={toggleAgreed} mt={20} />
 
           <Styles.Actions>
-            <Button label="Cancel" onClick={onClose} isLight mr={7.5} />
+            <Button label='Cancel' onClick={onClose} isLight mr={7.5} />
             <Button
-              label="Confirm"
+              label='Confirm'
               onClick={onConfirm}
               disabled={!state.backupData.length || !state.isAgreed}
               ml={7.5}
@@ -163,7 +163,7 @@ const RestoreBackup: React.FC = () => {
           <Styles.DividerLine />
 
           <Styles.QuestionBlock>
-            <SVG src="../../assets/icons/ask.svg" width={15} height={15} title="ask" />
+            <SVG src='../../assets/icons/ask.svg' width={15} height={15} title='ask' />
             <Styles.Question>Why I see this page?</Styles.Question>
           </Styles.QuestionBlock>
 
@@ -176,28 +176,28 @@ const RestoreBackup: React.FC = () => {
         <ConfirmDrawer
           isActive={state.activeDrawer === 'confirm'}
           onClose={onCloseDrawer}
-          title="Enter the password to restore your wallet"
+          title='Enter the password to restore your wallet'
           textInputValue={state.password}
           onChangeText={setPassword}
           onConfirm={onConfirmRestore}
-          textInputType="password"
-          inputLabel="Enter password"
+          textInputType='password'
+          inputLabel='Enter password'
           isButtonDisabled={!validatePassword(state.password)}
           inputErrorLabel={state.passwordErrorLabel}
-          openFrom="browser"
+          openFrom='browser'
         />
         <FailDrawer
           isActive={state.activeDrawer === 'fail'}
           onClose={onCloseDrawer}
-          text="The backup file is broken. We cannot restore your wallet. Check your backup file and try again."
-          openFrom="browser"
+          text='The backup file is broken. We cannot restore your wallet. Check your backup file and try again.'
+          openFrom='browser'
         />
         <SuccessDrawer
           isActive={state.activeDrawer === 'success'}
           onClose={() => null}
           icon={puzzleIcon}
-          text="We successfully restored your wallet. Go to the extension by clicking on the SimpleHold icon in the extensions menu and enjoy your crypto!"
-          openFrom="browser"
+          text='We successfully restored your wallet. Go to the extension by clicking on the SimpleHold icon in the extensions menu and enjoy your crypto!'
+          openFrom='browser'
           disableClose
         />
       </>

src/externalPages/Send/Send.tsx

@@ -21,7 +21,8 @@ import NetworkFeeShared from '@shared/NetworkFee'
 
 // Utils
 import { getWallets, IWallet, getWalletName } from '@utils/wallet'
-import { getBalance, getUnspentOutputs } from '@utils/api'
+import { getUnspentOutputs } from '@utils/api'
+import { getBalance } from '@utils/currencies'
 import { getCurrentTab, updateTab, getUrl } from '@utils/extension'
 import { toLower, toUpper, plus } from '@utils/format'
 import {
@@ -436,6 +437,7 @@ const Send: React.FC = () => {
 
       if (getCurrencyInfo) {
         const { balance, balance_usd } = await getBalance(
+          symbol,
           address,
           getCurrencyInfo?.chain,
           chain ? symbol : undefined,

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "SimpleHold",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "icons": {
     "16": "assets/logo/favicon-16.png",
     "32": "assets/logo/favicon-32.png",

src/pages/ImportPrivateKey/ImportPrivateKey.tsx

@@ -14,7 +14,7 @@ import SuccessDrawer from '@drawers/Success'
 
 // Utils
 import { validatePassword } from '@utils/validate'
-import { checkExistWallet, addNew as addNewWallet, IWallet, getWallets } from '@utils/wallet'
+import { checkExistWallet, addNew as addNewWallet, IWallet, getWallets, activateAddress } from '@utils/wallet'
 import { decrypt } from '@utils/crypto'
 import { setUserProperties } from '@utils/amplitude'
 import { toLower, toUpper } from '@utils/format'
@@ -37,6 +37,7 @@ import { ITokensBalance } from '@utils/api/types'
 
 // Styles
 import Styles from './styles'
+import { getActivationStatus } from 'utils/currencies/nano'
 
 const initialState: IState = {
   privateKey: '',
@@ -91,6 +92,7 @@ const ImportPrivateKey: React.FC = () => {
       if (chain && !isSkipFindTokens) {
         return await findAddressTokens(getAddress, state.privateKey)
       }
+
       return updateState({ activeDrawer: 'confirm' })
     }
 
@@ -177,7 +179,7 @@ const ImportPrivateKey: React.FC = () => {
             chain,
             tokenName,
             contractAddress,
-            decimals
+            decimals,
           )
 
           if (walletsList) {

src/pages/NewWallet/NewWallet.tsx

@@ -18,8 +18,8 @@ import { decrypt } from '@utils/crypto'
 import { addNew as addNewWallet, IWallet } from '@utils/wallet'
 import { toUpper } from '@utils/format'
 import { generate, checkWithPhrase } from '@utils/currencies'
-import * as theta from '@utils/currencies/theta'
 import { getItem, setItem } from '@utils/storage'
+import * as theta from '@utils/currencies/theta'
 import * as vechain from '@utils/currencies/vechain'
 
 // Config
@@ -138,7 +138,7 @@ const NewWallet: React.FC = () => {
                 name: ADD_ADDRESS_CONFIRM,
               })
 
-              if (symbol !== "hbar") {
+              if (['xno', 'hbar'].indexOf(symbol) !== -1) {
                 setItem('backupStatus', 'notDownloaded')
               }
 
@@ -154,7 +154,7 @@ const NewWallet: React.FC = () => {
   }
 
   const onDownloadBackup = (): void => {
-    if (symbol === "hbar") {
+    if (['xno', 'hbar'].indexOf(symbol) !== -1) {
       return history.push('/wallets')
     }
     return history.replace('/download-backup', {

src/pages/Send/Send.tsx

@@ -19,7 +19,8 @@ import AboutFeeDrawer from '@drawers/AboutFee'
 // Utils
 import { toLower, toUpper, plus } from '@utils/format'
 import { validateMany } from '@utils/validate'
-import { getBalance, getUnspentOutputs } from '@utils/api'
+import { getBalance } from '@utils/currencies'
+import { getUnspentOutputs } from '@utils/api'
 import { updateBalance, getWallets } from '@utils/wallet'
 import {
   getExtraIdName,
@@ -338,6 +339,7 @@ const SendPage: React.FC = () => {
     })
 
     const { balance, balance_usd, balance_btc } = await getBalance(
+      symbol,
       state.selectedAddress,
       currency?.chain || tokenChain,
       tokenChain ? symbol : undefined,