Add Rococo RPCs (#3297)

* Add Rococo RPCs

* Adjust child margin

* test-parachain

* Bump API

* Alphabetical

* Rococo logo

* Rococo colors

* Rococo svg images

* Rococo color adjust

* Optional proxy module

* Radiu buttons

* Adjust sizing

* Rococo 2

* Logo update

* Adjust

* cumulus-test-parachain

* Session progress needs staking

* Radio adjust

* Adjust isRado checked

* Remove extra files

* Update packages/apps-config/src/settings/endpoints.ts

packages/apps-config/src/api/spec/cumulus-test-parachain.ts

@@ -0,0 +1,11 @@
+// Copyright 2017-2020 @polkadot/apps-config authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+// structs need to be in order
+/* eslint-disable sort-keys */
+
+export default {
+  Address: 'AccountId',
+  LookupSource: 'AccountId'
+};

packages/apps-config/src/api/spec/index.ts

@@ -4,6 +4,7 @@
 
 import acala from './acala';
 import centrifugeChain from './centrifuge-chain';
+import testPara from './cumulus-test-parachain';
 import edgeware from './edgeware';
 import encointerNodeNotee from './encointer-node-notee';
 import encointerNodeTeeproxy from './encointer-node-teeproxy';
@@ -14,6 +15,7 @@ import stablePoc from './stable-poc';
 export default {
   acala,
   'centrifuge-chain': centrifugeChain,
+  'cumulus-test-parachain': testPara,
   edgeware,
   'encointer-node': encointerNodeNotee,
   'encointer-node-notee': encointerNodeNotee,

packages/apps-config/src/settings/endpoints.ts

@@ -93,6 +93,29 @@ function createTest (t: TFunction): LinkOption[] {
       text: t<string>('rpc.westend', 'Westend (Polkadot Testnet, hosted by Parity)', { ns: 'apps-config' }),
       value: 'wss://westend-rpc.polkadot.io'
     },
+    {
+      info: 'rococo',
+      text: t<string>('rpc.rococo', 'Rococo (Polkadot Testnet, hosted by Parity)', { ns: 'apps-config' }),
+      value: 'wss://rococo-rpc.polkadot.io'
+    },
+    {
+      info: 'rococoTick',
+      isChild: true,
+      text: t<string>('rpc.rococo.tick', 'Tick (Polkadot Testpara, hosted by Parity)', { ns: 'apps-config' }),
+      value: 'wss://tick-rpc.polkadot.io'
+    },
+    {
+      info: 'rococoTrick',
+      isChild: true,
+      text: t<string>('rpc.rococo.trick', 'Trick (Polkadot Testpara, hosted by Parity)', { ns: 'apps-config' }),
+      value: 'wss://trick-rpc.polkadot.io'
+    },
+    {
+      info: 'rococoTrack',
+      isChild: true,
+      text: t<string>('rpc.rococo.track', 'Track (Polkadot Testpara, hosted by Parity)', { ns: 'apps-config' }),
+      value: 'wss://track-rpc.polkadot.io'
+    },
     // alphabetical based on chain name
     {
       info: 'nodle',

packages/apps-config/src/ui/general/index.ts

@@ -8,6 +8,10 @@ const emptyColor = '#999';
 const chainKulupu = '#003366';
 const chainPolkadot = '#e6007a';
 const chainKusama = '#000'; // '#d32e79';
+const chainRocco = '#b300b3';
+const chainRoccoTick = '#488025';
+const chainRoccoTrack = '#802548';
+const chainRoccoTrick = '#254880';
 const chainWestend = '#da68a7';
 
 const nodeCentrifuge = '#fcc367';
@@ -23,6 +27,10 @@ const chainColors: Record<string, any> = [
   ['Kusama CC3', chainKusama],
   ['Polkadot', chainPolkadot],
   ['Polkadot CC1', chainPolkadot],
+  ['Rococo', chainRocco],
+  ['Tick', chainRoccoTick],
+  ['Track', chainRoccoTrack],
+  ['Trick', chainRoccoTrick],
   ['Westend', chainWestend]
 ].reduce((colors, [chain, color]): Record<string, any> => ({
   ...colors,

packages/apps-config/src/ui/logos/index.ts

@@ -6,6 +6,10 @@
 
 // anything for a specific chain, most would probably fit into the node category (but allow for chain-specific)
 import chainKusama from './chains/kusama-128.gif';
+import chainRococo from './chains/rococo.svg';
+import chainRococoTick from './chains/rococo-tick.svg';
+import chainRococoTrack from './chains/rococo-track.svg';
+import chainRococoTrick from './chains/rococo-trick.svg';
 
 // defaults for the node type, assuming we don't have a specific chain, but rather match on the implementation
 import nodeAcala from './nodes/acala-circle.svg';
@@ -29,7 +33,11 @@ const chainLogos: Record<string, any> = [
   ['Kusama', chainKusama], // new name after CC3
   ['Kusama CC1', chainKusama],
   ['Kusama CC2', chainKusama],
-  ['Kusama CC3', chainKusama]
+  ['Kusama CC3', chainKusama],
+  ['Rococo', chainRococo],
+  ['Tick', chainRococoTick],
+  ['Track', chainRococoTrack],
+  ['Trick', chainRococoTrick]
 ].reduce((logos, [chain, logo]): Record<string, any> => ({
   ...logos,
   [(chain as string).toLowerCase()]: logo
@@ -64,6 +72,10 @@ const namedLogos: Record<string, any> = {
   kusama: chainKusama,
   nodle: nodeNodle,
   polkadot: nodePolkadot,
+  rococo: chainRococo,
+  rococoTick: chainRococoTick,
+  rococoTrack: chainRococoTrack,
+  rococoTrick: chainRococoTrick,
   substrate: nodeSubstrate,
   westend: nodePolkadot
 };