Merge pull request #170 from algorandfoundation/develop

release: production

src/xgov-dapp/.storybook/preview.tsx

@@ -4,7 +4,7 @@ import { withThemeFromJSXProvider } from '@storybook/addon-themes'
 import { lightTheme, darkTheme } from '../src/themes'
 import type { Preview } from '@storybook/react'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import { WalletProvider} from '@makerx/use-wallet'
+import { WalletProvider} from '@txnlab/use-wallet'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { useAlgoWallet } from '../src/utils/useAlgoWalletProvider'
 import { RecoilRoot } from 'recoil'

src/xgov-dapp/package.json

@@ -26,7 +26,7 @@
     "@headlessui/react": "^1.7.13",
     "@heroicons/react": "^2.0.16",
     "@makerx/forms-mui": "^1.1.0",
-    "@makerx/use-wallet": "^3.0.0",
+    "@txnlab/use-wallet": "^2.8.2",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.13",
     "@mui/x-date-pickers": "^6.0.2",

src/xgov-dapp/src/components/siteHeader.tsx

@@ -1,5 +1,5 @@
 import { Disclosure, Popover } from '@headlessui/react'
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import { Typography } from '@mui/material'
 import clsx from 'clsx'
 import { Link } from 'react-router-dom'

src/xgov-dapp/src/features/rounds/VotingRoundTile.tsx

@@ -1,4 +1,4 @@
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import { Box, Button, Skeleton, Typography } from '@mui/material'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'

src/xgov-dapp/src/features/rounds/index.tsx

@@ -1,4 +1,4 @@
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import LaunchIcon from '@mui/icons-material/Launch'
 import { Alert, Box, Button, Skeleton, Typography, Link as MuiLink } from '@mui/material'
 import sortBy from 'lodash.sortby'

src/xgov-dapp/src/features/status/InformationBox.tsx

@@ -7,33 +7,27 @@ function InformationBox() {
         <Typography className="mb-3">
           <strong>Voting Sessions</strong>
         </Typography>
+        <Typography className="my-3">All voting sessions for the pilot's Alpha phase have been completed.</Typography>
         <Typography>
-          In this version of the xGov Voting Tool, <strong>you can vote one time only</strong>. Be sure to check your vote allocation before
-          submitting your vote.
+          During the Alpha phase governors were required to vote to maintain eligibility. If you missed a vote your eligibility was revoked.
+          For each Voting Session, the Voting Status confirms eligibility, where:
         </Typography>
-        <Typography className="mt-4 mb-3">
-          <strong>Maintaining your xGov eligilbility</strong>
+        <Typography>You voted = Eligible</Typography>
+        <Typography>You didn't vote = Not eligible</Typography>
+        <Typography className="my-3">
+          At the end of the Term Pool, the Algo forfeited by the ineligible xGovs are distributed amongst all eligible xGovs.
         </Typography>
-        <Typography>
-          <strong>Your xGov duty is to vote in all voting sessions during the 12 months of the Term Pool duration.</strong> That maintains
-          your eligibility to receive the Algo deposit (your original governance rewards) back at the end of the term pool.{' '}
-        </Typography>
-        <Typography>
-          <br />
-          <strong>You will become ineligible if fail to vote on a session.</strong> If you are stacking voting power by participating in
-          more than one Term Pool simultaneously, and miss a voting session, the total of Algos across all pools will be forfeited.
+        <Typography className="my-3">
+          <strong>Term Pools</strong>
         </Typography>
         <Typography>
-          <br />
-          At the end of the Term Pool, the Algos forfeited by the ineligible xGovs will be distributed amongst all eligible xGovs.
+          Term pool (TP) funds are held by the Algorand Foundation for 12 months from inception. Once a Term Pool matures the funds are
+          transferred to the original wallet used in governance or, if indicated at the time of commitment, to the governor's controller
+          address.
         </Typography>
-        <Typography className="mt-4 mb-4">
-          <strong>Your xGov Current Balance</strong>
-        </Typography>
-        <Typography>
-          Your xGov Current Balance is equal to the sum of the Governance Rewards of the periods you opted in to xGov plus your Term Pool
-          forfeited Algo share. It is displayed in µA (or microAlgo) because smart contracts cannot handle decimal numbers. You will receive
-          your Deposit, plus the forfeited Algo share, after 12 months from the commitment.
+        <Typography className="my-3">
+          The Duration column displays the creation and maturation dates for each term pool. Once a term pool matures, funds are distributed
+          within 14 days.
         </Typography>
       </div>
     </Box>

src/xgov-dapp/src/features/status/TermPoolsTable.tsx

@@ -7,7 +7,11 @@ interface TermPoolsTableProps {
   govenorData: GovenorTermPoolData[]
   isLoading: boolean
 }
-
+// Indexes of the TermPoll which have been distributed
+const DISTRIBUTED_TERM_POOLS = [0]
+function indexColor(idx: number): string {
+  return DISTRIBUTED_TERM_POOLS.includes(idx) ? 'bg-green-light' : 'bg-white'
+}
 function TermPoolsTable({ termPools, govenorData, isLoading }: TermPoolsTableProps) {
   return (
     <>
@@ -36,28 +40,28 @@ function TermPoolsTable({ termPools, govenorData, isLoading }: TermPoolsTablePro
 
           {!isLoading &&
             termPools?.length &&
-            termPools.map((termPool) => {
+            termPools.map((termPool, idx) => {
               const termPoolGovenorData = govenorData.find((item) => item.pool === termPool.id)
               return (
                 <div key={termPool.id} className="table-row invisible lg:visible">
-                  <div className="table-cell bg-white  pb-2 rounded-l-lg ">
+                  <div className={`table-cell pb-2 rounded-l-lg ${indexColor(idx)}`}>
                     <div className="py-4 pl-4">{termPool.name}</div>
                   </div>
-                  <div className="table-cell bg-white">
+                  <div className={`table-cell ${indexColor(idx)}`}>
                     <div className="pl-2 py-4">{parseInt(termPool.total_pool).toLocaleString()} µA</div>
                   </div>
-                  <div className="table-cell bg-white ">
+                  <div className={`table-cell ${indexColor(idx)}`}>
                     <div className="pl-2 py-4">
                       {termPoolGovenorData ? parseInt(termPoolGovenorData?.original_reward).toLocaleString() : 0} µA
                     </div>
                   </div>
-                  <div className="table-cell bg-white ">
+                  <div className={`table-cell ${indexColor(idx)}`}>
                     <div className="pl-2 py-4">
                       {dayjs(parseInt(termPool.start_date) * 1000).format('DD-MM-YYYY')} -{' '}
                       {dayjs(parseInt(termPool.end_date) * 1000).format('DD-MM-YYYY')}
                     </div>
                   </div>
-                  <div className="table-cell bg-white rounded-r-lg">
+                  <div className={`table-cell rounded-r-lg ${indexColor(idx)}`}>
                     <div className="pl-2 py-4">
                       {termPoolGovenorData && termPoolGovenorData?.current_reward
                         ? `${Math.floor(
@@ -75,10 +79,10 @@ function TermPoolsTable({ termPools, govenorData, isLoading }: TermPoolsTablePro
       <div className="lg:hidden">
         {!isLoading &&
           termPools?.length &&
-          termPools.map((termPool) => {
+          termPools.map((termPool, idx) => {
             const termPoolGovenorData = govenorData.find((item) => item.pool === termPool.id)
             return (
-              <div key={termPool.id} className="grid grid-cols-3 mb-4 bg-white rounded-lg p-4 gap-2">
+              <div key={termPool.id} className={`grid grid-cols-3 mb-4 rounded-lg p-4 gap-2 ${indexColor(idx)}`}>
                 <div>
                   <strong>Name</strong>
                 </div>

src/xgov-dapp/src/features/status/VotingSessionsTable.tsx

@@ -1,4 +1,4 @@
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import { Alert, Button, Skeleton, Typography } from '@mui/material'
 import clsx from 'clsx'
 import dayjs from 'dayjs'

src/xgov-dapp/src/features/status/index.tsx

@@ -3,7 +3,7 @@ import { Alert, Box, Button, Link as MuiLink, Skeleton, Typography } from '@mui/
 import { Link } from 'react-router-dom'
 import { VotingRoundGlobalState } from '../../../../dapp/src/shared/VotingRoundContract'
 
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import { useEffect, useState } from 'react'
 import { fetchVotingRoundGlobalStatesByCreators } from '../../../../dapp/src/shared/VotingRoundContract'
 import { GovenorTermPoolData, TermPool, fetchGovenorData, fetchTermPools } from '../../shared/xGovApi'
@@ -151,45 +151,6 @@ function Status() {
             </MuiLink>
           </Box>
         </div>
-        <EligibilityStatus isEligible={isEligible} isLoading={isLoadingXgovData} />
-        {isLoadingXgovData ? (
-          <Skeleton className="h-40 w-full" variant="rectangular" />
-        ) : (
-          <Box className="bg-white flex rounded-xl px-4 py-6">
-            <div className="w-full">
-              <Typography className="mb-3">
-                <strong>Your xGov Current Balance</strong>
-              </Typography>
-              <Typography variant="h3">
-                {govenorData.reduce((sum, item) => sum + parseInt(item.current_reward), 0).toLocaleString()} µA
-              </Typography>
-            </div>
-          </Box>
-        )}
-        {isLoadingXgovData ? (
-          <Skeleton className="h-40 w-full" variant="rectangular" />
-        ) : (
-          <Box className="bg-white flex rounded-xl px-4 py-6">
-            <div className="w-full">
-              <Typography className="mb-3">
-                <strong>Potential earnings from xGov participation</strong>
-              </Typography>
-              <Typography variant="h3">
-                {govenorData
-                  .reduce(
-                    (prev, current) =>
-                      prev +
-                      (current?.current_reward
-                        ? Math.floor(Number(current?.current_reward) - parseInt(current?.original_reward)) / 1_000_000
-                        : 0),
-                    0,
-                  )
-                  .toLocaleString()}{' '}
-                ALGO
-              </Typography>
-            </div>
-          </Box>
-        )}
       </div>
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 mt-4">
         <div className="col-span-1 lg:col-span-2">

src/xgov-dapp/src/features/vote-creation/review/index.tsx

@@ -18,7 +18,7 @@ import {
 } from '../state'
 import { ConfirmationDialog } from './ConfirmationDialog'
 
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import Papa from 'papaparse'
 import { VotingRoundGlobalState } from '../../../../../dapp/src/shared/VotingRoundContract'
 import { VoteType } from '../../../../../dapp/src/shared/types'

src/xgov-dapp/src/features/vote/index.tsx

@@ -1,5 +1,5 @@
 import { HandThumbUpIcon } from '@heroicons/react/24/solid'
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
 import CancelIcon from '@mui/icons-material/Cancel'

src/xgov-dapp/src/features/wallet/ConnectWallet.tsx

@@ -1,5 +1,5 @@
 import { CheckCircleIcon } from '@heroicons/react/24/outline'
-import { PROVIDER_ID, useWallet } from '@makerx/use-wallet'
+import { PROVIDER_ID, useWallet } from '@txnlab/use-wallet'
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
 import api from '../../shared/api'

src/xgov-dapp/src/features/wallet/ManualWallet.tsx

@@ -1,5 +1,5 @@
 import { ValidatedForm, zfd } from '@makerx/forms-mui'
-import { custom } from '@makerx/use-wallet'
+import { custom } from '@txnlab/use-wallet'
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from '@mui/material'
 import { useRef } from 'react'
 import { UseFormReturn } from 'react-hook-form'

src/xgov-dapp/src/features/wallet/manualSigningProvider.ts

@@ -1,5 +1,5 @@
 import { Buffer } from 'buffer'
-import { CustomProvider, Metadata, PROVIDER_ID } from '@makerx/use-wallet'
+import { CustomProvider, Metadata, PROVIDER_ID } from '@txnlab/use-wallet'
 import type _algosdk from 'algosdk'
 import { atom, DefaultValue, selector, SetterOrUpdater, useRecoilValue, useSetRecoilState } from 'recoil'
 

src/xgov-dapp/src/hooks/use-voter-votes-query.ts

@@ -1,4 +1,4 @@
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { UseXGovQueryOptions } from './index'
 import { fetchVoterVotes } from '../../../dapp/src/shared/VotingRoundContract'

src/xgov-dapp/src/hooks/use-x-gov.ts

@@ -3,7 +3,7 @@ import { QueryObserverResult, RefetchOptions, RefetchQueryFilters, UseQueryResul
 import type { TallyCounts, VotingRoundGlobalState } from '../../../dapp/src/shared/VotingRoundContract'
 import type { VoteGatingSnapshot, VotingRoundMetadata } from '../../../dapp/src/shared/IPFSGateway'
 import api from '../shared/api'
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import { getHasVoteEnded, getHasVoteStarted } from '../shared/vote'
 import useGlobalStateQuery from './use-global-state-query'
 import useMetadataQuery from './use-metadata-query'

src/xgov-dapp/src/root.tsx

@@ -1,4 +1,4 @@
-import { WalletProvider, custom } from '@makerx/use-wallet'
+import { WalletProvider, custom } from '@txnlab/use-wallet'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { PropsWithChildren } from 'react'

src/xgov-dapp/src/stories/Root.tsx

@@ -1,7 +1,7 @@
 import SiteHeader from '../components/siteHeader'
 import ConnectWallet from '../features/wallet/ConnectWallet'
 import ManualWallet from '../features/wallet/ManualWallet'
-import { custom } from '@makerx/use-wallet'
+import { custom } from '@txnlab/use-wallet'
 import SiteFooter from '../components/siteFooter'
 import ScrollToTop from '../shared/router/ScrollToTop'
 import { PropsWithChildren } from 'react'

src/xgov-dapp/src/stories/withRoute.tsx

@@ -1,6 +1,6 @@
 import { ComponentType, useEffect } from 'react'
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
-import { useWallet } from '@makerx/use-wallet'
+import { useWallet } from '@txnlab/use-wallet'
 import Root from './Root'
 
 export type WithRouterOptions = {