Skip to content

Commit

Permalink
Send UI fixes (#410)
Browse files Browse the repository at this point in the history 
Co-authored-by: agent-dominatrix <128386379+agent-dominatrix@users.noreply.github.com>
  • Loading branch information
@AbbasAliLokhandwala @agent-dominatrix
AbbasAliLokhandwala and agent-dominatrix authored Oct 22, 2024
1 parent 1d7aeaf commit a53fd23
Show file tree
Hide file tree
Showing 15 changed files with 57 additions and 27 deletions.
23 changes: 17 additions & 6 deletions packages/fetch-extension/src/components-v2/form/coin-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,8 +252,8 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
const [inputInFiatCurrency, setInputInFiatCurrency] = useState<
string | undefined
>("");

const { queriesStore, priceStore, accountStore, chainStore } = useStore();
const isEvm = chainStore.current.features?.includes("evm") ?? false;
const accountInfo = accountStore.getAccount(chainStore.current.chainId);
const queries = queriesStore.get(chainStore.current.chainId);
const queryBalances = queriesStore
Expand Down Expand Up @@ -291,17 +291,24 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
const inUsd = value && value.shrink(true).maxDecimals(6).toString();
return inUsd;
};
useEffect(() => {
const valueInUsd = convertToFiatCurrency(balance);
setInputInFiatCurrency(valueInUsd);
}, [amountConfig.sendCurrency]);

const balancesMap = new Map(
queryBalances.balances.map((bal) => [
bal.currency.coinMinimalDenom,
bal.balance,
])
);

const balanceETH =
balancesMap.get(amountConfig.sendCurrency.coinMinimalDenom) ||
new CoinPretty(amountConfig.sendCurrency, new Int(0));

useEffect(() => {
const currentChainBalance = isEvm ? balanceETH : balance;
const valueInUsd = convertToFiatCurrency(currentChainBalance);
setInputInFiatCurrency(valueInUsd);
}, [amountConfig.sendCurrency]);

return (
<React.Fragment>
<Label style={{ fontSize: "14px", color: "rgba(255,255,255,0.6)" }}>
Expand All @@ -324,7 +331,11 @@ export const TokenSelectorDropdown: React.FC<TokenDropdownProps> = ({
}}
>
{" "}
{`Available: ${balance.shrink(true).maxDecimals(6).toString()} `}
{`Available: ${
isEvm
? balanceETH.shrink(true).maxDecimals(6).toString()
: balance.shrink(true).maxDecimals(6).toString()
} `}
{inputInFiatCurrency &&
`(${inputInFiatCurrency} ${fiatCurrency.toUpperCase()})`}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/components-v2/form/fee-buttons-v2/fee-buttons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -647,7 +647,7 @@ export const FeeButtonsInner: FunctionComponent<
<ButtonV2
text="Save changes"
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
7 changes: 7 additions & 0 deletions packages/fetch-extension/src/layouts-v2/header-layout/style.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@
flex-direction: column;
background-color: #000d3d;
background-image: url("../../public/assets/svg/wireframe/bg.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow-y: hidden;
overflow-x: hidden;
}
Expand All @@ -27,6 +30,10 @@
height: 100vh;
display: flex;
flex-direction: column;
background-color: #030e3b;
background-size: cover;
background-image: url("../../public/assets/svg/wireframe/bg.svg");
background-repeat: no-repeat;
overflow-y: hidden;
overflow-x: hidden;
}
Expand Down
1 change: 0 additions & 1 deletion packages/fetch-extension/src/pages-new/activity/activity-details/style.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/pages-new/bridge/fetchhub-bridge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export const FetchhubBridge: FunctionComponent<{

<ButtonV2
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
3 changes: 3 additions & 0 deletions packages/fetch-extension/src/pages-new/main/ledger-app-modal/ledger-app-modal.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@

.ledgerModalBody {
background-color: #000d3d;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background-image: url("../../../public/assets/svg/wireframe/bg.svg");
}
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/pages-new/more/ibc-transfer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ export const IBCTransferPageChannel: FunctionComponent<{
</Alert>
<ButtonV2
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/pages-new/more/security-privacy/autolock/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export const AutoLockPage: FunctionComponent = () => {
/>
<ButtonV2
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
5 changes: 1 addition & 4 deletions packages/fetch-extension/src/pages-new/more/security-privacy/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export const SecurityPrivacyPage: FunctionComponent = () => {
style={{
background: "rgba(255,255,255,0.1)",
marginBottom: "8px",
height: "78px",
padding: "18px",
}}
leftImageStyle={{ background: "transparent" }}
Expand Down Expand Up @@ -85,7 +84,6 @@ export const SecurityPrivacyPage: FunctionComponent = () => {
background: "rgba(255,255,255,0.1)",
marginBottom: "8px",
height: "78px",
padding: "18px",
}}
leftImageStyle={{ background: "transparent" }}
heading={intl.formatMessage({
Expand All @@ -108,8 +106,7 @@ export const SecurityPrivacyPage: FunctionComponent = () => {
leftImage={require("@assets/svg/wireframe/auto-lock-timer.svg")}
style={{
background: "rgba(255,255,255,0.1)",
height: "78px",
padding: "18px",
paddingLeft: "18px",
}}
leftImageStyle={{ background: "transparent" }}
heading={intl.formatMessage({
Expand Down
26 changes: 18 additions & 8 deletions packages/fetch-extension/src/pages-new/send/send-phase-1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,23 @@ export const SendPhase1: React.FC<SendPhase1Props> = observer(
setFromPhase1(true);
}, []);

const spendableBalances = queries.cosmos.querySpendableBalances
.getQueryBech32Address(accountInfo.bech32Address)
.balances?.find(
(bal) =>
sendConfigs.amountConfig.sendCurrency.coinMinimalDenom ===
bal.currency.coinMinimalDenom
);
const isEvm = chainStore.current.features?.includes("evm") ?? false;
const spendableBalances = isEvm
? queries.queryBalances
.getQueryBech32Address(accountInfo.bech32Address)
.balances?.find(
(bal) =>
sendConfigs.amountConfig.sendCurrency.coinMinimalDenom ===
bal.currency.coinMinimalDenom
)?.balance
: queries.cosmos.querySpendableBalances
.getQueryBech32Address(accountInfo.bech32Address)
.balances?.find(
(bal) =>
sendConfigs.amountConfig.sendCurrency.coinMinimalDenom ===
bal.currency.coinMinimalDenom
);

const balance = spendableBalances
? spendableBalances
: new CoinPretty(sendConfigs.amountConfig.sendCurrency, new Int(0));
Expand Down Expand Up @@ -127,7 +137,7 @@ export const SendPhase1: React.FC<SendPhase1Props> = observer(
navigate("/send", { state: { isFromPhase1: true } });
}}
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/pages-new/send/send-phase-2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export const SendPhase2: React.FC<SendPhase2Props> = observer(
text="Review transaction"
gradientText=""
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/pages-new/validator/delegate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,7 +248,7 @@ export const Delegate: FunctionComponent = observer(() => {
<ButtonV2
text=""
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/pages-new/validator/redelegate/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,7 @@ export const Redelegate = observer(() => {
<ButtonV2
text=""
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
2 changes: 1 addition & 1 deletion packages/fetch-extension/src/pages-new/validator/unstake/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ export const Unstake = observer(() => {
<ButtonV2
text=""
styleProps={{
width: "100%",
width: "94%",
padding: "12px",
height: "56px",
margin: "0 auto",
Expand Down
3 changes: 3 additions & 0 deletions packages/fetch-extension/src/pages/ledger/style.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
flex-direction: column;
background-color: #000d3d;
background-image: url("../../public/assets/svg/wireframe/bg.svg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.confirmLedgerDialog {
Expand Down

0 comments on commit a53fd23

Please sign in to comment.