add: fraud prevention

package.json

@@ -31,6 +31,7 @@
         "@material-ui/icons": "^4.11.2",
         "@react-pdf/renderer": "^1.6.12",
         "@typeform/embed": "^0.34.0",
+        "@types/react-modal": "^3.12.1",
         "copy-webpack-plugin": "^7.0.0",
         "cross-env": "^7.0.3",
         "firebase": "^8.2.4",
@@ -48,6 +49,7 @@
         "react-ga": "^3.3.0",
         "react-helmet": "^6.1.0",
         "react-i18next": "^11.8.12",
+        "react-modal": "^3.14.3",
         "react-pdf": "^5.1.0",
         "react-router-dom": "^5.2.0",
         "react-router-hash-link": "^2.3.1",

src/App.js

@@ -14,6 +14,7 @@ import shikin_kessai from './components/shikin_kessai';
 import member from './components/member';
 import Terms from './components/Terms';
 import furusatoNozei from './components/hometown-tax-terms';
+import Prevention from './components/fraud-prevention';
 
 library.add(fab, fas)
 
@@ -32,6 +33,7 @@ function App() {
           <Route exact path="/terms" component={Terms} />
           <Route exact path="/terms/hometown-tax" component={furusatoNozei} />
           <Route exact path="/member" component={member} />
+          <Route exact path="/prevention" component={Prevention} />
           <Route
             exact
             path="/Use"

src/components/fraud-prevention.jsx

@@ -0,0 +1,65 @@
+// eslint-disable-next-line
+
+import React from "react";
+import Footer from "./Footer";
+import Header from "./Header";
+import "../css/prevention.css";
+
+class ScrollToTopOnMount extends React.Component {
+  componentDidMount(prevProps) {
+    window.scrollTo(0, 0);
+  }
+
+  render() {
+    return null;
+  }
+}
+
+const Prevention = () => {
+  return (
+    <>
+      <ScrollToTopOnMount />
+      <Header />
+      <main className="prevention_main">
+        <div className="prevention-main">
+          <div className="prevention-head">
+            <p className="prevention-date" data-i18n="prevention.date">
+              2021年9月
+            </p>
+            <p className="prevention-company" data-i18n="prevention.com">
+              JPYC株式会社
+            </p>
+          </div>
+          <h2 className="prevention-page-title" data-i18n="prevention.mainText">
+            JPYC利用規約
+          </h2>
+          <p className="prevention-text-first" data-i18n="prevention.first">
+            日頃は多大なるご愛顧を賜り、誠にありがとうございます。
+          </p>
+          <p className="prevention-text-first" data-i18n="prevention.second">
+            おかげさまで、JPYCは、2021年1月27日のリリース以来、日本初のERC20日本円連動ステーブルコインとして、大変ご好評いただいております。
+          </p>
+          <p className="prevention-text-first" data-i18n="prevention.third">
+            暗号資産交換業などでは厳格なKYC（Know Your
+            Customer）を求められていますが、JPYCは、前払式支払手段であるため、法律上、KYCは求められていません。
+          </p>
+          <p className="prevention-text-first" data-i18n="prevention.fourth">
+            KYCなくお気軽にご利用いただけることが、JPYCがご好評いただいている魅力のひとつであると考えております。
+          </p>
+          <p className="prevention-text-first" data-i18n="prevention.fifth">
+            しかしながら、今後、より多くの方に、JPYCを安全安心にご利用いただけるよう、自主的に、高額な取引などにつきましては、不正利用防止のために最低限必要な確認等を実施させていただきます。なお、どのような場合に、どのように確認等を実施するかにつきましては、セキュリティの観点から、公表は差し控えさせていただきます。
+          </p>
+          <p className="prevention-text-first" data-i18n="prevention.sixth">
+            ユーザーのみなさまには、ご不便をお掛けしますが、ご理解ご協力の程、何卒よろしくお願い申し上げます。
+          </p>
+          <p className="prevention-text-first" data-i18n="prevention.seventh">
+            引き続き、JPYCが、日本を代表する前払式支払手段扱いの日本円連動ステーブルコインとなるため、業界をリードできるよう、行政や金融機関とのコミュニケーションを密に取り、不正利用防止に取り組んで参ります。
+          </p>
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default Prevention;

src/css/prevention.css

@@ -0,0 +1,17 @@
+.prevention-page-title {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  text-align: center;
+}
+
+.prevention-head {
+  text-align: right;
+  padding-top: 40px;
+}
+
+.prevention-main {
+  width: 86%;
+  margin: 0 auto;
+  padding-bottom: 40px;
+  color: #2b2a2a;
+}

src/locales/en.json

@@ -27,6 +27,7 @@
     "enWP": "White Paper（English）",
     "JIP": "JPYC-Incentive Program（JIP）",
     "FAQ": "Frequently Asked Questions about JPYC（FAQ）",
+    "fraudPrevention": "Fraud Prevention",
     "PaymentServicesAct": "Indication based on Payment Services Act",
     "SpecifiedCommercialTransactionAct1": "Indication based on Specified Commerial Transaction Act（JPYC Gift Exchange）",
     "SpecifiedCommercialTransactionAct2": "Indication based on Specified Commerial Transaction Act（JPYC Shopping）",

src/locales/ja.json

@@ -27,6 +27,7 @@
     "enWP": "ホワイトペーパー（英語）",
     "JIP": "JPYC-インセンティブ提供プログラム（JIP）",
     "FAQ": "JPYCについてよくあるご質問（FAQ）",
+    "fraudPrevention": "不正利用防止のためのご協力のお願い",
     "PaymentServicesAct": "資金決済法に基づく表示",
     "SpecifiedCommercialTransactionAct1": "特定商取引法に基づく表示（JPYCギフト交換）",
     "SpecifiedCommercialTransactionAct2": "特定商取引法に基づく表示（JPYCショッピング）",
@@ -199,6 +200,18 @@
       }
     }
   },
+  "prevention": {
+    "mainText": "不正利用防止に関するご協力のお願い",
+    "date": "2021年9月",
+    "com": "JPYC株式会社",
+    "first": "日頃は多大なるご愛顧を賜り、誠にありがとうございます。",
+    "second": "おかげさまで、JPYCは、2021年1月27日のリリース以来、日本初のERC20日本円連動ステーブルコインとして、大変ご好評いただいております。",
+    "third": "暗号資産交換業などでは厳格なKYC（Know Your Customer）を求められていますが、JPYCは、前払式支払手段であるため、法律上、KYCは求められていません。",
+    "fourth": "KYCなくお気軽にご利用いただけることが、JPYCがご好評いただいている魅力のひとつであると考えております。",
+    "fifth": "しかしながら、今後、より多くの方に、JPYCを安全安心にご利用いただけるよう、自主的に、高額な取引などにつきましては、不正利用防止のために最低限必要な確認等を実施させていただきます。なお、どのような場合に、どのように確認等を実施するかにつきましては、セキュリティの観点から、公表は差し控えさせていただきます。",
+    "sixth": "ユーザーのみなさまには、ご不便をお掛けしますが、ご理解ご協力の程、何卒よろしくお願い申し上げます。",
+    "seventh": "引き続き、JPYCが、日本を代表する前払式支払手段扱いの日本円連動ステーブルコインとなるため、業界をリードできるよう、行政や金融機関とのコミュニケーションを密に取り、不正利用防止に取り組んで参ります。"
+  },
   "law": {
     "mainText": "特定商取引法に基づく表示（JPYCギフトプリカ交換）",
     "table": {