-
Notifications
You must be signed in to change notification settings - Fork 2
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
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
// 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 | ||
} | ||
}) |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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> | ||
) | ||
} |
There was a problem hiding this comment.
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) { |
There was a problem hiding this comment.
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
- connect 0x123
- set gameplay wallet to 0x123
- switch to 0x444
- set gameplay wallet to 0x444
- switch back to 0x123
It shouldn't ask me to sign again right?
There was a problem hiding this comment.
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) { |
There was a problem hiding this comment.
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
I will merge and address the comments in a different PR |
part of https://github.com/HyperPlay-Gaming/product-management/issues/654