add dialog for rejected polkadot access (#708)

* add displaying message on chromium

* add check for browser, add showing message on click in ExtensionStep

* add dialog

* cr fixes

* remove automatic detection

* cleaning

* edit styles

* update text

* change MessageDialog description type to ReactNode, move dialog body to description

src/components/Dialogs/MessageDialog/MessageDialog.tsx

@@ -8,7 +8,7 @@ type DialogVariant = 'success' | 'warning' | 'error' | 'info'
 export type MessageDialogProps = {
   variant?: DialogVariant
   title?: string
-  description?: string
+  description?: React.ReactNode
   icon?: React.ReactElement
 } & ActionDialogProps
 

src/components/SignInSteps/AccountStep.tsx

@@ -66,7 +66,7 @@ const AccountStep: React.FC<AccountStepProps> = ({ nextStepPath }) => {
         timeout={parseInt(transitions.timings.routing)}
       >
         {!accountsWithNoMembership?.length ? (
-          <StyledStepWrapper withBottomBar>
+          <StyledStepWrapper>
             <AccountStepImg />
             <StepTitle variant="h4">Create blockchain account</StepTitle>
             <SubTitle variant="body2" secondary>

src/components/SignInSteps/ExtensionStep.style.ts

@@ -1,8 +1,26 @@
-import { Button } from '@/shared/components'
+import { Button, Text } from '@/shared/components'
 import { sizes } from '@/shared/theme'
 import styled from '@emotion/styled'
+import { StepFooter } from './SignInSteps.style'
 
 export const StyledButton = styled(Button)`
-  margin-top: ${sizes(4)};
-  margin-bottom: ${sizes(12)};
+  margin: ${sizes(4)} 0;
+`
+
+export const StyledStepFooter = styled(StepFooter)`
+  margin-top: ${sizes(12)};
+`
+
+export const StyledListItem = styled(Text)`
+  text-align: left;
+  & + & {
+    margin-top: ${sizes(2)};
+  }
+`
+
+export const PolkadotExtensionRejectedWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 `

src/components/SignInSteps/ExtensionStep.tsx

@@ -1,16 +1,9 @@
 import React, { useEffect } from 'react'
-import { StyledButton } from './ExtensionStep.style'
-import {
-  StepFooter,
-  BottomBarIcon,
-  StepSubTitle,
-  StepTitle,
-  StepWrapper,
-  StyledPolkadotLogo,
-} from './SignInSteps.style'
-import { Text } from '@/shared/components'
+import { StyledButton, StyledStepFooter, StyledListItem, PolkadotExtensionRejectedWrapper } from './ExtensionStep.style'
+import { BottomBarIcon, StepSubTitle, StepTitle, StepWrapper, StyledPolkadotLogo } from './SignInSteps.style'
+import { Text, Button } from '@/shared/components'
 import { useNavigate } from 'react-router'
-import { useRouterQuery, useUser } from '@/hooks'
+import { useRouterQuery, useUser, useDialog } from '@/hooks'
 import { SvgGlyphExternal } from '@/shared/icons'
 
 type ExtensionStepProps = {
@@ -21,6 +14,10 @@ const ExtensionStep: React.FC<ExtensionStepProps> = ({ nextStepPath }) => {
   const navigate = useNavigate()
   const step = useRouterQuery('step')
   const { extensionConnected } = useUser()
+  const [openEnableExtensionDialog, closeEnableExtensionDialog] = useDialog({
+    description: <PolkadotExtensionRejected />,
+    onExitClick: () => closeEnableExtensionDialog(),
+  })
 
   useEffect(() => {
     if (extensionConnected && step === '1') {
@@ -29,7 +26,7 @@ const ExtensionStep: React.FC<ExtensionStepProps> = ({ nextStepPath }) => {
   }, [extensionConnected, navigate, nextStepPath, step])
 
   return (
-    <StepWrapper withBottomBar>
+    <StepWrapper>
       <StyledPolkadotLogo />
       <StepTitle variant="h4">Add Polkadot extension</StepTitle>
       <StepSubTitle secondary variant="body2">
@@ -39,14 +36,42 @@ const ExtensionStep: React.FC<ExtensionStepProps> = ({ nextStepPath }) => {
       <StyledButton icon={<SvgGlyphExternal />} to="https://polkadot.js.org/extension/">
         Install extension
       </StyledButton>
-      <StepFooter>
+      <Button variant="tertiary" size="small" onClick={() => openEnableExtensionDialog()}>
+        Polkadot extension already installed? Click here
+      </Button>
+      <StyledStepFooter>
         <BottomBarIcon />
         <Text variant="body2" secondary>
           Please reload the page and allow access after installing the extension
         </Text>
-      </StepFooter>
+      </StyledStepFooter>
     </StepWrapper>
   )
 }
 
+export const PolkadotExtensionRejected: React.FC = () => (
+  <PolkadotExtensionRejectedWrapper>
+    <StyledPolkadotLogo />
+    <StepTitle variant="h4">Allow Polkadot extension access</StepTitle>
+    <StepSubTitle secondary variant="body2">
+      If you’ve denied Polkadot extension access for this website, you won’t be able to use Joystream studio. To allow
+      access, you can take the following steps:
+    </StepSubTitle>
+    <ol>
+      <StyledListItem secondary as="li" variant="caption">
+        Open the extension popup with the icon in your browser bar
+      </StyledListItem>
+      <StyledListItem secondary as="li" variant="caption">
+        Use cog icon in upper right corner to open settings and select {'"Manage Website Access"'}
+      </StyledListItem>
+      <StyledListItem secondary as="li" variant="caption">
+        Find play.joystream.org address and switch it to allowed
+      </StyledListItem>
+      <StyledListItem secondary as="li" variant="caption">
+        Reload the page
+      </StyledListItem>
+    </ol>
+  </PolkadotExtensionRejectedWrapper>
+)
+
 export default ExtensionStep

src/components/SignInSteps/SignInSteps.style.ts

@@ -4,11 +4,7 @@ import { SvgJoystreamLogo, SvgPolkadotLogo } from '@/shared/illustrations'
 import { sizes, colors } from '@/shared/theme'
 import styled from '@emotion/styled'
 
-type StepWrapperProps = {
-  withBottomBar?: boolean
-}
-
-export const StepWrapper = styled.div<StepWrapperProps>`
+export const StepWrapper = styled.div`
   width: 100%;
   text-align: center;
   display: flex;