feat: [CM-652][Sale Widget] Non-passport wallet gas warning drawer (#…

…1785)
immutable · May 17, 2024 · 9d9c103 · 9d9c103
1 parent 78598ae
commit 9d9c103
Show file tree

Hide file tree

Showing 7 changed files with 450 additions and 83 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/Hero/WalletWarningHero.tsx b/packages/checkout/widgets-lib/src/components/Hero/WalletWarningHero.tsx
@@ -0,0 +1,174 @@
+/* eslint-disable max-len */
+import { Box } from '@biom3/react';
+
+export function WalletWarningHero() {
+  return (
+    <Box
+      testId="wallet-warning-hero"
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        padding: 'base.spacing.x4',
+      }}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="135"
+        height="137"
+        viewBox="0 0 135 137"
+        fill="none"
+      >
+        <path
+          d="M76.2359 65.9046L76.5093 17.3023C76.5154 15.9172 76.0709 14.9946 75.3432 14.6207C74.0962 13.9799 72.9091 14.4957 71.4796 15.3728L29.2304 41.5137L28.3699 98.7706L76.2396 65.9035L76.2359 65.9046Z"
+          fill="black"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M85.4574 126.862L85.7913 76.8509C85.8104 74.0184 83.7422 70.6325 81.1986 69.3267L47.8588 51.3375C46.707 50.7462 45.7392 49.8676 45.0528 48.788L43.4728 46.3043C42.7864 45.2247 41.8186 44.3461 40.6668 43.7548L36.285 41.5054L31.2785 42.6987L30.9092 101.567C30.9863 102.57 31.673 103.52 32.9448 104.173L80.238 129.343L81.6165 131.639L84.2804 129.667L84.2756 129.664C85.0033 129.123 85.4549 128.164 85.4634 126.862L85.4574 126.862Z"
+          fill="#F3F3F3"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M83.1423 78.7933C83.1615 75.96 81.0928 72.5732 78.5486 71.267L30.2177 45.562C28.852 44.8609 28.163 43.8191 28.1724 42.7358L27.7775 103.281C27.8547 104.284 28.5415 105.234 29.8136 105.887L78.1445 131.592C80.6911 132.9 82.7891 131.652 82.807 128.821L83.141 78.7956L83.1423 78.7933Z"
+          fill="#F3F3F3"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M36.8704 42.6587C36.8646 43.5432 35.5346 44.2721 33.9022 44.2823C32.2698 44.2925 30.9513 43.5854 30.956 42.6973C30.9607 41.8091 32.2918 41.0838 33.9242 41.0736C34.716 41.0681 35.4333 41.2334 35.9635 41.5055C36.5248 41.7937 36.8731 42.2027 36.8704 42.6587Z"
+          fill="#F3F3F3"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M35.2866 42.6695C35.284 43.0802 34.6673 43.4179 33.9096 43.4227C33.1519 43.4276 32.5394 43.098 32.5419 42.6874C32.5445 42.2767 33.1612 41.939 33.9189 41.9342C34.2856 41.9315 34.6182 42.0084 34.8653 42.1352C35.1268 42.2695 35.288 42.4582 35.2853 42.6719L35.2866 42.6695Z"
+          fill="black"
+        />
+        <path
+          d="M70.9278 14.9238L29.4563 40.1902C28.3893 40.9925 27.8613 41.9567 27.8528 42.8886C27.8528 42.8886 27.6953 44.5777 29.8908 45.7049C32.0862 46.832 34.8394 48.2668 34.8394 48.2668L36.1921 47.4119L31.2602 44.8586C29.3494 43.8775 28.9383 42.1986 30.67 40.8949L72.2085 15.5784C73.3786 14.6992 74.4374 14.4968 75.1907 14.8835C75.1907 14.8835 72.8929 13.4441 70.929 14.9215L70.9278 14.9238Z"
+          fill="#F3F3F3"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M81.061 110.741L83.1097 111.399L85.7098 118.337L85.7802 107.795L81.281 106.491L81.061 110.741Z"
+          fill="black"
+        />
+        <path
+          d="M83.1109 113.492C83.1317 110.487 84.0735 109.095 87.3747 109.652C89.1488 109.952 90.9449 109.879 92.6953 109.428L96.5489 108.436C99.889 107.577 102.639 104.113 102.664 100.741C102.686 97.3675 99.9711 95.3116 96.6334 96.1724L91.9523 97.3781C90.365 97.7883 88.6898 97.6786 87.1815 97.0768C84.1108 95.8485 83.2406 94.5701 83.262 91.3841L81.292 93.3582L74.716 111.72L83.112 113.496L83.1109 113.492Z"
+          fill="#F3F3F3"
+        />
+        <path
+          d="M83.1053 113.501C83.1261 110.496 84.0681 109.104 87.3701 109.661C89.1445 109.961 90.9411 109.888 92.6918 109.437L96.5463 108.445C99.8871 107.585 102.638 104.12 102.663 100.747C102.685 97.3736 99.9692 95.3172 96.6308 96.1782L91.9487 97.3841C90.361 97.7944 88.6855 97.6847 87.1768 97.0828C84.1055 95.8542 83.2351 94.5755 83.2564 91.3888"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeMiterlimit="10"
+        />
+        <path
+          d="M100.563 99.4451C99.4403 98.3218 97.1152 98.7714 95.3661 100.45C93.6171 102.129 93.1092 104.399 94.2323 105.522L94.7567 106.048L101.088 99.9711L100.563 99.4451Z"
+          fill="black"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M99.9733 105.056C101.727 103.381 102.236 101.114 101.111 99.9926C99.986 98.8713 97.6528 99.3204 95.8996 100.996C94.1464 102.671 93.637 104.938 94.762 106.059C95.8869 107.18 98.2201 106.731 99.9733 105.056Z"
+          fill="#F3F3F3"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M51.6986 91.7452C50.6642 91.2142 49.827 89.8416 49.8336 88.6901L49.9893 65.7522C49.9984 64.6019 50.8483 64.0955 51.8828 64.6265L72.5076 75.205C73.542 75.736 74.3793 77.1086 74.3726 78.2601L74.2169 101.198C74.2079 102.348 73.3579 102.855 72.3235 102.324L51.6986 91.7452Z"
+          fill="black"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M52.7617 91.0867C51.7272 90.5557 50.89 89.1831 50.8966 88.0315L51.0523 65.0931C51.0553 64.8339 51.101 64.6088 51.1799 64.4189C50.4902 64.3771 49.9962 64.8783 49.9906 65.7516L49.8349 88.69C49.8259 89.8403 50.6655 91.2142 51.7 91.7452L72.3252 102.324C73.1244 102.734 73.8145 102.522 74.0887 101.871C73.8709 101.859 73.6341 101.792 73.3845 101.664L52.7593 91.0855L52.7617 91.0867Z"
+          fill="#F3F3F3"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M66.9057 85.8915L66.8885 88.4023L64.3855 87.1169L61.8849 85.8328L59.3819 84.5474L57.6068 83.6358C57.208 83.4311 56.8775 83.5922 56.8752 83.9917L56.8692 85.042C56.8656 85.4439 57.1908 85.9418 57.592 86.1478L59.3671 87.0594L61.8701 88.3448L61.858 90.1235C61.8544 90.5254 62.1809 91.0209 62.5821 91.2269L63.6294 91.7647C64.0281 91.9695 64.3587 91.8083 64.3622 91.4064L64.3744 89.6277L66.8774 90.9131L68.6526 91.8247C69.0513 92.0295 69.3831 91.8659 69.3854 91.4664L69.3976 89.6877L69.4098 87.909C69.4134 87.5071 69.0868 87.0116 68.6857 86.8056L66.9105 85.894L66.9057 85.8915Z"
+          fill="white"
+        />
+        <path
+          d="M59.3703 79.5438L59.3581 81.3271C59.3569 81.7313 59.6802 82.2293 60.0844 82.4371L61.862 83.3511L64.3662 84.6386L66.8728 85.9274L66.8862 84.1416C66.8874 83.7374 66.5641 83.2394 66.16 83.0316L64.3823 82.1176L61.8781 80.8301L59.3716 79.5414L59.3703 79.5438Z"
+          fill="white"
+        />
+        <path
+          d="M62.6238 73.7033C62.225 73.4985 61.8945 73.6597 61.8922 74.0592L61.88 75.8379L59.377 74.5525L57.6019 73.641C57.2031 73.4362 56.8726 73.5973 56.869 73.9992L56.8569 75.7779L56.8447 77.5566C56.8411 77.9585 57.1677 78.4541 57.5688 78.6601L59.344 79.5717L59.3612 77.0609L61.8641 78.3463L64.3647 79.6304L66.8677 80.9157L68.6429 81.8273C69.0416 82.0321 69.3721 81.8709 69.3757 81.469L69.3829 80.4224C69.3841 80.0193 69.0612 79.5226 68.6601 79.3166L66.8849 78.405L64.3819 77.1197L64.3941 75.341C64.3977 74.9391 64.0711 74.4435 63.67 74.2375L62.6227 73.6997L62.6238 73.7033Z"
+          fill="white"
+        />
+        <path
+          d="M46.8192 101.66L46.8314 99.6311C46.838 98.841 46.2586 97.8985 45.551 97.5353L42.5478 95.9937L42.5679 93.0481C42.5746 92.258 41.9976 91.3167 41.2875 90.9523L38.7449 89.6471C38.3611 89.4501 38.0161 89.4638 37.7758 89.6403L36.4656 90.6093L37.4387 91.7024L37.4277 93.3685L34.4246 91.827C34.0408 91.63 33.6957 91.6437 33.4554 91.8201L32.1452 92.7891L33.1181 93.8094L33.113 94.6306C33.1063 95.4207 33.6858 96.3632 34.3934 96.7264L37.3965 98.268L37.3764 101.214C37.3698 102.004 37.9468 102.945 38.6568 103.309L39.7002 103.845L40.8571 105.593L42.1673 104.624C42.3691 104.473 42.4965 104.205 42.4976 103.842L42.5177 100.897L44.2088 101.765L45.1822 103.415L46.4924 102.446C46.6966 102.297 46.8216 102.028 46.8227 101.665L46.8192 101.66Z"
+          fill="black"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M45.5137 102.623L45.5258 100.594C45.5325 99.8036 44.953 98.8609 44.2453 98.4977L41.2417 96.9558L41.2618 94.0097C41.2671 93.2219 40.6913 92.2781 39.9812 91.9135L37.4382 90.6082C36.7281 90.2437 36.1452 90.5927 36.1386 91.3829L36.1184 94.329L33.1149 92.7872C32.4047 92.4227 31.8181 92.7728 31.8152 93.5619L31.8031 95.5912C31.7964 96.3815 32.3759 97.3241 33.0836 97.6874L36.0872 99.2293L36.0671 102.175C36.0605 102.966 36.6376 103.907 37.3477 104.272L39.8907 105.577C40.6008 105.941 41.1837 105.592 41.1903 104.802L41.2105 101.856L44.214 103.398C44.9242 103.762 45.5108 103.412 45.5137 102.623Z"
+          fill="white"
+          stroke="black"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.4175 54.343L85.7276 37.2672L70.5726 15.9224L55.4175 54.343Z"
+          fill="#F6F8B9"
+          stroke="#131313"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.4176 54.3431L51.6289 52.2086L66.7839 13.7881L70.5727 15.9226L55.4176 54.3431Z"
+          fill="#131313"
+          stroke="#131313"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M69.1528 25.261L71.9944 23.6602V34.3325L69.1528 35.9334V25.261Z"
+          fill="#131313"
+          stroke="#131313"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M69.1528 38.0676L71.9944 36.4667V39.6684L69.1528 41.2693V38.0676Z"
+          fill="#131313"
+          stroke="#131313"
+          strokeWidth="0.8"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </Box>
+  );
+}
diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -7,6 +7,12 @@
       },
       "walletSelection": {
         "heading": "Choose a wallet"
+      },
+      "nonPassportDrawer": {
+        "heading": "Non-Passport users will need IMX for gas.",
+        "body1": "We recommend using <layerswapLink>Layerswap</layerswapLink> to bridge funds onto Immutable zkEVM, with refuel switched on so you receive some IMX.",
+        "body2": "Alternatively, pay and play easily with a gas free Immutable Passport.",
+        "buttonText": "Proceed anyway"
       }
     },
     "CONNECT_SUCCESS": {

diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -7,7 +7,13 @@
       },
       "walletSelection": {
         "heading": "ウォレットを選択"
-      }
+      },
+      "nonPassportDrawer": {
+        "heading": "パスポート未使用者はガス代としてIMXが必要です。",
+        "body1": "資金をImmutable zkEVMにブリッジするには、<layerswapLink>Layerswap</layerswapLink>の使用をお勧めします。リファエルをオンにしてIMXを受け取ります。",
+        "body2": "または、ガス無料のImmutable Passportで簡単に支払いとプレイができます。",
+        "buttonText": "それでも進む"
+      }    
     },
     "CONNECT_SUCCESS": {
       "status": "接続が安全です",

diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -7,6 +7,12 @@
       },
       "walletSelection": {
         "heading": "지갑 선택"
+      },
+      "nonPassportDrawer": {
+        "heading": "비 패스포트 사용자는 가스 비용으로 IMX가 필요합니다.",
+        "body1": "자금을 Immutable zkEVM으로 브리징하기 위해 <layerswapLink>Layerswap</layerswapLink>을 사용하는 것을 권장합니다. 리퓨엘이 켜져 있으면 IMX를 받을 수 있습니다.",
+        "body2": "또는 가스 비용이 없는 Immutable Passport로 쉽게 결제하고 플레이하세요.",
+        "buttonText": "어쨌든 진행"
       }
     },
     "CONNECT_SUCCESS": {

diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -7,6 +7,12 @@
       },
       "walletSelection": {
         "heading": "选择一个钱包"
+      },
+      "nonPassportDrawer": {
+        "heading": "非Passport用户需要IMX来支付燃气费。",
+        "body1": "我们建议使用<layerswapLink>Layerswap</layerswapLink>将资金桥接到Immutable zkEVM，并打开加油功能，以便您能收到一些IMX。",
+        "body2": "或者，可以使用免燃气费的Immutable Passport轻松支付和玩游戏。",
+        "buttonText": "继续操作"
       }
     },
     "CONNECT_SUCCESS": {

diff --git a/packages/checkout/widgets-lib/src/widgets/connect/components/NonPassportWarningDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/connect/components/NonPassportWarningDrawer.tsx
@@ -0,0 +1,101 @@
+import {
+  Body,
+  Box,
+  ButtCon,
+  Button,
+  Drawer,
+  Heading,
+  Link,
+} from '@biom3/react';
+import { Trans, useTranslation } from 'react-i18next';
+import { WalletWarningHero } from 'components/Hero/WalletWarningHero';
+
+export function NonPassportWarningDrawer({
+  visible,
+  onCloseDrawer,
+  handleCtaButtonClick,
+}: {
+  visible: boolean;
+  onCloseDrawer: () => void;
+  handleCtaButtonClick: () => void;
+}) {
+  const { t } = useTranslation();
+
+  return (
+    <Drawer size="full" visible={visible} showHeaderBar={false}>
+      <Drawer.Content>
+        <ButtCon
+          icon="Close"
+          variant="tertiary"
+          sx={{
+            pos: 'absolute',
+            top: 'base.spacing.x5',
+            left: 'base.spacing.x5',
+            backdropFilter: 'blur(30px)',
+          }}
+          onClick={onCloseDrawer}
+        />
+        <WalletWarningHero />
+        <Box sx={{ px: 'base.spacing.x6' }}>
+          <Heading
+            sx={{
+              marginTop: 'base.spacing.x6',
+              marginBottom: 'base.spacing.x2',
+              textAlign: 'center',
+            }}
+          >
+            {t('views.CONNECT_WALLET.nonPassportDrawer.heading')}
+          </Heading>
+          <Body
+            size="medium"
+            sx={{
+              display: 'block',
+              textAlign: 'center',
+              color: 'base.color.text.body.secondary',
+              marginBottom: 'base.spacing.x21',
+            }}
+          >
+            <Trans
+              i18nKey={t('views.CONNECT_WALLET.nonPassportDrawer.body1')}
+              components={{
+                layerswapLink: (
+                  <Link
+                    size="small"
+                    rc={(
+                      <a
+                        target="_blank"
+                        href="https://toolkit.immutable.com/cex-deposit"
+                        rel="noreferrer"
+                      />
+                    )}
+                  />
+                ),
+              }}
+            />
+            <br />
+            <br />
+            {t('views.CONNECT_WALLET.nonPassportDrawer.body2')}
+          </Body>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            paddingX: 'base.spacing.x6',
+            width: '100%',
+          }}
+        >
+          <Button
+            sx={{ width: '100%', marginBottom: 'base.spacing.x10' }}
+            testId="non-passport-cta-button"
+            variant="primary"
+            size="large"
+            onClick={handleCtaButtonClick}
+          >
+            {t('views.CONNECT_WALLET.nonPassportDrawer.buttonText')}
+          </Button>
+        </Box>
+      </Drawer.Content>
+    </Drawer>
+  );
+}