Skip to content

Commit 548f6a1

Browse files
Rickk137pietro-maximoffsoulBit
authored
feat: dapp header added (#68)
* feat: dapp header added * fix: app exports * Create chatty-sloths-ring.md * fix: resolve PR issues * fix: broken import from merge Co-authored-by: Pietro Maximoff <74987028+pietro-maximoff@users.noreply.github.com> Co-authored-by: soulBit <its.soulBit@gmail.com>
1 parent 51b7c57 commit 548f6a1

6 files changed

Lines changed: 154 additions & 91 deletions

File tree

‎.changeset/chatty-sloths-ring.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"frontend": patch
3+
"@sovryn/ui": patch
4+
---
5+
6+
feat: dapp header added

‎apps/frontend/src/app/3_organisms/Header/Header.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { FC } from 'react';
2+
3+
import {
4+
Dropdown,
5+
Header as UIHeader,
6+
Menu,
7+
MenuItem,
8+
NavMenuItem,
9+
DropdownSize,
10+
} from '@sovryn/ui';
11+
12+
import { ConnectWalletButton } from '../../2_molecules';
13+
import { useWalletConnect } from '../../../hooks';
14+
15+
export const Header: FC = () => {
16+
const { connectWallet, disconnectWallet, wallets, pending } =
17+
useWalletConnect();
18+
19+
return (
20+
<UIHeader
21+
logo={<div>Sovryn</div>}
22+
menuItems={
23+
<>
24+
<NavMenuItem className="mr-2" isActive children="Zero" />
25+
<NavMenuItem children="Perpetuals" />
26+
</>
27+
}
28+
secondaryContent={
29+
<>
30+
<ConnectWalletButton
31+
onConnect={connectWallet}
32+
onDisconnect={disconnectWallet}
33+
address={wallets[0]?.accounts[0]?.address}
34+
pending={pending}
35+
/>
36+
37+
<Dropdown size={DropdownSize.small} text="EN" className="mr-1 ml-6">
38+
<Menu>
39+
<MenuItem text="EN" />
40+
<MenuItem text="ES" />
41+
</Menu>
42+
</Dropdown>
43+
</>
44+
}
45+
/>
46+
);
47+
};

‎apps/frontend/src/app/3_organisms/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1+
export * from './Header/Header';
12
export * from './TransactionStep/TransactionStep';

‎apps/frontend/src/app/5_pages/App/App.tsx‎

Lines changed: 97 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
} from '@sovryn/ui';
1414

1515
import { SocialLinks, ConnectWalletButton } from '../../2_molecules';
16-
import { TransactionStep } from '../../3_organisms';
16+
import { TransactionStep, Header } from '../../3_organisms';
1717
import { useTheme } from '../../../hooks/useTheme';
1818
import { useWalletConnect } from '../../../hooks/useWalletConnect';
1919
import { translations, languages } from '../../../locales/i18n';
@@ -38,105 +38,111 @@ function App() {
3838
);
3939

4040
return (
41-
<div className="my-2 px-4">
42-
<header>
43-
<p className={styles.test}>
44-
Edit <code>src/App.tsx</code> and save to reload.
45-
</p>
46-
<a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
47-
Learn React
48-
</a>
41+
<>
42+
<Header />
43+
<div className="my-2 px-4">
44+
<div>
45+
<p className={styles.test}>
46+
Edit <code>src/App.tsx</code> and save to reload.
47+
</p>
48+
<a
49+
href="https://reactjs.org"
50+
target="_blank"
51+
rel="noopener noreferrer"
52+
>
53+
Learn React
54+
</a>
4955

50-
<Button text="Open Dialog" onClick={toggle} />
56+
<Button text="Open Dialog" onClick={toggle} />
5157

52-
<Dialog isOpen={isOpen} onClose={toggle}>
53-
<div className="p-4">Hello.</div>
54-
</Dialog>
58+
<Dialog isOpen={isOpen} onClose={toggle}>
59+
<div className="p-4">Hello.</div>
60+
</Dialog>
5561

56-
<Dropdown text={currentLang.toUpperCase()} className="my-4">
57-
<Menu>
58-
{languages.map(lng => (
59-
<MenuItem
60-
text={lng.toUpperCase()}
61-
onClick={changeLanguage(lng)}
62-
key={lng}
63-
/>
64-
))}
65-
</Menu>
66-
</Dropdown>
62+
<Dropdown text={currentLang.toUpperCase()} className="my-4">
63+
<Menu>
64+
{languages.map(lng => (
65+
<MenuItem
66+
text={lng.toUpperCase()}
67+
onClick={changeLanguage(lng)}
68+
key={lng}
69+
/>
70+
))}
71+
</Menu>
72+
</Dropdown>
6773

68-
<div className="flex items-center gap-4">
69-
<div
70-
className="cursor-pointer"
71-
onClick={() => handleThemeChange(AppTheme.sovryn)}
72-
>
73-
Sovryn
74-
</div>
75-
<div
76-
className="cursor-pointer"
77-
onClick={() => handleThemeChange(AppTheme.dark)}
78-
>
79-
Dark
80-
</div>
81-
<div
82-
className="cursor-pointer"
83-
onClick={() => handleThemeChange(AppTheme.light)}
84-
>
85-
Light
86-
</div>
87-
<div
88-
className="cursor-pointer"
89-
onClick={() => handleThemeChange(AppTheme.coffee)}
90-
>
91-
coffee
74+
<div className="flex items-center gap-4">
75+
<div
76+
className="cursor-pointer"
77+
onClick={() => handleThemeChange(AppTheme.sovryn)}
78+
>
79+
Sovryn
80+
</div>
81+
<div
82+
className="cursor-pointer"
83+
onClick={() => handleThemeChange(AppTheme.dark)}
84+
>
85+
Dark
86+
</div>
87+
<div
88+
className="cursor-pointer"
89+
onClick={() => handleThemeChange(AppTheme.light)}
90+
>
91+
Light
92+
</div>
93+
<div
94+
className="cursor-pointer"
95+
onClick={() => handleThemeChange(AppTheme.coffee)}
96+
>
97+
coffee
98+
</div>
9299
</div>
100+
<p className="text-primary">
101+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque
102+
tempora itaque voluptatum veritatis perferendis temporibus tenetur
103+
quod corrupti rerum voluptatibus? Totam a quas recusandae quasi
104+
molestiae ipsa omnis dolorum aliquam.
105+
</p>
106+
<p className="text-primary">
107+
GTM: {process.env.REACT_APP_GOOGLE_ANALYTICS}
108+
</p>
93109
</div>
94-
<p className="text-primary">
95-
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque
96-
tempora itaque voluptatum veritatis perferendis temporibus tenetur
97-
quod corrupti rerum voluptatibus? Totam a quas recusandae quasi
98-
molestiae ipsa omnis dolorum aliquam.
99-
</p>
100-
<p className="text-primary">
101-
GTM: {process.env.REACT_APP_GOOGLE_ANALYTICS}
102-
</p>
103-
</header>
104-
<main>
105-
<TransactionStep
106-
step="1"
107-
title="Approve FISH tokens"
108-
subtitle="Allow Sovryn protocol to use FISH tokens for the trade"
109-
txDetails={{
110-
amount: '0.17519949',
111-
token: 'FISH',
112-
gasFee: '0.00006191',
113-
}}
114-
status={StatusType.idle}
115-
txID="0xEDb8897aB6E907bc63CB256f74437D36298507E2"
116-
/>
117-
<br />
118-
<br />
119-
<br />
120-
<div>
121-
<ConnectWalletButton
122-
onConnect={connectWallet}
123-
onDisconnect={disconnectWallet}
124-
address={wallets[0]?.accounts[0]?.address}
125-
pending={pending}
110+
<main>
111+
<TransactionStep
112+
step="1"
113+
title="Approve FISH tokens"
114+
subtitle="Allow Sovryn protocol to use FISH tokens for the trade"
115+
txDetails={{
116+
amount: '0.17519949',
117+
token: 'FISH',
118+
gasFee: '0.00006191',
119+
}}
120+
status={StatusType.idle}
121+
txID="0xEDb8897aB6E907bc63CB256f74437D36298507E2"
126122
/>
127-
</div>
128-
129-
<br />
130-
<br />
123+
<br />
124+
<br />
125+
<br />
126+
<div>
127+
<ConnectWalletButton
128+
onConnect={connectWallet}
129+
onDisconnect={disconnectWallet}
130+
address={wallets[0]?.accounts[0]?.address}
131+
pending={pending}
132+
/>
133+
</div>
131134

132-
<p>{t(translations.wallet)}</p>
135+
<br />
136+
<br />
133137

134-
<br />
135-
<div className="w-32">
136-
<SocialLinks dataAttribute="socials" />
137-
</div>
138-
</main>
139-
</div>
138+
<p>{t(translations.wallet)}</p>
139+
<br />
140+
<div className="w-32">
141+
<SocialLinks dataAttribute="socials" />
142+
</div>
143+
</main>
144+
</div>
145+
</>
140146
);
141147
}
142148

‎apps/frontend/src/hooks/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './useTheme';
2+
export * from './useWalletConnect';

‎packages/ui/src/2_molecules/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export * from './Overlay';
22
export * from './Dialog';
33
export * from './Dropdown';
44
export * from './Menu';
5+
export * from './NavMenuItem';
56
export * from './WalletIdentity';
67
export * from './Tabs';
78
export * from './VerticalTabs';

0 commit comments

Comments
 (0)