wip: test websocket connection

docker/colony-cdapp-dev-env-auth-proxy

@@ -1,6 +1,6 @@
 FROM colony-cdapp-dev-env/base:latest
 
-ENV AUTH_PROXY_HASH=4326771fb553e8afc70f7b3860825e80cc321eae
+ENV AUTH_PROXY_HASH=1b8da32237859df08129bc90cc6907564e3b011e
 
 # Add dependencies from the host
 # Note: these are listed individually so that if they change, they won't affect

src/apollo/apolloClient.ts

@@ -1,38 +1,61 @@
-import { ApolloClient, from } from '@apollo/client';
+import { ApolloClient, ApolloLink, HttpLink, from } from '@apollo/client';
 import { createAuthLink, AUTH_TYPE } from 'aws-appsync-auth-link';
 import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link';
 
 import cache from './cache/index.ts';
 import removeTypenameLink from './removeTypenameLink.ts';
 
-const auth = {
-  type: AUTH_TYPE.API_KEY as const,
-  apiKey: 'da2-fakeApiId123456',
-};
-
-// const noAuth = {
-//   type: AUTH_TYPE.NONE as const,
+// const auth = {
+//   type: AUTH_TYPE.API_KEY as const,
+//   apiKey: 'da2-fakeApiId123456',
 // };
 
-const authLink = createAuthLink({
-  // url: `${
-  //   import.meta.env.AUTH_PROXY_ENDPOINT || 'http://localhost:3005'
-  // }/graphql`,
-  url: 'http://localhost:20002/graphql',
+const noAuth = {
+  type: AUTH_TYPE.NONE as const,
+};
+
+const httpLink = createAuthLink({
+  url: `${
+    import.meta.env.AUTH_PROXY_ENDPOINT || 'http://localhost:3005'
+  }/graphql`,
   region: 'us-east-1',
-  auth,
+  // auth is handled by auth proxy
+  auth: noAuth,
+  // auth,
 });
 
 const subscriptionLink = createSubscriptionHandshakeLink({
-  url: 'http://localhost:20002/graphql',
+  url: `${
+    import.meta.env.AUTH_PROXY_ENDPOINT || 'http://localhost:3005'
+  }/graphql`,
   region: 'us-east-1',
-  auth,
+  // auth is handled by auth proxy
+  auth: noAuth,
+  // auth,
+});
+
+// Middleware link for setting credentials to include (aws links do not do that!)
+const authLink = new ApolloLink((operation, forward) => {
+  operation.setContext({
+    // ensures cookies are sent with every request
+    credentials: 'include',
+  });
+
+  return forward(operation);
 });
 
+// const httpLink = new HttpLink({
+//   uri: `${
+//     import.meta.env.AUTH_PROXY_ENDPOINT || 'http://localhost:3005'
+//   }/graphql`,
+//   credentials: 'include',
+// });
+
 const apolloClient = new ApolloClient({
-  link: from([removeTypenameLink, authLink, subscriptionLink]),
-  connectToDevTools: true,
   cache,
+  connectToDevTools: true,
+  link: from([removeTypenameLink, authLink, httpLink, subscriptionLink]),
+  // link: from([removeTypenameLink, httpLink]),
   /*
    * @TODO Most likely we'll need to add resolvers here as well
    */

src/components/common/Extensions/UserNavigation/hooks.ts

@@ -19,6 +19,8 @@ import { groupBy, unionBy } from '~utils/lodash.ts';
 
 export const TRANSACTION_LIST_PAGE_SIZE = 10;
 
+// FIXME: delete all of this, this is weird
+
 const sortAndGroupTransactions = (transactions: Transaction[]) => {
   // Create groups of transations which have 'em
   const groupedTransactions = groupBy(transactions, 'groupId');
@@ -119,6 +121,7 @@ const updateQuery = (prev, { fetchMoreResult }) => {
   };
 };
 
+// FIXME: delete this (check all places where its being used)
 export const useGroupedTransactionsAndMessages = (): {
   transactionAndMessageGroups: TransactionOrMessageGroups;
   fetchMoreTransactions: () => void;

src/components/v5/frame/ColonyHome/ColonyHome.tsx

@@ -17,6 +17,8 @@ import { setQueryParamOnUrl } from '~utils/urls.ts';
 // import TmpAdvancedPayments from '~v5/payments/TmpAdvancedPayments.tsx';
 import Link from '~v5/shared/Link/index.ts';
 
+import { useGroupedTransactions } from '../../../../state/useUserTransactions.ts';
+
 import Agreements from './partials/Agreements/index.ts';
 import DashboardHeader from './partials/DashboardHeader/index.ts';
 import LeaveColonyModal from './partials/LeaveColonyModal/index.ts';
@@ -34,6 +36,8 @@ const ColonyHome = () => {
   const teamsBreadcrumbs = useCreateTeamBreadcrumbs();
 
   useSetPageBreadcrumbs(teamsBreadcrumbs);
+  const tx = useGroupedTransactions();
+  console.log('tx', tx);
 
   return (
     <div className="flex flex-col gap-6 lg:gap-10">

src/redux/sagas/utils/createActionMetadata.ts

@@ -21,3 +21,23 @@ export function* createActionMetadataInDB(txHash: string, customTitle: string) {
     },
   });
 }
+
+export const createActionMetadataInDb__NEW = async (
+  txHash: string,
+  customTitle: string,
+) => {
+  const apolloClient = getContext(ContextModule.ApolloClient);
+
+  return apolloClient.mutate<
+    CreateColonyActionMetadataMutation,
+    CreateColonyActionMetadataMutationVariables
+  >({
+    mutation: CreateColonyActionMetadataDocument,
+    variables: {
+      input: {
+        id: txHash,
+        customTitle,
+      },
+    },
+  });
+};

src/redux/sagas/utils/getCanUserSendMetatransactions.ts

@@ -31,8 +31,7 @@ export function* getCanUserSendMetatransactions() {
   });
 
   const userHasMetatransactionEnabled =
-    data.getUserByAddress?.items[0]?.profile?.meta?.metatransactionsEnabled ||
-    false;
+    !!data.getUserByAddress?.items[0]?.profile?.meta?.metatransactionsEnabled;
 
   return userHasMetatransactionEnabled;
 }

src/state/ColonyManager.ts

@@ -0,0 +1,75 @@
+import { ColonyNetwork, type Colony, PinataAdapter } from '@colony/sdk';
+
+import { ContextModule, getContext } from '~context/index.ts';
+import { Network } from '~types/network.ts';
+import { isFullWallet } from '~types/wallet.ts';
+
+// FIXME: remove
+const PINATA_JWT__TEMP = `eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5mb3JtYXRpb24iOnsiaWQiOiJlZWNiZWNhMi0wMmU3LTQ4OTYtYWMzMi03MDQyMjc3OGEyYjciLCJlbWFpbCI6ImNocmlzQGNvbG9ueS5pbyIsImVtYWlsX3ZlcmlmaWVkIjp0cnVlLCJwaW5fcG9saWN5Ijp7InJlZ2lvbnMiOlt7ImlkIjoiRlJBMSIsImRlc2lyZWRSZXBsaWNhdGlvbkNvdW50IjoxfV0sInZlcnNpb24iOjF9LCJtZmFfZW5hYmxlZCI6ZmFsc2UsInN0YXR1cyI6IkFDVElWRSJ9LCJhdXRoZW50aWNhdGlvblR5cGUiOiJzY29wZWRLZXkiLCJzY29wZWRLZXlLZXkiOiIxYTFjZmNlOTI3MzYzODI1Mjg5OSIsInNjb3BlZEtleVNlY3JldCI6IjhjZTExNTNlNTY1NjJlZDUyODJmZGU3MWYzNmYyNjhmYjU5MjAxZGI5ZmY0OWNlMTZkNTRjZGIyMDJjMWIwNGQiLCJpYXQiOjE3MTE0Nzc4Mzh9.I-aALCEpRZksUxJFaHOlk9kW03mnyyh74hXaskIfA-U`;
+
+class ColonyManager {
+  colonies: Map<string, Colony>;
+
+  colonyNetwork?: ColonyNetwork;
+
+  constructor() {
+    this.colonies = new Map();
+  }
+
+  async getColonyNetwork() {
+    if (this.colonyNetwork) {
+      return this.colonyNetwork;
+    }
+
+    const wallet = getContext(ContextModule.Wallet);
+
+    if (!isFullWallet(wallet)) {
+      throw new Error('Background login not yet completed.');
+    }
+
+    const signer = wallet.ethersProvider.getSigner();
+
+    const reputationOracleUrl = import.meta.env.REPUTATION_ORACLE_ENDPOINT
+      ? new URL(import.meta.env.REPUTATION_ORACLE_ENDPOINT)
+      : new URL(`/reputation`, window.location.origin);
+
+    if (import.meta.env.DEV && import.meta.env.NETWORK_ID === Network.Ganache) {
+      const ganacheAccountsUrl = new URL(
+        import.meta.env.VITE_NETWORK_FILES_ENDPOINT || 'http://localhost:3006',
+      );
+      const fetchRes = await fetch(
+        `${ganacheAccountsUrl.href}etherrouter-address.json`,
+      );
+      const { etherRouterAddress: customNetworkAddress } =
+        await fetchRes.json();
+
+      this.colonyNetwork = new ColonyNetwork(signer, {
+        customNetworkAddress,
+        reputationOracleEndpoint: reputationOracleUrl.href,
+        ipfsAdapter: new PinataAdapter(PINATA_JWT__TEMP),
+      });
+
+      return this.colonyNetwork;
+    }
+
+    this.colonyNetwork = new ColonyNetwork(signer, {
+      reputationOracleEndpoint: reputationOracleUrl.href,
+      ipfsAdapter: new PinataAdapter(PINATA_JWT__TEMP),
+    });
+
+    return this.colonyNetwork;
+  }
+
+  async getColony(colonyAddress: string) {
+    if (this.colonies.has(colonyAddress)) {
+      return this.colonies.get(colonyAddress);
+    }
+
+    const colonyNetwork = await this.getColonyNetwork();
+    const colony = await colonyNetwork.getColony(colonyAddress);
+    this.colonies.set(colonyAddress, colony);
+    return colony;
+  }
+}
+
+export default ColonyManager;

src/state/transactions.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+import ColonyManager from './ColonyManager.ts';
+
+export const colonyManager = new ColonyManager();
+
+export enum TxStatus {
+  Created = 'CREATED',
+  Ready = 'READY',
+  Sent = 'SENT',
+  Mined = 'MINED',
+  Error = 'ERROR',
+}
+
+interface Transaction {
+  id: string;
+  name: string;
+  group?: {
+    key: string;
+    index: number;
+  };
+  status: TxStatus;
+}
+
+export interface TransactionsState {
+  transactions: Array<Transaction>;
+}
+
+export const useTransactionsStore = create<TransactionsState>()(
+  devtools(
+    immer(() => ({
+      transactions: [],
+    })),
+  ),
+);