Skip to content

Commit

Permalink
Added wallet display names
Browse files Browse the repository at this point in the history
  • Loading branch information
@babkenmes
babkenmes committed Dec 13, 2024
1 parent 67616e7 commit 0e7e98f
Show file tree
Hide file tree
Showing 13 changed files with 165 additions and 131 deletions.
5 changes: 3 additions & 2 deletions Models/WalletProvider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,23 @@ export type InternalConnector = {
}

export type Wallet = {
id: string;
displayName?: string;
// TODO: might be unused and unnecessary check
isActive: boolean;
address: string | `0x${string}`;
addresses: string[];
providerName: string
icon: (props: any) => React.JSX.Element;
//TODO: this is name of the connector, should be changed to connectorId
connector?: string;
metadata?: {
starknetAccount?: AccountInterface,
wallet?: StarknetWindowObject
}
chainId?: string | number,
isLoading?: boolean,
disconnect: () => Promise<void> | undefined | void;
connect: () => Promise<Wallet | undefined>;
connect?: () => Promise<Wallet | undefined>;
isNotAvailable?: boolean;
//TODO: refactor
withdrawalSupportedNetworks?: string[],
Expand Down
2 changes: 1 addition & 1 deletion components/Input/Address/AddressPicker/AddressWithIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const AddressWithIcon: FC<Props> = ({ addressItem, connectedWallet, partner, net
},
{
group: AddressGroup.ConnectedWallet,
text: <p>{connectedWallet?.connector || 'Connected wallet'}</p>,
text: <p>{connectedWallet?.displayName || 'Connected wallet'}</p>,
icon: connectedWallet?.icon || WalletIcon
},
{
Expand Down
53 changes: 17 additions & 36 deletions components/Input/Address/AddressPicker/ConnectedWallets/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const ConnectedWallets: FC<Props> = ({ provider, wallets, onClick, onConnect, de
setIsLoading(false)
}

//TODO: should check for real compatibility, in the future network can have wallets from multiple providers
const notCompatibleWallets = wallets.filter(wallet => wallet.providerName !== provider.name || wallet.isNotAvailable)

return <div className="space-y-2">
Expand Down Expand Up @@ -64,7 +65,6 @@ const ConnectedWallets: FC<Props> = ({ provider, wallets, onClick, onConnect, de
wallet={wallet}
selectable
network={destination}
provider={provider}
onWalletSelect={onClick}
selectedAddress={destination_address}
/>
Expand Down Expand Up @@ -109,25 +109,16 @@ const ConnectedWallets: FC<Props> = ({ provider, wallets, onClick, onConnect, de
</button>
{showIncompatibleWallets &&
notCompatibleWallets.map((wallet, index) => (
<span key={index}>
{wallet.addresses?.map((address) => {
const addressItem = {
address: address,
group: AddressGroup.ConnectedWallet,
};

return (
<div key={address} className="flex flex-col gap-2">
<div className="group/addressItem w-full px-3 py-3 rounded-md hover:!bg-secondary-700 transition duration-200 opacity-50">
<AddressWithIcon
addressItem={addressItem}
connectedWallet={wallet}
network={destination}
/>
</div>
</div>
);
})}
<span key={`${index}${wallet.address}`}>
<div className="group/addressItem w-full rounded-md hover:!bg-secondary-700 transition duration-200 opacity-50">
<WalletItem
key={`${index}${wallet.providerName}`}
wallet={wallet}
selectable={false}
network={destination}
selectedAddress={undefined}
/>
</div>
</span>
))}
</div>
Expand All @@ -139,26 +130,16 @@ const ConnectedWallets: FC<Props> = ({ provider, wallets, onClick, onConnect, de
<div className="absolute right-2 top-1/2 -translate-y-1/2 w-max px-2 py-0.5 text-secondary-text font-medium text-sm rounded-md transition-opacity duration-200 bg-secondary-500 opacity-0 group-hover/notCompatible:opacity-100 max-w-[150px] break-words sm:max-w-none sm:whitespace-nowrap">
Not compatible with {destination.display_name}
</div>
{notCompatibleWallets[0].addresses?.map((address) => {
const addressItem = {
address: address,
group: AddressGroup.ConnectedWallet,
};

return (
<AddressWithIcon
key={address}
addressItem={addressItem}
connectedWallet={notCompatibleWallets[0]}
network={destination}
/>
);
})}
<WalletItem
wallet={notCompatibleWallets[0]}
selectable={false}
network={destination}
selectedAddress={undefined}
/>
</div>
))
}


</div>
}

Expand Down
2 changes: 1 addition & 1 deletion components/Swap/Withdraw/Wallet/ZKsyncWalletWithdraw.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const ZkSyncWalletWithdrawStep: FC<WithdrawPageProps> = ({ amount, depositAddres
}
}, [syncWallet, swapId, depositAddress, token, amount, sequenceNumber])

if (wallet && wallet?.connector?.toLowerCase() === 'argent') return (
if (wallet && wallet?.id?.toLowerCase() === 'argent') return (
<div className="rounded-md bg-secondary-800 p-4">
<div className="flex">
<div className="flex-shrink-0">
Expand Down
2 changes: 1 addition & 1 deletion components/Swap/Withdraw/WalletTransferContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const WalletTransferContent: FC = () => {

const changeWallet = async (wallet: Wallet, address: string) => {
const connections = getConnections(config)
const connector = connections?.find(c => c.connector.name === wallet.connector)
const connector = connections?.find(c => c.connector.name === wallet.id)
if (!connector) return
switchAccount({ connector: connector.connector })
setSelectedSourceAccount({ wallet, address })
Expand Down
4 changes: 2 additions & 2 deletions components/Wallet/ConnectedWallets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,11 @@ const WalletsIcons = ({ wallets }: { wallets: Wallet[] }) => {
return (
<div className="-space-x-2 flex">
{
firstWallet?.connector &&
firstWallet?.displayName &&
<firstWallet.icon className="rounded-full border-2 border-secondary-600 bg-secondary-700 flex-shrink-0 h-6 w-6" />
}
{
secondWallet?.connector &&
secondWallet?.displayName &&
<secondWallet.icon className="rounded-full border-2 border-secondary-600 bg-secondary-700 flex-shrink-0 h-6 w-6" />
}
{
Expand Down
9 changes: 4 additions & 5 deletions components/Wallet/WalletsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,6 @@ const WalletsList: FC<Props> = (props) => {
selectable={selectable}
token={token}
network={network}
provider={provider}
onWalletSelect={onSelect}
selectedAddress={selectedSourceAccount?.address}
/>)
Expand All @@ -80,7 +79,6 @@ type WalletItemProps = {
selectable?: boolean,
token?: Token;
network?: Network;
provider?: WalletProvider;
selectedAddress: string | undefined;
onWalletSelect?: (wallet: Wallet, address: string) => void;
}
Expand All @@ -94,6 +92,7 @@ export const WalletItem: FC<HTMLAttributes<HTMLDivElement> & WalletItemProps> =

const isSelected = selectable && (wallet.addresses.length == 1 && wallet.address == selectedAddress)
const walletBalanceAmount = walletBalance?.amount && truncateDecimals(walletBalance?.amount, token?.precision)

return (
<div {...props} className="rounded-md outline-none text-primary-tex">
<div
Expand All @@ -105,7 +104,7 @@ export const WalletItem: FC<HTMLAttributes<HTMLDivElement> & WalletItemProps> =

<div className="flex space-x-2 items-center grow">
{
wallet.connector &&
wallet &&
<div className="inline-flex items-center relative">
<wallet.icon
className={clsx('w-9 h-9 p-0.5 rounded-md bg-secondary-800', {
Expand All @@ -130,7 +129,7 @@ export const WalletItem: FC<HTMLAttributes<HTMLDivElement> & WalletItemProps> =
{
wallet.addresses.length > 1 ?
<div>
<span className="text-sm">{wallet.connector}</span>
<span className="text-sm">{wallet.displayName}</span>
</div>
:
<div className="w-full inline-flex items-center justify-between grow">
Expand All @@ -145,7 +144,7 @@ export const WalletItem: FC<HTMLAttributes<HTMLDivElement> & WalletItemProps> =
/>
}
<p className="text-xs text-secondary-text">
{wallet.connector}
{wallet.displayName}
</p>
</div>
{
Expand Down
Loading

0 comments on commit 0e7e98f

Please sign in to comment.