Merge branch 'develop' into parcel-migration

# Conflicts:
#	.gitignore
#	package.json
#	src/components/crowdloan/CrowdloanPage.tsx
#	yarn.lock

.gitignore

@@ -25,4 +25,4 @@ yarn-error.log*
 # bundler
 .parcel-cache
 .cache
-/dist
+/dist

src/components/crowdloan/CrowdloanPage.css

@@ -0,0 +1,23 @@
+.crowdloan-page {
+    background-color: #282c34;
+    color: #eee;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.crowdloan-table {
+    margin-left: 10px;
+    margin-top: 4px;
+}
+
+.crowdloan-table th {
+    height: 40px;
+}
+
+.spinner-loading {
+    width: 50%;
+    margin-top: 50px;
+    margin-left: auto;
+    margin-right: auto;
+}

src/components/crowdloan/CrowdloanPage.tsx

@@ -1,5 +1,56 @@
 import React from 'react';
+import { SpinnerDotted } from 'spinners-react';
+import { useCrowdloans } from '../../polk-auction-api/ApiClient';
+import { selectRelayChain } from '../../store/application-state/ApplicationStateSelector';
+import { PolkAuctionStore } from '../../store/PolkAuctionStore';
+import { numberWithCommas } from '../../utils/DisplayUtils';
+import './CrowdloanPage.css';
 
 export const CrowdloanPage = () => {
-  return <div></div>;
+  const relayChain = PolkAuctionStore.useState(selectRelayChain);
+
+  const crowdloans = useCrowdloans(relayChain.name);
+  return (
+    <div className='crowdloan-page'>
+      {crowdloans.loading ? (
+        <div className='spinner-loading'>
+          <SpinnerDotted color='#eee' />
+        </div>
+      ) : (
+        <table className='crowdloan-table'>
+          <tbody>
+            <tr>
+              <th>Parachain Id</th>
+              <th>Name</th>
+              <th>Depositor</th>
+              <th>Lease Periods</th>
+              <th>Raised</th>
+            </tr>
+            {crowdloans.data?.funds
+              ?.sort((f, next) => f.parachainId - next.parachainId)
+              ?.map((f) => {
+                return (
+                  <tr>
+                    <td>{f.parachainId}</td>
+                    <td>{f.parachainName}</td>
+                    <td>{f.fundInfo.depositor}</td>
+                    <td>
+                      {f.fundInfo.firstPeriod}
+                      {'-'}
+                      {f.fundInfo.lastPeriod}
+                    </td>
+                    <td>
+                      {numberWithCommas(Math.ceil(f.fundInfo.raised / (relayChain.planckDenomination! as number)))}
+                      {'/'}
+                      {numberWithCommas(Math.ceil(f.fundInfo.cap / (relayChain.planckDenomination! as number)))}{' '}
+                      {relayChain.unit}
+                    </td>
+                  </tr>
+                );
+              })}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
 };

src/polk-auction-api/ApiClient.ts

@@ -1,10 +1,12 @@
 import axios from 'axios';
 import { useAxios } from 'use-axios-client';
+import { CrowdloanExtended } from './models/Crowdloan';
 import { ParachainExtended } from './models/Parachain';
 
 const endPointUrl = process.env.POLK_AUCTION_ENDPOINT;
 
 const parachainPath = '/parachain';
+const crowdloanPath = '/crowdloan';
 
 const apiClient = () => {
   return axios.create({
@@ -20,3 +22,12 @@ export const useParachains = (relaychain: string) => {
 
   return { data, loading };
 };
+
+export const useCrowdloans = (relaychain: string) => {
+  const client = apiClient();
+  const url = `${crowdloanPath}/${relaychain.toLowerCase()}`;
+
+  const { data, loading } = useAxios<CrowdloanExtended>({ axiosInstance: client, url });
+
+  return { data, loading };
+};

src/polk-auction-api/models/Crowdloan.ts

@@ -0,0 +1,27 @@
+interface Verifier {
+  sr25519: string;
+}
+
+interface FundInfo {
+  depositor: string;
+  verifier?: Verifier;
+  deposit: number;
+  raised: number;
+  end: number;
+  cap: number;
+  firstPeriod: string;
+  lastPeriod: string;
+  trieIndex: string;
+}
+
+interface FundExtended {
+  parachainId: number;
+  parachainName?: string;
+  website?: string;
+  polkadotJsExplorerUrl?: string;
+  fundInfo: FundInfo;
+}
+
+export interface CrowdloanExtended {
+  funds: FundExtended[];
+}