Merge pull request #416 from terra-money/staging

7.2.8

src/app/components/ActionsBackground.tsx

@@ -4,11 +4,11 @@ import styles from "./ActionsBackground.module.scss"
 const ActionsBackground = () => {
   const { name } = useTheme()
 
-  if (name === "light" || name === "whale") {
-    return <></>
+  if (name === "moon") {
+    return <div className={styles.background_blur} />
   }
 
-  return <div className={styles.background_blur} />
+  return <></>
 }
 
 export default ActionsBackground

src/app/sections/DisplayChainsSetting.tsx

@@ -14,9 +14,9 @@ const DisplayChainsSetting = () => {
 
   const onChange = (value: string) => {
     if (isTerraChain(value)) return
-    const newDisplayChains = displayChains.includes(value)
-      ? displayChains.filter((chainID) => chainID !== value)
-      : [...displayChains, value]
+    const newDisplayChains = displayChains?.includes(value)
+      ? displayChains?.filter((chainID) => chainID !== value)
+      : [...(displayChains || []), value]
     changeDisplayChains(newDisplayChains)
     if (value === selectedDisplayChain) {
       changeSelectedDisplayChain(undefined)
@@ -42,7 +42,7 @@ const DisplayChainsSetting = () => {
             )
             .map((chainID) => ({
               value: chainID,
-              selected: displayChains.includes(chainID),
+              selected: displayChains?.includes(chainID),
               label: network[chainID].name,
               icon: network[chainID].icon,
             }))

src/app/sections/LCDSetting.tsx

@@ -3,7 +3,7 @@ import { useForm } from "react-hook-form"
 import { Form, FormItem, Input } from "components/form"
 import { useTranslation } from "react-i18next"
 import { useNetworks } from "app/InitNetworks"
-import ChainSelector from "components/form/ChainSelector"
+import ChainSelector from "components/form/Selectors/ChainSelector/ChainSelector"
 import { useEffect, useMemo, useState } from "react"
 import { Button } from "components/general"
 import styles from "./LCDSetting.module.scss"

src/components/form/Selectors/AssetSelector/AssetList.tsx

@@ -0,0 +1,60 @@
+import styles from "../../ChainSelector.module.scss"
+import WithSearchInput from "pages/custom/WithSearchInput"
+import classNames from "classnames"
+
+interface AssetType {
+  denom: string
+  balance: string
+  icon: string
+  symbol: string
+  price: number
+  chains: string[]
+}
+
+interface Props {
+  list: AssetType[]
+  onChange: (symbol: string, index: number) => void
+  value: string
+  small?: boolean
+  noSearch?: boolean
+}
+
+const ChainList = ({ list, onChange, value, small, noSearch }: Props) => {
+  return (
+    <div className={styles.options}>
+      <WithSearchInput disabled={noSearch} inline gap={4}>
+        {(search) => (
+          <div
+            className={classNames(
+              styles.options__container,
+              small && styles.options__container__small
+            )}
+          >
+            {list
+              .filter(
+                ({ denom, symbol }) =>
+                  denom.toLowerCase().includes(search.toLowerCase()) ||
+                  symbol.toLowerCase().includes(search.toLowerCase())
+              )
+              .map(({ denom, symbol, icon }, index) => (
+                <button
+                  className={symbol === value ? styles.active : ""}
+                  key={denom}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    onChange(denom, index)
+                  }}
+                >
+                  <img src={icon} alt={denom} />
+                  {symbol}
+                </button>
+              ))}
+          </div>
+        )}
+      </WithSearchInput>
+    </div>
+  )
+}
+
+export default ChainList

src/components/form/Selectors/AssetSelector/AssetSelector.tsx

@@ -0,0 +1,74 @@
+import { useState, useRef, useEffect } from "react"
+import styles from "../../ChainSelector.module.scss"
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
+import AssetList from "./AssetList"
+
+interface AssetType {
+  denom: string
+  balance: string
+  icon: string
+  symbol: string
+  price: number
+  chains: string[]
+}
+
+interface Props {
+  assetList: AssetType[]
+  onChange: (chain: string) => void
+  value: string
+  assetsByDenom: Record<string, AssetType>
+}
+
+const AssetSelector = ({
+  assetList,
+  onChange,
+  value,
+  assetsByDenom,
+}: Props) => {
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      setOpen(false)
+    }
+  }
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  const handleSelection = (denom: string) => {
+    onChange(denom)
+    setOpen(false)
+  }
+
+  return (
+    <div className={styles.container} ref={ref}>
+      <button
+        type="button"
+        className={styles.selector}
+        onClick={(e) => {
+          e.stopPropagation()
+          if (e.screenX && e.screenY) setOpen((o) => !o) // negate onClick triggered by enter key press
+        }}
+      >
+        <span>
+          <img
+            src={assetsByDenom[value]?.icon}
+            alt={assetsByDenom[value]?.denom}
+          />{" "}
+          {assetsByDenom[value]?.symbol}
+        </span>{" "}
+        <ArrowDropDownIcon style={{ fontSize: 20 }} className={styles.caret} />
+      </button>
+      {open && (
+        <AssetList list={assetList} onChange={handleSelection} value={value} />
+      )}
+    </div>
+  )
+}
+
+export default AssetSelector

src/components/form/ChainList.tsx → src/components/form/Selectors/ChainSelector/ChainList.tsx

@@ -1,4 +1,4 @@
-import styles from "./ChainSelector.module.scss"
+import styles from "../../ChainSelector.module.scss"
 import WithSearchInput from "pages/custom/WithSearchInput"
 import classNames from "classnames"
 

src/components/form/ChainSelector.tsx → src/components/form/Selectors/ChainSelector/ChainSelector.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState, useRef, useEffect } from "react"
-import styles from "./ChainSelector.module.scss"
+import styles from "../../ChainSelector.module.scss"
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"
 import { useNetworks } from "app/InitNetworks"
 import ChainList from "./ChainList"

src/components/form/index.ts

@@ -14,7 +14,7 @@ export { default as Checkbox } from "./Checkbox"
 export * from "./Checkbox"
 export { default as Toggle } from "./Toggle"
 export { default as Upload } from "./Upload"
-export { default as ChainSelector } from "./ChainSelector"
+export { default as ChainSelector } from "./Selectors/ChainSelector/ChainSelector"
 
 /* modules */
 export { default as Paste } from "./Paste"

src/components/layout/ChainFilter.tsx

@@ -51,7 +51,7 @@ const ChainFilter = ({
     () =>
       sortedDisplayChains
         .map((id) => network[id])
-        .filter((n) => displayChains.includes(n?.chainID)),
+        .filter((n) => displayChains?.includes(n?.chainID)),
     [network, sortedDisplayChains, displayChains]
   )
 

src/components/layout/OtherChainsButton.tsx

@@ -21,7 +21,7 @@ const OtherChainsButton = ({ list, handleSetChain }: Props) => {
   const closePopover = () => setKey((key) => key + 1)
 
   const onClick = (chainID: string) => {
-    if (displayChains.includes(chainID)) {
+    if (displayChains?.includes(chainID)) {
       changeSelectedDisplayChain(chainID)
       handleSetChain(chainID)
     } else {

src/components/layout/SimpleChainList.tsx

@@ -12,9 +12,10 @@ const cx = classNames.bind(styles)
 const SimpleChainList = ({ list, onClick }: Props) => {
   const { displayChains } = useDisplayChains()
   const sortedList = list.sort((a, b) =>
-    displayChains.includes(a.chainID) && !displayChains.includes(b.chainID)
+    displayChains?.includes(a.chainID) && !displayChains?.includes(b.chainID)
       ? -1
-      : !displayChains.includes(a.chainID) && displayChains.includes(b.chainID)
+      : !displayChains?.includes(a.chainID) &&
+        displayChains?.includes(b.chainID)
       ? 1
       : 0
   )
@@ -25,7 +26,7 @@ const SimpleChainList = ({ list, onClick }: Props) => {
         <button
           key={chainID}
           className={cx(styles.button, {
-            [styles.active]: displayChains.includes(chainID),
+            [styles.active]: displayChains?.includes(chainID),
           })}
           onClick={() => onClick(chainID)}
         >

src/components/layout/Table.module.scss

@@ -12,8 +12,8 @@
   }
 
   td {
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 16px;
+    padding-right: 16px;
   }
 
   tr {
@@ -25,7 +25,7 @@
 
   thead {
     th {
-      padding: 12px;
+      padding: 12px 16px;
       position: sticky;
       top: 0;
       background: hsl(
@@ -62,7 +62,7 @@
   }
 
   td {
-    padding: 10px 20px;
+    padding: 10px 16px;
     border-top: 1px solid var(--card-border);
   }
 }

src/data/queries/gov.ts

@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next"
-import { useQuery } from "react-query"
+import { useQueries, useQuery } from "react-query"
 import { last } from "ramda"
 import { sentenceCase } from "sentence-case"
 import { AccAddress, Proposal, Vote } from "@terra-money/feather.js"
@@ -116,15 +116,12 @@ export interface ProposalResult46 {
 /* proposals */
 export const useProposals = (status: ProposalStatus) => {
   const networks = useNetwork()
-  return useQuery(
-    [queryKey.gov.proposals, status],
-    async () => {
-      const chainList = Object.values(networks)
-      // TODO: Pagination
-      // Required when the number of results exceed 100
-      // About 50 passed propsals from 2019 to 2021
-      const proposals = await Promise.all(
-        chainList.map(async ({ lcd, version }) => {
+
+  return useQueries(
+    Object.values(networks).map(({ lcd, version, chainID }) => {
+      return {
+        queryKey: [queryKey.gov.proposals, lcd, status],
+        queryFn: async () => {
           if (version === "0.46") {
             const {
               data: { proposals },
@@ -136,30 +133,32 @@ export const useProposals = (status: ProposalStatus) => {
               },
             })
 
-            return (proposals as ProposalResult46[]).map((prop) => ({
-              ...prop,
-              proposal_id: prop.id,
-              content: prop.messages.length
-                ? prop.messages[0]["@type"] ===
-                  "/cosmos.gov.v1.MsgExecLegacyContent"
-                  ? prop.messages[0].content
+            return (
+              (proposals as ProposalResult46[]).map((prop) => ({
+                ...prop,
+                proposal_id: prop.id,
+                content: prop.messages.length
+                  ? prop.messages[0]["@type"] ===
+                    "/cosmos.gov.v1.MsgExecLegacyContent"
+                    ? prop.messages[0].content
+                    : {
+                        ...prop.messages[0],
+                        title: JSON.parse(prop.metadata).title,
+                        description: JSON.parse(prop.metadata).summary,
+                      }
                   : {
-                      ...prop.messages[0],
+                      "@type": "/cosmos.gov.v1.TextProposal",
                       title: JSON.parse(prop.metadata).title,
                       description: JSON.parse(prop.metadata).summary,
-                    }
-                : {
-                    "@type": "/cosmos.gov.v1.TextProposal",
-                    title: JSON.parse(prop.metadata).title,
-                    description: JSON.parse(prop.metadata).summary,
-                  },
-              final_tally_result: {
-                yes: prop.final_tally_result.yes_count,
-                abstain: prop.final_tally_result.abstain_count,
-                no: prop.final_tally_result.no_count,
-                no_with_veto: prop.final_tally_result.no_with_veto_count,
-              },
-            })) as ProposalResult[]
+                    },
+                final_tally_result: {
+                  yes: prop.final_tally_result.yes_count,
+                  abstain: prop.final_tally_result.abstain_count,
+                  no: prop.final_tally_result.no_count,
+                  no_with_veto: prop.final_tally_result.no_with_veto_count,
+                },
+              })) as ProposalResult[]
+            ).map((prop) => ({ prop, chain: chainID }))
           } else {
             const {
               data: { proposals },
@@ -170,23 +169,15 @@ export const useProposals = (status: ProposalStatus) => {
                 proposal_status: Proposal.Status[status],
               },
             })
-            return proposals as ProposalResult[]
+            return (proposals as ProposalResult[]).map((prop) => ({
+              prop,
+              chain: chainID,
+            }))
           }
-        })
-      )
-
-      return proposals
-        .reduce(
-          (acc, cur, i) => {
-            cur.map((prop) => acc.push({ prop, chain: chainList[i].chainID }))
-            return acc
-          },
-          [] as { prop: ProposalResult; chain: string }[]
-          // remove proposals with unsupported protobuf content
-        )
-        .filter(({ prop }) => prop.content)
-    },
-    { ...RefetchOptions.DEFAULT }
+        },
+        ...RefetchOptions.DEFAULT,
+      }
+    })
   )
 }