Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add active wallet integration #42

Merged
merged 20 commits into from
Jan 28, 2025
Merged

feat: add active wallet integration #42

merged 20 commits into from
Jan 28, 2025

Conversation

eliobricenov
Copy link
Contributor

@eliobricenov eliobricenov commented Dec 19, 2024

Copy link

vercel bot commented Dec 19, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
quests-ui ✅ Ready (Inspect) Visit Preview Jan 28, 2025 7:53pm

@eliobricenov eliobricenov changed the title feat: add active wallet feat: add active wallet integration Jan 6, 2025
@eliobricenov eliobricenov marked this pull request as ready for review January 6, 2025 19:05
@eliobricenov eliobricenov self-assigned this Jan 6, 2025
Comment on lines +19 to +44
// 1. Get projectId from https://cloud.reown.com
const projectId = '878099c5ebd1a07a3785ec7ebee59ba6'

// 3. Set the networks
const networks = [mainnet]

// 4. Create Wagmi Adapter
const wagmiAdapter = new WagmiAdapter({
networks,
projectId,
ssr: true
})

// 5. Create modal
createAppKit({
adapters: [wagmiAdapter],
networks: [mainnet],
projectId,
themeMode: 'dark',
features: {
email: false,
socials: false,
onramp: false,
analytics: false
}
})
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is to add appkit to storybook, not to the quest-ui package itself

Copy link
Contributor

@BrettCleary BrettCleary left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. some generic UI feedback that could be left for a future iteration or discussion:

  1. I want to click this icon. Maybe it could replace the "set" button with some minor modifications
    image
  2. this is a lot of text and a lot of information to digest
    image

Comment on lines 10 to 62
function InfoAlert({
title,
children
}: {
title: string
children: React.ReactNode
}) {
return (
<div className={styles.newWalletDetectedContainer}>
<div className={styles.infoIconContainer}>
<Images.Info className={styles.infoIcon} />
</div>
<div className={styles.infoTextContainer}>
<span className="title-sm">{title}</span>
<div>{children}</div>
</div>
</div>
)
}

function InputLikeBox({
children,
className
}: {
children: React.ReactNode
className?: string
}) {
return (
<div className={cn(styles.inputLikeContainer, className)}>
<div className={styles.walletContainer}>
{children}
<Images.Wallet className={styles.walletIcon} />
</div>
</div>
)
}

function InputLikeContainer({
children,
className,
title
}: {
children: React.ReactNode
className?: string
title: string
}) {
return (
<div className={cn(styles.container, className)}>
<span className={cn(styles.label, 'caption')}>{title}</span>
<div>{children}</div>
</div>
)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would be in favor of breaking these out into separate components

)
}

if (hasDifferentWallets) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this condition be hasDifferentWallets && hasNotSignedWithDifferentWallet?

i.e. if I

  1. connect 0x123
  2. set gameplay wallet to 0x123
  3. switch to 0x444
  4. set gameplay wallet to 0x444
  5. switch back to 0x123

It shouldn't ask me to sign again right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good call. I need to add this UX

@@ -0,0 +1,7 @@
export function truncateEthAddress(address: string, digits = 6) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

might be a good hp utils function

@eliobricenov
Copy link
Contributor Author

I will merge and address the comments in a different PR

@eliobricenov eliobricenov merged commit 3461db9 into main Jan 28, 2025
2 checks passed
@eliobricenov eliobricenov deleted the feat/active-wallet branch January 28, 2025 19:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants