Merge pull request #326 from forbole/staging

Staging

.github/workflows/deploy.yaml → .github/workflows/deploy-production.yaml

@@ -1,4 +1,4 @@
-name: Deploy
+name: Deploy Production
 on:
   push:
     branches:

.github/workflows/deploy-staging.yaml

@@ -0,0 +1,35 @@
+name: Deploy Staging
+on:
+  push:
+    branches:
+      - staging
+
+jobs:
+  push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Update env variables
+        run: |
+          sed -i 's/MAILGUN_USER=secret/MAILGUN_USER=${{ secrets.MAILGUN_USER }}/g' .env
+          sed -i 's/MAILGUN_KEY=secret/MAILGUN_KEY=${{ secrets.MAILGUN_KEY }}/g' .env
+      - name: Build and push
+        id: docker_build
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          tags: forbole/forbole-x-staging:latest
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}

Dockerfile

@@ -10,6 +10,7 @@ COPY patches /app/patches
 RUN yarn install
 
 COPY . /app
+COPY /misc/cryptocurrencies.prod.ts /app/misc/cryptocurrencies.ts
 RUN yarn build
 
 CMD [ "yarn", "start" ]

components/AccountDetailCard/index.tsx

@@ -27,6 +27,8 @@ import useIsMobile from '../../misc/useIsMobile'
 import EditAccountDialog from '../EditAccountDialog'
 
 interface AccountDetailCardProps {
+  profileExist: boolean
+  onCreateProfile(): void
   wallet: Wallet
   account: Account
   validators: Validator[]
@@ -35,6 +37,8 @@ interface AccountDetailCardProps {
 }
 
 const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
+  profileExist,
+  onCreateProfile,
   wallet,
   account,
   accountBalance,
@@ -95,6 +99,15 @@ const AccountDetailCard: React.FC<AccountDetailCardProps> = ({
           >
             <AccountAvatar ledgerIconDisabled size="large" account={account} />
             <Box display="flex" mt={isMobile ? 2 : 0} ml={isMobile ? -2 : 0}>
+              {/* !profileExist ? (
+                <Button
+                  classes={{ root: classes.profileButton }}
+                  variant="outlined"
+                  onClick={onCreateProfile}
+                >
+                  {t('create profile')}
+                </Button>
+              ) : null */}
               <Button
                 classes={{ root: classes.fixedWidthButton }}
                 variant="contained"

components/AccountDetailCard/styles.ts

@@ -21,6 +21,12 @@ const useStyles = makeStyles(
       marginLeft: theme.spacing(2),
       padding: theme.spacing(0.5),
     },
+    profileButton: {
+      width: theme.spacing(18),
+      marginLeft: theme.spacing(2),
+      padding: theme.spacing(0.5),
+      borderColor: theme.palette.iconBorder,
+    },
     iconButton: {
       borderColor: theme.palette.iconBorder,
       minWidth: 0,

components/ConfirmTransactionDialog/ConfirmStageContent/SaveProfileContent.tsx

@@ -0,0 +1,59 @@
+import { Divider, Typography, Box, useTheme, Avatar } from '@material-ui/core'
+import useTranslation from 'next-translate/useTranslation'
+import React from 'react'
+import SaveProfileIcon from '../../../assets/images/icons/icon_profile_tx.svg'
+import { useGeneralContext } from '../../../contexts/GeneralContext'
+import useStyles from '../styles'
+
+interface SaveProfileContentProps {
+  msgs: TransactionMsgSaveProfile[]
+}
+
+const SaveProfileContent: React.FC<SaveProfileContentProps> = ({ msgs }) => {
+  const { t } = useTranslation('common')
+  const themeStyle = useTheme()
+  const { theme } = useGeneralContext()
+  const classes = useStyles()
+
+  return (
+    <>
+      <Box display="flex" flexDirection="column" alignItems="center" mt={6}>
+        <SaveProfileIcon width={themeStyle.spacing(6)} height={themeStyle.spacing(6)} />
+        <Box mt={2} mb={4}>
+          <Typography variant="h4">{t('save profile')}</Typography>
+        </Box>
+      </Box>
+      {msgs.map((msg, i) => (
+        <React.Fragment key={String(i)}>
+          <img
+            src={msg.value.coverPicture || `/static/images/default_cover_image_${theme}.png`}
+            alt="cover"
+            className={classes.coverImg}
+          />
+          <Avatar
+            className={classes.avatar}
+            title={msg.value.nickname}
+            src={msg.value.profilePicture || `/static/images/default_profile_pic_${theme}.png`}
+          />
+          <Box my={1}>
+            <Typography>{t('nickname')}</Typography>
+            <Typography color="textSecondary">{msg.value.nickname}</Typography>
+          </Box>
+          <Divider />
+          <Box my={1}>
+            <Typography>{t('dtag')}</Typography>
+            <Typography color="textSecondary">@{msg.value.dtag}</Typography>
+          </Box>
+          <Divider />
+          <Box my={1}>
+            <Typography>{t('bio')}</Typography>
+            <Typography color="textSecondary">{msg.value.bio}</Typography>
+          </Box>
+          <Divider />
+        </React.Fragment>
+      ))}
+    </>
+  )
+}
+
+export default SaveProfileContent

components/ConfirmTransactionDialog/ConfirmStageContent/index.tsx

@@ -23,6 +23,7 @@ import IBCTransferContent from './IBCTransferContent'
 import SubmitProposalContent from './SubmitProposalContent'
 import VoteContent from './VoteContent'
 import DepositContent from './DepositContent'
+import SaveProfileContent from './SaveProfileContent'
 
 const ReactJson = dynamic(() => import('react-json-view'), { ssr: false })
 
@@ -127,6 +128,8 @@ const ConfirmStageContent: React.FC<ConfirmStageContentProps> = ({
             denoms={denoms}
           />
         )
+      case '/desmos.profiles.v1beta1.MsgSaveProfile':
+        return <SaveProfileContent msgs={transactionData.msgs as TransactionMsgSaveProfile[]} />
       default:
         return null
     }

components/ConfirmTransactionDialog/index.tsx

@@ -159,6 +159,8 @@ const ConfirmTransactionDialog: React.FC<ConfirmTransactionDialogProps> = ({
         return t('successfully deposited', {
           title: formatTokenAmount(totalAmount, crypto, lang),
         })
+      case '/desmos.profiles.v1beta1.MsgSaveProfile':
+        return t('profile was saved')
       default:
         return ''
     }

components/ConfirmTransactionDialog/styles.ts

@@ -42,6 +42,20 @@ const useStyles = makeStyles(
       flex: 1,
       margin: theme.spacing(2, 1),
     },
+    coverImg: {
+      width: '100%',
+      height: theme.spacing(12),
+      objectFit: 'cover',
+    },
+    avatar: {
+      width: theme.spacing(9),
+      height: theme.spacing(9),
+      borderWidth: theme.spacing(0.25),
+      borderColor: theme.palette.background.default,
+      borderStyle: 'solid',
+      marginTop: theme.spacing(-4.5),
+      marginLeft: theme.spacing(4),
+    },
   }),
   {
     name: 'HookGlobalStyles',

components/Layout/LeftMenu.tsx

@@ -167,15 +167,16 @@ const LeftMenu: React.FC<LeftMenuProps> = ({ activeItem, isMenuExpanded, setIsMe
             style={{ display: favAccount || !isMenuExpanded ? 'none' : 'block' }}
             className={classes.manageAccounts}
           />
-          <Button
-            href="/wallets"
-            variant="contained"
-            color="primary"
-            style={{ display: favAccount || !isMenuExpanded ? 'none' : 'block' }}
-            className={classes.starButton}
-          >
-            {t('star now')}
-          </Button>
+          <Link href="/wallets" passHref>
+            <Button
+              variant="contained"
+              color="primary"
+              style={{ display: favAccount || !isMenuExpanded ? 'none' : 'block' }}
+              className={classes.starButton}
+            >
+              {t('star now')}
+            </Button>
+          </Link>
           {accounts.map((account) => {
             const crypto = cryptocurrencies[account.crypto]
             return account.fav ? (

components/Layout/styles.ts

@@ -56,7 +56,8 @@ const useStyles = makeStyles(
     starButton: {
       marginTop: theme.spacing(3),
       marginLeft: theme.spacing(2),
-      borderRadius: theme.spacing(1),
+      paddingLeft: theme.spacing(3),
+      paddingRight: theme.spacing(3),
       width: 'fit-content',
     },
     favMenuItem: {

components/ProfileCard/index.tsx

@@ -0,0 +1,45 @@
+import { Card, CardMedia, CardContent, Typography, Avatar, Box, Button } from '@material-ui/core'
+import useTranslation from 'next-translate/useTranslation'
+import React from 'react'
+import useStyles from './styles'
+import { useGeneralContext } from '../../contexts/GeneralContext'
+
+interface ProfileCardProps {
+  profile: Profile
+  onEditProfile(): void
+}
+
+const ProfileCard: React.FC<ProfileCardProps> = ({ profile, onEditProfile }) => {
+  const classes = useStyles()
+  const { t } = useTranslation('common')
+  const { theme } = useGeneralContext()
+
+  return (
+    <Card className={classes.container}>
+      <CardMedia
+        className={classes.coverImage}
+        image={profile.coverPic || `/static/images/default_cover_image_${theme}.png`}
+        title={profile.nickname}
+      />
+      <CardContent className={classes.content}>
+        <Avatar
+          className={classes.avatar}
+          title={profile.nickname}
+          src={profile.profilePic || `/static/images/default_profile_pic_${theme}.png`}
+        />
+        <Box display="flex" justifyContent="space-between" alignItems="flex-start">
+          <Box>
+            <Typography variant="h4">{profile.nickname}</Typography>
+            <Typography gutterBottom>@{profile.dtag}</Typography>
+          </Box>
+          {/* <Button className={classes.button} variant="outlined" onClick={onEditProfile}>
+            {t('edit profile')}
+          </Button> */}
+        </Box>
+        <Typography>{profile.bio}</Typography>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default ProfileCard

components/ProfileCard/styles.ts

@@ -0,0 +1,31 @@
+import { makeStyles } from '@material-ui/core/styles'
+import { CustomTheme } from '../../misc/theme'
+
+const useStyles = makeStyles(
+  (theme: CustomTheme) => ({
+    container: {
+      marginBottom: theme.spacing(2),
+    },
+    content: {
+      padding: theme.spacing(3),
+      marginTop: theme.spacing(-10.5),
+    },
+    coverImage: {
+      height: theme.spacing(27.5),
+    },
+    avatar: {
+      width: theme.spacing(15),
+      height: theme.spacing(15),
+      marginBottom: theme.spacing(2),
+    },
+    button: {
+      borderColor: theme.palette.iconBorder,
+    },
+  }),
+  {
+    name: 'HookGlobalStyles',
+    index: 2,
+  }
+)
+
+export default useStyles