diff --git a/packages/fetch-extension/src/components/form/coin-input.module.scss b/packages/fetch-extension/src/components/form/coin-input.module.scss deleted file mode 100644 index 725f9a681d..0000000000 --- a/packages/fetch-extension/src/components/form/coin-input.module.scss +++ /dev/null @@ -1,85 +0,0 @@ -@import "../../../../../node_modules/argon-dashboard-react/src/assets/scss/argon-dashboard/custom/functions"; -@import "../../../../../node_modules/argon-dashboard-react/src/assets/scss/argon-dashboard/custom/mixins"; -@import "../../../../../node_modules/argon-dashboard-react/src/assets/scss/argon-dashboard/custom/variables"; - -.input { - box-shadow: $input-alternative-box-shadow !important; - - &:focus { - box-shadow: $input-focus-alternative-box-shadow !important; - - & + .select { - box-shadow: $input-focus-alternative-box-shadow !important; - } - } -} - -.tokenSelector { - width: 100%; - height: 46px; - - button { - width: 100%; - - background: white; - text-align: left; - font-weight: normal; - } - - :global(.dropdown-toggle) { - box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02) !important; - - &::after { - border-radius: 2px; - content: " "; - display: block; - height: 0.625em; - margin-top: -0.4375em; - pointer-events: none; - position: absolute; - top: 50%; - transform: rotate(-45deg); - transform-origin: center; - width: 0.625em; - border: 0 solid black; - border-bottom-width: 3px; - border-left-width: 3px; - right: 1.125em; - z-index: 4; - } - } - - :global(.dropdown-menu.show) { - width: 100%; - } - - &:global(.disabled) { - button { - background: #e9ecef; - border-color: #e9ecef; - } - } -} - -.balance { - float: right; - font-weight: normal; - color: #555555; - - &.clickable { - cursor: pointer; - text-decoration: underline; - - &:hover { - color: black; - } - - &.clicked { - color: black; - } - } -} -.errorText { - color: #fb8c72; - font: 10px; -} diff --git a/packages/fetch-extension/src/components/form/coin-input.tsx b/packages/fetch-extension/src/components/form/coin-input.tsx deleted file mode 100644 index 6644ac00ed..0000000000 --- a/packages/fetch-extension/src/components/form/coin-input.tsx +++ /dev/null @@ -1,226 +0,0 @@ -import React, { FunctionComponent, useMemo, useState } from "react"; - -import classnames from "classnames"; -import styleCoinInput from "./coin-input.module.scss"; - -import { - ButtonDropdown, - DropdownItem, - DropdownMenu, - DropdownToggle, - FormGroup, - Input, - Label, -} from "reactstrap"; -import { observer } from "mobx-react-lite"; -import { - EmptyAmountError, - InvalidNumberAmountError, - ZeroAmountError, - NegativeAmountError, - InsufficientAmountError, - IAmountConfig, - BridgeAmountError, -} from "@keplr-wallet/hooks"; -import { CoinPretty, Dec, DecUtils, Int } from "@keplr-wallet/unit"; -import { FormattedMessage, useIntl } from "react-intl"; -import { useStore } from "../../stores"; -import { AppCurrency } from "@keplr-wallet/types"; - -export interface CoinInputProps { - amountConfig: IAmountConfig; - - balanceText?: string; - - className?: string; - label?: string; - - disableAllBalance?: boolean; - - overrideSelectableCurrencies?: AppCurrency[]; - dropdownDisabled?: boolean; - pageName: string; -} - -export const CoinInput: FunctionComponent = observer( - ({ - amountConfig, - className, - label, - disableAllBalance, - overrideSelectableCurrencies, - dropdownDisabled, - pageName, - }) => { - const intl = useIntl(); - - const { queriesStore, analyticsStore } = useStore(); - const queryBalances = queriesStore - .get(amountConfig.chainId) - .queryBalances.getQueryBech32Address(amountConfig.sender); - - const queryBalance = queryBalances.balances.find( - (bal) => - amountConfig.sendCurrency.coinMinimalDenom === - bal.currency.coinMinimalDenom - ); - const balance = queryBalance - ? queryBalance.balance - : new CoinPretty(amountConfig.sendCurrency, new Int(0)); - - const [randomId] = useState(() => { - const bytes = new Uint8Array(4); - crypto.getRandomValues(bytes); - return Buffer.from(bytes).toString("hex"); - }); - - const error = amountConfig.error; - const errorText: string | undefined = useMemo(() => { - if (error) { - switch (error.constructor) { - case EmptyAmountError: - // No need to show the error to user. - return; - case InvalidNumberAmountError: - return intl.formatMessage({ - id: "input.amount.error.invalid-number", - }); - case ZeroAmountError: - return intl.formatMessage({ - id: "input.amount.error.is-zero", - }); - case NegativeAmountError: - return intl.formatMessage({ - id: "input.amount.error.is-negative", - }); - case InsufficientAmountError: - return intl.formatMessage({ - id: "input.amount.error.insufficient", - }); - case BridgeAmountError: - return error.message; - default: - return intl.formatMessage({ id: "input.amount.error.unknown" }); - } - } - }, [intl, error]); - - const [isOpenTokenSelector, setIsOpenTokenSelector] = useState(false); - - const selectableCurrencies = ( - overrideSelectableCurrencies || amountConfig.sendableCurrencies - ) - .filter((cur) => { - const bal = queryBalances.getBalanceFromCurrency(cur); - return !bal.toDec().isZero(); - }) - .sort((a, b) => { - return a.coinDenom < b.coinDenom ? -1 : 1; - }); - - return ( - - - - { - setIsOpenTokenSelector((value) => !value); - analyticsStore.logEvent("select_token_click", { - pageName, - }); - }} - disabled={dropdownDisabled} - > - - {amountConfig.sendCurrency.coinDenom} - - - {selectableCurrencies.map((currency) => { - return ( - { - e.preventDefault(); - - amountConfig.setSendCurrency(currency); - }} - > - {currency.coinDenom} - - ); - })} - - - - - {label ? ( - - ) : null} - { - e.preventDefault(); - - amountConfig.setAmount(e.target.value); - }} - step={new Dec(1) - .quo( - DecUtils.getPrecisionDec( - amountConfig.sendCurrency?.coinDecimals ?? 0 - ) - ) - .toString(amountConfig.sendCurrency?.coinDecimals ?? 0)} - min={0} - autoComplete="off" - /> - {errorText != null ? ( -
{errorText}
- ) : null} - - - ); - } -); diff --git a/packages/fetch-extension/src/components/form/fee-buttons/fee-buttons.module.scss b/packages/fetch-extension/src/components/form/fee-buttons/fee-buttons.module.scss deleted file mode 100644 index cee1eba119..0000000000 --- a/packages/fetch-extension/src/components/form/fee-buttons/fee-buttons.module.scss +++ /dev/null @@ -1,84 +0,0 @@ -$border-radius: 6px; - -.buttons { - display: flex; - flex-direction: column; - - .button { - flex: 1; - padding-left: 0; - padding-right: 0; - - box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02); - &:not(:global(.btn-primary)) { - background-color: white; - } - - &:focus { - z-index: unset; - } - - &:first-child { - border-radius: $border-radius $border-radius 0 0 !important; - } - - &:last-child { - border-radius: 0 0 $border-radius $border-radius !important; - } - - .title { - font-weight: bold; - } - - .fiat { - font-size: 10px; - } - - .coin { - font-size: 10px; - } - } -} -.setGasButton { - float: right; -} - -.tokenSelector { - width: 100%; - height: 46px; - - button { - width: 100%; - - background: white; - text-align: left; - font-weight: normal; - } - - :global(.dropdown-toggle) { - box-shadow: 0 1px 3px rgba(50, 50, 93, 0.15), 0 1px 0 rgba(0, 0, 0, 0.02) !important; - - &::after { - border-radius: 2px; - content: " "; - display: block; - height: 0.625em; - margin-top: -0.4375em; - pointer-events: none; - position: absolute; - top: 50%; - transform: rotate(-45deg); - transform-origin: center; - width: 0.625em; - border: 0 solid black; - border-bottom-width: 3px; - border-left-width: 3px; - right: 1.125em; - z-index: 4; - } - } - - :global(.dropdown-menu.show) { - width: 100%; - } -} diff --git a/packages/fetch-extension/src/components/form/fee-buttons/index.ts b/packages/fetch-extension/src/components/form/fee-buttons/index.ts deleted file mode 100644 index 651b54e339..0000000000 --- a/packages/fetch-extension/src/components/form/fee-buttons/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./fee-buttons"; diff --git a/packages/fetch-extension/src/components/form/gas-form/auto.module.scss b/packages/fetch-extension/src/components/form/gas-form/auto.module.scss deleted file mode 100644 index 1e2a094887..0000000000 --- a/packages/fetch-extension/src/components/form/gas-form/auto.module.scss +++ /dev/null @@ -1,12 +0,0 @@ -.container { - display: flex; - flex-direction: column; - - .gasAdjustmentContainer { - display: flex; - - .multiplyIcon { - margin: 42px 8px 0; - } - } -} diff --git a/packages/fetch-extension/src/components/form/gas-form/auto.tsx b/packages/fetch-extension/src/components/form/gas-form/auto.tsx deleted file mode 100644 index 1b21f417a9..0000000000 --- a/packages/fetch-extension/src/components/form/gas-form/auto.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { observer } from "mobx-react-lite"; -import styleAuto from "./auto.module.scss"; -import { Input } from "../input"; -import { IGasConfig, IGasSimulator } from "@keplr-wallet/hooks"; - -const MultiplyIcon: FunctionComponent<{ - size: number; - color: string; -}> = ({ size, color }) => { - return ( - - - - ); -}; - -export const GasAutoContainer: FunctionComponent<{ - gasConfig: IGasConfig; - - gasSimulator: IGasSimulator; -}> = observer(({ gasConfig, gasSimulator }) => { - return ( -
-
- { - e.preventDefault(); - - gasSimulator.setGasAdjustment(e.target.value); - }} - /> -
- -
- -
-
- -
-
- ); -}); diff --git a/packages/fetch-extension/src/components/form/gas-form/container.module.scss b/packages/fetch-extension/src/components/form/gas-form/container.module.scss deleted file mode 100644 index cc4e54f9d4..0000000000 --- a/packages/fetch-extension/src/components/form/gas-form/container.module.scss +++ /dev/null @@ -1,25 +0,0 @@ -.container { - padding: 12px; - background-color: white; - border-radius: 6px; - - box-shadow: 0 1px 3px rgb(50 50 93 / 15%), 0 1px 0 rgb(0 0 0 / 2%) !important; - - margin-top: 2.5rem; - margin-bottom: 1.5rem; - - .autoButtonGroup { - margin-bottom: 0.5rem; - - display: flex; - align-items: center; - - .label { - font-weight: 500; - font-size: 14px; - line-height: 21px; - color: #323c4a; - margin-right: 0.325rem; - } - } -} diff --git a/packages/fetch-extension/src/components/form/gas-form/container.tsx b/packages/fetch-extension/src/components/form/gas-form/container.tsx deleted file mode 100644 index 2521d34873..0000000000 --- a/packages/fetch-extension/src/components/form/gas-form/container.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { FunctionComponent } from "react"; -import { IGasConfig, IGasSimulator } from "@keplr-wallet/hooks"; -import { observer } from "mobx-react-lite"; -import { GasAutoContainer } from "./auto"; -import { GasInput } from "../gas-input"; -import styleContainer from "./container.module.scss"; -import { Alert } from "reactstrap"; - -export const GasContainer: FunctionComponent<{ - label?: string; - gasConfig: IGasConfig; - - gasSimulator: IGasSimulator & { - outdatedCosmosSdk?: boolean; - forceDisabled?: boolean; - forceDisableReason?: Error | undefined; - }; -}> = observer(({ label, gasConfig, gasSimulator }) => { - return ( -
-
-
-
Auto
- -
- {gasSimulator.outdatedCosmosSdk ? ( - - Gas estimation is not supported, because this chain uses outdated - cosmos-sdk - - ) : null} - {gasSimulator.forceDisabled && gasSimulator.forceDisableReason ? ( - {gasSimulator.forceDisableReason.message} - ) : null} - {gasSimulator.enabled ? ( - - ) : ( - - )} -
- ); -}); diff --git a/packages/fetch-extension/src/components/form/gas-form/index.ts b/packages/fetch-extension/src/components/form/gas-form/index.ts deleted file mode 100644 index 5bf6e26adf..0000000000 --- a/packages/fetch-extension/src/components/form/gas-form/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./container"; -export * from "./auto"; diff --git a/packages/fetch-extension/src/components/form/gas-input.tsx b/packages/fetch-extension/src/components/form/gas-input.tsx deleted file mode 100644 index 8b7c5e4c6f..0000000000 --- a/packages/fetch-extension/src/components/form/gas-input.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { FunctionComponent, useState } from "react"; -import { FormGroup, Input, Label } from "reactstrap"; -import { IGasConfig } from "@keplr-wallet/hooks"; -import { observer } from "mobx-react-lite"; - -export interface GasInputProps { - gasConfig: IGasConfig; - - label?: string; - className?: string; -} - -// TODO: Handle the max block gas limit(?) -export const GasInput: FunctionComponent = observer( - ({ gasConfig, label, className }) => { - const [inputId] = useState(() => { - const bytes = new Uint8Array(4); - crypto.getRandomValues(bytes); - return `input-${Buffer.from(bytes).toString("hex")}`; - }); - - return ( - - {label ? ( - - ) : null} - { - gasConfig.setGas(e.target.value); - e.preventDefault(); - }} - autoComplete="off" - /> - - ); - } -); diff --git a/packages/fetch-extension/src/components/form/index.tsx b/packages/fetch-extension/src/components/form/index.tsx index eb69160acf..79f06a1a5c 100644 --- a/packages/fetch-extension/src/components/form/index.tsx +++ b/packages/fetch-extension/src/components/form/index.tsx @@ -1,9 +1,6 @@ export * from "./input"; export * from "./textarea"; export * from "./address-input"; -export * from "./coin-input"; -export * from "./fee-buttons"; export * from "./memo-input"; -export * from "./gas-input"; export * from "./ibc"; export * from "./password-input"; diff --git a/packages/fetch-extension/src/components/proposal/proposal-view/index.tsx b/packages/fetch-extension/src/components/proposal/proposal-view/index.tsx deleted file mode 100644 index bce8b9ec66..0000000000 --- a/packages/fetch-extension/src/components/proposal/proposal-view/index.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import React from "react"; -import { FunctionComponent } from "react"; -import style from "./style.module.scss"; -import classnames from "classnames"; -import { FormattedMessage } from "react-intl"; -import { Button } from "reactstrap"; -import { useNavigate } from "react-router"; -import { useStore } from "../../../stores"; - -export const ProposalView: FunctionComponent = () => { - const navigate = useNavigate(); - const { analyticsStore } = useStore(); - - return ( -
-
-

- -

-

- -

-
-
- - -
- ); -}; diff --git a/packages/fetch-extension/src/components/proposal/proposal-view/style.module.scss b/packages/fetch-extension/src/components/proposal/proposal-view/style.module.scss deleted file mode 100644 index 8aa6285a66..0000000000 --- a/packages/fetch-extension/src/components/proposal/proposal-view/style.module.scss +++ /dev/null @@ -1,29 +0,0 @@ -@import "../../../styles/var"; - -.containerInner { - display: flex; - flex-direction: row; - - height: 48px; - justify-content: center; - align-items: center; - - .paragraphMain { - line-height: 1.35; - } - - .paragraphSub { - line-height: 1.35; - color: #8898aa; - } - - .vertical { - display: flex; - flex-direction: column; - } - - .button { - min-width: 76px; - padding: 6px 10px 4px; - } -} diff --git a/packages/fetch-extension/src/components/proposal/proposal/index.tsx b/packages/fetch-extension/src/components/proposal/proposal/index.tsx deleted file mode 100644 index b969ffb107..0000000000 --- a/packages/fetch-extension/src/components/proposal/proposal/index.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { FunctionComponent } from "react"; -import style from "./style.module.scss"; -import { GovStatusChip } from "@components/chips/gov-chip"; -import { useNavigate } from "react-router"; -import { proposalOptions } from "../../../pages/proposals"; -import { useStore } from "../../../stores"; -import { fetchVote } from "@utils/fetch-proposals"; -import { ProposalSetup } from "src/@types/proposal-type"; - -interface Props { - title: string; - id: string; - status: string; -} - -export const Proposal: FunctionComponent = (props) => { - const { title, status, id } = props; - const { chainStore, accountStore, proposalStore, analyticsStore } = - useStore(); - const navigate = useNavigate(); - let icon, color, background, name; - const storedProposals: ProposalSetup = proposalStore.proposals; - - const accountInfo = accountStore.getAccount(chainStore.current.chainId); - const [alreadyVoted, setAlreadyVoted] = useState(""); - useEffect(() => { - (async () => { - const proposalItem = storedProposals.votedProposals.find( - (proposal) => proposal.proposal_id === id - ); - if (!proposalItem) { - return; - } - try { - const vote = await fetchVote( - id, - accountInfo.bech32Address, - chainStore.current.rest - ); - const voted = vote.vote.option; - setAlreadyVoted(voted); - } catch (e) {} - })(); - }, []); - - switch (status) { - case proposalOptions.ProposalPassed: - icon = "gov-tick.svg"; - color = "#6AB77A"; - background = "#E3F4E7"; - name = "Passed"; - break; - case proposalOptions.ProposalActive: - icon = "gov-clock.svg"; - color = "#3B82F6"; - background = "#D0DEF5"; - name = "Active"; - break; - case proposalOptions.ProposalRejected: - icon = "gov-cross.svg"; - color = "#DC6461"; - background = "#FBECEC"; - name = "Rejected"; - break; - default: - icon = "gov-cross.svg"; - color = "#DC6461"; - background = "#FBECEC"; - name = "Failed"; - } - const handleClick = () => { - analyticsStore.logEvent("proposal_detail_click"); - if (alreadyVoted !== "" && alreadyVoted !== "Unspecified") { - const voteArr = [ - "VOTE_OPTION_UNSPECIFIED", - "VOTE_OPTION_YES", - "VOTE_OPTION_ABSTAIN", - "VOTE_OPTION_NO", - "VOTE_OPTION_NO_WITH_VETO", - ]; - navigate( - `/proposal-vote-status/${voteArr.indexOf(alreadyVoted)}/${id}?true` - ); - return; - } - navigate(`/proposal-detail/${id}`); - }; - return ( -
-
-

{title}

-

{id}

-
- -
- -
-
- ); -}; diff --git a/packages/fetch-extension/src/components/proposal/proposal/style.module.scss b/packages/fetch-extension/src/components/proposal/proposal/style.module.scss deleted file mode 100644 index a49ddb4e15..0000000000 --- a/packages/fetch-extension/src/components/proposal/proposal/style.module.scss +++ /dev/null @@ -1,42 +0,0 @@ -.proposal { - display: flex; - line-height: 20px; - justify-content: space-between; - margin: 12px 0; - background: #ffffff; - cursor: pointer; - .pContent { - width: 65%; - .pTitle { - font-weight: 400; - font-size: 16px; - color: #525f7f; - margin: 0; - line-height: 22px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-right: 10px; - &::first-letter { - text-transform: capitalize; - } - } - - .pDesc { - font-weight: 400; - font-size: 15px; - color: #808da0; - margin: 0; - line-height: 22px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .govStatus { - display: flex; - width: 30%; - justify-content: space-between; - } -} diff --git a/packages/fetch-extension/src/components/proposal/vote-block/index.tsx b/packages/fetch-extension/src/components/proposal/vote-block/index.tsx deleted file mode 100644 index 45db83d10c..0000000000 --- a/packages/fetch-extension/src/components/proposal/vote-block/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { FunctionComponent } from "react"; -import style from "./style.module.scss"; -import classNames from "classnames"; -interface Props { - title: string; - icon: string; - color: string; - activeColor: string; - id: number; - selected: number; - handleClick: any; - closed: boolean; -} -export const VoteBlock: FunctionComponent = (props) => { - const { title, icon, color, activeColor, id, selected, handleClick, closed } = - props; - const isSelected = id === selected; - const bgColor = isSelected ? activeColor : color; - const txtColor = isSelected ? "white" : "#525F7F"; - const Icon = isSelected ? icon + "-white" : icon; - const cursor = closed ? "not-allowed" : "pointer"; - return ( -
handleClick(id)} - > - -

- {title} -

-
- ); -}; diff --git a/packages/fetch-extension/src/components/proposal/vote-block/style.module.scss b/packages/fetch-extension/src/components/proposal/vote-block/style.module.scss deleted file mode 100644 index 396504d104..0000000000 --- a/packages/fetch-extension/src/components/proposal/vote-block/style.module.scss +++ /dev/null @@ -1,40 +0,0 @@ -.voteBlock { - display: flex; - justify-content: center; - align-items: center; - padding: 10px; - gap: 5px; - cursor: pointer; - - border-radius: 4px; - - .voteImage { - width: 20px; - height: 20px; - } - - .voteText { - margin: 0; - text-align: center; - font-weight: 700; - line-height: 14px; - color: #525f7f; - font-size: 14px; - } -} - -.voteTick { - background: rgba(106, 183, 122, 0.3); -} - -.voteCross { - background: rgba(220, 100, 97, 0.3); -} - -.voteAbstain { - background: rgba(236, 170, 93, 0.3); -} - -.voteNoVeto { - background: rgba(62, 100, 196, 0.3); -}