Merge branch 'main' of https://github.com/solana-labs/oyster into main

packages/proposals/src/actions/execute.ts

@@ -78,18 +78,23 @@ function getAccountInfos(
     The addresses that do not require signatures follow the addresses that do, 
     again with read-write accounts first and read-only accounts following.
   */
-  const accountInfosInOrder = actualMessage.instructions[0].accounts.map(
-    a => actualMessage.accountKeys[a],
-  );
+  const { programIdIndex, accounts } = actualMessage.instructions[0];
+  const accountInfosInOrder = accounts.map(a => actualMessage.accountKeys[a]);
+  // If programIdIndex isnt in accountInfos, there's an off-by-one issue that happens here
+  // where one account that should be writable isnt, so we take care of here...
+  const totalSize =
+    accountInfosInOrder.length + (accounts.includes(programIdIndex) ? 0 : 1);
   const requireSigsOnlyNotWritable =
     actualMessage.header.numReadonlySignedAccounts;
   const requireNietherSigsNorWrite =
     actualMessage.header.numReadonlyUnsignedAccounts;
   const writableOnly =
-    accountInfosInOrder.length -
-    requireSigsOnlyNotWritable -
-    requireNietherSigsNorWrite;
-  const readOnly = requireSigsOnlyNotWritable + requireNietherSigsNorWrite;
+    totalSize - requireSigsOnlyNotWritable - requireNietherSigsNorWrite;
+  // and adjust here...
+  const readOnly =
+    requireSigsOnlyNotWritable +
+    requireNietherSigsNorWrite -
+    (totalSize - accountInfosInOrder.length);
 
   let position = 0;
 
@@ -125,5 +130,6 @@ function getAccountInfos(
       isSigner: false,
     });
   }
+
   return finalArray;
 }

packages/proposals/src/components/Layout/index.tsx

@@ -45,11 +45,6 @@ export const AppLayout = React.memo((props: any) => {
       </div>
       <BasicLayout
         title={LABELS.APP_TITLE}
-        footerRender={() => (
-          <div className="footer" title={LABELS.FOOTER}>
-            {LABELS.FOOTER}
-          </div>
-        )}
         navTheme={theme}
         headerTheme={theme}
         theme={theme}
@@ -126,6 +121,9 @@ export const AppLayout = React.memo((props: any) => {
         }}
       >
         {props.children}
+        <div className="footer" title={LABELS.FOOTER}>
+          {LABELS.FOOTER}
+        </div>
       </BasicLayout>
     </div>
   );

packages/proposals/src/components/Proposal/InstructionCard.tsx

@@ -9,7 +9,7 @@ import {
 import { ParsedAccount, contexts } from '@oyster/common';
 import { Card, Spin } from 'antd';
 import Meta from 'antd/lib/card/Meta';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { execute } from '../../actions/execute';
 import { LABELS } from '../../constants';
 import {
@@ -96,7 +96,21 @@ function PlayStatusButton({
   const wallet = useWallet();
   const connection = useConnection();
   const [currSlot, setCurrSlot] = useState(0);
-  connection.getSlot().then(setCurrSlot);
+
+  const elapsedTime = currSlot - proposal.info.state.votingEndedAt.toNumber();
+  const ineligibleToSee = elapsedTime < instruction.info.slot.toNumber();
+
+  useEffect(() => {
+    if (ineligibleToSee) {
+      const id = setInterval(() => {
+        connection.getSlot().then(setCurrSlot);
+      }, 400);
+
+      return () => {
+        clearInterval(id);
+      };
+    }
+  }, [ineligibleToSee, connection]);
 
   const run = async () => {
     setPlaying(Playstate.Playing);
@@ -111,8 +125,7 @@ function PlayStatusButton({
   };
 
   if (proposal.info.state.status != TimelockStateStatus.Executing) return null;
-  const elapsedTime = currSlot - proposal.info.state.votingEndedAt.toNumber();
-  if (elapsedTime < instruction.info.slot.toNumber()) return null;
+  if (ineligibleToSee) return null;
 
   if (playing === Playstate.Unplayed)
     return (

packages/proposals/src/views/home/index.tsx

@@ -11,11 +11,11 @@ export const HomeView = () => {
   const context = useProposals();
   const [page, setPage] = useState(0);
   const listData = useMemo(() => {
-    const newListData: any[][] = [[]];
+    const newListData: any[] = [];
 
     Object.keys(context.proposals).forEach(key => {
       const proposal = context.proposals[key];
-      newListData[newListData.length - 1].push({
+      newListData.push({
         href: '#/proposal/' + key,
         title: proposal.info.state.name,
         proposal,
@@ -27,8 +27,6 @@ export const HomeView = () => {
           proposal.info.state.descLink
         ),
       });
-      if (newListData[newListData.length - 1].length == PAGE_SIZE)
-        newListData.push([]);
     });
     return newListData;
   }, [context.proposals]);
@@ -45,7 +43,7 @@ export const HomeView = () => {
             },
             pageSize: PAGE_SIZE,
           }}
-          dataSource={listData[page]}
+          dataSource={listData}
           renderItem={item => (
             <StateBadgeRibbon proposal={item.proposal}>
               <List.Item key={item.title}>