Skip to content

Commit 480abc5

Browse files
author
Snehil
committed
Fix components to work with new gitopia-js
1 parent 27f47b5 commit 480abc5

56 files changed

Lines changed: 192 additions & 224 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/dashboard/walletInfo.js‎

Lines changed: 87 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,23 @@ import { useRouter } from "next/router";
1010
import { getAddressforChain } from "../../store/actions/wallet";
1111

1212
function WalletInfo(props) {
13-
const [balance, setBalance] = useState(0);
13+
const [totalBalance, setTotalBalance] = useState(0);
14+
const [tokenBalances, setTokenBalances] = useState({});
1415
const router = useRouter();
1516
useEffect(() => {
1617
async function getWalletbalance() {
17-
let balance = await getBalanceInDollars(props.selectedAddress);
18-
if (balance) {
19-
setBalance(balance);
18+
let a = await getBalanceInDollars(props.selectedAddress);
19+
if (a) {
20+
setTotalBalance(a.totalPrice);
21+
setTokenBalances(a.TokenBalances);
2022
}
2123
}
2224
getWalletbalance();
23-
});
25+
}, []);
2426

2527
return (
2628
<div className="w-96 p-4 flex flex-col bg-[#28313C] rounded-2xl">
27-
<div className="px-2 flex">
29+
<div className="flex">
2830
<div className="text-type-primary text-xs font-bold uppercase">
2931
Account
3032
</div>
@@ -80,8 +82,8 @@ function WalletInfo(props) {
8082
</div>
8183
</div>
8284
</div>
83-
<div className="mt-2 box-content px-2">
84-
<div className="mt-1 box-content h-24 w-full border border-[#404450] rounded-xl flex items-center">
85+
<div className="mt-2 box-content">
86+
<div className="mt-1 box-content h-20 w-full border border-grey-50 rounded-xl flex items-center">
8587
<svg
8688
width="36"
8789
height="37"
@@ -112,29 +114,76 @@ function WalletInfo(props) {
112114
/>
113115
</svg>
114116
<div className="text-sm text-type-primary ml-4">Total Balance</div>
115-
<div className="text-type-primary text-2xl font-bold ml-6">
116-
≈ ${balance}
117+
<div className="text-type-primary text-2xl font-bold mx-6 text-right flex-1">
118+
${totalBalance}
117119
</div>
118120
</div>
119121
<div className="text-type-primary text-xs font-bold uppercase mt-6 mb-4">
120122
Tokens
121123
</div>
124+
<div className="flex p-3 box-content bg-grey-50 rounded-xl mb-3 items-center justify-center text-sm group">
125+
<div className="flex-none">
126+
<img width={24} src={"/tokens/gitopia.svg"} />
127+
</div>
128+
<div className="mx-3 flex-1">{"Gitopia"}</div>
129+
130+
<div className="">
131+
{props.loreBalance +
132+
" " +
133+
process.env.NEXT_PUBLIC_ADVANCE_CURRENCY_TOKEN}
134+
</div>
135+
136+
<div className="flex transition-all items-center cursor-pointer text-type-secondary opacity-0 w-0 group-hover:opacity-100 group-hover:w-8 group-hover:ml-3">
137+
<div
138+
className="btn btn-circle btn-sm btn-outline tooltip tooltip-bottom tooltip-secondary"
139+
data-tip="Send"
140+
onClick={() => {
141+
props.setMenuState(3);
142+
}}
143+
>
144+
<svg
145+
width="32"
146+
height="32"
147+
viewBox="0 0 34 34"
148+
fill="none"
149+
xmlns="http://www.w3.org/2000/svg"
150+
>
151+
<g>
152+
<path
153+
d="M10.5757 20.5757L10.1515 21L11 21.8485L11.4243 21.4243L10.5757 20.5757ZM21.4243 11.4243C21.6586 11.1899 21.6586 10.8101 21.4243 10.5757C21.1899 10.3414 20.8101 10.3414 20.5757 10.5757L21.4243 11.4243ZM11.4243 21.4243L21.4243 11.4243L20.5757 10.5757L10.5757 20.5757L11.4243 21.4243Z"
154+
fill="currentColor"
155+
/>
156+
<path
157+
d="M12.875 11H21V19.125"
158+
stroke="currentColor"
159+
strokeWidth="1.2"
160+
strokeLinecap="square"
161+
strokeLinejoin="round"
162+
/>
163+
</g>
164+
</svg>
165+
</div>
166+
</div>
167+
</div>
122168
{assets.map((asset, index) => {
123169
return (
124170
<div
125-
className="flex p-3 box-content h-7 bg-white bg-opacity-10 rounded-xl flex mb-3"
171+
className="flex p-3 box-content bg-grey-50 rounded-xl mb-3 items-center justify-center text-sm group"
126172
key={index}
127173
>
128174
<div className="">
129-
<img src={asset.icon} />
175+
<img width={24} src={asset.icon} />
130176
</div>
131-
<div className="ml-3">{asset.chain_name}</div>
132-
<div className="ml-auto flex mr-3">
133-
<div className="text-type-primary text-xs mr-2 mt-1.5">
134-
Deposit
135-
</div>
177+
<div className="mx-3 flex-1">{asset.chain_name}</div>
178+
<div className="">
179+
{(tokenBalances[asset.coin_minimal_denom] || 0) +
180+
" " +
181+
asset.coin_minimal_denom}
182+
</div>
183+
<div className="flex transition-all items-center cursor-pointer text-type-secondary opacity-0 w-0 group-hover:opacity-100 group-hover:w-20 group-hover:ml-3">
136184
<div
137-
className="mr-1 hover:cursor-pointer"
185+
className="btn btn-circle btn-sm btn-outline mr-3 tooltip tooltip-bottom tooltip-secondary"
186+
data-tip="Deposit"
138187
onClick={() => {
139188
props
140189
.getAddressforChain(
@@ -150,62 +199,39 @@ function WalletInfo(props) {
150199
<svg
151200
width="32"
152201
height="32"
153-
viewBox="0 0 32 32"
202+
viewBox="0 0 34 34"
154203
fill="none"
155204
xmlns="http://www.w3.org/2000/svg"
156205
>
157-
<g clipPath="url(#clip0_22_357)">
206+
<g>
158207
<path
159208
d="M16 8.5V20.375"
160-
stroke="white"
209+
stroke="currentColor"
161210
strokeWidth="1.2"
162211
strokeLinecap="round"
163212
strokeLinejoin="round"
164213
/>
165214
<path
166215
d="M10.375 14.75L16 20.375L21.625 14.75"
167-
stroke="white"
216+
stroke="currentColor"
168217
strokeWidth="1.2"
169218
strokeLinecap="square"
170219
strokeLinejoin="round"
171220
/>
172221
<path
173222
d="M9.125 22.875H22.875"
174-
stroke="white"
223+
stroke="currentColor"
175224
strokeWidth="1.2"
176225
strokeLinecap="square"
177226
strokeLinejoin="round"
178227
/>
179228
</g>
180-
<rect
181-
x="0.5"
182-
y="0.5"
183-
width="31"
184-
height="31"
185-
rx="15.5"
186-
stroke="white"
187-
strokeOpacity="0.2"
188-
/>
189-
<defs>
190-
<clipPath id="clip0_22_357">
191-
<rect
192-
width="20"
193-
height="20"
194-
fill="white"
195-
transform="translate(6 6)"
196-
/>
197-
</clipPath>
198-
</defs>
199229
</svg>
200230
</div>
201-
</div>
202-
<div className="border-l-2 border-[#5A6068] h-8"></div>
203-
<div className="ml-3 flex">
204-
<div className="text-type-primary text-xs mr-2 mt-1.5">
205-
Withdraw
206-
</div>
231+
207232
<div
208-
className="hover:cursor-pointer"
233+
className="btn btn-circle btn-sm btn-outline tooltip tooltip-bottom tooltip-secondary"
234+
data-tip="Withdraw"
209235
onClick={() => {
210236
props
211237
.getAddressforChain(
@@ -221,57 +247,37 @@ function WalletInfo(props) {
221247
<svg
222248
width="32"
223249
height="32"
224-
viewBox="0 0 32 32"
250+
viewBox="0 0 34 34"
225251
fill="none"
226252
xmlns="http://www.w3.org/2000/svg"
227253
>
228-
<g clipPath="url(#clip0_22_365)">
254+
<g>
229255
<path
230256
d="M10.5757 20.5757L10.1515 21L11 21.8485L11.4243 21.4243L10.5757 20.5757ZM21.4243 11.4243C21.6586 11.1899 21.6586 10.8101 21.4243 10.5757C21.1899 10.3414 20.8101 10.3414 20.5757 10.5757L21.4243 11.4243ZM11.4243 21.4243L21.4243 11.4243L20.5757 10.5757L10.5757 20.5757L11.4243 21.4243Z"
231-
fill="white"
257+
fill="currentColor"
232258
/>
233259
<path
234260
d="M12.875 11H21V19.125"
235-
stroke="white"
261+
stroke="currentColor"
236262
strokeWidth="1.2"
237263
strokeLinecap="square"
238264
strokeLinejoin="round"
239265
/>
240266
</g>
241-
<rect
242-
x="0.5"
243-
y="0.5"
244-
width="31"
245-
height="31"
246-
rx="15.5"
247-
stroke="white"
248-
strokeOpacity="0.2"
249-
/>
250-
<defs>
251-
<clipPath id="clip0_22_365">
252-
<rect
253-
width="20"
254-
height="20"
255-
fill="white"
256-
transform="translate(6 6)"
257-
/>
258-
</clipPath>
259-
</defs>
260267
</svg>
261268
</div>
262269
</div>
263270
</div>
264271
);
265272
})}
266-
<div className="mt-10 border-b border-[#3E4051] w-[21rem]"></div>
267-
<div className="text-type-primary text-xs font-bold uppercase mt-2 mb-2">
273+
<div className="text-type-primary text-xs font-bold uppercase mt-6 mb-4">
268274
LORE REWARDS
269275
</div>
270-
<div className="mt-1 p-4 bg-grey box-content h-14 rounded-lg flex">
271-
<div className="mt-1 border border-[#747D96] h-8 w-8 rounded-full">
276+
<div className="mt-1 p-4 box-content h-14 rounded-lg flex bg-rewards-grad">
277+
<div className="mt-1 border border-grey-300 h-8 w-8 rounded-full flex items-center justify-center">
272278
<svg
273279
width="11"
274-
height="21"
280+
height="18"
275281
viewBox="0 0 11 21"
276282
fill="none"
277283
xmlns="http://www.w3.org/2000/svg"
@@ -296,15 +302,15 @@ function WalletInfo(props) {
296302
/>
297303
</svg>
298304
</div>
299-
<div className="ml-2">
305+
<div className="ml-2 flex-1">
300306
<div className="font-semibold text-3xl">0</div>
301-
<div className="font-bold text-xs">≈$0.0</div>
307+
<div className="font-bold text-xs text-type-tertiary">≈ $0.0</div>
302308
</div>
303309
<div
304310
disabled={true}
305-
className="btn mt-4 ml-auto h-8 px-3.5 py-2 w-36 rounded text-white text-xs font-bold bg-green active:bg-green hover:bg-green-400 hover:shadow-lg outline-none focus:outline-none ease-linear transition-all duration-150 uppercase"
311+
className="btn btn-primary btn-sm mt-3"
306312
>
307-
claim rewards
313+
Claim Rewards
308314
</div>
309315
</div>
310316
</div>

‎components/header.js‎

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ function Header(props) {
6464
let addressToShow = "",
6565
avatarUrl = "";
6666
if (props.selectedAddress) {
67-
addressToShow = shrinkAddress(props.selectedAddress);
67+
addressToShow = "gitopia"+ shrinkAddress(props.selectedAddress);
6868
if (props.avatarUrl) {
6969
avatarUrl = props.avatarUrl;
7070
} else {
@@ -225,49 +225,6 @@ function Header(props) {
225225
""
226226
)}
227227
<div className="flex-1"></div>
228-
{props.activeWallet && !isMobile ? (
229-
<div className="flex-none mr-8">
230-
<svg
231-
width="8"
232-
height="14"
233-
viewBox="0 0 10 17"
234-
fill="none"
235-
className="mr-1 mt-px text-purple-50"
236-
xmlns="http://www.w3.org/2000/svg"
237-
>
238-
<path
239-
fillRule="evenodd"
240-
clipRule="evenodd"
241-
d="M5.00061 8.51845C6.33523 8.51845 7.41715 7.43653 7.41715 6.10192C7.41715 4.7673 6.33523 3.68538 5.00061 3.68538C3.666 3.68538 2.58408 4.7673 2.58408 6.10192C2.58408 7.43653 3.666 8.51845 5.00061 8.51845ZM5.00061 10.2314C7.28128 10.2314 9.13013 8.38259 9.13013 6.10192C9.13013 3.82125 7.28128 1.9724 5.00061 1.9724C2.71994 1.9724 0.871094 3.82125 0.871094 6.10192C0.871094 8.38259 2.71994 10.2314 5.00061 10.2314Z"
242-
fill="currentColor"
243-
/>
244-
<path
245-
fillRule="evenodd"
246-
clipRule="evenodd"
247-
d="M2.58408 11.1195C2.58408 11.7593 2.84059 12.3714 3.29468 12.8215C3.74849 13.2713 4.36229 13.5225 5.00061 13.5225C5.63893 13.5225 6.25273 13.2713 6.70655 12.8215C7.16063 12.3714 7.41715 11.7593 7.41715 11.1195H9.13013C9.13013 12.2004 8.69698 13.2386 7.92343 14.0053C7.14962 14.7723 6.09841 15.2046 5.00061 15.2046C3.90281 15.2046 2.8516 14.7723 2.07779 14.0053C1.30425 13.2386 0.871094 12.2004 0.871094 11.1195H2.58408Z"
248-
fill="currentColor"
249-
/>
250-
<path
251-
d="M4.19727 0.743828H5.8455V2.39206H4.19727V0.743828Z"
252-
fill="currentColor"
253-
/>
254-
<path
255-
d="M4.19727 14.7537H5.8455V16.4019H4.19727V14.7537Z"
256-
fill="currentColor"
257-
/>
258-
</svg>
259-
<div className="text-purple-50 uppercase">
260-
{props.advanceUser === true
261-
? props.loreBalance
262-
: props.loreBalance / 1000000}{" "}
263-
{props.advanceUser === true
264-
? process.env.NEXT_PUBLIC_ADVANCE_CURRENCY_TOKEN
265-
: process.env.NEXT_PUBLIC_CURRENCY_TOKEN}
266-
</div>
267-
</div>
268-
) : (
269-
""
270-
)}
271228
{process.env.NEXT_PUBLIC_NETWORK_RELEASE_NOTES && !isMobile ? (
272229
<div className="flex-col mr-8 items-end">
273230
<div

‎components/repository/bountiesView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useState, useEffect } from "react";
33
import getBounty from "../../helpers/getBounty";
44
import { useRouter } from "next/router";
55
import dayjs from "dayjs";
6-
import debounce from "lodash";
6+
import { debounce } from "lodash";
77
import Link from "next/link";
88
import getDenomNameByHash from "../../helpers/getDenomNameByHash";
99
import { coingeckoId } from "../../ibc-assets-config";

‎components/repository/commentEditor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ function CommentEditor({
159159
{onCancel ? (
160160
<div className="inline-block w-28 sm:w-36 mr-4">
161161
<button
162-
className="btn btn-sm btn-ghost btn-block"
162+
className="btn btn-sm btn-outline btn-block"
163163
onClick={onCancel}
164164
>
165165
Cancel

‎components/repository/commentView.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ function CommentView({
5151
/>
5252
) : (
5353
<div className="border border-grey rounded-lg flex-1">
54-
<div className="flex text-xs px-4 py-2 rounded-t">
55-
<div className="flex-none ml-auto">
54+
<div className="text-xs px-2 rounded-t relative">
55+
<div className="absolute right-2 top-1">
5656
{comment.creator === userAddress ? (
5757
<div className="dropdown dropdown-end">
58-
<div tabIndex="0" className="btn btn-square btn-xs btn-ghost">
58+
<div tabIndex="0" className="btn btn-square btn-xs btn-link">
5959
<svg
6060
width="21"
6161
height="5"
@@ -97,7 +97,7 @@ function CommentView({
9797
)}
9898
</div>
9999
</div>
100-
<div className="px-6 pb-6">
100+
<div className="p-6">
101101
<div className="text-white font-normal mb-3 markdown-body">
102102
{comment.body.length ? (
103103
<ReactMarkdown linkTarget="_blank">

0 commit comments

Comments
 (0)