Merge pull request #2898 from JoinColony/feature/2868-add-total-sold-…

…vs-available-widget

Add total sold vs available widget

package.json

@@ -193,6 +193,7 @@
     "react-router-dom": "^5.1.2",
     "react-tabs": "^3.1.0",
     "react-textarea-autosize": "^8.3.3",
+    "react-textfit": "^1.1.1",
     "recompose": "^0.30.0",
     "redux": "^4.0.1",
     "redux-immutable": "^4.0.0",

src/data/generated.ts

@@ -238,6 +238,7 @@ export type Query = {
   coinMachineSalePeriods: SalePeriod;
   coinMachineSaleTokens: SaleTokens;
   coinMachineTokenBalance: Scalars['String'];
+  coinMachineTotalTokens: TotalTokens;
   coinMachineTransactionAmount: TrannsactionAmount;
   colonies: Array<SubgraphColony>;
   colony: SubgraphColony;
@@ -363,6 +364,11 @@ export type QueryCoinMachineTokenBalanceArgs = {
 };
 
 
+export type QueryCoinMachineTotalTokensArgs = {
+  colonyAddress: Scalars['String'];
+};
+
+
 export type QueryCoinMachineTransactionAmountArgs = {
   colonyAddress: Scalars['String'];
   transactionHash: Scalars['String'];
@@ -1291,6 +1297,11 @@ export type SalePeriod = {
   price: Scalars['String'];
 };
 
+export type TotalTokens = {
+  totalAvailableTokens: Scalars['String'];
+  totalSoldTokens: Scalars['String'];
+};
+
 export type ColonyExtension = {
   address: Scalars['String'];
   id: Scalars['String'];
@@ -2187,6 +2198,13 @@ export type CoinMachineTokenBalanceQueryVariables = Exact<{
 
 export type CoinMachineTokenBalanceQuery = Pick<Query, 'coinMachineTokenBalance'>;
 
+export type CoinMachineTotalTokensQueryVariables = Exact<{
+  colonyAddress: Scalars['String'];
+}>;
+
+
+export type CoinMachineTotalTokensQuery = { coinMachineTotalTokens: Pick<TotalTokens, 'totalAvailableTokens' | 'totalSoldTokens'> };
+
 export type CoinMachineHasWhitelistQueryVariables = Exact<{
   colonyAddress: Scalars['String'];
 }>;
@@ -6067,6 +6085,40 @@ export function useCoinMachineTokenBalanceLazyQuery(baseOptions?: Apollo.LazyQue
 export type CoinMachineTokenBalanceQueryHookResult = ReturnType<typeof useCoinMachineTokenBalanceQuery>;
 export type CoinMachineTokenBalanceLazyQueryHookResult = ReturnType<typeof useCoinMachineTokenBalanceLazyQuery>;
 export type CoinMachineTokenBalanceQueryResult = Apollo.QueryResult<CoinMachineTokenBalanceQuery, CoinMachineTokenBalanceQueryVariables>;
+export const CoinMachineTotalTokensDocument = gql`
+    query CoinMachineTotalTokens($colonyAddress: String!) {
+  coinMachineTotalTokens(colonyAddress: $colonyAddress) @client {
+    totalAvailableTokens
+    totalSoldTokens
+  }
+}
+    `;
+
+/**
+ * __useCoinMachineTotalTokensQuery__
+ *
+ * To run a query within a React component, call `useCoinMachineTotalTokensQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCoinMachineTotalTokensQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCoinMachineTotalTokensQuery({
+ *   variables: {
+ *      colonyAddress: // value for 'colonyAddress'
+ *   },
+ * });
+ */
+export function useCoinMachineTotalTokensQuery(baseOptions?: Apollo.QueryHookOptions<CoinMachineTotalTokensQuery, CoinMachineTotalTokensQueryVariables>) {
+        return Apollo.useQuery<CoinMachineTotalTokensQuery, CoinMachineTotalTokensQueryVariables>(CoinMachineTotalTokensDocument, baseOptions);
+      }
+export function useCoinMachineTotalTokensLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CoinMachineTotalTokensQuery, CoinMachineTotalTokensQueryVariables>) {
+          return Apollo.useLazyQuery<CoinMachineTotalTokensQuery, CoinMachineTotalTokensQueryVariables>(CoinMachineTotalTokensDocument, baseOptions);
+        }
+export type CoinMachineTotalTokensQueryHookResult = ReturnType<typeof useCoinMachineTotalTokensQuery>;
+export type CoinMachineTotalTokensLazyQueryHookResult = ReturnType<typeof useCoinMachineTotalTokensLazyQuery>;
+export type CoinMachineTotalTokensQueryResult = Apollo.QueryResult<CoinMachineTotalTokensQuery, CoinMachineTotalTokensQueryVariables>;
 export const CoinMachineHasWhitelistDocument = gql`
     query CoinMachineHasWhitelist($colonyAddress: String!) {
   coinMachineHasWhitelist(colonyAddress: $colonyAddress) @client

src/data/graphql/queries/coinMachine.graphql

@@ -60,6 +60,13 @@ query CoinMachineTokenBalance($colonyAddress: String!) {
   coinMachineTokenBalance(colonyAddress: $colonyAddress) @client
 }
 
+query CoinMachineTotalTokens($colonyAddress: String!) {
+  coinMachineTotalTokens(colonyAddress: $colonyAddress) @client {
+    totalAvailableTokens
+    totalSoldTokens
+  }
+}
+
 query CoinMachineHasWhitelist($colonyAddress: String!) {
   coinMachineHasWhitelist(colonyAddress: $colonyAddress) @client
 }

src/data/graphql/typeDefs/coinMachine.ts

@@ -44,6 +44,11 @@ export default gql`
     colonyAddress: String!
   }
 
+  type TotalTokens {
+    totalAvailableTokens: String!
+    totalSoldTokens: String!
+  }
+
   extend type Query {
     coinMachineSaleTokens(colonyAddress: String!): SaleTokens!
     coinMachineCurrentPeriodPrice(colonyAddress: String!): String!
@@ -62,6 +67,7 @@ export default gql`
     coinMachineCurrentSalePeriod(colonyAddress: String!): CurrentSalePeriod!
     currentPeriodTokens(colonyAddress: String!): CurrentPeriodTokens!
     coinMachineTokenBalance(colonyAddress: String!): String!
+    coinMachineTotalTokens(colonyAddress: String!): TotalTokens!
     coinMachinePeriods(
       skip: Int!
       first: Int!

src/data/resolvers/coinMachine.ts

@@ -262,6 +262,69 @@ export const coinMachineResolvers = ({
         return null;
       }
     },
+    async coinMachineTotalTokens(_, { colonyAddress }) {
+      try {
+        const coinMachineClient = await colonyManager.getClient(
+          ClientType.CoinMachineClient,
+          colonyAddress,
+        );
+        const tokenClient = (await colonyManager.getClient(
+          ClientType.TokenClient,
+          colonyAddress,
+        )) as TokenClient;
+
+        const currentTokenBalance = await coinMachineClient.getTokenBalance();
+
+        const subgraphData = await apolloClient.query<
+          SubgraphCoinMachinePeriodsQuery,
+          SubgraphCoinMachinePeriodsQueryVariables
+        >({
+          query: SubgraphCoinMachinePeriodsDocument,
+          variables: {
+            colonyAddress: colonyAddress.toLowerCase(),
+            extensionAddress: coinMachineClient.address.toLowerCase(),
+            limit: 100,
+          },
+          fetchPolicy: 'network-only',
+        });
+
+        const [extensionInitialised] = (
+          subgraphData?.data?.extensionInitialisedEvents || []
+        ).map(parseSubgraphEvent);
+
+        /*
+         * We use the `FromChain` suffix to make these events more easily
+         * recognizable when reading the code
+         */
+        const transferLogsFromChain = await getLogs(
+          tokenClient,
+          tokenClient.filters.Transfer(null, coinMachineClient.address, null),
+          {
+            fromBlock: extensionInitialised?.blockNumber,
+          },
+        );
+
+        const transferEventsFromChain = await Promise.all(
+          transferLogsFromChain.map(async (log) =>
+            tokenClient.interface.parseLog(log),
+          ),
+        );
+        const totalAvailableTokens = transferEventsFromChain.reduce(
+          (acc, event) => event.values[2].add(acc),
+          '0',
+        );
+
+        return {
+          totalAvailableTokens: totalAvailableTokens.toString(),
+          totalSoldTokens: totalAvailableTokens
+            .sub(currentTokenBalance)
+            .toString(),
+        };
+      } catch (error) {
+        console.error(error);
+        return null;
+      }
+    },
     /*
      * WARNING!
      *

src/modules/dashboard/components/CoinMachine/BuyTokens/BuyTokens.tsx

@@ -201,7 +201,7 @@ const BuyTokens = ({
   const getFormattedCost = useCallback(
     (amount) => {
       const decimalCost = new Decimal(amount)
-        .times(salePriceData.coinMachineCurrentPeriodPrice)
+        .times(salePriceData?.coinMachineCurrentPeriodPrice || '0')
         .toFixed(0, Decimal.ROUND_HALF_UP);
 
       return getFormattedTokenValue(

src/modules/dashboard/components/CoinMachine/CoinMachine.css

@@ -24,7 +24,7 @@
   min-height: 600px;
   width: 1030px;
   grid-template-columns: [buy] 340px [remaining] 220px [comments] auto;
-  grid-template-rows: [time] 180px [tokens] 180px [sales] 315px;
+  grid-template-rows: [time] 113px [tokens] 113px [totals] 113px [sales] 315px;
   column-gap: 20px;
   row-gap: 20px;
 }
@@ -55,7 +55,14 @@
   composes: container;
   padding: 0;
   grid-column: remaining / comments;
-  grid-row: tokens / sales;
+  grid-row: tokens / totals;
+}
+
+.tokensTotals {
+  composes: container;
+  padding: 0;
+  grid-column: remaining / comments;
+  grid-row: totals / sales;
 }
 
 .sales {

src/modules/dashboard/components/CoinMachine/CoinMachine.css.d.ts

@@ -6,6 +6,7 @@ export const container: string;
 export const buy: string;
 export const timeRemaining: string;
 export const tokensRemaining: string;
+export const tokensTotals: string;
 export const sales: string;
 export const comments: string;
 export const saleStarted: string;