chore: fix lint warnings

packages/proposals/src/actions/addCustomSingleSignerTransaction.ts

@@ -1,7 +1,6 @@
 import {
   Account,
   Connection,
-  Message,
   PublicKey,
   SystemProgram,
   TransactionInstruction,
@@ -16,7 +15,7 @@ import {
 import { addCustomSingleSignerTransactionInstruction } from '../models/addCustomSingleSignerTransaction';
 
 const { sendTransaction } = contexts.Connection;
-const { notify, toUTF8Array, fromUTF8Array } = utils;
+const { notify } = utils;
 const { approve } = models;
 
 export const addCustomSingleSignerTransaction = async (

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

@@ -1,47 +1,57 @@
-import * as CANNON from 'cannon'
-import ReactDOM from 'react-dom'
-import React, { useEffect, useState } from 'react'
-import { Canvas } from 'react-three-fiber'
-import { useCannon, Provider } from './useCannon'
-import './styles.less'
+import * as CANNON from 'cannon';
+import React, { useEffect, useState } from 'react';
+import { Canvas } from 'react-three-fiber';
+import { useCannon, Provider } from './useCannon';
+import './styles.less';
 
-function Plane({ position }: { position: any}) {
+function Plane({ position }: { position: any }) {
   // Register plane as a physics body with zero mass
   const ref = useCannon({ mass: 0 }, (body: any) => {
-    body.addShape(new CANNON.Plane())
-    body.position.set(...position)
-  })
+    body.addShape(new CANNON.Plane());
+    body.position.set(...position);
+  });
   return (
     <mesh ref={ref} receiveShadow>
       <planeBufferGeometry attach="geometry" args={[1000, 1000]} />
       <meshPhongMaterial attach="material" color="#272727" />
     </mesh>
-  )
+  );
 }
 
-function Box({ position }: { position: any}) {
+function Box({ position }: { position: any }) {
   // Register box as a physics body with mass
   const ref = useCannon({ mass: 100000 }, (body: any) => {
-    body.addShape(new CANNON.Box(new CANNON.Vec3(1, 1, 1)))
-    body.position.set(...position)
-  })
+    body.addShape(new CANNON.Box(new CANNON.Vec3(1, 1, 1)));
+    body.position.set(...position);
+  });
   return (
     <mesh ref={ref} castShadow receiveShadow>
       <boxGeometry attach="geometry" args={[2, 2, 2]} />
       <meshStandardMaterial attach="material" />
     </mesh>
-  )
+  );
 }
 
 export const Background = () => {
-  const [showPlane, set] = useState(true)
+  const [showPlane, set] = useState(true);
   // When React removes (unmounts) the upper plane after 5 sec, objects should drop ...
   // This may seem like magic, but as the plane unmounts it removes itself from cannon and that's that
-  useEffect(() => void setTimeout(() => set(false), 3000), [])
+  useEffect(() => void setTimeout(() => set(false), 3000), []);
   return (
-    <Canvas className="main" shadowMap camera={{ position: [0, 0, 15] }} style={{ width: '100%', height: 400, marginTop: -120, zIndex: 1 }}>
+    <Canvas
+      className="main"
+      shadowMap
+      camera={{ position: [0, 0, 15] }}
+      style={{ width: '100%', height: 400, marginTop: -120, zIndex: 1 }}
+    >
       <ambientLight intensity={0.5} />
-      <spotLight intensity={0.6} position={[30, 30, 50]} angle={0.2} penumbra={1} castShadow />
+      <spotLight
+        intensity={0.6}
+        position={[30, 30, 50]}
+        angle={0.2}
+        penumbra={1}
+        castShadow
+      />
       <Provider>
         <Plane position={[0, 0, -10]} />
         {showPlane && <Plane position={[0, 0, 0]} />}
@@ -54,5 +64,5 @@ export const Background = () => {
         {!showPlane && <Box position={[0.5, 1.0, 20]} />}
       </Provider>
     </Canvas>
-  )
+  );
 };

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

@@ -4,15 +4,13 @@ import { Breadcrumb, Layout } from 'antd';
 import { Link, useLocation } from 'react-router-dom';
 
 import { LABELS } from '../../constants';
-import { contexts, components } from '@oyster/common';
+import { components } from '@oyster/common';
 import { Content, Header } from 'antd/lib/layout/layout';
 import Logo from './dark-horizontal-combined-rainbow.inline.svg';
 
 const { AppBar } = components;
-const { useConnectionConfig } = contexts.Connection;
 
 export const AppLayout = React.memo((props: any) => {
-  const { env } = useConnectionConfig();
   const location = useLocation();
 
   const breadcrumbNameMap: any = {
@@ -44,19 +42,13 @@ export const AppLayout = React.memo((props: any) => {
     <div className="App">
       <Layout title={LABELS.APP_TITLE}>
         <Header className="App-Bar">
-            <div className="app-title">
-              <Link to="/">
-                <img
-                  alt={`Solana Logo Image`}
-                  src={Logo}
-                  style={{ height: 40 }}
-                />
-              </Link>
-            </div>
-            <AppBar
-              useWalletBadge={true}
-            />
-          </Header>
+          <div className="app-title">
+            <Link to="/">
+              <img alt={`Solana Logo`} src={Logo} style={{ height: 40 }} />
+            </Link>
+          </div>
+          <AppBar useWalletBadge={true} />
+        </Header>
         <Content>
           {/* <Breadcrumb>{breadcrumbItems}</Breadcrumb> */}
           {props.children}

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

@@ -108,9 +108,13 @@ function PlayStatusButton({
 
   useEffect(() => {
     if (ineligibleToSee) {
-      const id = setTimeout(() => {
+      const timer = setTimeout(() => {
         connection.getSlot().then(setCurrSlot);
       }, 5000);
+
+      return () => {
+        clearTimeout(timer);
+      };
     }
   }, [ineligibleToSee, connection, currSlot]);
 
@@ -127,8 +131,8 @@ function PlayStatusButton({
   };
 
   if (
-    state.info.status != TimelockStateStatus.Executing &&
-    state.info.status != TimelockStateStatus.Completed
+    state.info.status !== TimelockStateStatus.Executing &&
+    state.info.status !== TimelockStateStatus.Completed
   )
     return null;
   if (ineligibleToSee) return null;

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

@@ -57,7 +57,7 @@ export default function MintSourceTokens({
     let failedSourcesHold: SourceEntryInterface[] = [];
     const zeroKey = PROGRAM_IDS.system;
     sourceHoldersAndCounts.forEach((value: string, index: number) => {
-      if (index % 2 == 0)
+      if (index % 2 === 0)
         sourceHolders.push({
           owner: value ? new PublicKey(value) : zeroKey,
           tokenAmount: 0,
@@ -75,7 +75,7 @@ export default function MintSourceTokens({
         sourceAccount: undefined,
       });
 
-    if (!sourceHolders.find(v => v.owner != zeroKey)) {
+    if (!sourceHolders.find(v => v.owner !== zeroKey)) {
       notify({
         message: LABELS.ENTER_AT_LEAST_ONE_PUB_KEY,
         type: 'error',

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

@@ -90,7 +90,7 @@ export const VoterTable = (props: IVoterTable) => {
       render: (count: number, record: VoterDisplayData) => (
         <span
           style={
-            record.group == VoteType.Undecided
+            record.group === VoteType.Undecided
               ? { color: 'grey' }
               : { color: record.group === VoteType.Yes ? 'green' : 'red' }
           }
@@ -102,12 +102,12 @@ export const VoterTable = (props: IVoterTable) => {
     {
       title: LABELS.PERCENTAGE,
       dataIndex: 'value',
-      key: 'value',
+      key: 'percentage',
       align: 'center',
       render: (count: number, record: VoterDisplayData) => (
         <span
           style={
-            record.group == VoteType.Undecided
+            record.group === VoteType.Undecided
               ? { color: 'grey' }
               : { color: record.group === VoteType.Yes ? 'green' : 'red' }
           }

packages/proposals/src/utils/lookups.ts

@@ -32,7 +32,7 @@ export async function getGovernanceVotingRecords(
             { dataSize: GovernanceVotingRecordLayout.span },
             {
               memcmp: {
-                // Proposal key is first thing in the account data
+                // Proposal key is second thing in the account data
                 offset: 1,
                 bytes: proposal.toString(),
               },

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

@@ -23,7 +23,7 @@ export const HomeView = () => {
         (acc, proposalKey) => {
           let proposal = proposals[proposalKey];
           let state = states[proposal.info.state.toBase58()];
-          if (proposal.info.config.toBase58() == configKey) {
+          if (proposal.info.config.toBase58() === configKey) {
             acc.active =
               acc.active +
               (state.info.status === TimelockStateStatus.Voting ||

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

@@ -113,7 +113,7 @@ function useLoadGist({
       }
       fetch(toFetch)
         .then(async resp => {
-          if (resp.status == 200) {
+          if (resp.status === 200) {
             if (isGist) {
               const jsonContent = await resp.json();
               const nextUrlFileName = Object.keys(jsonContent['files'])[0];
@@ -123,7 +123,7 @@ function useLoadGist({
               );
             } else setContent(await resp.text());
           } else {
-            if (resp.status == 403 && isGist)
+            if (resp.status === 403 && isGist)
               setMsg(LABELS.GIT_CONTENT_EXCEEDED);
             setFailed(true);
           }
@@ -408,7 +408,11 @@ function InnerProposalView({
                   failed ? (
                     <p>
                       {LABELS.DESCRIPTION}:{' '}
-                      <a href={timelockState.info.descLink} target="_blank">
+                      <a
+                        href={timelockState.info.descLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
                         {msg ? msg : LABELS.NO_LOAD}
                       </a>
                     </p>

packages/proposals/src/views/proposal/new.tsx

@@ -138,7 +138,9 @@ export function NewForm({
         >
           <Select placeholder={LABELS.SELECT_CONFIG}>
             {configs.map(c => (
-              <Option value={c.pubkey.toBase58()}>{c.info.name}</Option>
+              <Option value={c.pubkey.toBase58()} key={c.pubkey.toBase58()}>
+                {c.info.name}
+              </Option>
             ))}
           </Select>
         </Form.Item>

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

@@ -13,7 +13,7 @@ export const ProposalsView = () => {
   const history = useHistory();
   const { proposals, states } = useProposals();
   const config = useConfig(id);
-  const [page, setPage] = useState(0);
+  const [, setPage] = useState(0);
   const { tokenMap } = useConnectionConfig();
   const { connected } = useWallet();
   const token = tokenMap.get(
@@ -65,7 +65,11 @@ export const ProposalsView = () => {
           />
           <div>
             <h1>{config?.info.name}</h1>
-            <a href={tokenMap.get(mint)?.extensions?.website} target="_blank">
+            <a
+              href={tokenMap.get(mint)?.extensions?.website}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               {tokenMap.get(mint)?.extensions?.website}
             </a>
           </div>