Skip to content

Commit f6b0805

Browse files
sjillensjillen
authored
remove cardinal deps (#124)
* chore(deps): remove cardinal, fix token-registry version * fix from comments, update yarn.lock, remove package.lock
1 parent 21136c4 commit f6b0805

7 files changed

Lines changed: 95 additions & 58525 deletions

File tree

‎components/ConnectWalletButton.tsx‎

Lines changed: 33 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,12 @@
11
import { Menu } from '@headlessui/react';
2-
import { useMemo, useState } from 'react';
2+
import { useMemo } from 'react';
33
import { CheckCircleIcon, ChevronDownIcon } from '@heroicons/react/solid';
44
import styled from '@emotion/styled';
55
import useWalletStore from '../stores/useWalletStore';
66
import {
77
getWalletProviderByUrl,
88
WALLET_PROVIDERS,
99
} from '../utils/wallet-adapters';
10-
import {
11-
AddressImage,
12-
DisplayAddress,
13-
useAddressName,
14-
useWalletIdentity,
15-
} from '@cardinal/namespaces-components';
16-
import { BackspaceIcon } from '@heroicons/react/solid';
17-
import { UserCircleIcon } from '@heroicons/react/outline';
18-
import { abbreviateAddress } from '@utils/formatting';
19-
import { useRouter } from 'next/router';
20-
import TwitterIcon from './TwitterIcon';
21-
import Switch from './Switch';
2210

2311
const StyledWalletProviderLabel = styled.p`
2412
font-size: 0.65rem;
@@ -30,25 +18,13 @@ const ConnectWalletButton = (props) => {
3018
connected,
3119
current,
3220
providerUrl,
33-
connection,
3421
set: setWalletStore,
3522
} = useWalletStore((s) => s);
3623

3724
const provider = useMemo(() => getWalletProviderByUrl(providerUrl), [
3825
providerUrl,
3926
]);
4027

41-
const [useDevnet, setUseDevnet] = useState(false);
42-
const router = useRouter();
43-
const handleToggleDevnet = () => {
44-
setUseDevnet(!useDevnet);
45-
if (useDevnet) {
46-
router.push(`${window.location.pathname}`);
47-
} else {
48-
router.push(`${window.location.href}?cluster=devnet`);
49-
}
50-
};
51-
5228
const handleConnectDisconnect = async () => {
5329
try {
5430
if (connected) {
@@ -61,70 +37,27 @@ const ConnectWalletButton = (props) => {
6137
}
6238
};
6339

64-
const { show } = useWalletIdentity();
65-
66-
const { displayName } = useAddressName(
67-
connection.current,
68-
current?.publicKey || undefined,
69-
);
70-
71-
const walletAddressFormatted = current?.publicKey
72-
? abbreviateAddress(current?.publicKey)
73-
: '';
40+
if (!provider) {
41+
return null;
42+
}
7443

7544
return (
7645
<div className="flex">
7746
<button
78-
disabled={connected}
79-
className={`bg-transparent border border-fgd-4 border-r-0 default-transition flex h-12 items-center pl-1 pr-2 rounded-l-full rounded-r-none ${
80-
connected ? 'cursor-default' : 'hover:bg-bkg-3 focus:outline-none'
81-
}`}
47+
className="bg-transparent border border-fgd-3 border-r-0 default-transition flex h-12 items-center pl-3 pr-4 rounded-l-full rounded-r-none w-36 hover:bg-bkg-3 focus:outline-none"
8248
onClick={handleConnectDisconnect}
8349
{...props}
8450
>
85-
<div className="flex font-bold items-center text-fgd-1 text-left text-sm relative">
86-
{connected && current?.publicKey ? (
87-
<div className="w-12 pr-2">
88-
<AddressImage
89-
dark={true}
90-
connection={connection.current}
91-
address={current?.publicKey}
92-
height="40px"
93-
width="40px"
94-
placeholder={
95-
<div className="bg-bkg-4 flex flex-shrink-0 items-center justify-center h-10 rounded-full w-10 mr-2">
96-
<UserCircleIcon className="h-9 text-fgd-3 w-9" />
97-
</div>
98-
}
99-
/>
100-
</div>
101-
) : (
102-
<div className="pr-2 pl-2">
103-
<img src={provider?.icon} className="h-5 w-5" />
104-
</div>
105-
)}
51+
<div className="flex font-bold items-center text-fgd-1 text-left text-sm">
52+
<div className="pr-2">
53+
<img src={provider.icon} className="h-5 w-5" />
54+
</div>
55+
10656
<div>
107-
{connected && current?.publicKey ? (
108-
<>
109-
<DisplayAddress
110-
connection={connection.current}
111-
address={current?.publicKey}
112-
width="100px"
113-
height="20px"
114-
dark={true}
115-
/>
116-
<StyledWalletProviderLabel className="font-normal text-fgd-3">
117-
{walletAddressFormatted}
118-
</StyledWalletProviderLabel>
119-
</>
120-
) : (
121-
<>
122-
Connect
123-
<StyledWalletProviderLabel className="font-normal text-fgd-3">
124-
{provider?.name}
125-
</StyledWalletProviderLabel>
126-
</>
127-
)}
57+
{connected ? 'Disconnect' : 'Connect'}
58+
<StyledWalletProviderLabel className="font-normal text-fgd-3">
59+
{provider.name}
60+
</StyledWalletProviderLabel>
12861
</div>
12962
</div>
13063
</button>
@@ -133,88 +66,32 @@ const ConnectWalletButton = (props) => {
13366
<Menu>
13467
{({ open }) => (
13568
<>
136-
<Menu.Button
137-
className={`border border-fgd-4 cursor-pointer default-transition h-12 w-12 py-2 px-2 rounded-r-full hover:bg-bkg-3 focus:outline-none`}
138-
>
69+
<Menu.Button className="border border-fgd-3 cursor-pointer default-transition h-12 w-12 py-2 px-2 rounded-r-full hover:bg-bkg-3 focus:outline-none">
13970
<ChevronDownIcon
14071
className={`${
14172
open ? 'transform rotate-180' : 'transform rotate-360'
14273
} default-transition h-5 m-auto ml-1 text-primary-light w-5`}
14374
/>
14475
</Menu.Button>
14576
<Menu.Items className="absolute bg-bkg-1 border border-fgd-4 p-2 right-0 top-14 shadow-md outline-none rounded-md w-48 z-20">
146-
<>
147-
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
148-
<Menu.Item key={name}>
149-
<button
150-
className="flex default-transition h-9 items-center p-2 w-full hover:bg-bkg-3 hover:cursor-pointer hover:rounded font-normal focus:outline-none"
151-
onClick={() =>
152-
setWalletStore((s) => {
153-
s.providerUrl = url;
154-
})
155-
}
156-
>
157-
<img src={icon} className="h-4 w-4 mr-2" />
158-
<span className="text-sm">{name}</span>
159-
160-
{provider?.url === url ? (
161-
<CheckCircleIcon className="h-5 ml-2 text-green w-5" />
162-
) : null}
163-
</button>
164-
</Menu.Item>
165-
))}
166-
167-
{current && current.publicKey && (
168-
<>
169-
<hr
170-
className={`border border-fgd-3 opacity-50 mt-2 mb-2`}
171-
></hr>
172-
<Menu.Item
173-
key={'twitter'}
174-
onClick={() =>
175-
show(
176-
// @ts-ignore
177-
current,
178-
connection.current,
179-
connection.cluster,
180-
)
181-
}
182-
>
183-
<button className="flex default-transition h-9 items-center p-2 w-full hover:bg-bkg-3 hover:cursor-pointer hover:rounded font-normal focus:outline-none">
184-
<TwitterIcon className="h-4 w-4 mr-2" />
185-
<span className="text-sm">
186-
{displayName ? 'Edit Twitter' : 'Link Twitter'}
187-
</span>
188-
</button>
189-
</Menu.Item>
190-
<Menu.Item
191-
key={'disconnect'}
192-
onClick={handleConnectDisconnect}
193-
>
194-
<button className="flex default-transition h-9 items-center p-2 w-full hover:bg-bkg-3 hover:cursor-pointer hover:rounded font-normal focus:outline-none">
195-
<BackspaceIcon className="h-4 w-4 mr-2" />
196-
<span className="text-sm">Disconnect</span>
197-
</button>
198-
</Menu.Item>
199-
<Menu.Item
200-
key={'devnet'}
201-
onClick={() => {
202-
handleToggleDevnet();
203-
}}
204-
>
205-
<button className="flex default-transition h-9 items-center p-2 w-full hover:bg-bkg-3 hover:cursor-pointer hover:rounded font-normal focus:outline-none">
206-
<span className="text-sm">Devnet</span>
207-
<Switch
208-
checked={useDevnet}
209-
onChange={() => {
210-
handleToggleDevnet();
211-
}}
212-
/>
213-
</button>
214-
</Menu.Item>
215-
</>
216-
)}
217-
</>
77+
{WALLET_PROVIDERS.map(({ name, url, icon }) => (
78+
<Menu.Item key={name}>
79+
<button
80+
className="flex default-transition h-9 items-center p-2 w-full hover:bg-bkg-3 hover:cursor-pointer hover:rounded font-normal focus:outline-none"
81+
onClick={() =>
82+
setWalletStore((s) => {
83+
s.providerUrl = url;
84+
})
85+
}
86+
>
87+
<img src={icon} className="h-4 w-4 mr-2" />
88+
<span className="text-sm">{name}</span>
89+
{provider.url === url ? (
90+
<CheckCircleIcon className="h-5 ml-2 text-green w-5" />
91+
) : null}
92+
</button>
93+
</Menu.Item>
94+
))}
21895
</Menu.Items>
21996
</>
22097
)}

‎components/Members/MemberItem.tsx‎

Lines changed: 8 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,12 @@ import { UserCircleIcon, LogoutIcon } from '@heroicons/react/outline';
22
import useRealm from '@hooks/useRealm';
33
import { tryParsePublicKey } from '@tools/core/pubkey';
44
import { fmtMintAmount } from '@tools/sdk/units';
5+
import { abbreviateAddress } from '@utils/formatting';
56
import tokenService from '@utils/services/token';
67
import useMembersListStore from 'stores/useMembersStore';
78
import { ViewState } from './types';
89
import { useMemo } from 'react';
910
import { Member } from '@utils/uiTypes/members';
10-
import { AddressImage, DisplayAddress } from '@cardinal/namespaces-components';
11-
import useWalletStore from 'stores/useWalletStore';
1211

1312
const MemberItem = ({ item }: { item: Member }) => {
1413
const { mint, councilMint, realm } = useRealm();
@@ -24,7 +23,6 @@ const MemberItem = ({ item }: { item: Member }) => {
2423
hasCouncilTokenOutsideRealm,
2524
hasCommunityTokenOutsideRealm,
2625
} = item;
27-
const { connection } = useWalletStore((s) => s);
2826

2927
const walletPublicKey = tryParsePublicKey(walletAddress);
3028
const tokenName = realm
@@ -42,48 +40,25 @@ const MemberItem = ({ item }: { item: Member }) => {
4240
])
4341
: null;
4442

43+
const walletAddressFormatted = walletPublicKey
44+
? abbreviateAddress(walletPublicKey)
45+
: '-';
46+
4547
async function handleGoToMemberOverview() {
4648
setCurrentCompactView(ViewState.MemberOverview);
4749
setCurrentCompactViewMember(item);
4850
}
4951

50-
const address = useMemo(
51-
() => (
52-
<AddressImage
53-
dark={true}
54-
connection={connection.current}
55-
address={walletPublicKey}
56-
height="30px"
57-
width="30px"
58-
placeholder={<UserCircleIcon className="h-6 text-fgd-3 w-6" />}
59-
/>
60-
),
61-
[item.walletAddress],
62-
);
63-
64-
const addressName = useMemo(
65-
() => (
66-
<DisplayAddress
67-
connection={connection.current}
68-
address={walletPublicKey}
69-
height="12px"
70-
width="100px"
71-
dark={true}
72-
/>
73-
),
74-
[item.walletAddress],
75-
);
76-
7752
return (
7853
<div
7954
onClick={handleGoToMemberOverview}
80-
className="cursor-pointer default-transition flex items-start text-fgd-1 border border-fgd-4 p-3 pr-0 rounded-lg w-full hover:bg-bkg-3"
55+
className="cursor-pointer default-transition flex items-start text-fgd-1 border border-fgd-4 p-3 rounded-lg w-full hover:bg-bkg-3"
8156
>
8257
<div className="bg-bkg-4 flex flex-shrink-0 items-center justify-center h-8 rounded-full w-8 mr-2">
83-
{address}
58+
<UserCircleIcon className="h-6 text-fgd-3 w-6" />
8459
</div>
8560
<div>
86-
<div className="text-xs text-th-fgd-1 h-5">{addressName}</div>
61+
<div className="text-xs text-th-fgd-1">{walletAddressFormatted}</div>
8762
<div className="text-fgd-3 text-xs flex flex-col">
8863
Votes cast: {totalVotes}
8964
</div>

‎components/Members/MemberOverview.tsx‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { AddressImage, DisplayAddress } from '@cardinal/namespaces-components';
21
import { getExplorerUrl } from '@components/explorer/tools';
32
import {
43
ArrowLeftIcon,
@@ -21,6 +20,8 @@ import { tryParsePublicKey } from '@tools/core/pubkey';
2120
import { accountsToPubkeyMap } from '@tools/sdk/accounts';
2221
import { fmtMintAmount } from '@tools/sdk/units';
2322
import { notify } from '@utils/notifications';
23+
import { abbreviateAddress } from '@utils/formatting';
24+
2425
import tokenService from '@utils/services/token';
2526
import React, { useEffect, useMemo, useState } from 'react';
2627
import useMembersListStore from 'stores/useMembersStore';
@@ -68,6 +69,10 @@ const MemberOverview = () => {
6869
])
6970
: null;
7071

72+
const walletAddressFormatted = walletPublicKey
73+
? abbreviateAddress(walletPublicKey)
74+
: '-';
75+
7176
const handleGoBackToMainView = async () => {
7277
setCurrentCompactView(ViewState.MainView);
7378
resetCompactViewState();
@@ -146,13 +151,7 @@ const MemberOverview = () => {
146151
onClick={handleGoBackToMainView}
147152
className="h-4 w-4 mr-1 text-primary-light mr-2"
148153
/>
149-
<DisplayAddress
150-
connection={connection.current}
151-
address={walletPublicKey}
152-
height="12px"
153-
width="100px"
154-
dark={true}
155-
/>
154+
{walletAddressFormatted}
156155
<a
157156
href={
158157
walletAddress
@@ -168,16 +167,7 @@ const MemberOverview = () => {
168167
</>
169168
</h3>
170169
<div className="bg-bkg-1 px-4 py-2 rounded-md w-full break-all flex items-center">
171-
<div className="bg-bkg-4 flex flex-shrink-0 items-center justify-center h-8 rounded-full w-8 mr-2">
172-
<AddressImage
173-
dark={true}
174-
connection={connection.current}
175-
address={walletPublicKey}
176-
height="30px"
177-
width="30px"
178-
placeholder={<UserCircleIcon className="h-6 text-fgd-3 w-6" />}
179-
/>
180-
</div>
170+
<UserCircleIcon className="h-6 text-fgd-3 w-6 mr-2.5" />
181171
<div>
182172
<div className="text-fgd-3 text-xs flex flex-col">
183173
Votes cast: {totalVotes}

0 commit comments

Comments
 (0)