fix(params url): added the correct and easy way to add params url int…

…o a iframe
Layer3-Software · Oct 18, 2022 · ad3c3ed · ad3c3ed
1 parent 3cf08ff
commit ad3c3ed
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 26 deletions.
diff --git a/src/components/LayerModal/LayerModal.css b/src/components/LayerModal/LayerModal.css
@@ -6,7 +6,7 @@ body {
 .modal {
   z-index: 9999;
   width: 480px;
-  height: 800px;
+  height: 700px;
   position: absolute;
   left: 50%;
   top: 10%;
@@ -27,7 +27,7 @@ body {
 }
 .modal-iframe {
   width: 480px;
-  height: 800px;
+  height: 710px;
   color: #fff;
   background: #141724;
   border-radius: 6px;

diff --git a/src/components/LayerModal/LayerModal.tsx b/src/components/LayerModal/LayerModal.tsx
@@ -53,6 +53,10 @@ const LayerModal = ({
     return `${start_account}...${end_account}`;
   };
 
+  const params = {
+    bg: modalColor,
+  };
+
   return (
     <div>
       {!iFrameOpen ? (
@@ -76,25 +80,20 @@ const LayerModal = ({
               <img src={timeIcon} alt="time" width="20px" height="20px" />
               <p id="average">Average verification time: 5 minutes</p>
             </div>
-            <a
-              id="btn-link"
-              href={`${WEBSITE}/verification?bg=red`}
-              target="iframe_a"
+
+            <button
+              onClick={openIframe}
+              className="button-basic"
+              id="btn-verify"
             >
-              <button
-                onClick={openIframe}
-                className="button-basic"
-                id="btn-verify"
-              >
-                Start verification
-                <img
-                  src={externalLinkIcon}
-                  alt="time"
-                  width="20px"
-                  height="20px"
-                />
-              </button>
-            </a>
+              Start verification
+              <img
+                src={externalLinkIcon}
+                alt="time"
+                width="20px"
+                height="20px"
+              />
+            </button>
 
             <div className="powered">
               Powered by <span id="kyc">KYCENGINE</span>
@@ -108,7 +107,7 @@ const LayerModal = ({
             className="modal-iframe"
             style={{ backgroundColor: modalColor }}
             name="iframe_a"
-            src="target.html"
+            src={`${WEBSITE}?${new URLSearchParams(params).toString()}`}
             frameBorder="0"
           ></iframe>
         </div>

diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -1,8 +1,8 @@
 export const MODAL_NOT_ALLOWED = {
-  header: "Verification required",
+  header: 'Verification required',
   title: `Get KYCed to use {Service}`,
   description:
-    "Your location does not allow access without successful verification. Verify yourself and your wallet now with our KYC partner KYCENGINE.",
+    'Your location does not allow access without successful verification. Verify yourself and your wallet now with our KYC partner KYCENGINE.',
 };
 
-export const WEBSITE = "https://kycd-ashboard.vercel.app/";
+export const WEBSITE = 'https://lively-sky-0a9d8bd1e.1.azurestaticapps.net';
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
@@ -9,9 +9,11 @@ export default {
 
 const Template: ComponentStory<typeof Modal> = () => {
   const accountVerified = '0xc9f200abB8a628af2ad821755F0119dAed0F5513';
-  const accountNotVerified = '0xc9f200abB8a628af2ad821755F0119dAed0F5515';
+  const accountNotVerified = '0x76b9623D3C55c3cCFe294f53C8E78A892231404F';
 
-  return <Modal kycType={['0']} account={accountVerified} />;
+  return (
+    <Modal kycType={['0']} account={accountNotVerified} modalColor="red" />
+  );
 };
 
 export const ModalTemplate = Template.bind({});