Extension: Gov proposal rebranding (#378)

packages/fetch-extension/src/components-v2/search-bar/index.tsx

@@ -6,7 +6,7 @@ import { AddressBookData } from "@keplr-wallet/hooks";
 
 interface Props {
   searchTerm: string;
-  valuesArray: any[] | _DeepReadonlyArray<AddressBookData>;
+  valuesArray: any[] | _DeepReadonlyArray<any>;
   renderResult: (value: any, index: number) => React.ReactNode;
   onSearchTermChange: (term: string) => void;
   itemsStyleProp?: any;

packages/fetch-extension/src/components-v2/search-bar/style.module.scss

@@ -1,7 +1,7 @@
 .searchInput {
   background: transparent;
   border: none;
-  width: 290px;
+  width: 260px;
   color: white;
   font-weight: 400;
   &::placeholder {

packages/fetch-extension/src/components-v2/tabs/tabsPanel-2/index.tsx

@@ -15,6 +15,7 @@ export interface TabsProps {
   onTabChange?: any;
   styleProps?: React.CSSProperties;
   tabHeight?: string;
+  tabStyle?: React.CSSProperties;
 }
 
 export const TabsPanel: React.FC<TabsProps> = ({
@@ -24,6 +25,7 @@ export const TabsPanel: React.FC<TabsProps> = ({
   onTabChange,
   styleProps,
   tabHeight,
+  tabStyle,
 }) => {
   const [selectedTab, setSelectedTab] = useState<string | null>(tabs[0].id);
 
@@ -46,7 +48,10 @@ export const TabsPanel: React.FC<TabsProps> = ({
       style={styleProps ? { ...styleProps } : {}}
     >
       {!showTabsOnBottom && (
-        <div className={style["tab-bar"]}>
+        <div
+          style={tabStyle ? { ...tabStyle } : {}}
+          className={style["tab-bar"]}
+        >
           {tabs.map((tab) => (
             <button
               className={`${style["tab"]} ${

packages/fetch-extension/src/config.ts

@@ -1,7 +1,51 @@
 import { Bech32Address } from "@keplr-wallet/cosmos";
 import { ChainInfo } from "@keplr-wallet/types";
 
-export const EmbedChainInfos: ChainInfo[] = [
+const TEST_NETWORK_CONFIG: ChainInfo = {
+  rpc: "http://34.34.58.246:26657",
+  rest: "http://34.34.58.246:1317",
+  chainId: "test",
+  chainName: "Local Test Network",
+  hideInUI: true,
+  stakeCurrency: {
+    coinDenom: "stake",
+    coinMinimalDenom: "stake",
+    coinDecimals: 18,
+    coinGeckoId: "fetch-ai",
+  },
+  bip44: {
+    coinType: 118,
+  },
+  bech32Config: Bech32Address.defaultBech32Config("fetch"),
+  type: "testnet",
+  currencies: [
+    {
+      coinDenom: "stake",
+      coinMinimalDenom: "stake",
+      coinDecimals: 18,
+      coinGeckoId: "fetch-ai",
+    },
+  ],
+  feeCurrencies: [
+    {
+      coinDenom: "stake",
+      coinMinimalDenom: "stake",
+      coinDecimals: 18,
+      coinGeckoId: "fetch-ai",
+      gasPriceStep: {
+        low: 0,
+        average: 5000000000,
+        high: 6250000000,
+      },
+    },
+  ],
+  features: ["cosmwasm"],
+  walletUrlForStaking: "https://browse-dorado.fetch.ai/validators",
+  govUrl: "http://34.34.58.246:1317/cosmos/gov/v1beta1/proposals",
+  chainSymbolImageUrl: require("./public/assets/svg/wireframe/dorado.svg"),
+};
+
+const EmbedChainInfos: ChainInfo[] = [
   {
     rpc: "https://rpc-fetchhub.fetch-ai.com",
     rest: "https://rest-fetchhub.fetch-ai.com",
@@ -2945,3 +2989,9 @@ export enum TXNTYPE {
   approval = "approval",
   createSecret20ViewingKey = "createSecret20ViewingKey",
 }
+
+if (process.env.NODE_ENV !== "production") {
+  EmbedChainInfos.push(TEST_NETWORK_CONFIG);
+}
+
+export { EmbedChainInfos };

packages/fetch-extension/src/index.tsx

@@ -62,15 +62,21 @@ import { ActivityPage } from "./pages-new/activity";
 import { ActivityDetails } from "./pages-new/activity/activity-details";
 import { AssetView } from "./pages-new/asset-view";
 
+import { DropdownContextProvider } from "@components-v2/dropdown/dropdown-context";
+import { BridgePage } from "./pages-new/bridge";
+import { BridgeHistoryView } from "./pages-new/bridge/bridge-history";
 import { ChangeNamePageV2 } from "./pages-new/keyring-dev/change";
 import { DeleteWallet } from "./pages-new/keyring-dev/delete";
 import { MorePage } from "./pages-new/more";
 import { AppVersion } from "./pages-new/more/app-version";
+import { ExportToMobilePage } from "./pages-new/more/export-to-mobile";
 import { MoreLanguagePage } from "./pages-new/more/language";
 import { ManageNetworks } from "./pages-new/more/manage-networks";
 import { MoreNotifications } from "./pages-new/more/notification";
 import { NotificationOrganizations } from "./pages-new/more/notification/notiphy-notification/notification-organizations";
 import { NotificationTopics } from "./pages-new/more/notification/notiphy-notification/notification-topics";
+import { Proposals } from "./pages-new/more/proposals";
+import { ProposalDetail } from "./pages-new/more/proposals/proposal-details";
 import { SecurityPrivacyPage } from "./pages-new/more/security-privacy";
 import { AutoLockPage } from "./pages-new/more/security-privacy/autolock";
 import { PermissionsGetChainInfosPage } from "./pages-new/more/security-privacy/permissions/get-chain-infos";
@@ -79,21 +85,19 @@ import { Portfolio } from "./pages-new/portfolio";
 import { Receive } from "./pages-new/receive";
 import { SignPageV2 } from "./pages-new/sign";
 import { Stake } from "./pages-new/stake";
-import { ValidatorList } from "./pages-unused/validator-list";
-import { ValidatorListPage } from "./pages-new/validator-list";
 import { Validator } from "./pages-new/validator";
+import { ValidatorListPage } from "./pages-new/validator-list";
 import { Delegate } from "./pages-new/validator/delegate";
 import { Redelegate } from "./pages-new/validator/redelegate";
 import { Unstake } from "./pages-new/validator/unstake";
 import { AxelarBridgeCosmos } from "./pages-unused/axelar-bridge/axelar-bridge-cosmos";
 import { AxelarBridgeEVM } from "./pages-unused/axelar-bridge/axelar-bridge-evm";
+import { ValidatorList } from "./pages-unused/validator-list";
 import { AgentChatSection } from "./pages/agent-chat-section";
 import { ApproveAddChainByNetworkPage } from "./pages/approveAddChainByNetwork";
 import { ApproveSwitchAccountByAddressPage } from "./pages/approveSwitchAccountPage";
 import { ApproveSwitchChainPage } from "./pages/approveSwitchChainPage";
 import { AuthZPage } from "./pages/authz";
-import { BridgePage } from "./pages-new/bridge";
-import { BridgeHistoryView } from "./pages-new/bridge/bridge-history";
 import { ChainSuggestedPage } from "./pages/chain/suggest";
 import { ChatPage } from "./pages/chat";
 import { ChatSection } from "./pages/chat-section";
@@ -110,9 +114,6 @@ import { KeystoneSignPage } from "./pages/keystone/sign";
 import { NewChat } from "./pages/new-chat";
 import { ReviewNotification } from "./pages/notiphy-notification/review-notification";
 import { GrantGlobalPermissionGetChainInfosPage } from "./pages/permission/grant";
-import { Proposals } from "./pages/proposals";
-import { ProposalDetail } from "./pages/proposals/proposal-detail";
-import { PropsalVoteStatus } from "./pages/proposals/proposal-vote-status";
 import { AddEvmChain } from "./pages/setting/addEvmChain";
 import { ChainActivePage } from "./pages/setting/chain-active";
 import { ChatSettings } from "./pages/setting/chat";
@@ -121,8 +122,6 @@ import { Privacy } from "./pages/setting/chat/privacy";
 import { ReadRecipt } from "./pages/setting/chat/readRecipt";
 import { SettingEndpointsPage } from "./pages/setting/endpoints";
 import { StakeComplete } from "./pages/validator/stake-complete";
-import { DropdownContextProvider } from "@components-v2/dropdown/dropdown-context";
-import { ExportToMobilePage } from "./pages-new/more/export-to-mobile";
 
 window.keplr = new Keplr(
   manifest.version,
@@ -452,10 +451,6 @@ ReactDOM.render(
                           path="/proposal-detail/:id"
                           element={<ProposalDetail />}
                         />
-                        <Route
-                          path="/proposal-vote-status/:votedOn/:id"
-                          element={<PropsalVoteStatus />}
-                        />
                         <Route
                           path="/setting/addEvmChain"
                           element={<AddEvmChain />}
@@ -488,7 +483,6 @@ ReactDOM.render(
                           path="/validator/:validator_address/unstake"
                           element={<Unstake />}
                         />
-
                         <Route path="*" element={<StateRenderer />} />
                       </Routes>
                     </ChatStoreProvider>

packages/fetch-extension/src/pages-new/activity/filter/style.module.scss

@@ -6,7 +6,7 @@
   color: white !important;
   font-size: 12px;
   position: absolute;
-  top: -130px;
+  top: -196px;
   right: 0%;
   height: 32px;
   padding: 6px 12px;

packages/fetch-extension/src/pages-new/activity/gov-proposals/activity-row.tsx

@@ -1,34 +1,93 @@
-import { formatActivityHash } from "@utils/format";
+// import { formatActivityHash } from "@utils/format";
 import React from "react";
 import style from "./style.module.scss";
-import govPropsalIcon from "@assets/icon/gov.png";
+import { observer } from "mobx-react-lite";
+import { StatusButton } from "@components-v2/status-button";
+import { useStore } from "../../../stores";
+
+const cardStatus = (status: string) => {
+  switch (status) {
+    case "ABSTAIN":
+      return "Pending";
 
-const getVoteIcon = (vote: string): string => {
-  switch (vote) {
-    case "YES":
-      return "gov-tick.svg";
     case "NO":
-      return "gov-cross.svg";
+      return "Failed";
+
+    case "YES":
+      return "Success";
+
+    case "NO_WITH_VETO":
+      return "Failed";
+
+    default:
+      return "Active";
+  }
+};
+
+const cardStatusTitle = (details: string) => {
+  switch (details) {
     case "ABSTAIN":
-      return "gov-abstain.svg";
+      return "Abstain";
+
+    case "NO":
+      return "No";
+
+    case "YES":
+      return "Yes";
+
     case "NO_WITH_VETO":
-      return "gov-no-veto.svg";
+      return "No With Veto";
+
     default:
-      return "gov-tick-white.svg";
+      return "Active";
   }
 };
 
-const getHash = (proposal: any) => {
-  if (proposal && proposal.id) {
-    return formatActivityHash(proposal.id);
+// const getHash = (proposal: any) => {
+//   if (proposal && proposal.id) {
+//     return formatActivityHash(proposal.id);
+//   }
+//   return null;
+// };
+
+const getProposalIdFromLogs = (logs: string) => {
+  let proposalId = "";
+  const parsedLogs = JSON.parse(logs);
+  let log = [];
+
+  if (Array.isArray(parsedLogs) && parsedLogs.length) {
+    log = parsedLogs?.[0]?.events || [];
+  }
+
+  const attributes =
+    log
+      .map((item: any) => {
+        if (item.type && item.type === "proposal_vote") {
+          return item?.attributes;
+        }
+      })
+      .find((item: any) => item) || [];
+
+  if (Array.isArray(attributes) && attributes.length) {
+    proposalId = attributes.find(
+      (item: any) => item.key === "proposal_id"
+    ).value;
   }
-  return null;
+
+  return proposalId;
 };
 
-export const ActivityRow = ({ node }: { node: any }) => {
+export const ActivityRow = observer(({ node }: { node: any }) => {
   const details = node.option;
-  const hash = getHash(node);
-  const { status, id } = node.transaction;
+  // const hash = getHash(node);
+  const { status, id, log } = node.transaction;
+  const proposalId = getProposalIdFromLogs(log);
+  const { queriesStore, chainStore } = useStore();
+
+  const current = chainStore.current;
+  const queries = queriesStore.get(current.chainId);
+  const proposal = queries.cosmos.queryGovernance.getProposal(proposalId || "");
+
   return (
     <React.Fragment>
       <a
@@ -37,40 +96,31 @@ export const ActivityRow = ({ node }: { node: any }) => {
         rel="noreferrer"
       >
         <div className={style["activityRow"]}>
-          <div className={style["activityCol"]} style={{ width: "7%" }}>
-            <img
-              src={govPropsalIcon}
-              alt={govPropsalIcon}
-              className={style["govImage"]}
-            />
-          </div>
           <div className={style["middle"]}>
-            <div className={style["activityCol"]} style={{ width: "33%" }}>
-              {hash}
+            <div className={style["activityCol"]}>
+              {proposal?.raw.content.title}
             </div>
-            <div className={style["rowSubtitle"]} style={{ width: "53%" }}>
-              {status === "Success" ? "Confirmed" : "Failed"}
+            <div className={style["rowSubtitle"]}>
+              <div>PROPOSAL #{proposalId}</div>
+              <div style={{ fontSize: "14px" }}>●</div>
+              <div>{status === "Success" ? "Confirmed" : "Failed"}</div>
             </div>
           </div>
           <div
             style={{
-              width: "7%",
               justifyContent: "center",
-              marginLeft: "134px",
               display: "flex",
               alignItems: "center",
             }}
           >
-            <img
-              draggable={false}
-              src={require("@assets/svg/" + getVoteIcon(details))}
-              className={style["govImage"]}
-            />{" "}
-            {details}
+            <StatusButton
+              status={cardStatus(details)}
+              title={cardStatusTitle(details)}
+            />
           </div>
         </div>
       </a>
       <div className={style["hr"]} />
     </React.Fragment>
   );
-};
+});