Skip to content

Commit d4cacab

Browse files
mohandast52mohandast52
authored
Merge pull request #80 from valory-xyz/mohan/other-ui-updates
feat: Other UI updates
2 parents 502f557 + f61b2bc commit d4cacab

File tree

4 files changed

+60
-26
lines changed

4 files changed

+60
-26
lines changed

‎electron/loading/index.html

+18-5
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,33 @@
11
<!doctype html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
67
<link rel="stylesheet" href="../assets/css/antd.css">
78
<link rel="stylesheet" href="./styles.css" />
89
</head>
10+
911
<body>
1012
<main>
1113
<img src="../assets/icons/splash-robot-head.png" alt="logo" />
1214
<div class="ant-spin ant-spin-spinning" aria-live="polite" aria-busy="true">
13-
<span role="img" aria-label="loading" class="anticon anticon-loading anticon-spin ant-spin-dot" style="font-size: 24px;">
14-
<svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="black" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>
15+
<span role="img" aria-label="loading" class="anticon anticon-loading anticon-spin ant-spin-dot"
16+
style="font-size: 24px;">
17+
<svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="black"
18+
aria-hidden="true">
19+
<path
20+
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z">
21+
</path>
22+
</svg>
1523
</span>
1624
</div>
17-
<!-- <div id="text" class="text">Loading...</div> -->
18-
</div>
25+
<div id="text" class="text">
26+
Installing app dependencies...
27+
<br />
28+
This might take a while
29+
</div>
30+
</div>
1931
</body>
2032
<script>
2133
const { ipcRenderer } = require("electron");
@@ -24,4 +36,5 @@
2436
// });
2537
ipcRenderer.send("check", "Starting check...");
2638
</script>
27-
</html>
39+
40+
</html>

‎frontend/components/Main/MainAddFunds.tsx

+28-9
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
} from 'antd';
1212
import Link from 'next/link';
1313
import { useCallback, useMemo, useState } from 'react';
14+
import styled from 'styled-components';
1415

1516
import { copyToClipboard, truncateAddress } from '@/common-util';
1617
import { UNICODE_SYMBOLS } from '@/constants/unicode';
@@ -19,6 +20,14 @@ import { Address } from '@/types';
1920

2021
import { CardSection } from '../styled/CardSection';
2122

23+
const { Text } = Typography;
24+
25+
const CustomizedCardSection = styled(CardSection)<{ border?: boolean }>`
26+
> .ant-btn {
27+
width: 50%;
28+
}
29+
`;
30+
2231
export const MainAddFunds = () => {
2332
const { wallets } = useBalance();
2433
const [isAddFundsVisible, setIsAddFundsVisible] = useState(false);
@@ -40,15 +49,27 @@ export const MainAddFunds = () => {
4049

4150
return (
4251
<>
43-
<CardSection vertical border>
52+
<CustomizedCardSection vertical={false} border gap={12}>
4453
<Button
4554
type="default"
4655
size="large"
4756
onClick={() => setIsAddFundsVisible((prev) => !prev)}
4857
>
4958
{isAddFundsVisible ? 'Close instructions' : 'Add funds'}
5059
</Button>
51-
</CardSection>
60+
61+
<Popover
62+
title={null}
63+
placement="topRight"
64+
trigger={['hover', 'click']}
65+
content={<Text>Ability to withdraw is coming soon</Text>}
66+
>
67+
<Button type="default" size="large" disabled>
68+
Withdraw
69+
</Button>
70+
</Popover>
71+
</CustomizedCardSection>
72+
5273
{isAddFundsVisible && (
5374
<>
5475
<AddFundsWarningAlertSection />
@@ -72,12 +93,12 @@ const AddFundsWarningAlertSection = () => (
7293
showIcon
7394
message={
7495
<Flex vertical gap={2.5}>
75-
<Typography.Text className="text-base" strong>
96+
<Text className="text-base" strong>
7697
Only send funds on Gnosis Chain!
77-
</Typography.Text>
78-
<Typography.Text className="text-base">
98+
</Text>
99+
<Text className="text-base">
79100
You will lose any assets you send on other chains.
80-
</Typography.Text>
101+
</Text>
81102
</Flex>
82103
}
83104
/>
@@ -97,9 +118,7 @@ const AddFundsAddressSection = ({
97118
<Tooltip
98119
title={<span className="can-select-text flex">{walletAddress}</span>}
99120
>
100-
<Typography.Text title={walletAddress}>
101-
GNO: {truncatedWalletAddress}
102-
</Typography.Text>
121+
<Text title={walletAddress}>GNO: {truncatedWalletAddress}</Text>
103122
</Tooltip>
104123
<Button onClick={handleCopy}>
105124
<CopyOutlined />

‎frontend/components/Main/MainRewards.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,17 @@ import { useReward } from '@/hooks/useReward';
66

77
import { CardSection } from '../styled/CardSection';
88

9+
const { Text } = Typography;
10+
911
export const MainRewards = () => {
1012
const { availableRewardsForEpochEther, isEligibleForRewards } = useReward();
1113
return (
1214
<CardSection gap={5} vertical>
13-
<Typography.Text>Rewards today </Typography.Text>
15+
<Text>Staking rewards today </Text>
1416
<Flex gap={10}>
15-
<Typography.Text strong>
17+
<Text strong>
1618
{balanceFormat(availableRewardsForEpochEther, 2)} OLAS
17-
</Typography.Text>
19+
</Text>
1820
<RewardsEarned isEligibleForRewards={isEligibleForRewards} />
1921
</Flex>
2022
</CardSection>

‎frontend/styles/globals.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
@import '@fontsource/inter/900.css';
44

55
html, body {
6-
margin: 0;
7-
padding: 0;
8-
height: auto;
6+
margin: 0;
7+
padding: 0;
8+
height: auto;
99
}
1010

1111
/* Hide scrollbar for Chrome, Safari and Opera */
@@ -14,17 +14,17 @@ html, body {
1414
}
1515

1616
body {
17-
max-width: 420px;
18-
border-radius: 8px;
19-
user-select: none;
17+
max-width: 420px;
18+
border-radius: 8px;
19+
user-select: none;
2020
}
2121

2222
button, input, select, textarea, .ant-input-suffix {
23-
-webkit-app-region: no-drag;
23+
-webkit-app-region: no-drag;
2424
}
2525

2626
.ant-card-head {
27-
-webkit-app-region: drag;
27+
-webkit-app-region: drag;
2828
}
2929

3030
.antd-card {
@@ -36,7 +36,7 @@ button, input, select, textarea, .ant-input-suffix {
3636
font-family: 'Inter';
3737
font-weight: 900;
3838
font-size: 56px;
39-
line-height: 56px;
39+
line-height: 48px;
4040
}
4141

4242
.balance-symbol {

0 commit comments

Comments
 (0)