Add csm staking (#173) (#174)

* Add csm staking

* Fix content

* Fix rewards

packages/apps-ipfs/src/market/index.css

@@ -95,6 +95,12 @@ button:focus {outline:0!important;}
   background: url('./nodata.png') no-repeat center center;
   background-size: 600px auto;
 }
+.comingsoon {
+  width: 100%;
+  height: 100vh;
+  background: url('./coming_soon.svg') no-repeat center center;
+  background-size: 600px auto;
+}
 .orderList-header {
   font-size: 14px;
   padding: 10px 0;

packages/apps-routing/src/csmStaking.ts

@@ -0,0 +1,21 @@
+// Copyright 2017-2021 @polkadot/apps-routing authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { TFunction } from 'i18next';
+import type { Route } from './types';
+
+import Component from '@polkadot/app-csmStaking';
+
+export default function create (t: TFunction): Route {
+  return {
+    Component,
+    display: {
+      needsApi: [
+      ]
+    },
+    group: 'csmStaking',
+    icon: '500px',
+    name: 'csmStaking',
+    text: t('nav.csmStaking', 'CSM Staking', { ns: 'apps-routing' })
+  };
+}

packages/apps-routing/src/index.ts

@@ -12,6 +12,7 @@ import calendar from './calendar';
 import claims from './claims';
 import contracts from './contracts';
 import council from './council';
+import csmStaking from './csmStaking';
 import democracy from './democracy';
 import explorer from './explorer';
 import extrinsics from './extrinsics';
@@ -55,6 +56,7 @@ export default function create (t: TFunction): Routes {
     contracts(t),
     storage(t),
     ipfsFiles(t),
+    csmStaking(t),
     extrinsics(t),
     rpc(t),
     signing(t),

packages/apps-routing/src/types.ts

@@ -4,7 +4,7 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import type { AppProps, BareProps } from '@polkadot/react-components/types';
 
-export type RouteGroup = 'accounts' | 'developer' | 'governance' | 'network' | 'settings' | 'storage';
+export type RouteGroup = 'accounts' | 'developer' | 'governance' | 'network' | 'settings' | 'storage' | 'csmStaking';
 
 export interface RouteProps extends AppProps, BareProps {
   location: any;

packages/apps/public/locales/zh/translation.json

@@ -1493,5 +1493,14 @@
   "The remaining claim limit is ": "剩余认领上限为",
   ", If your claim amount is greater than the claim limit, please wait for the limit update": ", 如果你的认领数量大于认领上限, 请等待认领上限更新",
   "0. Please make sure you have the authority to make signature with the private key of the wallet account, using an exchange account to sent a transfer (withdrawal) transaction will be invalidated and cause asset loss.": "0. 请确认您使用的是带私钥签名权限的钱包(metamask, imtoken等)进行转账，使用交易所账户发起转账(提币)交易, 均会失效, 造成资产损失.",
-  " You are responsible for the consequences!": " 后果自负!"
+  " You are responsible for the consequences!": " 后果自负!",
+  "nav.csmStaking": "CSM质押",
+  "CSM Staking": "CSM质押",
+  "Total Rewards": "总奖励额",
+  "Issued Rewards": "已奖励",
+  "Pending Rewards": "剩余奖励",
+  "Daily Rewards": "每日奖励",
+  "Storage Rewards": "存储文件大小",
+  "Effective stake": "总有效质押",
+  "Daily Rewards per 1K CSM": "每1000CSM每日奖励"
 }

packages/apps/src/Menu/index.tsx

@@ -102,7 +102,8 @@ function Menu ({ className = '' }: Props): React.ReactElement<Props> {
     governance: t('Governance'),
     network: t('Network'),
     settings: t('Settings'),
-    storage: t('ipfs')
+    storage: t('ipfs'),
+    csmStaking: t('CSM Staking')
   });
 
   const routeRef = useRef(createRoutes(t));

packages/page-csmStaking/README.md

@@ -0,0 +1 @@
+# @polkadot/app-csmStaking

packages/page-csmStaking/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@polkadot/app-csmStaking",
+    "private": true,
+    "version": "0.74.1",
+    "main": "index.js",
+    "repository": "github:polkadot-js/apps",
+    "author": "yuhui <[email protected]>",
+    "maintainers": [],
+    "contributors": [],
+    "license": "Apache-2.0"
+}

packages/page-csmStaking/src/Actions/index.tsx

@@ -0,0 +1,33 @@
+// Copyright 2017-2021 @polkadot/app-accounts authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable */
+
+import type { ActionStatus } from '@polkadot/react-components/Status/types';
+
+import React, {  } from 'react';
+import styled from 'styled-components';
+
+interface Props {
+  className?: string;
+  onStatusChange: (status: ActionStatus) => void;
+}
+
+
+function Actions ({ }: Props): React.ReactElement<Props> {
+
+  return (
+    <div className={'comingsoon'}/>
+  );
+}
+
+export default React.memo(styled(Actions)`
+  .filter--tags {
+    .ui--Dropdown {
+      padding-left: 0;
+
+      label {
+        left: 1.55rem;
+      }
+    }
+  }
+`);

packages/page-csmStaking/src/Overview/Summary.tsx

@@ -0,0 +1,93 @@
+// Copyright 2017-2021 @polkadot/app-staking authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+/* eslint-disable */
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { CardSummary, Spinner, SummaryBox } from '@polkadot/react-components';
+import { useTranslation } from '@polkadot/apps/translate';
+
+interface Props {
+  nominators?: string[];
+}
+
+function Summary({ }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  return (
+    <SummaryBox>
+      <section className='media--800'>
+        <CardSummary label={t<string>('Total Rewards')}>
+          {<>{`54,000 CRU`}</>}
+        </CardSummary>
+      </section>
+      <section>
+        <CardSummary
+          className='media--1000'
+          label={t<string>('Issued Rewards')}
+        >
+          <Spinner noLabel />
+        </CardSummary>
+      </section>
+      <section>
+        <CardSummary
+          className='media--1100'
+          label={t<string>('Pending Rewards')}
+        >
+          <Spinner noLabel />
+        </CardSummary>
+      </section>
+      <section>
+        <CardSummary
+          className='media--1100'
+          label={t<string>('Daily Rewards')}
+        >
+          {<>{`400 CRU`}</>}
+        </CardSummary>
+      </section>
+      <section>
+
+        <CardSummary
+          className='media--1100'
+          label={t<string>('Storage Rewards')}
+        >
+          <Spinner noLabel />
+        </CardSummary>
+      </section>
+      <section>
+
+        <CardSummary
+          className='media--1100'
+          label={t<string>('Effective stake')}
+        >
+          <Spinner noLabel />
+        </CardSummary>
+      </section>
+      <section>
+        <CardSummary
+          className='media--1100'
+          label={t<string>('Daily Rewards per 1K CSM')}
+        >
+          <Spinner noLabel />
+        </CardSummary>
+      </section>
+    </SummaryBox>
+  );
+}
+
+export default React.memo(styled(Summary)`
+  .validator--Account-block-icon {
+    display: inline-block;
+    margin-right: 0.75rem;
+    margin-top: -0.25rem;
+    vertical-align: middle;
+  }
+
+  .validator--Summary-authors {
+    .validator--Account-block-icon+.validator--Account-block-icon {
+      margin-left: -1.5rem;
+    }
+  }
+`);

packages/page-csmStaking/src/Overview/index.tsx

@@ -0,0 +1,39 @@
+// Copyright 2017-2021 @polkadot/app-accounts authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+/* eslint-disable */
+
+import type { ActionStatus } from '@polkadot/react-components/Status/types';
+
+import React, {  } from 'react';
+import styled from 'styled-components';
+import promotional from '../images/promotional.png';
+import Summary from './Summary';
+
+interface Props {
+  className?: string;
+  onStatusChange: (status: ActionStatus) => void;
+}
+
+
+function Overview ({ }: Props): React.ReactElement<Props> {
+
+  return (<>
+    {/* <div className={'promotional'}/> */}
+    <img src={promotional as string} style={{ "marginRight":"auto", 'textAlign': 'center', 'display': 'block'}}></img>
+    <Summary></Summary>
+    <div className={'comingsoon'}/>
+  </>
+  );
+}
+
+export default React.memo(styled(Overview)`
+  .filter--tags {
+    .ui--Dropdown {
+      padding-left: 0;
+
+      label {
+        left: 1.55rem;
+      }
+    }
+  }
+`);