Merge pull request #23 from Access-Labs-Inc/v2

v2

.env.example

@@ -1,6 +1,8 @@
 PROGRAM_ID=
+TOKEN_MINT=
 SOLANA_RPC_URL=https://api.devnet.solana.com
 SOLANA_NETWORK=devnet
 FEE_PAYER_URL=https://localhost:8040/pay-fees
 UNSTAKE_BASE_URL=http://localhost:3001/creators
+REWARDS_BASE_URL=https://localhost:3001/rewards
 GET_ACS_URL=http://localhost:3001/get-acs

.env.production

@@ -3,5 +3,6 @@ SOLANA_RPC_URL=https://mainnet.helius-rpc.com/?api-key=6b3f6b84-a89d-485b-bea8-5
 SOLANA_NETWORK="mainnet-beta"
 FEE_PAYER_URL=https://go-api.accessprotocol.co/pay-fees
 UNSTAKE_BASE_URL=https://hub.accessprotocol.co/creators
+REWARDS_BASE_URL=https://hub.accessprotocol.co/rewards
 GET_ACS_URL=https://hub.accessprotocol.co/get-acs
 TOKEN_MINT=5MAYDfq5yxtudAhtfyuMBuHZjgAbaS9tbEyEQYAhDS5y

.env.staging

@@ -3,5 +3,6 @@ SOLANA_NETWORK=devnet
 SOLANA_RPC_URL=https://api.devnet.solana.com
 FEE_PAYER_URL=https://st-go-api.accessprotocol.co/pay-fees
 UNSTAKE_BASE_URL=https://st-app.accessprotocol.co/creators
+REWARDS_BASE_URL=https://st-app.accessprotocol.co/rewards
 GET_ACS_URL=https://st-app.accessprotocol.co/get-acs
 TOKEN_MINT=5hGLVuE4wHW8mcHUJKEyoJYeg653bj8nZeXgUJrfMxFC

html-dev/index.html

@@ -25,8 +25,8 @@ <h2>The shown widget is for demonstration purpose only</h2>
       _acs('init', {
         element: document.getElementById('acs'),
         debug: true,
-        poolId: 'D9C7Yf5euSjpQ8Wo8XwJP7CWymm54oomeREkogiNf4yS',
-        poolName: "Coingecko",
+        poolId: '7VLUA7nEQtppKk2n1Zb3EA7cXZ74SjvHH4bS5NBZSry',
+        poolName: "Crypto TImes",
       });
       document.querySelector("#acs").addEventListener("connected", (event) => {
         console.log("Connected to the wallet with address: " + JSON.stringify(event.detail));

package.json

@@ -17,6 +17,7 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@accessprotocol/js": "2.0.0-alpha.33",
     "@babel/core": "^7.8.3",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",

src/components/ProgressModal.tsx

@@ -2,61 +2,36 @@ import { Fragment, h } from 'preact';
 
 import { RouteLink } from '../layout/Router';
 
-import { ProgressStep } from './ProgressStep';
 import { useContext } from 'preact/hooks';
 import { ConfigContext } from '../AppContext';
 import { clsxp } from '../libs/utils';
-
-const getStepState = (
-  current: string,
-  step: string,
-  stepOrder: string[],
-  doneStep: string
-) => {
-  // find if the step is before, current, or after the current step;
-  const currentStepIndex = stepOrder.indexOf(current);
-  const stepIndex = stepOrder.indexOf(step);
-  if (stepIndex < currentStepIndex || current === doneStep) {
-    return 'complete';
-  }
-  if (stepIndex === currentStepIndex) {
-    return 'current';
-  }
-  return '';
-};
+import Loading from './Loading';
 
 const ProgressModal = ({
   working,
-  stepOrder,
   doneStepName,
 }: {
   working: string;
-  stepOrder: string[];
   doneStepName: string;
 }) => {
   const { classPrefix } = useContext(ConfigContext);
   return (
     <Fragment>
       <div className={clsxp(classPrefix, 'process_modal_title')}>
-        Steps to complete
+        Sign a transaction
       </div>
       <div className={clsxp(classPrefix, 'process_modal_subtitle')}>
-        We need you to sign these
-        <br /> transactions to stake
+        { working === doneStepName ?
+          'Transaction sent successfully.' :
+          'We need you to sign a transaction to lock your funds.' }
       </div>
       <nav
         className={clsxp(classPrefix, 'process_modal_steps')}
         aria-label='Progress'
       >
-        <ol className={clsxp(classPrefix, 'process_modal_steps_list')}>
-          {stepOrder.map((step) => (
-            <ProgressStep
-              name={step}
-              key={step}
-              status={getStepState(working, step, stepOrder, doneStepName)}
-            />
-          ))}
-        </ol>
+        <div className={clsxp(classPrefix, 'process_modal_steps_load')}>
+          {  working !== doneStepName && <Loading />}
+        </div>
         <RouteLink
           disabled={working !== doneStepName}
           href='/'

src/components/Tooltip.tsx

@@ -4,19 +4,30 @@ import { ConfigContext } from '../AppContext';
 import { clsxp } from '../libs/utils';
 
 export const Tooltip = ({
-  message,
-  children,
-}: {
-  message: string;
+                          messages,
+                          children,
+                        }: {
+  messages: string[];
   children: ComponentChildren;
 }) => {
   const { classPrefix } = useContext(ConfigContext);
+
   return (
     <div className={clsxp(classPrefix, 'group', 'tooltip_root')}>
       {children}
       <div className={clsxp(classPrefix, 'tooltip_wrapper')}>
-        <span className={clsxp(classPrefix, 'tooltip_message')}>{message}</span>
-        <div className={clsxp(classPrefix, 'tooltip_arrow')} />
+        <div className={clsxp(classPrefix, 'tooltip_message')}>
+          <div className='flex flex-col gap-2'>
+            {messages
+              .filter((message) => message != null && message !== '')
+              .map((message, i) => (
+                <div
+                  id={`tooltip_message_${i}`}
+                >{message}</div>
+              ))}
+          </div>
+        </div>
+        <div className={clsxp(classPrefix, 'tooltip_arrow')}/>
       </div>
     </div>
   );

src/hooks/useFeePayer.ts

@@ -1,29 +1,52 @@
-import { SendTransactionOptions } from '@solana/wallet-adapter-base';
-import { Connection, Transaction, TransactionSignature } from '@solana/web3.js';
+import { Connection, PublicKey, Transaction, TransactionInstruction } from '@solana/web3.js';
 import env from '../libs/env';
+import { useEffect, useState } from 'preact/hooks';
 
-export const useFeePayer = async (props: {
-  sendTransaction: (
-    transaction: Transaction,
-    connection: Connection,
-    options?: SendTransactionOptions
-  ) => Promise<TransactionSignature>;
-}) => {
-  const sendTransaction = async (
-    transaction: Transaction,
+export const useFeePayer = () => {
+  const [feePayerPubKey, setFeePayerPubKey] = useState<PublicKey | null>(null);
+  useEffect(() => {
+    const fetchFeePayerPubKey = async () => {
+      const feePayer = await fetch(env.FEE_PAYER_URL, {
+        method: 'GET',
+        headers: new Headers({
+          Accept: 'application/vnd.github.cloak-preview',
+        }),
+      }).then((res) => res.text());
+      setFeePayerPubKey(new PublicKey(feePayer));
+    };
+    fetchFeePayerPubKey();
+  }, []);
+
+  const sendTxThroughGoApi = async (
     connection: Connection,
-    options?: SendTransactionOptions
+    instructions: TransactionInstruction[],
+    signTransaction: ((tx: Transaction) => Promise<Transaction>) | undefined,
   ) => {
+    if (!signTransaction) {
+      throw new Error('No sign transaction function provided.');
+    }
+    if (!feePayerPubKey) {
+      throw new Error('Fee payer public key not available.');
+    }
+
+    const blockhash = (await connection.getLatestBlockhash('max')).blockhash;
+
+    const tx = new Transaction();
+    tx.add(...instructions);
+    tx.feePayer = new PublicKey(feePayerPubKey);
+    tx.recentBlockhash = blockhash;
+    const signedTx = await signTransaction(tx);
+
     const response = await fetch(env.FEE_PAYER_URL, {
       method: 'POST',
       headers: new Headers({
         'Content-Type': 'text/plain',
       }),
-      body: transaction
+      body: JSON.stringify([signedTx
         .serialize({
           requireAllSignatures: false,
         })
-        .toString('hex'),
+        .toString('hex')]),
     })
       .then((res) => {
         if (!res.ok) {
@@ -36,21 +59,11 @@ export const useFeePayer = async (props: {
       throw new Error('Failed to sign transaction on backend');
     }
 
-    const tx = Transaction.from(Buffer.from(response, 'base64'));
-    return tx.compileMessage().header.numRequiredSignatures === 1
-      ? connection.sendRawTransaction(tx.serialize(), options)
-      : props.sendTransaction(tx, connection, options);
+    return response.toString();
   };
 
-  const feePayerPubKey = await fetch(env.FEE_PAYER_URL, {
-    method: 'GET',
-    headers: new Headers({
-      Accept: 'application/vnd.github.cloak-preview',
-    }),
-  }).then((res) => res.text());
-
   return {
     feePayerPubKey,
-    sendTransaction,
+    sendTxThroughGoApi,
   };
 };

src/layout/Main.tsx

@@ -19,7 +19,7 @@ import { WalletConnectButton } from '../components/wallet-adapter/ui/WalletConne
 import { WalletModalButton } from '../components/wallet-adapter/ui/WalletModalButton';
 import { useWallet } from '../components/wallet-adapter/useWallet';
 import { ConfigContext } from '../AppContext';
-import { BondAccount, StakeAccount } from '../libs/ap/state';
+import { BondAccount, StakeAccount } from '@accessprotocol/js';
 import env from '../libs/env';
 import { useConnection } from '../components/wallet-adapter/useConnection';
 import { getBondAccounts } from '../libs/program';