Skip to content

Commit

Permalink
Update content of popup window (#168)
Browse files Browse the repository at this point in the history
  • Loading branch information
ahwei authored Nov 17, 2023
2 parents 9802a44 + bd26ff2 commit 6022c82
Show file tree
Hide file tree
Showing 25 changed files with 506 additions and 408 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Hoogii",
"version": "1.0.13-dev.0",
"version": "1.0.13-dev.3",
"private": true,
"scripts": {
"dev": "vite --port 3000",
Expand Down
Binary file added public/images/bg/popup.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion public/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,8 @@
"status-error-description": "There's something wrong! Please try again later.",
"status-success-description": "Now you can **Open Hoogii Extension Wallet** to start exploring the decentralized web on Chia Network.",
"switch": "switch",
"switch-to-chia": "Switch to Chia",
"switch-to-chia": "Switch to Chia {{chainName}}?",
"switch-chain_id": "Chain ID: {{chainId}}",
"tooltip-connected_sites": "Hoogii would not automatically connect to websites below, you still need to give access as first time you connect with.",
"tooltip-copied": "Copied",
"tooltip-copy_address": "Copy Address",
Expand Down
2 changes: 1 addition & 1 deletion src/components/FeesRadio/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const FeesRadio = <T extends FieldValues>({
}: IProps & IReactHookFormProps<T>) => {
const { i18n } = useTranslation()
return (
<div className="gap-2 flex flex-col">
<div className="gap-2 flex flex-col overflow-auto p-px">
{fees.map((item) => (
<label
key={item.note}
Expand Down
16 changes: 12 additions & 4 deletions src/components/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -136,15 +136,23 @@ export const ConnectedSiteItem = ({
...rest
}: IConnectedSiteItemProps & ComponentProps<typeof Item<'a'>>) => (
<Item as="a" key={name} {...rest} className="!cursor-pointer">
<span className="gap-2 flex-row-center">
<div className="gap-2 flex-row-center max-w-full overflow-hidden">
<img
src={iconUrl}
alt={`${name} icon`}
className="w-6 h-6 rounded-full"
/>
{name}
</span>
<button onClick={action}>
<div className="w-full overflow-hidden text-ellipsis whitespace-nowrap">
{name}
</div>
</div>
<button
onClick={(e) => {
e.preventDefault()
action?.()
}}
className="shrink-0"
>
{rest.disabled ? (
<OpenPageIcon className="w-3 h-3 text-active" />
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/container/Transfer/components/AssetCombobox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const AssetCombobox = forwardRef<
assetId={value.assetId}
src={value.iconUrl}
/>
<span className=" overflow-hidden text-ellipsis whitespace-nowrap">
<span className="overflow-hidden text-ellipsis whitespace-nowrap">
{value.code}
</span>
</span>
Expand Down
24 changes: 20 additions & 4 deletions src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@layer base {
html,
body {
@apply p-0 m-0 font-sans;
@apply p-0 m-0 font-sans overflow-hidden;
}
::-webkit-scrollbar {
width: 0px;
Expand Down Expand Up @@ -45,11 +45,13 @@
--tooltip-offset: 11px;
--tooltip-bg: #ced6ff;
@apply border-none overflow-hidden text-dark-scale-100 text-body1;
min-height: 600px;
min-width: 400px;
width: 100vw;
height: 100vh;
}
#root, #tools {
min-height: 600px;
min-width: 400px;
}
#tabs {
@apply w-screen min-h-screen text-dark-scale-100 text-body1 bg-main bg-cover;
}
Expand Down Expand Up @@ -126,6 +128,20 @@
.bg-status-coinbase {
background: linear-gradient(204.58deg, #ffda7c 0%, #ff4d00 84.31%);
}

.animate-border {
@apply h-0.5;
background:
linear-gradient(90deg, #fff 50%, transparent 0) repeat-x;
background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
animation: linearGradientMove .3s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px;
}
}
}

@layer components {
Expand Down Expand Up @@ -244,6 +260,6 @@
}

.info-box {
@apply px-3 py-2 flex items-center child:leading-none justify-between bg-box border border-primary/30 rounded-lg;
@apply px-3 py-2 flex items-center text-body1 text-dark-scale-100 child:leading-none justify-between bg-box border border-primary/30 rounded-lg;
}
}
75 changes: 75 additions & 0 deletions src/layouts/Popup.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import classNames from 'classnames'
import { createElement, HTMLProps, PropsWithChildren, ReactNode } from 'react'

import ConnectSiteInfo from '~/popup/components/connectSiteInfo'
import { IPopupPageProps } from '~/popup/types'
import { MethodEnum } from '~/types/extension'

interface IAction
extends PropsWithChildren<Omit<HTMLProps<HTMLButtonElement>, 'type'>> {
type?: 'submit'
}

interface IProps {
title: ReactNode
description?: ReactNode
actions?: IAction[]
className?: string
as?: keyof JSX.IntrinsicElements
}

const PopupLayout = <TTag extends keyof JSX.IntrinsicElements>({
title,
description,
request,
controller,
children,
actions = [],
className,
as = 'div',
...rest
}: PropsWithChildren<
IProps &
Partial<IPopupPageProps<MethodEnum.REQUEST | MethodEnum.ENABLE>> &
JSX.IntrinsicElements[TTag]
>) => {
return createElement(
as,
{
className:
'container flex flex-col w-full h-full pt-8 pb-10 mx-auto',
...rest,
},
<>
{/* // * popup title */}
<div className="flex flex-col items-center gap-5 text-dark-scale-100">
{request && controller && (
<ConnectSiteInfo
request={request}
controller={controller}
/>
)}
<div className="text-headline2">{title}</div>
{description && <div className="text-body1">{description}</div>}
</div>
{/* // * popup content */}
<div className={classNames('flex flex-col gap-4 grow', className)}>
{children}
</div>
{/* // * popup actions */}
<div className="flex gap-4 justify-center">
{actions.map(({ children, ...rest }, index) => (
<button
key={index}
className="btn btn-CTA_landing btn-large odd:btn-outline flex-1 max-w-[50%]"
{...rest}
>
{children}
</button>
))}
</div>
</>
)
}

export default PopupLayout
21 changes: 21 additions & 0 deletions src/popup/components/addressInfo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { t } from 'i18next'
import { observer } from 'mobx-react-lite'

import rootStore from '~/store'
import { shortenHash } from '~/utils'

const AddressInfo = () => {
const {
walletStore: { address },
} = rootStore
const shortenAddress = shortenHash(address)

return (
<div className="flex flex-col gap-2 text-body2 text-primary-100">
{t('current-address')}
<div className="info-box h-10">{shortenAddress}</div>
</div>
)
}

export default observer(AddressInfo)
6 changes: 5 additions & 1 deletion src/popup/components/connectSiteInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ const connectSiteInfo = ({
title={request.origin}
className="flex max-w-full gap-2 px-4 py-2 text-button2 text-primary-100 items-center border-primary-100/20 border rounded-lg"
>
<img src={request.iconUrl} alt="icon" className="w-7 h-7" />
<img
src={request.iconUrl}
alt="icon"
className="w-7 h-7 bg-primary-100 rounded-full"
/>
<div className="whitespace-nowrap text-ellipsis overflow-hidden">
{request.origin}
</div>
Expand Down
7 changes: 7 additions & 0 deletions src/popup/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export { default as AddressInfo } from './addressInfo'
export { default as ConnectSiteInfo } from './connectSiteInfo'
export { default as OfferInfo } from './offerInfo'
export { default as SpendBundleInfo } from './spendBundleInfo'
export * from './transactionInfo'
export { default as TransactionInfo } from './transactionInfo'
export { default as TransferInfo } from './transferInfo'
98 changes: 10 additions & 88 deletions src/popup/components/offerInfo.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,17 @@
import { observer } from 'mobx-react-lite'
import React, { useMemo } from 'react'
import { ComponentProps, useMemo } from 'react'
import { useTranslation } from 'react-i18next'

import AssetIcon from '~/components/AssetIcon'
import rootStore from '~/store'
import {
MethodEnum,
OfferAsset,
OfferParams,
OfferTypeEnum,
} from '~/types/extension'
import { shortenHash } from '~/utils'
import { mojoToBalance } from '~/utils/CoinConverter'
import { MethodEnum, OfferParams } from '~/types/extension'

import { IPopupPageProps } from '../types'

interface IOfferAssets extends OfferAsset {
offerType: OfferTypeEnum
}
import TransactionInfo from './transactionInfo'

function offerInfo({ request }: IPopupPageProps<MethodEnum.REQUEST>) {
const { t } = useTranslation()

const {
assetsStore: { XCH, getAssetByAssetId },
walletStore: { address },
} = rootStore

const shortenAddress = shortenHash(address)

const offerAssets = useMemo<IOfferAssets[]>(() => {
const assets = useMemo<
ComponentProps<typeof TransactionInfo>['assets']
>(() => {
if (!request.data?.params) {
return []
}
Expand All @@ -39,75 +21,15 @@ function offerInfo({ request }: IPopupPageProps<MethodEnum.REQUEST>) {
return [
...requestAssets.map((asset) => ({
...asset,
offerType: OfferTypeEnum.REQUEST,
})),
...offerAssets.map((asset) => ({
...asset,
offerType: OfferTypeEnum.OFFER,
amount: -asset.amount,
})),
]
}, [request.data?.params])
return (
<>
<div>
<div className="mb-3 text-left text-caption text-primary-100">
{t('address')}
</div>
<div className="flex flex-col gap-1 px-2 py-2 rounded-sm cursor-pointer bg-box shrink ">
{shortenAddress}
</div>
</div>
<div>
<div className="mb-3 text-left text-caption text-primary-100">
{t('transaction')}
</div>
<div className="flex flex-col gap-1 px-2 py-3 rounded-sm cursor-pointer bg-box shrink ">
<div className="text-left text-caption text-primary-100">
{t('offer')}
</div>
{offerAssets.map((asset) => {
const amount = mojoToBalance(
asset.amount.toString(),
asset.assetId
)
const foundAsset = getAssetByAssetId(
asset.assetId ?? XCH.assetId
)
}, [])

return (
<div
className="flex-row-center justify-between mb-1"
key={asset.assetId}
>
<div className="flex-row-center">
<AssetIcon
src={foundAsset?.iconUrl}
assetId={asset.assetId || XCH.assetId}
className="w-6 h-6 mr-1"
/>
{foundAsset?.code ||
`CAT ${shortenHash(asset.assetId)}`}
</div>
<div
className={`${
asset.offerType ===
OfferTypeEnum.REQUEST
? 'text-status-receive'
: 'text-status-send'
}`}
>
{asset.offerType === OfferTypeEnum.REQUEST
? '+'
: '-'}
{amount}
</div>
</div>
)
})}
</div>
</div>
</>
)
return <TransactionInfo title={t('offer')} assets={assets} />
}

export default observer(offerInfo)
export default offerInfo
13 changes: 0 additions & 13 deletions src/popup/components/spendBundleInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { MethodEnum, RequestMethodEnum } from '~/types/extension'
import { shortenHash } from '~/utils'
import { mojoToBalance } from '~/utils/CoinConverter'
import { add0x } from '~/utils/encryption'
import { puzzleHashToAddress } from '~/utils/signature'

import { IPopupPageProps } from '../types'
function spendBundleInfo({ request }: IPopupPageProps<MethodEnum.REQUEST>) {
Expand Down Expand Up @@ -68,18 +67,6 @@ function spendBundleInfo({ request }: IPopupPageProps<MethodEnum.REQUEST>) {
<div>
{parseBundle ? (
<>
<div>
<div className="mb-3 text-left text-caption text-primary-100">
{t('address')}
</div>
<div className="flex flex-col gap-1 px-2 py-2 rounded-sm cursor-pointer bg-box shrink ">
{shortenHash(
puzzleHashToAddress(
metadata?.to_puzzle_hashes?.[0]
)
)}
</div>
</div>
<div>
<div className="mt-2 mb-1 text-left text-caption text-primary-100">
{t('transaction')}
Expand Down
Loading

0 comments on commit 6022c82

Please sign in to comment.