Skip to content

Add iframe fixes #504

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 31, 2024
Merged

Add iframe fixes #504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2a2b479
fix: add simple prompt on kyc modal making sure it doesn't close inad…
nezz0746 Oct 30, 2024
1674a18
fix: increase iframe size
nezz0746 Oct 30, 2024
e3485dc
fix: naming & confirm message prop for IFrameWrapper
nezz0746 Oct 30, 2024
e90adcf
fix: IframeWrapper modal height 75%
nezz0746 Oct 30, 2024
ee82201
fix: disable close prompt is message isn't being give
nezz0746 Oct 31, 2024
ac2fb73
Merge pull request #498 from peanutprotocol/fix/smaller-close-kyc
jjramirezn Oct 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 55 additions & 19 deletions src/components/Global/IframeWrapper/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import { useEffect } from 'react'
import { useEffect, useState } from 'react'
import Modal from '../Modal'

export type IFrameWrapperProps = {
src: string
visible: boolean
onClose: () => void
closeConfirmMessage?: string
}

const IframeWrapper = ({
src,
style,
visible,
onClose,
}: {
src: string
style?: React.CSSProperties
visible: boolean
onClose: () => void
}) => {
closeConfirmMessage
}: IFrameWrapperProps) => {
const enableConfirmationPrompt = closeConfirmMessage !== undefined
const [showCloseConfirmMessage, setShowCloseConfirmMessage] = useState(false)
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
const expectedOrigin = window.location.origin
Expand All @@ -28,11 +32,39 @@ const IframeWrapper = ({
}
}, [onClose])

const areYouSurePromptRow = showCloseConfirmMessage ? (
<div className='flex flex-col text-center sm:text-left sm:flex-row justify-between sm:items-center gap-4 p-2 sm:p-0 w-full'>
<p className="text-sm ml-1">{closeConfirmMessage}</p>
<div className="flex flex-row items-center gap-2">
<button className='btn-stroke w-full' onClick={() => {
setShowCloseConfirmMessage(false)
}}>Cancel</button>
<button className='btn-purple w-full' onClick={() => {
onClose()
setShowCloseConfirmMessage(false)
}}>Close</button>
</div>
</div>
) : <button className="btn-purple w-full rounded-none" onClick={() => {
setShowCloseConfirmMessage(true)
}}>
CLOSE
</button>

Comment on lines +35 to +53
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider extracting close button to reduce duplication.

The close button implementation is repeated multiple times with similar logic. Consider extracting it into a reusable component.

+const CloseButton = ({ onClose }: { onClose: () => void }) => (
+  <button className="btn-purple w-full rounded-none" onClick={onClose}>
+    CLOSE
+  </button>
+);

 const IframeWrapper = ({
   // ... props
 }) => {
   // ... other code

   const areYouSurePromptRow = showCloseConfirmMessage ? (
     // ... confirmation prompt JSX
-  ) : <button className="btn-purple w-full rounded-none" onClick={() => {
-      setShowCloseConfirmMessage(true)
-  }}>
-      CLOSE
-  </button>
+  ) : <CloseButton onClose={() => setShowCloseConfirmMessage(true)} />

Committable suggestion was skipped due to low confidence.

return (
<Modal
visible={visible}
onClose={onClose}
classWrap="w-full max-w-2xl border-none sm:border"
onClose={() => {
/**
* If the confirmation prompt is disabled, close the modal directly
*/
if (!enableConfirmationPrompt) {
onClose()
return
}
setShowCloseConfirmMessage(true)
}}
classWrap="h-[75%] sm:h-full w-full sm:min-w-[600px] border-none"
classOverlay="bg-black bg-opacity-50"
video={false}
/**
Expand All @@ -42,25 +74,29 @@ const IframeWrapper = ({
className="z-[1000001]"
classButtonClose="hidden"
>
<div className="flex flex-col gap-2 p-0 sm:p-5">
<div className="flex flex-col h-full gap-2 p-0 sm:p-2">
<div className="w-full sm:hidden">
<button className="btn-purple w-full rounded-none" onClick={onClose}>
{enableConfirmationPrompt ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
onClose()
}}>
CLOSE
</button>
</button>}
</div>
<div className="h-[550px] overflow-hidden rounded-sm sm:h-[500px] sm:border sm:border-black">
<div className="overflow-hidden h-full">
<iframe
src={src}
allow="camera;"
style={{ ...style, width: '100%', height: '100%', border: 'none' }}
style={{ width: '100%', height: '100%', border: 'none' }}
className="rounded-md"
sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-modals allow-top-navigation-by-user-activation"
/>
</div>
<div className="hidden w-full sm:flex">
<button className="btn-purple w-full" onClick={onClose}>
Close
</button>
<div className="hidden sm:flex flex-row w-full items-center">
{enableConfirmationPrompt ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
onClose()
}}>
CLOSE
</button>}
Comment on lines +77 to +99
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider consolidating mobile and desktop view logic.

The close button implementation is duplicated between mobile and desktop views. Consider using CSS to handle the visibility instead of duplicating the JSX.

-<div className="w-full sm:hidden">
-  {enableConfirmationPrompt ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
-    onClose()
-  }}>
-    CLOSE
-  </button>}
-</div>
-// ... iframe ...
-<div className="hidden sm:flex flex-row w-full items-center">
-  {enableConfirmationPrompt ? areYouSurePromptRow : <button className="btn-purple w-full rounded-none" onClick={() => {
-    onClose()
-  }}>
-    CLOSE
-  </button>}
-</div>
+<div className="w-full sm:hidden">
+  <CloseButtonSection 
+    enableConfirmationPrompt={enableConfirmationPrompt}
+    areYouSurePromptRow={areYouSurePromptRow}
+    onClose={onClose}
+  />
+</div>
+// ... iframe ...
+<div className="hidden sm:flex flex-row w-full items-center">
+  <CloseButtonSection 
+    enableConfirmationPrompt={enableConfirmationPrompt}
+    areYouSurePromptRow={areYouSurePromptRow}
+    onClose={onClose}
+  />
+</div>

Committable suggestion was skipped due to low confidence.

</div>
</div>
</Modal>
Expand Down
15 changes: 4 additions & 11 deletions src/components/Global/KYCComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Step, Steps, useSteps } from 'chakra-ui-steps'
import * as utils from '@/utils'
import * as interfaces from '@/interfaces'
import * as consts from '@/constants'
import IframeWrapper from '../IframeWrapper'
import IframeWrapper, { IFrameWrapperProps } from '../IframeWrapper'
import { useForm } from 'react-hook-form'
import { useAuth } from '@/context/authContext'
import Loading from '../Loading'
Expand All @@ -33,11 +33,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
showError: boolean
errorMessage: string
}>({ showError: false, errorMessage: '' })
const [iframeOptions, setIframeOptions] = useState<{
src: string
visible: boolean
onClose: () => void
}>({
const [iframeOptions, setIframeOptions] = useState<IFrameWrapperProps>({
src: '',
visible: false,
onClose: () => {
Expand Down Expand Up @@ -195,7 +191,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
setLoadingState('Awaiting KYC confirmation')
console.log('Awaiting KYC confirmation...')
const kyclink = utils.convertPersonaUrl(kyc_link)
setIframeOptions({ ...iframeOptions, src: kyclink, visible: true })
setIframeOptions({ ...iframeOptions, src: kyclink, visible: true, closeConfirmMessage: 'Are you sure ? your KYC progress will be lost.' })
await utils.awaitStatusCompletion(
id,
'kyc',
Expand Down Expand Up @@ -402,10 +398,7 @@ export const GlobalKYCComponent = ({ intialStep, offrampForm, setOfframpForm, on
)}
</div>
<IframeWrapper
src={iframeOptions.src}
visible={iframeOptions.visible}
onClose={iframeOptions.onClose}
style={{ width: '100%', height: '500px', border: 'none' }}
{...iframeOptions}
/>
</div>
</div>
Expand Down