Skip to content

Commit

Permalink
feat: new mobile UI (#211)
Browse files Browse the repository at this point in the history
  • Loading branch information
@m1guelpf
m1guelpf committed Dec 11, 2023
1 parent d8f7884 commit 0a859ac
Show file tree
Hide file tree
Showing 7 changed files with 125 additions and 64 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
"prepublishOnly": "npm run build"
},
"devDependencies": {
"turbo": "^1.10.16"
"turbo": "^1.11.1"
},
"engines": {
"node": ">=18"
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/IDKitWidget/BaseWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const IDKitWidget: FC<WidgetProps> = ({ children, ...config }) => {
}}
transition={{ layout: { duration: 0.15 } }}
className={
'relative z-50 flex min-h-[35rem] w-full flex-col rounded-t-2xl bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 dark:bg-0d151d md:max-w-md md:rounded-b-2xl'
'relative z-50 flex min-h-screen w-full flex-col bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 dark:bg-0d151d md:min-h-[35rem] md:max-w-md md:rounded-2xl'
}
>
<Toast.Provider>
Expand Down
14 changes: 10 additions & 4 deletions packages/react/src/components/IDKitWidget/States/ErrorState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@ import type { IDKitStore } from '@/store/idkit'
import ErrorIcon from '@/components/Icons/ErrorIcon'
import { AppErrorCodes } from '@worldcoin/idkit-core'
import ReloadIcon from '@/components/Icons/ReloadIcon'
import WarningIcon from '@/components/Icons/WarningIcon'

const getParams = ({ retryFlow, errorState }: IDKitStore) => ({ retryFlow, errorState })

const ERROR_TITLES: Partial<Record<AppErrorCodes, string>> = {
[AppErrorCodes.GenericError]: __('Something went wrong'),
[AppErrorCodes.FailedByHostApp]: __('Verification Declined'),
[AppErrorCodes.VerificationRejected]: __('Request cancelled'),
}

const ERROR_MESSAGES: Record<AppErrorCodes, string> = {
[AppErrorCodes.ConnectionFailed]: __('Connection to your wallet failed. Please try again.'),
[AppErrorCodes.VerificationRejected]: __('You rejected the verification request.'),
[AppErrorCodes.VerificationRejected]: __('You’ve cancelled the request in World App.'),
[AppErrorCodes.MaxVerificationsReached]: __(
'You have already verified the maximum number of times for this action.'
),
Expand All @@ -29,9 +31,9 @@ const ERROR_MESSAGES: Record<AppErrorCodes, string> = {
[AppErrorCodes.InclusionProofPending]: __(
'Your identity is still being registered. Please wait a few minutes and try again.'
),
[AppErrorCodes.FailedByHostApp]: __('Verification failed by the app. Please contact the app owner for details.'),
[AppErrorCodes.UnexpectedResponse]: __('Unexpected response from your wallet. Please try again.'),
[AppErrorCodes.GenericError]: __('Something unexpected went wrong. Please try again.'),
[AppErrorCodes.UnexpectedResponse]: __('Unexpected response from your wallet. Please try again.'),
[AppErrorCodes.FailedByHostApp]: __('Verification failed by the app. Please contact the app owner for details.'),
}

const ErrorState = () => {
Expand All @@ -40,7 +42,11 @@ const ErrorState = () => {
return (
<div className="space-y-8">
<div className="-mt-5 flex items-center justify-center">
<ErrorIcon className="w-24" />
{errorState?.code == AppErrorCodes.VerificationRejected ? (
<WarningIcon className="w-24" />
) : (
<ErrorIcon className="w-24" />
)}
</div>
<div>
<p className="text-center text-2xl font-semibold text-gray-900 dark:text-white">
Expand Down
70 changes: 35 additions & 35 deletions packages/react/src/components/IDKitWidget/States/WorldID/QRState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,41 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {

return (
<>
<div className="mb-10 space-y-4 md:hidden">
<motion.a
href={qrData ?? ''}
whileTap={{ scale: 0.95 }}
whileHover={{ scale: 1.05 }}
transition={{ layout: { duration: 0.15 } }}
layoutId={media == 'desktop' ? undefined : 'worldid-button'}
className={classNames(
'flex w-full space-x-2 items-center px-4 py-4 border border-transparent font-medium rounded-2xl shadow-sm',
'bg-0d151d dark:bg-white text-white dark:text-0d151d'
)}
>
<WorldcoinIcon className="h-5 w-5" />
<motion.span
className="flex-1 text-center"
transition={{ layout: { duration: 0.15 } }}
layoutId={media == 'desktop' ? undefined : 'worldid-text'}
>
{__('Open Worldcoin App')}
</motion.span>
</motion.a>
<div className="space-y-4">
<div className="flex items-center space-x-4 ">
<hr className="flex-1" />
<span className="text-xs font-medium text-9ba3ae">or</span>
<hr className="flex-1" />
</div>
<motion.button
className="w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b"
onClick={() => setShowQR(state => !state)}
>
{showQR ? __('Hide QR Code') : __('Display QR Code')}
</motion.button>
</div>
</div>
{(media == 'desktop' || showQR) && (
<>
<AnimatePresence>
Expand Down Expand Up @@ -87,41 +122,6 @@ const QRState: FC<Props> = ({ qrData, showQR, setShowQR }) => {
</div>
</>
)}
<div className="space-y-4">
<motion.a
href={qrData ?? ''}
whileTap={{ scale: 0.95 }}
whileHover={{ scale: 1.05 }}
transition={{ layout: { duration: 0.15 } }}
layoutId={media == 'desktop' ? undefined : 'worldid-button'}
className={classNames(
'flex w-full space-x-2 items-center px-4 py-4 border border-transparent font-medium rounded-2xl shadow-sm',
'bg-0d151d dark:bg-white text-white dark:text-0d151d md:hidden'
)}
>
<WorldcoinIcon className="h-5 w-5" />
<motion.span
className="flex-1 text-center"
transition={{ layout: { duration: 0.15 } }}
layoutId={media == 'desktop' ? undefined : 'worldid-text'}
>
{__('Open Worldcoin App')}
</motion.span>
</motion.a>
<div className="space-x-2 md:hidden">
<motion.button className="text-sm text-9eafc0" onClick={() => setShowQR(state => !state)}>
{showQR ? __('Hide QR Code') : __('Show QR Code instead')}
</motion.button>
{showQR && (
<>
<span className="text-9eafc0">&middot;</span>
<button className="text-sm dark:text-white" onClick={copyLink}>
{copiedLink ? __('Copied!') : __('Copy QR Code')}
</button>
</>
)}
</div>
</div>
</>
)
}
Expand Down
54 changes: 54 additions & 0 deletions packages/react/src/components/Icons/WarningIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import type { SVGAttributes } from 'react'

const WarningIcon = (props: SVGAttributes<SVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" {...props}>
<circle
cx="50"
cy="50"
r="49.375"
fill="url(#warning-a)"
fillOpacity=".65"
stroke="url(#warning-b)"
strokeWidth="1.25"
/>
<g filter="url(#warning-c)">
<circle cx="50" cy="50" r="35" fill="#fff" />
<circle cx="50" cy="50" r="34.432" stroke="#FFE999" strokeWidth="1.136" />
</g>
<path
fill="#FFB200"
fillRule="evenodd"
d="M47.46 40.207c1.107-1.943 3.973-1.943 5.08 0l9.59 16.834c1.076 1.888-.324 4.209-2.54 4.209H40.41c-2.216 0-3.616-2.32-2.54-4.21l9.59-16.833Zm3.79 16.043a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-.313-10a.937.937 0 1 0-1.875 0v6.25a.938.938 0 0 0 1.875 0v-6.25Z"
clipRule="evenodd"
/>
<defs>
<linearGradient id="warning-a" x1="50" x2="50" y1="0" y2="100" gradientUnits="userSpaceOnUse">
<stop stopColor="#FFDA66" />
<stop offset="1" stopColor="#FFDA66" stopOpacity="0" />
</linearGradient>
<linearGradient id="warning-b" x1="50" x2="50" y1="0" y2="100" gradientUnits="userSpaceOnUse">
<stop stopColor="#FFDA66" />
<stop offset=".713" stopColor="#FFDA66" stopOpacity="0" />
</linearGradient>
<filter
id="warning-c"
width="77.5"
height="77.5"
x="11.25"
y="13.125"
colorInterpolationFilters="sRGB"
filterUnits="userSpaceOnUse"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
<feOffset dy="1.875" />
<feGaussianBlur stdDeviation="1.875" />
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.913725 0 0 0 0 0.6 0 0 0 0.45 0" />
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow_39_758" />
<feBlend in="SourceGraphic" in2="effect1_dropShadow_39_758" result="shape" />
</filter>
</defs>
</svg>
)

export default WarningIcon
1 change: 1 addition & 0 deletions packages/react/tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ module.exports = {
'#596673',
'#657080',
'#70868f',
'#9ba3ae',
'#9eafc0',
'#d3dfea',
'#e5e7eb',
Expand Down
46 changes: 23 additions & 23 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 0a859ac

Please sign in to comment.