Skip to content

Commit 278137b

Browse files
hkey0hkey0
authored
add new wallet apps (#308)
* add new wallet apps * update dynamic versions * filter eclipse wallets
1 parent b87736b commit 278137b

File tree

13 files changed

+368
-178
lines changed

13 files changed

+368
-178
lines changed

‎.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
20

‎app/components/ConnectedWallets/index.tsx

Lines changed: 145 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1-
import React, { useEffect, useState, forwardRef, useMemo, useCallback, useContext } from 'react';
2-
import { useDynamicContext, DynamicConnectButton } from '@dynamic-labs/sdk-react-core';
1+
import React, {
2+
useEffect,
3+
useState,
4+
forwardRef,
5+
useMemo,
6+
useCallback,
7+
useContext,
8+
} from "react";
9+
import {
10+
useDynamicContext,
11+
DynamicConnectButton,
12+
} from "@dynamic-labs/sdk-react-core";
313
import { mainnet, sepolia } from "viem/chains";
4-
import { createPublicClient, formatEther, http } from 'viem';
5-
import { getBalance } from 'viem/actions';
6-
import './styles.css';
14+
import { createPublicClient, formatEther, http } from "viem";
15+
import { getBalance } from "viem/actions";
16+
import "./styles.css";
717
import { Cross, Copy, ConnectIcon, CircleCheck, Disconnect } from "../icons";
8-
import { useNetwork } from "@/app/contexts/NetworkContext";
9-
import { truncateWalletAddress } from '@/lib/stringUtils';
10-
import { getWalletBalance } from '@/lib/solanaUtils';
11-
import { useWallets } from '@/app/hooks/useWallets';
12-
import { Options } from '@/lib/networkUtils';
18+
import { useNetwork } from "@/app/contexts/NetworkContext";
19+
import { truncateWalletAddress } from "@/lib/stringUtils";
20+
import { getWalletBalance } from "@/lib/solanaUtils";
21+
import { useWallets } from "@/app/hooks/useWallets";
22+
import { Options } from "@/lib/networkUtils";
1323

1424
interface ConnectedWalletsProps {
1525
close: (e?: React.MouseEvent<HTMLDivElement>) => void;
@@ -29,26 +39,30 @@ const useWalletData = () => {
2939
const [balanceEclipse, setBalanceEclipse] = useState(0);
3040

3141
useEffect(() => {
32-
const isMainnet = (selectedOption === Options.Mainnet);
42+
const isMainnet = selectedOption === Options.Mainnet;
3343
const client = createPublicClient({
3444
chain: isMainnet ? mainnet : sepolia,
35-
transport: isMainnet
36-
? http("https://empty-responsive-patron.quiknode.pro/91dfa8475605dcdec9afdc8273578c9f349774a1/")
45+
transport: isMainnet
46+
? http(
47+
"https://empty-responsive-patron.quiknode.pro/91dfa8475605dcdec9afdc8273578c9f349774a1/",
48+
)
3749
: http("https://ethereum-sepolia.publicnode.com/"),
3850
});
3951
userWallets.forEach(async (wallet) => {
4052
if (!wallet) return;
4153

4254
if (wallet.chain === "EVM") {
4355
const balance = await getBalance(client, {
44-
address: wallet.address as `0x${string}`
56+
address: wallet.address as `0x${string}`,
4557
});
4658

4759
const balanceAsEther = formatEther(balance);
48-
const formattedEtherBalance = parseFloat(balanceAsEther.slice(0, balanceAsEther.indexOf('.') + 5));
60+
const formattedEtherBalance = parseFloat(
61+
balanceAsEther.slice(0, balanceAsEther.indexOf(".") + 5),
62+
);
4963
setBalanceEther(formattedEtherBalance);
5064
}
51-
if (wallet.chain === "ECLIPSE") {
65+
if (wallet.chain === "SOL") {
5266
const balance = await getWalletBalance(wallet.address, eclipseRpc);
5367
setBalanceEclipse(balance);
5468
}
@@ -59,99 +73,135 @@ const useWalletData = () => {
5973
solWallet,
6074
evmWallet,
6175
balanceEther,
62-
balanceEclipse
76+
balanceEclipse,
6377
};
6478
};
6579

66-
const ConnectedWallets = forwardRef<HTMLDivElement, ConnectedWalletsProps>(({ close }, ref) => {
67-
const { handleUnlinkWallet } = useDynamicContext();
68-
const { solWallet, evmWallet, balanceEther, balanceEclipse } = useWalletData();
69-
const [copiedEclipse, setCopiedEclipse] = useState(false);
70-
const [copiedEth, setCopiedEth] = useState(false);
80+
const ConnectedWallets = forwardRef<HTMLDivElement, ConnectedWalletsProps>(
81+
({ close }, ref) => {
82+
const { handleUnlinkWallet } = useDynamicContext();
83+
const { solWallet, evmWallet, balanceEther, balanceEclipse } =
84+
useWalletData();
85+
const [copiedEclipse, setCopiedEclipse] = useState(false);
86+
const [copiedEth, setCopiedEth] = useState(false);
7187

72-
const handleCopy = useCallback((address: string = "", stateSetter: (state: boolean) => void) => {
73-
stateSetter(true);
74-
navigator.clipboard.writeText(address);
75-
setTimeout(() => stateSetter(false), 1000);
76-
}, []);
88+
const handleCopy = useCallback(
89+
(address: string = "", stateSetter: (state: boolean) => void) => {
90+
stateSetter(true);
91+
navigator.clipboard.writeText(address);
92+
setTimeout(() => stateSetter(false), 1000);
93+
},
94+
[],
95+
);
7796

78-
const walletData: WalletData[] = useMemo(() => [
79-
{
80-
icon: 'eclipse.png',
81-
name: 'Eclipse Wallet',
82-
address: solWallet?.address,
83-
balance: balanceEclipse,
84-
},
85-
{
86-
icon: 'eth.png',
87-
name: 'Ethereum Wallet',
88-
address: evmWallet?.address,
89-
balance: balanceEther,
90-
}
91-
], [solWallet, evmWallet, balanceEclipse, balanceEther]);
97+
const walletData: WalletData[] = useMemo(
98+
() => [
99+
{
100+
icon: "eclipse.png",
101+
name: "Eclipse Wallet",
102+
address: solWallet?.address,
103+
balance: balanceEclipse,
104+
},
105+
{
106+
icon: "eth.png",
107+
name: "Ethereum Wallet",
108+
address: evmWallet?.address,
109+
balance: balanceEther,
110+
},
111+
],
112+
[solWallet, evmWallet, balanceEclipse, balanceEther],
113+
);
92114

93-
const renderWalletItem = useCallback((wallet: WalletData, index: number) => {
94-
const isConnected = !!wallet.address;
95-
const isEclipse = index === 0;
96-
const isCopied = isEclipse ? copiedEclipse : copiedEth;
97-
const setCopied = isEclipse ? setCopiedEclipse : setCopiedEth;
98-
const currentWallet = isEclipse ? solWallet : evmWallet;
115+
const renderWalletItem = useCallback(
116+
(wallet: WalletData, index: number) => {
117+
const isConnected = !!wallet.address;
118+
const isEclipse = index === 0;
119+
const isCopied = isEclipse ? copiedEclipse : copiedEth;
120+
const setCopied = isEclipse ? setCopiedEclipse : setCopiedEth;
121+
const currentWallet = isEclipse ? solWallet : evmWallet;
99122

100-
return (
101-
<li key={wallet.name} className="wallet-item">
102-
<div className="wallet-title">{wallet.name}</div>
103-
<div className={`wallet-details ${isConnected ? '' : 'disconnected'}`}>
104-
<div className="wallet-details-top flex justify-between items-center">
105-
<div className="flex flex-row">
106-
<img src={wallet.icon} alt={`${wallet.name} Icon`} className="wallet-icon" />
107-
<div>{truncateWalletAddress(wallet.address || '-')}</div>
108-
</div>
109-
{isConnected ? (
110-
<div className="flex items-center" style={{gap: "8px"}}>
111-
<div className={isCopied ? "invisible" : ""} onClick={() => handleCopy(wallet.address, setCopied)}>
112-
<Copy copyClassName="modal-copy" />
113-
</div>
114-
<div className={isCopied ? "visible" : "invisible"}>
115-
<CircleCheck circleClassName="modal-circle" />
116-
</div>
117-
<div onClick={() => currentWallet && handleUnlinkWallet(currentWallet.id) && close()}>
118-
<Disconnect disconnectClassName="modal-disconnect" />
123+
return (
124+
<li key={wallet.name} className="wallet-item">
125+
<div className="wallet-title">{wallet.name}</div>
126+
<div
127+
className={`wallet-details ${isConnected ? "" : "disconnected"}`}
128+
>
129+
<div className="wallet-details-top flex justify-between items-center">
130+
<div className="flex flex-row">
131+
<img
132+
src={wallet.icon}
133+
alt={`${wallet.name} Icon`}
134+
className="wallet-icon"
135+
/>
136+
<div>{truncateWalletAddress(wallet.address || "-")}</div>
119137
</div>
138+
{isConnected ? (
139+
<div className="flex items-center" style={{ gap: "8px" }}>
140+
<div
141+
className={isCopied ? "invisible" : ""}
142+
onClick={() => handleCopy(wallet.address, setCopied)}
143+
>
144+
<Copy copyClassName="modal-copy" />
145+
</div>
146+
<div className={isCopied ? "visible" : "invisible"}>
147+
<CircleCheck circleClassName="modal-circle" />
148+
</div>
149+
<div
150+
onClick={() => {
151+
if (currentWallet) {
152+
handleUnlinkWallet(currentWallet.id);
153+
close();
154+
}
155+
}}
156+
>
157+
<Disconnect disconnectClassName="modal-disconnect" />
158+
</div>
159+
</div>
160+
) : (
161+
<DynamicConnectButton
162+
buttonClassName=""
163+
buttonContainerClassName=""
164+
>
165+
<div className="flex items-center gap-1 modal-connect">
166+
<ConnectIcon connectClassName="modal-connect" />
167+
<div className="modal-connect-wallet">Connect Wallet</div>
168+
</div>
169+
</DynamicConnectButton>
170+
)}
120171
</div>
121-
) : (
122-
<DynamicConnectButton buttonClassName="" buttonContainerClassName="">
123-
<div className="flex items-center gap-1 modal-connect">
124-
<ConnectIcon connectClassName="modal-connect"/>
125-
<div className="modal-connect-wallet">Connect Wallet</div>
172+
{isConnected && (
173+
<div className="wallet-details-bottom">
174+
<div className="wallet-details-balance">Balance</div>
175+
<div className="balance-eth">{wallet.balance} ETH</div>
126176
</div>
127-
</DynamicConnectButton>
128-
)}
129-
</div>
130-
{isConnected && (
131-
<div className="wallet-details-bottom">
132-
<div className="wallet-details-balance">Balance</div>
133-
<div className="balance-eth">{wallet.balance} ETH</div>
177+
)}
134178
</div>
135-
)}
136-
</div>
137-
</li>
179+
</li>
180+
);
181+
},
182+
[
183+
copiedEclipse,
184+
copiedEth,
185+
handleCopy,
186+
handleUnlinkWallet,
187+
solWallet,
188+
evmWallet,
189+
],
138190
);
139-
}, [copiedEclipse, copiedEth, handleCopy, handleUnlinkWallet, solWallet, evmWallet]);
140191

141-
return (
142-
<div ref={ref} className="connected-wallets-modal">
143-
<div className="connected-wallets-header flex items-center">
144-
<div>Connected Wallets</div>
145-
<div className="cross-wrapper" onClick={close}>
146-
<Cross crossClassName='wallets-cross' />
192+
return (
193+
<div ref={ref} className="connected-wallets-modal">
194+
<div className="connected-wallets-header flex items-center">
195+
<div>Connected Wallets</div>
196+
<div className="cross-wrapper" onClick={close}>
197+
<Cross crossClassName="wallets-cross" />
198+
</div>
147199
</div>
200+
<ul className="wallet-list">{walletData.map(renderWalletItem)}</ul>
148201
</div>
149-
<ul className="wallet-list">
150-
{walletData.map(renderWalletItem)}
151-
</ul>
152-
</div>
153-
);
154-
});
202+
);
203+
},
204+
);
155205

156206
ConnectedWallets.displayName = "ConnectedWallets";
157-
export default ConnectedWallets
207+
export default ConnectedWallets;

‎app/components/Deposit/DepositContent.tsx

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -296,11 +296,12 @@ export const DepositContent: React.FC<DepositContentProps> = ({
296296
imageSrc="eth.png"
297297
direction={action === Action.Deposit ? "From" : "To"}
298298
chainName={isMainnet ? "Ethereum Mainnet" : "Ethereum Sepolia"}
299-
onClickEvent={() =>
300-
evmWallet &&
301-
handleUnlinkWallet(evmWallet.id) &&
302-
setIsEvmDisconnected(!isEvmDisconnected)
303-
}
299+
onClickEvent={() => {
300+
if (evmWallet) {
301+
handleUnlinkWallet(evmWallet.id);
302+
setIsEvmDisconnected(!isEvmDisconnected);
303+
}
304+
}}
304305
walletChain="EVM"
305306
showConnect={!evmWallet && isEvmDisconnected && !isSolDisconnected}
306307
wallet={evmWallet}
@@ -315,12 +316,13 @@ export const DepositContent: React.FC<DepositContentProps> = ({
315316
imageSrc={isMainnet ? "eclipse.png" : "eclipse-testnet.png"}
316317
direction={action === Action.Deposit ? "To" : "From"}
317318
chainName={isMainnet ? "Eclipse Mainnet" : "Eclipse Testnet"}
318-
onClickEvent={() =>
319-
solWallet &&
320-
handleUnlinkWallet(solWallet.id) &&
321-
setIsSolDisconnected(!isSolDisconnected)
322-
}
323-
walletChain="ECLIPSE"
319+
onClickEvent={() => {
320+
if (solWallet) {
321+
handleUnlinkWallet(solWallet.id);
322+
setIsSolDisconnected(!isSolDisconnected);
323+
}
324+
}}
325+
walletChain="SOL"
324326
showConnect={!solWallet && isSolDisconnected && !isEvmDisconnected}
325327
wallet={solWallet}
326328
balanceEther={balanceEther}

‎app/components/Deposit/NetworkBox.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface NetworkBoxProps {
1616
direction: string;
1717
chainName: string;
1818
onClickEvent: () => void;
19-
walletChain: "EVM" | "ECLIPSE";
19+
walletChain: "EVM" | "SOL";
2020
showConnect: boolean;
2121
wallet: any;
2222
balanceEther: number;
@@ -109,7 +109,7 @@ export const NetworkBox: React.FC<NetworkBoxProps> = ({
109109
});
110110

111111
const maxTxFeeEther =
112-
walletChain === "ECLIPSE"
112+
walletChain === "SOL"
113113
? WITHDRAW_TX_FEE
114114
: calculateMaxTxFeeEther(
115115
gasPriceWei ?? BigInt(0),

‎app/components/GasStation/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export const GasStation: React.FC = () => {
119119

120120
const fetchOctane = async () => {
121121
// create transaction
122-
const connection = new Connection("https://eclipse.helius-rpc.com");
122+
const connection = new Connection("https://eclipse.lgns.net");
123123
setTxState("Fetching transaction...");
124124
setTxStatus(TxStatus.Waiting);
125125
const octaneData = await createOctaneSwapTransaction(
@@ -151,7 +151,8 @@ export const GasStation: React.FC = () => {
151151
try {
152152
signedTransaction = await cli?.signAndSendTransaction(tx);
153153
console.log(signedTransaction);
154-
} catch {
154+
} catch (error) {
155+
console.error("Transaction failed:", error);
155156
emitEvent(`Refueling for $${amount} is failed.`, TxStatus.Failed, 5);
156157
return -1;
157158
}

0 commit comments

Comments
 (0)