Merge pull request #228 from forbole/dev

Dev

components/AddAccountButton/index.tsx

@@ -15,6 +15,7 @@ import SelectAddressesContent from './SelectAddresses'
 import SecurityPasswordDialogContent from '../SecurityPasswordDialogContent'
 import SuccessContent from '../Success'
 import ConnectLedgerDialogContent from '../ConnectLedgerDialogContent'
+import { closeAllLedgerConnections } from '../../misc/utils'
 
 let ledgerTransport
 
@@ -38,6 +39,7 @@ const AddAccountButton: React.FC<AddAccountButtonProps> = ({ walletId }) => {
   const [dialogOpen, setDialogOpen] = React.useState(false)
   const onClose = () => {
     setDialogOpen(false)
+    closeAllLedgerConnections()
   }
   const theme = useTheme()
   const isMobile = useIsMobile()

components/ConnectLedgerDialogContent/index.tsx

@@ -5,6 +5,7 @@ import TransportWebHID from '@ledgerhq/hw-transport-webhid'
 import { LaunchpadLedger } from '@cosmjs/ledger-amino'
 import LedgerImage from '../../assets/images/ledger.svg'
 import useStyles from './styles'
+import { closeAllLedgerConnections } from '../../misc/utils'
 
 interface ConnectLedgerDialogContentProps {
   onConnect(transport: any): void
@@ -27,8 +28,7 @@ const ConnectLedgerDialogContent: React.FC<ConnectLedgerDialogContentProps> = ({
     } catch (err) {
       // Ledger is connected previously. Close the previous connections
       if (err.message === 'The device is already open.') {
-        const devices = await TransportWebHID.list()
-        await Promise.all(devices.map((d) => d.close()))
+        closeAllLedgerConnections()
       }
       retryTimeout = setTimeout(connectLedger, 1000)
     }

components/CreateWalletDialog/AccessMyWallet.tsx

@@ -14,10 +14,10 @@ import { ImportStage } from '.'
 
 interface AccessMyWalletProps {
   onConfirm(stage: ImportStage): void
-  onCreateWallet(): void
+  onWhatIsMnemonicClick(): void
 }
 
-const AccessMyWallet: React.FC<AccessMyWalletProps> = ({ onConfirm, onCreateWallet }) => {
+const AccessMyWallet: React.FC<AccessMyWalletProps> = ({ onConfirm, onWhatIsMnemonicClick }) => {
   const { t } = useTranslation('common')
   const classes = useStyles()
 
@@ -43,8 +43,8 @@ const AccessMyWallet: React.FC<AccessMyWalletProps> = ({ onConfirm, onCreateWall
         </Box>
       </DialogContent>
       <DialogActions>
-        <Button onClick={onCreateWallet} className={classes.button} color="primary">
-          {t('create a wallet')}
+        <Button onClick={onWhatIsMnemonicClick} className={classes.button} color="primary">
+          {t('what is secret recovery phrase')}
         </Button>
       </DialogActions>
     </>

components/CreateWalletDialog/Start.tsx

@@ -36,33 +36,35 @@ const Start: React.FC<StartProps> = ({
     <>
       <DialogContent className={classes.dialogContent}>
         <DialogContentText>{t('create wallet description')}</DialogContentText>
-        <Grid container spacing={5}>
-          <Grid item xs={6}>
-            <ButtonBase className={classes.selectionBox} onClick={onImportWalletClick}>
-              <Box mb={10}>
-                {theme === 'light' ? <WithMnemonicIconLight /> : <WithMnemonicIconDark />}
-              </Box>
-              <Typography variant="body2" align="center" color="textSecondary">
-                {t('i have secret recovery phrase')}
-              </Typography>
-            </ButtonBase>
+        <Box m={4}>
+          <Grid container spacing={5}>
+            <Grid item xs={6}>
+              <ButtonBase className={classes.selectionBox} onClick={onImportWalletClick}>
+                <Box mb={5}>
+                  {theme === 'light' ? <WithMnemonicIconLight /> : <WithMnemonicIconDark />}
+                </Box>
+                <Typography align="center" color="textSecondary">
+                  {t('import wallet')}
+                </Typography>
+              </ButtonBase>
+            </Grid>
+            <Grid item xs={6}>
+              <ButtonBase className={classes.selectionBox} onClick={onCreateWalletClick}>
+                <Box mb={5}>
+                  {theme === 'light' ? <WithoutMnemonicIconLight /> : <WithoutMnemonicIconDark />}
+                </Box>
+                <Typography align="center" color="textSecondary">
+                  {t('create wallet')}
+                </Typography>
+              </ButtonBase>
+            </Grid>
           </Grid>
-          <Grid item xs={6}>
-            <ButtonBase className={classes.selectionBox} onClick={onCreateWalletClick}>
-              <Box mb={10}>
-                {theme === 'light' ? <WithoutMnemonicIconLight /> : <WithoutMnemonicIconDark />}
-              </Box>
-              <Typography variant="body2" align="center" color="textSecondary">
-                {t('i dont have secret recovery phrase')}
-              </Typography>
-            </ButtonBase>
-          </Grid>
-        </Grid>
+        </Box>
       </DialogContent>
       <DialogActions>
-        <Button className={classes.button} color="primary" onClick={onWhatIsMnemonicClick}>
+        {/* <Button className={classes.button} color="primary" onClick={onWhatIsMnemonicClick}>
           {t('what is secret recovery phrase')}
-        </Button>
+        </Button> */}
       </DialogActions>
     </>
   )

components/CreateWalletDialog/index.tsx

@@ -19,6 +19,7 @@ import useStateHistory from '../../misc/useStateHistory'
 import ConnectLedgerDialogContent from '../ConnectLedgerDialogContent'
 import useIsMobile from '../../misc/useIsMobile'
 import getWalletAddress from '../../misc/getWalletAddress'
+import { closeAllLedgerConnections } from '../../misc/utils'
 
 let ledgerSigner
 
@@ -43,7 +44,7 @@ type Stage = CommonStage | ImportStage
 
 interface CreateWalletDialogProps {
   open: boolean
-  onClose(): void
+  onClose(event?: unknown, reason?: string): void
   initialStage?: Stage
 }
 
@@ -134,7 +135,9 @@ const CreateWalletDialog: React.FC<CreateWalletDialogProps> = ({ open, onClose,
   const saveWallet = React.useCallback(
     async (name: string, cryptos: string[], type = 'mnemonic') => {
       const addresses = await Promise.all(
-        cryptos.map((c) => getWalletAddress(mnemonic, c, 0, ledgerSigner))
+        cryptos.map((c) =>
+          getWalletAddress(mnemonic, c, 0, type === 'ledger' ? ledgerSigner : undefined)
+        )
       )
       await addWallet({
         type,
@@ -229,7 +232,12 @@ const CreateWalletDialog: React.FC<CreateWalletDialogProps> = ({ open, onClose,
       case CommonStage.AccessMyWalletStage:
         return {
           title: t('access my wallet title'),
-          content: <AccessMyWallet onConfirm={setStage} onCreateWallet={createWallet} />,
+          content: (
+            <AccessMyWallet
+              onConfirm={setStage}
+              onWhatIsMnemonicClick={() => setStage(CommonStage.WhatIsMnemonicStage)}
+            />
+          ),
         }
       case CommonStage.StartStage:
       default:
@@ -247,16 +255,31 @@ const CreateWalletDialog: React.FC<CreateWalletDialogProps> = ({ open, onClose,
   }, [stage, t])
 
   return (
-    <Dialog fullWidth open={open} onClose={onClose} fullScreen={isMobile}>
+    <Dialog
+      fullWidth
+      open={open}
+      onClose={(event, reason) => {
+        if (reason !== 'backdropClick') {
+          onClose(event, reason)
+        }
+      }}
+      fullScreen={isMobile}
+    >
       {isPrevStageAvailable ? (
-        <IconButton className={classes.backButton} onClick={toPrevStage}>
+        <IconButton
+          className={classes.backButton}
+          onClick={() => {
+            toPrevStage()
+            closeAllLedgerConnections()
+          }}
+        >
           <BackIcon {...iconProps} />
         </IconButton>
       ) : null}
       <IconButton className={classes.closeButton} onClick={onClose}>
         <CloseIcon {...iconProps} />
       </IconButton>
-      <DialogTitle>{content.title}</DialogTitle>
+      {content.title ? <DialogTitle>{content.title}</DialogTitle> : null}
       {content.content}
     </Dialog>
   )

components/CreateWalletDialog/styles.ts

@@ -20,11 +20,12 @@ const useStyles = makeStyles(
     selectionBox: {
       border: `1px solid ${theme.palette.grey[200]}`,
       borderRadius: theme.shape.borderRadius,
-      height: theme.spacing(38),
+      height: theme.spacing(32),
       padding: theme.spacing(2, 4),
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'flex-end',
+      width: '100%',
+      justifyContent: 'center',
       '&:hover': {
         border: `1px solid ${theme.palette.grey[300]}`,
       },

contexts/WalletsContext.tsx

@@ -112,7 +112,7 @@ const WalletsProvider: React.FC = ({ children }) => {
         },
       })
       setIsFirstTimeUser(false)
-      setWallets((ws) => [result.wallet, ...ws])
+      setWallets((ws) => [{ ...result.wallet, type: wallet.type }, ...ws])
       setAccounts((acs) => [...result.accounts, ...acs])
     },
     [password, setIsFirstTimeUser, setWallets, setAccounts]

cypress/integration/onboarding/createWallet.spec.ts

@@ -47,7 +47,7 @@ describe('Create wallet on first visit', () => {
     cy.get('button').contains('Confirm').click()
   })
   it('create and confirm secret recovery phrase', () => {
-    cy.contains('have any').click()
+    cy.contains('Create Wallet').click()
     cy.get('.mnemonic').should('be.visible')
     cy.get('.mnemonic').then((e) => {
       const mnemonic = []

cypress/integration/onboarding/importMnemonicPhrase.ts

@@ -46,7 +46,7 @@ describe('Create wallet by importing secret recovery phrase on first visit', ()
     cy.get('button').contains('Confirm').click()
   })
   it('import secret recovery phrase', () => {
-    cy.contains('12 / 24 word secret recovery phrase').click()
+    cy.contains('Import Wallet').click()
     cy.contains('Import Secret Recovery Phrase').click()
     cy.get('#mnemonic-0').type(mnemonic)
     cy.contains('Next').click()

locales/en/common.json

@@ -25,15 +25,15 @@
   "invalid confirm password": "Confirm password does not match",
   "create wallet title": "Getting Started",
   "create wallet description": "Select one of method that can describe you",
-  "i have secret recovery phrase": "I have 12 / 24 word secret recovery phrase",
-  "i dont have secret recovery phrase": "I don’t have any secret recovery phrase",
+  "import wallet": "Import Wallet",
+  "create wallet": "Create Wallet",
   "what is secret recovery phrase": "What is secret recovery phrase?",
   "create new wallet title": "Create Wallet",
   "create new wallet description": "Please write down and safe your secret recovery phrase\nIt’s the ONLY WAY to restore your account",
   "create new wallet button": "I have written it down",
   "create new wallet caption": "We’ll confirm on the next screen",
   "confirm secret recovery description": "Please enter your secret recovery phrase in order and\nmake sure your secret recovery phrase is written correctly",
-  "invalid secret recovery phrase": "Invalid secret recovery phrase",
+  "invalid mnemonic": "Invalid secret recovery phrase",
   "unlock password title": "Unlock Password",
   "unlock password description": "Enter password to unlock your application",
   "incorrect password": "Incorrect password",

misc/utils.ts

@@ -4,6 +4,7 @@ import cloneDeep from 'lodash/cloneDeep'
 import drop from 'lodash/drop'
 import keyBy from 'lodash/keyBy'
 import { format, differenceInDays } from 'date-fns'
+import TransportWebHID from '@ledgerhq/hw-transport-webhid'
 
 export const formatPercentage = (percent: number, lang: string): string =>
   new Intl.NumberFormat(lang, {
@@ -646,3 +647,8 @@ export const isAddressValid = (prefix: string, address: string): boolean => {
 
 export const formatHeight = (height: number, lang?: string): string =>
   `${new Intl.NumberFormat(lang).format(height || 0)}`
+
+export const closeAllLedgerConnections = async () => {
+  const devices = await TransportWebHID.list()
+  await Promise.all(devices.map((d) => d.close()))
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "forbole-x",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -14,10 +14,10 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.12",
-    "@cosmjs/crypto": "^0.25.6",
-    "@cosmjs/ledger-amino": "^0.25.6",
-    "@cosmjs/proto-signing": "^0.25.6",
-    "@cosmjs/stargate": "^0.26.0-alpha2",
+    "@cosmjs/crypto": "^0.26.0",
+    "@cosmjs/ledger-amino": "^0.26.0",
+    "@cosmjs/proto-signing": "^0.26.0",
+    "@cosmjs/stargate": "^0.26.0",
     "@ledgerhq/hw-transport-webhid": "^6.1.0",
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
@@ -30,9 +30,7 @@
     "next": "^11.1.0",
     "next-translate": "^1.0.1",
     "nodemailer": "^6.6.3",
-    "patch-package": "^6.4.7",
     "postcss": "^8.2.15",
-    "postinstall-postinstall": "^2.1.0",
     "qrcode.react": "^1.0.1",
     "query-string": "^7.0.0",
     "react": "^17.0.1",
@@ -71,6 +69,8 @@
     "jest-dom": "^4.0.0",
     "jest-localstorage-mock": "^2.4.6",
     "jest-svg-transformer": "^1.0.0",
+    "patch-package": "^6.4.7",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.2.1",
     "react-test-renderer": "^17.0.1",
     "typescript": "^4.1.3"

pages/wallets.tsx

@@ -56,7 +56,7 @@ const Wallets: React.FC = () => {
       <CreateWalletDialog
         open={isCreateWalletDialogOpen}
         onClose={() => setIsCreateWalletDialogOpen(false)}
-        initialStage={CommonStage.AccessMyWalletStage}
+        // initialStage={CommonStage.AccessMyWalletStage}
       />
     </Layout>
   )

patches/@cosmjs+stargate+0.26.0.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/@cosmjs/stargate/build/accounts.js b/node_modules/@cosmjs/stargate/build/accounts.js
+index 55753d0..849f1ec 100644
+--- a/node_modules/@cosmjs/stargate/build/accounts.js
++++ b/node_modules/@cosmjs/stargate/build/accounts.js
+@@ -58,6 +58,11 @@ function accountFromAny(input) {
+             utils_1.assert(baseAccount);
+             return accountFromBaseAccount(baseAccount);
+         }
++        // custom
++        case "/desmos.profiles.v1beta1.Profile": {
++            const baseAccount = auth_1.ProfileAccount.decode(value).baseAccount;
++            return accountFromBaseAccount(baseAccount);
++        }
+         default:
+             throw new Error(`Unsupported type: '${typeUrl}'`);
+     }

patches/cosmjs-types+0.2.0.patch

@@ -0,0 +1,31 @@
+diff --git a/node_modules/cosmjs-types/cosmos/auth/v1beta1/auth.js b/node_modules/cosmjs-types/cosmos/auth/v1beta1/auth.js
+index 0673e21..adc499d 100644
+--- a/node_modules/cosmjs-types/cosmos/auth/v1beta1/auth.js
++++ b/node_modules/cosmjs-types/cosmos/auth/v1beta1/auth.js
+@@ -355,4 +355,25 @@ if (minimal_1.default.util.Long !== long_1.default) {
+     minimal_1.default.util.Long = long_1.default;
+     minimal_1.default.configure();
+ }
++
++exports.ProfileAccount = {
++    decode(input, length) {
++        const reader = input instanceof minimal_1.default.Reader ? input : new minimal_1.default.Reader(input);
++        let end = length === undefined ? reader.len : reader.pos + length;
++        const message = Object.assign({}, baseModuleAccount);
++        message.permissions = [];
++        while (reader.pos < end) {
++            const tag = reader.uint32();
++            switch (tag >>> 3) {
++                case 1:
++                    message.baseAccount = exports.BaseAccount.decode(any_1.Any.decode(reader, reader.uint32()).value);
++                    break;
++                default:
++                    reader.skipType(tag & 7);
++                    break;
++            }
++        }
++        return message;
++    },
++};
+ //# sourceMappingURL=auth.js.map
+\ No newline at end of file