diff --git a/src/assets/icons/ico/switchGRDFDesktop.svg b/src/assets/icons/ico/switchGRDFDesktop.svg
new file mode 100644
index 0000000000000000000000000000000000000000..19bf66996ba838fb3c52f3c98e82856a711a8543
--- /dev/null
+++ b/src/assets/icons/ico/switchGRDFDesktop.svg
@@ -0,0 +1,45 @@
+<svg width="335" height="256" viewBox="0 0 335 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.55" filter="url(#filter0_f)">
+<rect x="18" y="18" width="299" height="220" rx="2" fill="#121212"/>
+</g>
+<rect x="18" y="18" width="299" height="220" rx="4" fill="white"/>
+<rect x="273" y="73" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="292.5" cy="75.5" r="7.5" fill="#01B1AE"/>
+<rect x="273" y="96" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="292.5" cy="98.5" r="7.5" fill="#01B1AE"/>
+<rect x="273" y="119" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="292.5" cy="121.5" r="7.5" fill="#01B1AE"/>
+<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 300 160)" fill="#D5D5D5"/>
+<circle r="7.5" transform="matrix(-1 0 0 1 280.5 162.5)" fill="#AEAEAE"/>
+<rect x="273" y="183" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="292.5" cy="185.5" r="7.5" fill="#01B1AE"/>
+<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 300 206)" fill="#D5D5D5"/>
+<circle r="7.5" transform="matrix(-1 0 0 1 280.5 208.5)" fill="#AEAEAE"/>
+<path d="M32 77L41.0476 73L40.0423 77L48.5873 73L47.0794 77L57.1323 73L55.6243 77L67.1852 73L64.672 77L75.2275 73L73.7196 77L84.7778 73L82.2645 77L92.3175 73L91.3122 77L101.365 73L99.3545 77L109.91 73L107.899 77L118.455 73L115.942 77L127 73" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M127.005 73L126 77L134.545 73L133.037 77L143.09 73L141.582 77L153.143 73L150.63 77L161.185 73L159.677 77L170.735 73L168.222 77L178.275 73L177.27 77L187.323 73L185.312 77L195.868 73L193.857 77L204.413 73L201.899 77L212.958 73" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M75.0053 95L74 99L82.545 95L81.037 99L91.0899 95L89.582 99L101.143 95L98.6296 99L109.185 95L107.677 99L118.735 95L116.222 99L126.275 95L125.27 99L135.323 95L133.312 99L143.868 95L141.857 99L152.413 95L149.899 99L160.958 95" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M102.005 117L101 121L109.545 117L108.037 121L118.09 117L116.582 121L128.143 117L125.63 121L136.185 117L134.677 121L145.735 117L143.222 121L153.275 117L152.27 121L162.323 117L160.312 121L170.868 117L168.857 121L179.413 117L176.899 121L187.958 117" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M93.0053 161L92 165L100.545 161L99.037 165L109.09 161L107.582 165L119.143 161L116.63 165L127.185 161L125.677 165L136.735 161L134.222 165L144.275 161L143.27 165L153.323 161L151.312 165L161.868 161L159.857 165L170.413 161L167.899 165L178.958 161" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M119.005 183L118 187L126.545 183L125.037 187L135.09 183L133.582 187L145.143 183L142.63 187L153.185 183L151.677 187L162.735 183L160.222 187L170.275 183L169.27 187L179.323 183L177.312 187L187.868 183L185.857 187L196.413 183L193.899 187L204.958 183" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M102.005 207L101 211L109.545 207L108.037 211L118.09 207L116.582 211L128.143 207L125.63 211L136.185 207L134.677 211L145.735 207L143.222 211L153.275 207L152.27 211L162.323 207L160.312 211L170.868 207L168.857 211L179.413 207L176.899 211L187.958 207" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 99L41.0476 95L40.0423 99L48.5873 95L47.0794 99L57.1323 95L55.6243 99L67.1852 95L64.672 99L75.2275 95" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 121L41.0476 117L40.0423 121L48.5873 117L47.0794 121L57.1323 117L55.6243 121L67.1852 117L64.672 121L75.2275 117L73.7196 121L84.7778 117L82.2645 121L92.3175 117L91.3122 121L101.365 117" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 187L41.0476 183L40.0423 187L48.5873 183L47.0794 187L57.1323 183L55.6243 187L67.1852 183L64.672 187L75.2275 183L73.7196 187L84.7778 183L82.2645 187L92.3175 183L91.3122 187L101.365 183L99.3545 187L109.91 183L107.899 187L118.455 183" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 211L41.0476 207L40.0423 211L48.5873 207L47.0794 211L57.1323 207L55.6243 211L67.1852 207L64.672 211L75.2275 207L73.7196 211L84.7778 207L82.2645 211L92.3175 207L91.3122 211L101.365 207" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 165L41.0476 161L40.0423 165L48.5873 161L47.0794 165L57.1323 161L55.6243 165L67.1852 161L64.672 165L75.2275 161L73.7196 165L84.7778 161L82.2645 165L92.3175 161" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 22C18 19.7909 19.7909 18 22 18H313C315.209 18 317 19.7909 317 22V51H18V22Z" fill="#01B1AE"/>
+<path d="M39.1588 34.7091C39.8892 34.7428 39.9893 35.3904 40.0013 35.5602V38.9181C39.9847 38.9392 39.9681 38.9607 39.9512 38.9824C39.879 39.0754 39.8038 39.1722 39.7258 39.2592C39.5829 39.4159 39.3546 39.6577 39.2689 39.739C37.6995 41.2258 35.8554 41.7672 34.1354 41.7672C32.7216 41.7672 30.7763 41.3212 29.1192 39.7359C26.308 37.0351 26.2798 32.7103 29.1177 30.0352C29.6434 29.5431 29.847 29.3592 30.6836 28.8848C31.8382 28.2276 33.1469 28 34.2041 28C35.1323 28 36.1486 28.2004 36.9095 28.5143C37.0868 28.5859 37.2869 28.6714 37.5384 28.8162C38.2117 29.2048 39.0951 29.8861 39.5366 30.9633V30.9683H31.2333V36.0008C31.2963 36.8979 31.4917 37.6099 32.0437 38.1104C32.4895 38.5162 33.1704 38.7821 34.2041 38.8867C34.5351 38.9224 34.906 38.9396 35.3177 38.9396L37.1224 38.9354C37.1054 38.9296 37.037 38.8867 36.7867 38.5763C36.4754 38.1859 36.4055 37.5175 36.4055 37.0182H36.4039V34.7083L39.1588 34.7091Z" fill="white"/>
+<path d="M65.3996 28.028V34.7739C66.0084 34.2753 66.9752 34.109 68.4898 34.0113L68.4863 30.971H70.9051C72.1771 30.9139 75.0058 30.536 75 28.028H65.3996Z" fill="white"/>
+<path d="M55.13 46.6042C55.13 46.8241 54.948 47 54.7286 47H47.3261C47.1083 47 46.931 46.8241 46.931 46.6042V45.4683C46.931 45.2495 47.1083 45.0717 47.3261 45.0717H54.7286C54.948 45.0717 55.13 45.2495 55.13 45.4683V46.6042Z" fill="white"/>
+<path d="M72.7146 33.934H73.3554C73.3554 33.934 73.3539 34.3901 73.3539 34.5682C73.3539 35.9688 72.1167 36.6789 69.6824 36.6789H68.4865V38.9988C68.4865 39.8154 68.291 41.7 66.4358 41.7395H65.3994V38.3412C65.693 34.4196 70.8991 33.9762 72.7146 33.934Z" fill="white"/>
+<path d="M58.6291 28.0314L51.8945 28.0291V41.7392C54.2418 41.4511 55.1001 40.3455 55.2245 38.7158V30.9694H58.1849C58.2213 30.9718 58.2627 30.9741 58.3043 30.9764C58.3758 30.9803 58.448 30.9843 58.4966 30.9889C59.9011 31.1552 60.7961 31.7676 60.8869 34.5784C60.8973 34.6884 60.894 34.8121 60.891 34.9245C60.8897 34.9741 60.8884 35.0216 60.8884 35.0646C60.8162 39.6182 57.3235 41.0127 55.3887 41.5216L55.3786 41.525C55.3555 41.5346 55.3389 41.5461 55.3389 41.5695V41.6921C55.3389 41.717 55.3586 41.7358 55.3786 41.7385L55.3852 41.7392H55.6119C58.4321 41.7392 64.0999 41.0591 64.0999 34.9144V34.8022C64.0666 29.4768 61.7536 28.0314 58.6291 28.0314Z" fill="white"/>
+<path d="M46.0177 30.9822L44.4259 30.9691C44.3243 30.9691 44.2254 30.9649 44.1242 30.9576C42.1623 30.8185 41.0414 29.3352 40.5844 28.5573C40.4797 28.3979 40.3801 28.2342 40.2858 28.0614C40.2858 28.0614 40.2762 28.0281 40.2924 28.0281H44.8453C46.3688 28.0281 47.0034 28.1216 47.6779 28.3837C47.837 28.4427 48.0027 28.5155 48.1785 28.5964C49.1561 29.0524 49.8186 29.8693 50.0836 30.9174C50.123 31.0619 50.1481 31.2163 50.1697 31.3707C50.1994 31.5742 50.2164 31.7861 50.2164 32.0053C50.2195 33.6351 49.4014 34.5643 48.2696 35.215C48.2681 35.2177 48.2495 35.2284 48.2495 35.2284C48.2341 35.2342 48.2341 35.2342 48.2252 35.2414C48.2127 35.2475 48.2016 35.2542 48.1912 35.2605C48.1846 35.2644 48.1782 35.2683 48.1719 35.2717C48.1684 35.2717 48.1518 35.284 48.1518 35.284C48.0197 35.3499 47.8899 35.3905 47.769 35.42C47.75 35.4239 47.7318 35.4288 47.7147 35.4333C47.6999 35.4373 47.6858 35.4411 47.6728 35.4438V32.2337C47.6311 31.2443 46.7535 30.9856 46.2487 30.9856C46.2327 30.9856 46.2162 30.9858 46.1992 30.986C46.144 30.9865 46.0836 30.9871 46.0177 30.9822Z" fill="white"/>
+<path d="M42.635 34.7091C41.8679 34.7386 41.7937 35.4402 41.7849 35.5778V37.6479H44.6661C44.9089 38.0019 45.1505 38.3524 45.3752 38.6783L45.6306 39.0488C45.955 39.5121 46.2664 39.9494 46.3958 40.1168C46.4046 40.1284 46.4149 40.1429 46.4269 40.1598C46.5904 40.3898 47.0831 41.0827 48.7845 41.4971C49.4069 41.6479 50.0927 41.6928 50.4763 41.7179C50.5458 41.7224 50.6058 41.7263 50.6533 41.7301L50.824 41.7385L50.8058 41.7056C50.8058 41.7056 50.4976 41.2817 50.1082 40.6134L50.0234 40.4677C49.4873 39.5466 47.6691 36.4226 47.3201 35.8127C47.0057 35.2628 46.5051 35.018 45.9929 34.8693H45.9879C45.6209 34.7681 45.218 34.7294 44.9164 34.7141C44.903 34.7135 44.89 34.7127 44.877 34.7119C44.8542 34.7105 44.8316 34.7091 44.8082 34.7091H42.635Z" fill="white"/>
+<defs>
+<filter id="filter0_f" x="0" y="0" width="335" height="256" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="9" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/icons/ico/switchGRDFMobile.svg b/src/assets/icons/ico/switchGRDFMobile.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5b262e5689da1f088a42a6320e37882bc1e44c68
--- /dev/null
+++ b/src/assets/icons/ico/switchGRDFMobile.svg
@@ -0,0 +1,39 @@
+<svg width="210" height="256" viewBox="0 0 210 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.55" filter="url(#filter0_f)">
+<rect x="18" y="18" width="174" height="220" rx="2" fill="#121212"/>
+</g>
+<rect x="18" y="18" width="174" height="220" rx="4" fill="white"/>
+<rect x="150" y="73" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="169.5" cy="75.5" r="7.5" fill="#01B1AE"/>
+<rect x="150" y="96" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="169.5" cy="98.5" r="7.5" fill="#01B1AE"/>
+<rect x="150" y="119" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="169.5" cy="121.5" r="7.5" fill="#01B1AE"/>
+<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 177 160)" fill="#D5D5D5"/>
+<circle r="7.5" transform="matrix(-1 0 0 1 157.5 162.5)" fill="#AEAEAE"/>
+<rect x="150" y="183" width="24" height="6" rx="3" fill="#D5D5D5"/>
+<circle cx="169.5" cy="185.5" r="7.5" fill="#01B1AE"/>
+<rect width="24" height="6" rx="3" transform="matrix(-1 0 0 1 177 206)" fill="#D5D5D5"/>
+<circle r="7.5" transform="matrix(-1 0 0 1 157.5 208.5)" fill="#AEAEAE"/>
+<path d="M32 77L41.0476 73L40.0423 77L48.5873 73L47.0794 77L57.1323 73L55.6243 77L67.1852 73L64.672 77L75.2275 73L73.7196 77L84.7778 73L82.2645 77L92.3175 73L91.3122 77L101.365 73L99.3545 77L109.91 73L107.899 77L118.455 73L115.942 77L127 73" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 99L41.0476 95L40.0423 99L48.5873 95L47.0794 99L57.1323 95L55.6243 99L67.1852 95L64.672 99L75.2275 95" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 121L41.0476 117L40.0423 121L48.5873 117L47.0794 121L57.1323 117L55.6243 121L67.1852 117L64.672 121L75.2275 117L73.7196 121L84.7778 117L82.2645 121L92.3175 117L91.3122 121L101.365 117" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 187L41.0476 183L40.0423 187L48.5873 183L47.0794 187L57.1323 183L55.6243 187L67.1852 183L64.672 187L75.2275 183L73.7196 187L84.7778 183L82.2645 187L92.3175 183L91.3122 187L101.365 183L99.3545 187L109.91 183L107.899 187L118.455 183" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 210L41.0476 207L40.0423 210L48.5873 207L47.0794 210L57.1323 207L55.6243 210L67.1852 207L64.672 210L75.2275 207L73.7196 210L84.7778 207L82.2645 210L92.3175 207L91.3122 210L101.365 207" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M32 165L41.0476 161L40.0423 165L48.5873 161L47.0794 165L57.1323 161L55.6243 165L67.1852 161L64.672 165L75.2275 161L73.7196 165L84.7778 161L82.2645 165L92.3175 161" stroke="#878787" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 22C18 19.7909 19.7909 18 22 18H188C190.209 18 192 19.7909 192 22V51H18V22Z" fill="#01B1AE"/>
+<path d="M39.1588 34.7091C39.8892 34.7428 39.9893 35.3904 40.0013 35.5602V38.9181C39.9847 38.9392 39.9681 38.9607 39.9512 38.9824C39.879 39.0754 39.8038 39.1722 39.7258 39.2592C39.5829 39.4159 39.3546 39.6577 39.2689 39.739C37.6995 41.2258 35.8554 41.7672 34.1354 41.7672C32.7216 41.7672 30.7763 41.3212 29.1192 39.7359C26.308 37.0351 26.2798 32.7103 29.1177 30.0352C29.6434 29.5431 29.847 29.3592 30.6836 28.8848C31.8382 28.2276 33.1469 28 34.2041 28C35.1323 28 36.1486 28.2004 36.9095 28.5143C37.0868 28.5859 37.2869 28.6714 37.5384 28.8162C38.2117 29.2048 39.0951 29.8861 39.5366 30.9633V30.9683H31.2333V36.0008C31.2963 36.8979 31.4917 37.6099 32.0437 38.1104C32.4895 38.5162 33.1704 38.7821 34.2041 38.8867C34.5351 38.9224 34.906 38.9396 35.3177 38.9396L37.1224 38.9354C37.1054 38.9296 37.037 38.8867 36.7867 38.5763C36.4754 38.1859 36.4055 37.5175 36.4055 37.0182H36.4039V34.7083L39.1588 34.7091Z" fill="white"/>
+<path d="M65.3996 28.028V34.7739C66.0084 34.2753 66.9752 34.109 68.4898 34.0113L68.4863 30.971H70.9051C72.1771 30.9139 75.0058 30.536 75 28.028H65.3996Z" fill="white"/>
+<path d="M55.13 46.6042C55.13 46.8241 54.948 47 54.7286 47H47.3261C47.1083 47 46.931 46.8241 46.931 46.6042V45.4683C46.931 45.2495 47.1083 45.0717 47.3261 45.0717H54.7286C54.948 45.0717 55.13 45.2495 55.13 45.4683V46.6042Z" fill="white"/>
+<path d="M72.7146 33.934H73.3554C73.3554 33.934 73.3539 34.3901 73.3539 34.5682C73.3539 35.9688 72.1167 36.6789 69.6824 36.6789H68.4865V38.9988C68.4865 39.8154 68.291 41.7 66.4358 41.7395H65.3994V38.3412C65.693 34.4196 70.8991 33.9762 72.7146 33.934Z" fill="white"/>
+<path d="M58.6291 28.0314L51.8945 28.0291V41.7392C54.2418 41.4511 55.1001 40.3455 55.2245 38.7158V30.9694H58.1849C58.2213 30.9718 58.2627 30.9741 58.3043 30.9764C58.3758 30.9803 58.448 30.9843 58.4966 30.9889C59.9011 31.1552 60.7961 31.7676 60.8869 34.5784C60.8973 34.6884 60.894 34.8121 60.891 34.9245C60.8897 34.9741 60.8884 35.0216 60.8884 35.0646C60.8162 39.6182 57.3235 41.0127 55.3887 41.5216L55.3786 41.525C55.3555 41.5346 55.3389 41.5461 55.3389 41.5695V41.6921C55.3389 41.717 55.3586 41.7358 55.3786 41.7385L55.3852 41.7392H55.6119C58.4321 41.7392 64.0999 41.0591 64.0999 34.9144V34.8022C64.0666 29.4768 61.7536 28.0314 58.6291 28.0314Z" fill="white"/>
+<path d="M46.0177 30.9822L44.4259 30.9691C44.3243 30.9691 44.2254 30.9649 44.1242 30.9576C42.1623 30.8185 41.0414 29.3352 40.5844 28.5573C40.4797 28.3979 40.3801 28.2342 40.2858 28.0614C40.2858 28.0614 40.2762 28.0281 40.2924 28.0281H44.8453C46.3688 28.0281 47.0034 28.1216 47.6779 28.3837C47.837 28.4427 48.0027 28.5155 48.1785 28.5964C49.1561 29.0524 49.8186 29.8693 50.0836 30.9174C50.123 31.0619 50.1481 31.2163 50.1697 31.3707C50.1994 31.5742 50.2164 31.7861 50.2164 32.0053C50.2195 33.6351 49.4014 34.5643 48.2696 35.215C48.2681 35.2177 48.2495 35.2284 48.2495 35.2284C48.2341 35.2342 48.2341 35.2342 48.2252 35.2414C48.2127 35.2475 48.2016 35.2542 48.1912 35.2605C48.1846 35.2644 48.1782 35.2683 48.1719 35.2717C48.1684 35.2717 48.1518 35.284 48.1518 35.284C48.0197 35.3499 47.8899 35.3905 47.769 35.42C47.75 35.4239 47.7318 35.4288 47.7147 35.4333C47.6999 35.4373 47.6858 35.4411 47.6728 35.4438V32.2337C47.6311 31.2443 46.7535 30.9856 46.2487 30.9856C46.2327 30.9856 46.2162 30.9858 46.1992 30.986C46.144 30.9865 46.0836 30.9871 46.0177 30.9822Z" fill="white"/>
+<path d="M42.635 34.7091C41.8679 34.7386 41.7937 35.4402 41.7849 35.5778V37.6479H44.6661C44.9089 38.0019 45.1505 38.3524 45.3752 38.6783L45.6306 39.0488C45.955 39.5121 46.2664 39.9494 46.3958 40.1168C46.4046 40.1284 46.4149 40.1429 46.4269 40.1598C46.5904 40.3898 47.0831 41.0827 48.7845 41.4971C49.4069 41.6479 50.0927 41.6928 50.4763 41.7179C50.5458 41.7224 50.6058 41.7263 50.6533 41.7301L50.824 41.7385L50.8058 41.7056C50.8058 41.7056 50.4976 41.2817 50.1082 40.6134L50.0234 40.4677C49.4873 39.5466 47.6691 36.4226 47.3201 35.8127C47.0057 35.2628 46.5051 35.018 45.9929 34.8693H45.9879C45.6209 34.7681 45.218 34.7294 44.9164 34.7141C44.903 34.7135 44.89 34.7127 44.877 34.7119C44.8542 34.7105 44.8316 34.7091 44.8082 34.7091H42.635Z" fill="white"/>
+<defs>
+<filter id="filter0_f" x="0" y="0" width="210" height="256" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="9" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/Connection/ModalGRDF.scss b/src/components/Connection/ModalGRDF.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8ff74359e776278107d534f88a37da0ac584013d
--- /dev/null
+++ b/src/components/Connection/ModalGRDF.scss
@@ -0,0 +1,20 @@
+@import 'src/styles/base/color';
+
+.grdfAuthModal {
+ padding: 0 1.5rem;
+ p {
+ color: white;
+ }
+ .yellowText {
+ color: $gold-shadow;
+ }
+ .button-ok {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ margin: 1.5rem auto;
+ padding: 1rem 2rem;
+ transition: all 300ms ease;
+ }
+}
diff --git a/src/components/Connection/ModalGRDF.tsx b/src/components/Connection/ModalGRDF.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..15f722e015b647b021dc6a0ac096ab8a56f09bed
--- /dev/null
+++ b/src/components/Connection/ModalGRDF.tsx
@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+
+import Modal from 'components/CommonKit/Modal/Modal'
+import StyledButton from 'components/CommonKit/Button/StyledButton'
+import switchMobile from 'assets/icons/ico/switchGRDFMobile.svg'
+import switchDesktop from 'assets/icons/ico/switchGRDFDesktop.svg'
+
+import './ModalGRDF.scss'
+import { ScreenType } from 'enum/screen.enum'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
+import { useSelector } from 'react-redux'
+import { EcolyoState } from 'store'
+
+interface ModalGRDFProps {
+ open: boolean
+ isWaiting?: boolean
+ status: string
+ handleCloseClick: () => void
+ handleSubmit: () => void
+}
+
+const ModalGRDF: React.FC<ModalGRDFProps> = ({
+ open,
+ handleCloseClick,
+ handleSubmit,
+ isWaiting,
+ status,
+}: ModalGRDFProps) => {
+ const { t } = useI18n()
+ const { screenType } = useSelector((state: EcolyoState) => state.global)
+
+ useEffect(() => {
+ status && status === 'idle' && handleCloseClick
+ }, [status])
+ return (
+ <>
+ <Modal open={open} handleCloseClick={handleCloseClick}>
+ {screenType === ScreenType.MOBILE ? (
+ <StyledIcon icon={switchMobile} size={200} />
+ ) : (
+ <StyledIcon icon={switchDesktop} size={300} />
+ )}
+ <div className="grdfAuthModal">
+ <p className="text-16-normal">
+ {t('auth.grdfgrandlyon.authModal.text1')}
+ <span className="text-16-bold yellowText">
+ {t('auth.grdfgrandlyon.authModal.text2')}
+ </span>
+ </p>
+ <p className="text-16-normal">
+ {t('auth.grdfgrandlyon.authModal.listItem1')}
+ <br />
+ {t('auth.grdfgrandlyon.authModal.listItem2')}
+ </p>
+ <p className="text-16-normal">
+ {t('auth.grdfgrandlyon.authModal.endText1')}
+ <span className="text-16-bold yellowText">
+ {t('auth.grdfgrandlyon.authModal.duration')}
+ </span>
+ {t('auth.grdfgrandlyon.authModal.endText2')}
+ </p>
+ <StyledButton
+ className="button-ok"
+ onClick={handleSubmit}
+ disabled={isWaiting}
+ >
+ {t('auth.grdfgrandlyon.authModal.buttonText')}
+ {isWaiting && <StyledBlackSpinner size={30} />}
+ </StyledButton>
+ </div>
+ </Modal>
+ </>
+ )
+}
+
+export default ModalGRDF
diff --git a/src/components/Connection/OAuthForm.tsx b/src/components/Connection/OAuthForm.tsx
index 29643099a035586e14dd09a8488508e2de9e9160..252f08b711621538fced7e818129dcbdd312207b 100644
--- a/src/components/Connection/OAuthForm.tsx
+++ b/src/components/Connection/OAuthForm.tsx
@@ -13,6 +13,7 @@ import iconEglLogo from 'assets/icons/visu/egl-logo.svg'
import StyledAuthButton from 'components/CommonKit/Button/StyledAuthButton'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
+import ModalGRDF from './ModalGRDF'
interface OAuthFormProps {
konnector: Konnector
@@ -29,6 +30,11 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
const { t } = useI18n()
const client = useClient()
const [status, setStatus] = useState<string>(IDLE)
+ const [openGRDFModal, setOpenGRDFModal] = useState<boolean>(false)
+
+ const toggleGRDFModal = useCallback(() => {
+ setOpenGRDFModal(prev => !prev)
+ }, [openGRDFModal])
const endOAuth = () => {
setStatus(IDLE)
@@ -65,7 +71,11 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
<StyledAuthButton
type="button"
color="primary"
- onClick={handleSubmit}
+ onClick={
+ konnector.slug === fluidconfig[FluidType.GAS].konnectorConfig.slug
+ ? toggleGRDFModal
+ : handleSubmit
+ }
disabled={isWaiting}
>
<div className="authform-button-content">
@@ -92,6 +102,15 @@ const OAuthForm: React.FC<OAuthFormProps> = ({
t={t}
/>
)}
+ {openGRDFModal && (
+ <ModalGRDF
+ open={openGRDFModal}
+ handleCloseClick={toggleGRDFModal}
+ handleSubmit={handleSubmit}
+ isWaiting={isWaiting}
+ status={status}
+ />
+ )}
</>
)
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 87b80927deb33ba215470002dfb0676f0a67e29c..700f73a1e17c8e299e2d759ca86ec13bc6ccb37b 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -265,7 +265,17 @@
"title": "Pas de compte GRDF ?",
"text": "Vous pouvez le créer en vous munissant d'une facture de gaz."
},
- "create_account": "Je crée mon compte GRDF"
+ "create_account": "Je crée mon compte GRDF",
+ "authModal": {
+ "text1": "La visualisation de vos données sur Ecolyo demande",
+ "text2": " l’activation de tous les paramètres à l’exception de :",
+ "listItem1": "- mes données publiées",
+ "listItem2": "- mes données contractuelles",
+ "endText1": "Une période de consentement de ",
+ "duration": "1 an ",
+ "endText2": "minimum est demandée pour une expérience optimale.",
+ "buttonText": "J'ai compris"
+ }
},
"eglgrandlyon": {
"connect": {
@@ -347,16 +357,16 @@
}
},
"card_done": {
- "day" : " jour",
- "days" : " jours",
- "saving" : "Economie de",
- "depense" : "Dépense de",
- "win" : "Gagné",
- "almostWin" : "Presque gagné",
- "lost" : "Perdu",
- "stars" : " étoiles",
- "get_in" : "obtenues en ",
- "final_defi" : "sur le défi final"
+ "day": " jour",
+ "days": " jours",
+ "saving": "Economie de",
+ "depense": "Dépense de",
+ "win": "Gagné",
+ "almostWin": "Presque gagné",
+ "lost": "Perdu",
+ "stars": " étoiles",
+ "get_in": "obtenues en ",
+ "final_defi": "sur le défi final"
}
},
"duel": {