Merge pull request #1420 from crypto-com/feat/governance-warning

Feature: Add warning sign to Governance Proposal

Author: crypto-matto

src/language/en-US.json

@@ -592,6 +592,7 @@
   "staking.modal6.note.part5": "in order to broadcast this transaction successfully",
   "governance.title": "Governance",
   "governance.description": "You may see all proposals and cast your votes here.",
+  "governance.warning": "This proposal contains external links that may lead to suspicious websites. Please open with caution.",
   "governance.votingHistoryBtn": "View Voting History",
   "governance.tab1": "All",
   "governance.tab2": "Voting",

src/language/ko-KR.json

@@ -589,6 +589,7 @@
   "staking.modal6.note.part5": "이 거래를 성공적으로 발송하기 위해서",
   "governance.title": "거버넌스",
   "governance.description": "여기에서 모든 제안을 보고 투표할 수 있습니다.",
+  "governance.warning": "이 제안서에는 의심스러운 웹사이트로 이동할 수 있는 외부 링크가 포함되어 있습니다. 주의해서 열어주세요.",
   "governance.votingHistoryBtn": "투표 기록 보기",
   "governance.tab1": "모두",
   "governance.tab2": "투표",

src/language/zh-CN.json

@@ -592,6 +592,7 @@
   "staking.modal6.note.part5": "以完成此交易",
   "governance.title": "治理",
   "governance.description": "你可以在这里看到所有提案并行使你的投票权。",
+  "governance.warning": "此提案包含可能导向可疑网站的外部连结。请谨慎开启。",
   "governance.votingHistoryBtn": "查看投票历史",
   "governance.tab1": "所有",
   "governance.tab2": "投票中",

src/language/zh-HK.json

@@ -592,6 +592,7 @@
   "staking.modal6.note.part5": "以完成此交易",
   "governance.title": "治理",
   "governance.description": "你可以在這裡看到所有提案並行使你的投票權。",
+  "governance.warning": "此提案包含可能導向可疑網站的外部連結。請謹慎開啟。",
   "governance.votingHistoryBtn": "查看投票歷史",
   "governance.tab1": "所有",
   "governance.tab2": "投票中",

src/pages/governance/components/ProposalView.tsx

@@ -4,7 +4,7 @@ import Big from 'big.js';
 import '../governance.less';
 import 'antd/dist/antd.css';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Layout, Radio, Button, Card, Progress, Form, InputNumber, Spin } from 'antd';
+import { Layout, Radio, Button, Card, Progress, Form, InputNumber, Spin, Alert } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import { useTranslation } from 'react-i18next';
@@ -307,11 +307,22 @@ export const ProposalView = (props: any) => {
                 {allProps?.proposal?.proposal_id}
               </div>
             </div>
-
+            {allProps.proposal?.content?.description.includes('http') ? 
+              <div className="warning">
+                <Alert
+                  type="warning"
+                  message={t('governance.warning')}
+                  showIcon
+                />
+              </div>
+              : <></>}
             <div className="description">
-              {allProps.proposal?.content?.description ? allProps.proposal?.content.description.split('\\n').map((p, i) => (
-                <p key={i}>{p}</p>
-              )) : <p key={0}>(No description)</p>}
+              {allProps.proposal?.content?.description ? 
+                allProps.proposal?.content.description.split(/\n|\\n/).map((p, i) => (
+                  <p key={i}>{p}</p>
+                )) 
+                : <p key={0}>(No description)</p>
+              }
             </div>
             <div className="item">
               {allProps.proposal?.status === ProposalStatuses.PROPOSAL_STATUS_VOTING_PERIOD ? (

src/pages/governance/governance.less

@@ -7,6 +7,9 @@
       margin-bottom: 20px;
       color: @font-color;
     }
+    .warning{
+      margin-bottom: 20px;
+    }
     .amount {
       .ant-form-item {
         margin: 0;