Skip to content

Commit

Permalink
link wallet ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@imhson
imhson committed Aug 23, 2023
1 parent b98e574 commit a96c27d
Show file tree
Hide file tree
Showing 9 changed files with 182 additions and 112 deletions.
59 changes: 44 additions & 15 deletions public/config.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{
"ADMIN_URL": "https://admin.staging.punkga.me",
"API_URL": "https://hasura.staging.punkga.me",
"AUTHORIZER_CLIENT_ID": "06c9c437-15cd-4240-b435-5d16206b46c6",
"AUTHORIZER_URL": "https://auth.staging.punkga.me",
"CHAIN_ID": "serenity-testnet-001",
"REDIRECT_URL": "http://localhost:3080",
"CHAIN_ID": "euphoria-2",
"CHAIN_INFO": {
"chainId": "serenity-testnet-001",
"chainName": "Serenity Testnet",
"rpc": "https://rpc.serenity.aura.network",
"rest": "https://lcd.serenity.aura.network",
"bip44": { "coinType": 118 },
"chainId": "euphoria-2",
"chainName": "Aura Euphoria TestNet",
"rpc": "https://rpc.euphoria.aura.network",
"rest": "https://lcd.euphoria.aura.network",
"indexerV2": "https://indexer-v2.staging.aurascan.io/api/v2/graphql",
"bip44": {
"coinType": 118
},
"bech32Config": {
"bech32PrefixAccAddr": "aura",
"bech32PrefixAccPub": "aurapub",
Expand All @@ -18,12 +18,41 @@
"bech32PrefixConsAddr": "auravalcons",
"bech32PrefixConsPub": "auravalconspub"
},
"currencies": [{ "coinDenom": "AURA", "coinMinimalDenom": "uaura", "coinDecimals": 6 }],
"feeCurrencies": [{ "coinDenom": "AURA", "coinMinimalDenom": "uaura", "coinDecimals": 6 }],
"stakeCurrency": { "coinDenom": "AURA", "coinMinimalDenom": "uaura", "coinDecimals": 6 }
"currencies": [
{
"coinDenom": "EAURA",
"coinMinimalDenom": "ueaura",
"coinDecimals": 6
}
],
"feeCurrencies": [
{
"coinDenom": "EAURA",
"coinMinimalDenom": "ueaura",
"coinDecimals": 6
}
],
"stakeCurrency": {
"coinDenom": "EAURA",
"coinMinimalDenom": "ueaura",
"coinDecimals": 6
},
"coinType": 118,
"gasPriceStep": {
"low": 0.001,
"average": 0.0025,
"high": 0.004
},
"features": ["ibc-transfer"],
"walletUrlForStaking": "https://euphoria.aurascan.io/validators",
"logo": "https://i.imgur.com/zi0mTYb.png",
"explorer": "https://euphoria.aurascan.io/"
},
"REDIRECT_URL": "http://localhost:3000/",
"REST_API_URL": "https://api.staging.punkga.me",
"API_URL": "https://hasura.dev.punkga.me",
"AUTHORIZER_URL": "https://auth.dev.punkga.me",
"AUTHORIZER_CLIENT_ID": "abd40c73-3390-4613-bc44-b5bde4796d03",
"ADMIN_URL": "https://admin.dev.punkga.me",
"REST_API_URL": "https://api.dev.punkga.me",
"IN_MAINTENANCE_MODE": false,
"GTM_ID": "GTM-PF4MH72V"
}
3 changes: 3 additions & 0 deletions src/assets/images/icons/copy.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 13 additions & 2 deletions src/components/Header/ConnectWalletModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,14 @@ export default function ConnectWalletModal({ onClose }) {
setStep(2)
}

const connectWalletCallback = (status: string) => {
if (status === 'success') {
onClose()
} else {
alert('Link wallet failed')
}
}

return (
<div
className={`flex flex-col p-5 gap-[10px] transition-all duration-300 overflow-hidden justify-start ${
Expand Down Expand Up @@ -62,13 +70,16 @@ export default function ConnectWalletModal({ onClose }) {
<SubFilledButton className='w-full hidden md:block' size='lg' onClick={() => setStep(1)}>
{t('Change Wallet')}
</SubFilledButton>
<FilledButton className='w-full hidden md:block' size='lg' onClick={() => connectWallet(onClose)}>
<FilledButton
className='w-full hidden md:block'
size='lg'
onClick={() => connectWallet(connectWalletCallback)}>
{t('Link Wallet')}
</FilledButton>
<SubFilledButton className='w-full md:hidden' size='md' onClick={() => setStep(1)}>
{t('Change Wallet')}
</SubFilledButton>
<FilledButton className='w-full md:hidden' size='md' onClick={() => connectWallet(onClose)}>
<FilledButton className='w-full md:hidden' size='md' onClick={() => connectWallet(connectWalletCallback)}>
{t('Link Wallet')}
</FilledButton>
</div>
Expand Down
82 changes: 50 additions & 32 deletions src/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import ForgotPasswordModal from './ForgotPasswordModal'
import SignInModal from './SignInModal'
import SignUpModal from './SignUpModal'
import SignUpSuccessModal from './SignUpSuccessModal'

import CopySvg from 'images/icons/copy.svg'
export default function Header({ className }: { className?: string }) {
const { t } = useTranslation()
const router = useRouter()
Expand All @@ -54,6 +54,7 @@ export default function Header({ className }: { className?: string }) {

const [signInOpen, setSignInOpen] = useState(false)
const [signUpOpen, setSignUpOpen] = useState(false)
const [isCopied, setIsCopied] = useState(false)
const [signUpSuccessOpen, setSignUpSuccessOpen] = useState(false)
const [connectWalletOpen, setConnectWalletOpen] = useState(false)
const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
Expand Down Expand Up @@ -95,6 +96,15 @@ export default function Header({ className }: { className?: string }) {
)
)
}, [])

const copyAddress = async () => {
navigator.clipboard.writeText(wallet)
setIsCopied(true)
_.debounce(() => {
_.delay(() => setIsCopied(false), 3000)
}, 1000)()
}

return (
<>
<div
Expand Down Expand Up @@ -218,27 +228,31 @@ export default function Header({ className }: { className?: string }) {
</FilledButton>
</DropdownToggle>
{wallet ? (
<DropdownMenu customClass='right-0 min-w-[200px]'>
<DropdownMenu customClass='right-0 min-w-[300px]'>
<div className='p-5 flex flex-col gap-5'>
<div className='flex justify-center items-center'>
<Image src={c98} alt='c98' />
<div className='ml-[10px] font-[500]'>{t('Connected with coin 98')}</div>
</div>
<div className='flex'>
<div className='flex-auto w-[60%]'></div>
<div className='flex-auto w-[10%]'></div>
<div className='flex-auto w-[30%]'></div>
<div
className='flex justify-between items-center text-second-color text-sm bg-light-gray p-[10px] rounded-xl'
onClick={copyAddress}>
{`${wallet.substr(0, 8)}...${wallet.substr(-8)}`}
<div className='flex items-center'>
<span
className={`transition-all w-fit overflow-hidden mr-2 ${
isCopied ? 'max-w-[90px]' : 'max-w-[0px]'
}`}>
Copied
</span>
<span>
<Image src={CopySvg} alt='' />
</span>
</div>
</div>
<SubFilledButton className='w-full' size='lg' onClick={unlinkWallet}>
{t('Disconnect Wallet')}
</SubFilledButton>
<div className='mt-[10px]'>
<div onClick={() => router.push('/profile')}>
<strong>{t('My profile')}</strong>
<strong className='text-sm'>{t('My profile')}</strong>
</div>
<span className='w-full block my-[10px] border-[1px] border-solid border-light-medium-gray '></span>
<div onClick={logout}>
<strong>{t('Log out')}</strong>
<strong className='text-sm'>{t('Log out')}</strong>
</div>
</div>
</div>
Expand All @@ -248,15 +262,15 @@ export default function Header({ className }: { className?: string }) {
<div className='p-5 flex flex-col gap-5'>
<div className='mt-[10px]'>
<div onClick={() => router.push('/profile')}>
<strong>{t('My profile')}</strong>
<strong className='text-sm'>{t('My profile')}</strong>
</div>
<span className='w-full block my-[10px] border-[1px] border-solid border-light-medium-gray '></span>
<div onClick={() => setConnectWalletOpen(true)}>
<strong>{t('Link Wallet')}</strong>
<strong className='text-sm'>{t('Link Wallet')}</strong>
</div>
<span className='w-full block my-[10px] border-[1px] border-solid border-light-medium-gray '></span>
<div onClick={logout}>
<strong>{t('Log out')}</strong>
<strong className='text-sm'>{t('Log out')}</strong>
</div>
</div>
</div>
Expand Down Expand Up @@ -384,20 +398,24 @@ export default function Header({ className }: { className?: string }) {
</FilledButton>
</DropdownToggle>
{wallet ? (
<DropdownMenu customClass='right-[50%] translate-x-[50%] min-w-[200px]'>
<DropdownMenu customClass='right-[50%] translate-x-[50%] min-w-[200px] w-full max-w-full'>
<div className='p-5 flex flex-col gap-5'>
<div className='flex justify-center items-center'>
<Image src={c98} alt='c98' />
<div className='ml-[10px] font-[500]'>{t('Connected with coin 98')}</div>
</div>
<div className='flex'>
<div className='flex-auto w-[60%]'></div>
<div className='flex-auto w-[10%]'></div>
<div className='flex-auto w-[30%]'></div>
<div
className='flex justify-between items-center text-second-color bg-light-gray p-[10px] rounded-xl'
onClick={copyAddress}>
{`${wallet.substr(0, 8)}...${wallet.substr(-8)}`}
<div className='flex items-center'>
<span
className={`transition-all w-fit overflow-hidden mr-2 ${
isCopied ? 'max-w-[90px]' : 'max-w-[0px]'
}`}>
Copied
</span>
<span>
<Image src={CopySvg} alt='' />
</span>
</div>
</div>
<SubFilledButton className='w-full' size='lg' onClick={unlinkWallet}>
{t('Disconnect Wallet')}
</SubFilledButton>
<div className='mt-[10px]'>
<div onClick={() => router.push('/profile')}>
<strong>{t('My profile')}</strong>
Expand All @@ -416,10 +434,10 @@ export default function Header({ className }: { className?: string }) {
<div onClick={() => router.push('/profile')}>
<strong>{t('My profile')}</strong>
</div>
{/* <span className='w-full block my-[10px] border-[1px] border-solid border-light-medium-gray '></span>
<span className='w-full block my-[10px] border-[1px] border-solid border-light-medium-gray '></span>
<div onClick={() => setConnectWalletOpen(true)}>
<strong>{t('Link Wallet')}</strong>
</div> */}
</div>
<span className='w-full block my-[10px] border-[1px] border-solid border-light-medium-gray '></span>
<div onClick={logout}>
<strong>{t('Log out')}</strong>
Expand Down
33 changes: 19 additions & 14 deletions src/context/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import { useSearchParams } from 'next/navigation'
import { useRouter } from 'next/router'
import { createContext, useEffect, useRef, useState } from 'react'
import { IUser } from 'src/models/user'
import { setAddress } from 'src/services'
import { getItem, removeItem, setItem } from 'src/utils/localStorage'
import { handleConnectWallet } from 'src/utils/signer'
import { getProfile as getProfileService } from 'src/services'
export const Context = createContext(null)
export const privateAxios = axios.create()
function ContextProvider({ children }) {
Expand Down Expand Up @@ -109,16 +111,22 @@ function ContextProvider({ children }) {
if (!t) {
throw new Error('Unauthorized access token')
}
const res = await authorizerRef.getProfile({
Authorization: `Bearer ${t}`,
})
const res = await getProfileService()
if (res) {
if (res.wallet_address) {
setWallet(res.wallet_address)
}
setAccount({
email: res.email,
name: res.nickname,
image: res.picture,
verified: !!res.email_verified_at,
id: res.id,
verified: res.email_verified,
gender: res.gender,
birthdate: res.birthdate,
bio: res.bio,
signupMethods: res.signup_methods,
walletAddress: res.wallet_address,
} as IUser)
}
return res
Expand All @@ -144,14 +152,17 @@ function ContextProvider({ children }) {
return key.current.bech32Address
}

const connectWallet = async (callback?: () => void) => {
const connectWallet = async (callback?: (status: string) => void) => {
try {
const keplr = provider == 'Coin98' ? window.coin98?.keplr : window.keplr
const res = await handleConnectWallet(keplr, key.current)
await handleConnectWallet(keplr, key.current)
const res = await setAddress(key.current.bech32Address)
setItem('connected_provider', provider)
if (res) {
setWallet(key.current.bech32Address)
callback && callback()
callback && callback('success')
} else {
callback && callback('fail')
}
} catch (error) {
console.log(error)
Expand All @@ -175,13 +186,7 @@ function ContextProvider({ children }) {
callback && callback('success')
setItem('token', res.access_token, new Date(Date.now() + res.expires_in * 1000))
setLogoutTimeout(res.expires_in * 1000)
setAccount({
email: res.user.email,
name: res.user.nickname,
image: res.user.picture,
id: res.user.id,
verified: res.user.email_verified,
} as IUser)
getProfile(res.access_token)
} else {
callback && callback('failed', 'Admin account cannot be used for user purposes')
}
Expand Down
1 change: 0 additions & 1 deletion src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,6 @@ const App = ({ Component, pageProps }: AppProps) => {
}, [email])

useEffect(() => {
console.log(getConfig())
const scriptElement = document.createElement('script')
scriptElement.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
Expand Down
Loading

0 comments on commit a96c27d

Please sign in to comment.