From b11e2055ab16b73ac487d443fc2b7f25149ec8ea Mon Sep 17 00:00:00 2001 From: sh-wallet <137136919+sh-wallet@users.noreply.github.com> Date: Thu, 22 Aug 2024 17:06:59 +0530 Subject: [PATCH 01/10] chore: gov and activity improvement --- .../mobile/src/components/button/button.tsx | 12 +- .../navigation/navigation-tab-with-drawer.tsx | 6 +- .../activity/activity-transaction/index.tsx | 265 +++++++++--------- .../activity/gov-proposals/activity-row.tsx | 13 +- .../screens/activity/gov-proposals/index.tsx | 34 +-- .../mobile/src/screens/activity/index.tsx | 23 +- .../mobile/src/screens/governance/details.tsx | 12 +- .../src/screens/governance/filter-modal.tsx | 11 +- .../mobile/src/screens/governance/index.tsx | 2 +- .../src/screens/governance/vote-modal.tsx | 110 ++++---- packages/mobile/src/screens/home/index.tsx | 5 +- packages/mobile/src/screens/setting/index.tsx | 2 +- packages/mobile/update.json | 2 +- 13 files changed, 277 insertions(+), 220 deletions(-) diff --git a/packages/mobile/src/components/button/button.tsx b/packages/mobile/src/components/button/button.tsx index 4a8dd02fe0..8147835cbe 100644 --- a/packages/mobile/src/components/button/button.tsx +++ b/packages/mobile/src/components/button/button.tsx @@ -99,7 +99,7 @@ export const Button: FunctionComponent<{ })(); const textColorDefinition: string[] = (() => { - const baseColor = color === "primary" ? "blue" : "red"; + const baseColor = color === "primary" ? "white" : "red"; switch (mode) { case "fill": @@ -133,10 +133,10 @@ export const Button: FunctionComponent<{ ]; case "outline": if (disabled) { - return [`color-${baseColor}-200`]; + return [`color-${baseColor}@20%`]; } - return [`color-${baseColor}-400`]; + return [`color-${baseColor}`]; case "text": if (disabled) { if (color === "primary") { @@ -232,16 +232,16 @@ export const Button: FunctionComponent<{ return []; } - const baseColor = color === "primary" ? "blue" : "red"; + const baseColor = color === "primary" ? "white" : "red"; if (disabled) { return [ - `border-color-${baseColor}-200`, + `border-color-${baseColor}@20%`, `dark:border-color-${baseColor}-600`, ]; } - return [`border-color-${baseColor}-400`]; + return [`border-color-${baseColor}@40%`]; })(); return ( diff --git a/packages/mobile/src/navigation/navigation-tab-with-drawer.tsx b/packages/mobile/src/navigation/navigation-tab-with-drawer.tsx index 4f7867e13c..1ee5bd0165 100644 --- a/packages/mobile/src/navigation/navigation-tab-with-drawer.tsx +++ b/packages/mobile/src/navigation/navigation-tab-with-drawer.tsx @@ -62,7 +62,11 @@ export const MainTabNavigation: FunctionComponent = () => { /// Auto lock app if app in bg useEffect(() => { const handleAppStateChange = async (nextAppState: string) => { - if (nextAppState === "active" && keychainStore.isAutoLockOn) { + if ( + nextAppState === "active" && + keychainStore.isAutoLockOn && + !focusedScreen.name?.startsWith("Register") + ) { try { await keyRingStore.lock(); smartNavigation.reset({ diff --git a/packages/mobile/src/screens/activity/activity-transaction/index.tsx b/packages/mobile/src/screens/activity/activity-transaction/index.tsx index 14f949a8dd..cd5a794be1 100644 --- a/packages/mobile/src/screens/activity/activity-transaction/index.tsx +++ b/packages/mobile/src/screens/activity/activity-transaction/index.tsx @@ -20,146 +20,155 @@ import { isFeatureAvailable } from "utils/index"; export const ActivityNativeTab: FunctionComponent<{ isOpenModal: boolean; setIsOpenModal: any; -}> = observer(({ isOpenModal, setIsOpenModal }) => { - const style = useStyle(); - const { chainStore, accountStore, activityStore } = useStore(); - const current = chainStore.current; - const accountInfo = accountStore.getAccount(current.chainId); + activities: unknown[]; + setActivities: any; + txnFilters: FilterItem[]; + setTxnFilters: any; +}> = observer( + ({ + isOpenModal, + setIsOpenModal, + activities, + setActivities, + txnFilters, + setTxnFilters, + }) => { + const style = useStyle(); + const { chainStore, accountStore, activityStore } = useStore(); + const current = chainStore.current; + const accountInfo = accountStore.getAccount(current.chainId); - const [_date, setDate] = useState(""); - const [activities, setActivities] = useState([]); + const [_date, setDate] = useState(""); - const [filters, setFilters] = useState(txOptions); - const [isLoading, setIsLoading] = useState(true); + const [isLoading, setIsLoading] = useState(true); - const accountOrChainChanged = - activityStore.getAddress !== accountInfo.bech32Address || - activityStore.getChainId !== current.chainId; + const accountOrChainChanged = + activityStore.getAddress !== accountInfo.bech32Address || + activityStore.getChainId !== current.chainId; - useEffect(() => { - // this is required because accountInit sets the nodes on reload, so we wait for accountInit to set the node and then setActivities - // else activityStore.getNodes will be empty - setIsLoading(true); - const timeout = setTimeout(() => { - setActivities(activityStore.sortedNodes); - }, 3000); - setIsLoading(false); + useEffect(() => { + // this is required because accountInit sets the nodes on reload, so we wait for accountInit to set the node and then setActivities + // else activityStore.getNodes will be empty + setIsLoading(true); + const timeout = setTimeout(() => { + setActivities(activityStore.sortedNodes); + }, 3000); + setIsLoading(false); - return () => { - clearTimeout(timeout); - }; - }, [activityStore.sortedNodes]); + return () => { + clearTimeout(timeout); + }; + }, [activityStore.sortedNodes]); - useEffect(() => { - setFilters(txOptions); - }, [accountOrChainChanged]); + useEffect(() => { + setIsLoading(true); + if (activityStore.checkIsNodeUpdated) { + setActivities(activityStore.sortedNodes); + activityStore.setIsNodeUpdated(false); + setIsLoading(false); + } + }, [activityStore.checkIsNodeUpdated]); - useEffect(() => { - setIsLoading(true); - if (activityStore.checkIsNodeUpdated) { - setActivities(activityStore.sortedNodes); - activityStore.setIsNodeUpdated(false); - setIsLoading(false); - } - }, [activityStore.checkIsNodeUpdated]); + useEffect(() => { + if (accountOrChainChanged) { + activityStore.setAddress(accountInfo.bech32Address); + activityStore.setChainId(current.chainId); + } - useEffect(() => { - if (accountOrChainChanged) { - activityStore.setAddress(accountInfo.bech32Address); - activityStore.setChainId(current.chainId); - } + //accountInit is required because in case of a reload, this.nodes becomes empty and should be updated with KVstore's saved nodes + if (accountInfo.bech32Address !== "") { + activityStore.accountInit(); + } + }, [ + accountInfo.bech32Address, + accountOrChainChanged, + activityStore, + current.chainId, + ]); - //accountInit is required because in case of a reload, this.nodes becomes empty and should be updated with KVstore's saved nodes - if (accountInfo.bech32Address !== "") { - activityStore.accountInit(); - } - }, [ - accountInfo.bech32Address, - accountOrChainChanged, - activityStore, - current.chainId, - ]); + const handleFilterChange = (selectedFilters: FilterItem[]) => { + setTxnFilters(selectedFilters); + setIsOpenModal(false); + }; - const handleFilterChange = (selectedFilters: FilterItem[]) => { - setFilters(selectedFilters); - setIsOpenModal(false); - }; + const renderList = (nodes: [s: string] | unknown[]) => { + return ( + { + const isLastPos = index == nodes.length - 1; + const currentDate = moment(item.block.timestamp).format( + "MMMM DD, YYYY" + ); + const previousNode: any = index > 0 ? nodes[index - 1] : null; + const previousDate = previousNode + ? moment(previousNode.block.timestamp).format("MMMM DD, YYYY") + : null; + const shouldDisplayDate = currentDate !== previousDate; - const renderList = (nodes: [s: string] | unknown[]) => { - return ( - { - const isLastPos = index == nodes.length - 1; - const currentDate = moment(item.block.timestamp).format( - "MMMM DD, YYYY" - ); - const previousNode: any = index > 0 ? nodes[index - 1] : null; - const previousDate = previousNode - ? moment(previousNode.block.timestamp).format("MMMM DD, YYYY") - : null; - const shouldDisplayDate = currentDate !== previousDate; + return ( + + {!shouldDisplayDate && ( + + )} + {shouldDisplayDate && ( + + {currentDate} + + )} + + {isLastPos && ( + + )} + + ); + }} + keyExtractor={(_item, index) => index.toString()} + ItemSeparatorComponent={() => ( + + )} + /> + ); + }; - return ( - - {!shouldDisplayDate && ( - - )} - {shouldDisplayDate && ( - - {currentDate} - - )} - - {isLastPos && ( - - )} - - ); - }} - keyExtractor={(_item, index) => index.toString()} - ItemSeparatorComponent={() => ( - - )} - /> + const data = activities.filter((node: any) => + processFilters(txnFilters).includes( + node.transaction.messages.nodes[0].typeUrl + ) ); - }; - - const data = activities.filter((node: any) => - processFilters(filters).includes(node.transaction.messages.nodes[0].typeUrl) - ); - return ( - - {isFeatureAvailable(current.chainId) && - data.length > 0 && - activities.length > 0 ? ( - renderList(data) - ) : activities.length == 0 && isLoading ? ( - + {isFeatureAvailable(current.chainId) && + data.length > 0 && + activities.length > 0 ? ( + renderList(data) + ) : activities.length == 0 && isLoading ? ( + + ) : ( + + )} + setIsOpenModal(false)} + options={txOptions} /> - ) : ( - - )} - setIsOpenModal(false)} - options={txOptions} - /> - - ); -}); + + ); + } +); diff --git a/packages/mobile/src/screens/activity/gov-proposals/activity-row.tsx b/packages/mobile/src/screens/activity/gov-proposals/activity-row.tsx index f278c941b7..5901e6c625 100644 --- a/packages/mobile/src/screens/activity/gov-proposals/activity-row.tsx +++ b/packages/mobile/src/screens/activity/gov-proposals/activity-row.tsx @@ -37,16 +37,16 @@ export const GovActivityRow: FunctionComponent<{ switch (vote.toUpperCase()) { default: case "Yes": - return "yes"; + return "Yes"; case "NO": - return "no"; + return "No"; case "ABSTAIN": - return "abstain"; + return "Abstain"; case "NO_WITH_VETO": - return "no with veto"; + return "No with veto"; } } @@ -71,7 +71,7 @@ export const GovActivityRow: FunctionComponent<{ style={ style.flatten([ "body3", - "padding-4", + "padding-y-6", "color-white", "font-medium", ]) as ViewStyle @@ -83,13 +83,12 @@ export const GovActivityRow: FunctionComponent<{ style={ style.flatten([ "body3", - "padding-2", "color-white@60%", "font-medium", ]) as ViewStyle } > - {`PROPOSAL #${proposalId} . ${ + {`PROPOSAL #${proposalId} • ${ status === "Success" ? "Confirmed" : "Failed" }`} diff --git a/packages/mobile/src/screens/activity/gov-proposals/index.tsx b/packages/mobile/src/screens/activity/gov-proposals/index.tsx index f42a2e70ce..d8f7c13288 100644 --- a/packages/mobile/src/screens/activity/gov-proposals/index.tsx +++ b/packages/mobile/src/screens/activity/gov-proposals/index.tsx @@ -17,28 +17,32 @@ export const GovProposalsTab: FunctionComponent<{ latestBlock: any; nodes: any; setNodes: any; + govFilters: FilterItem[]; + setGovFilters: any; }> = observer( - ({ isOpenModal, setIsOpenModal, latestBlock, nodes, setNodes }) => { + ({ + isOpenModal, + setIsOpenModal, + latestBlock, + nodes, + setNodes, + govFilters, + setGovFilters, + }) => { const style = useStyle(); - const { chainStore, accountStore, activityStore, queriesStore } = - useStore(); + const { chainStore, accountStore, queriesStore } = useStore(); const current = chainStore.current; const accountInfo = accountStore.getAccount(current.chainId); const queries = queriesStore.get(chainStore.current.chainId); const proposalLoading = queries.cosmos.queryGovernance.isFetching; - const [filters, setFilters] = useState(govOptions); const [isLoading, setIsLoading] = useState(true); const [pageInfo, setPageInfo] = useState(); const [loadingRequest, setLoadingRequest] = useState(true); const [fetchedData, setFetchedData] = useState(); - const accountOrChainChanged = - activityStore.getAddress !== accountInfo.bech32Address || - activityStore.getChainId !== current.chainId; - const fetchNodes = async (cursor: any) => { setIsLoading(true); try { @@ -46,7 +50,7 @@ export const GovProposalsTab: FunctionComponent<{ current.chainId, cursor, accountInfo.bech32Address, - filters.map((option) => option.value) + govFilters.map((option) => option.value) ); setFetchedData(fetchedData?.nodes); @@ -72,7 +76,7 @@ export const GovProposalsTab: FunctionComponent<{ useEffect(() => { fetchNodes(""); - }, [filters, latestBlock]); + }, [govFilters, latestBlock]); useEffect(() => { if (fetchedData) { @@ -93,12 +97,8 @@ export const GovProposalsTab: FunctionComponent<{ } }; - useEffect(() => { - setFilters(govOptions); - }, [accountOrChainChanged]); - const handleFilterChange = (selectedFilters: FilterItem[]) => { - setFilters(selectedFilters); + setGovFilters(selectedFilters); fetchNodes(pageInfo?.endCursor); setIsOpenModal(false); }; @@ -129,7 +129,7 @@ export const GovProposalsTab: FunctionComponent<{ }; const data = Object.values(nodes).filter((node: any) => - processFilters(filters).includes(node.option) + processFilters(govFilters).includes(node.option) ); return ( @@ -149,7 +149,7 @@ export const GovProposalsTab: FunctionComponent<{ )} setIsOpenModal(false)} options={govOptions} diff --git a/packages/mobile/src/screens/activity/index.tsx b/packages/mobile/src/screens/activity/index.tsx index 574cd5226f..5eaaf1db1d 100644 --- a/packages/mobile/src/screens/activity/index.tsx +++ b/packages/mobile/src/screens/activity/index.tsx @@ -13,6 +13,8 @@ import { isFeatureAvailable } from "utils/index"; import { TabBarView } from "components/new/tab-bar/tab-bar"; import { RouteProp, useRoute } from "@react-navigation/native"; import { GovProposalsTab } from "screens/activity/gov-proposals"; +import { FilterItem } from "components/filter"; +import { govOptions, txOptions } from "./utils"; export enum ActivityEnum { Transactions = "Transactions", @@ -40,10 +42,18 @@ export const ActivityScreen = observer(() => { const [isOpenModal, setIsOpenModal] = useState(false); const [latestBlock, _setLatestBlock] = useState(); const [govProposalsNodes, setGovProposalsNodes] = useState({}); + const [activities, setActivities] = useState([]); + const [govFilters, setGovFilters] = useState(govOptions); + const [txnFilters, setTxnFilters] = useState(txOptions); - const { analyticsStore, chainStore, accountStore } = useStore(); + const { analyticsStore, chainStore, accountStore, activityStore } = + useStore(); const accountInfo = accountStore.getAccount(chainStore.current.chainId); + const accountOrChainChanged = + activityStore.getAddress !== accountInfo.bech32Address || + activityStore.getChainId !== chainStore.current.chainId; + useEffect(() => { setSelectedId(tabId); }, [route?.params, chainStore.current.chainId, accountInfo.bech32Address]); @@ -61,6 +71,11 @@ export const ActivityScreen = observer(() => { logTabChange(selectedId); }, [selectedId]); + useEffect(() => { + setTxnFilters(txOptions); + setGovFilters(govOptions); + }, [accountOrChainChanged]); + return ( { )} {selectedId === ActivityEnum.GovProposals && ( @@ -136,6 +155,8 @@ export const ActivityScreen = observer(() => { latestBlock={latestBlock} nodes={govProposalsNodes} setNodes={setGovProposalsNodes} + govFilters={govFilters} + setGovFilters={setGovFilters} /> )} diff --git a/packages/mobile/src/screens/governance/details.tsx b/packages/mobile/src/screens/governance/details.tsx index 1476505c42..1dfb5ccd52 100644 --- a/packages/mobile/src/screens/governance/details.tsx +++ b/packages/mobile/src/screens/governance/details.tsx @@ -407,7 +407,6 @@ export const GovernanceDetailsScreen: FunctionComponent = observer(() => { const [txnHash, setTxnHash] = useState(""); const [openTxStateModal, setTxStateModal] = useState(false); const [isSendingTx, setIsSendingTx] = useState(false); - const [vote, setVote] = useState("Unspecified"); const [openGovModel, setGovModalOpen] = useState(false); const queries = queriesStore.get(chainStore.current.chainId); @@ -428,6 +427,9 @@ export const GovernanceDetailsScreen: FunctionComponent = observer(() => { account.bech32Address ).vote; })(); + const [vote, setVote] = useState( + voted !== undefined ? voted : "Unspecified" + ); const voteText = (() => { if (!proposal) { return "Loading..."; @@ -478,6 +480,7 @@ export const GovernanceDetailsScreen: FunctionComponent = observer(() => { } ); } catch (e) { + setVote(voted !== undefined ? voted : "Unspecified"); if ( e?.message === "Request rejected" || e?.message === "Transaction rejected" @@ -518,8 +521,12 @@ export const GovernanceDetailsScreen: FunctionComponent = observer(() => {