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.

Sign up for GitHub

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

Jump to bottom

Implement Web QR Code Scanner #638

Draft
wants to merge 1 commit into
base: dev
Choose a base branch
from
+167 −2
Draft

Implement Web QR Code Scanner #638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions apps/next/pages/scan.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { ScanScreen } from 'app/features/scan/screen'
import Head from 'next/head'
;('@supabase/auth-helpers-nextjs')
import type { NextPageWithLayout } from './_app'
import { userProtectedGetSSP } from 'utils/userProtected'
import { YStack } from '@my/ui'

export const Page: NextPageWithLayout = () => {
return (
<>
<Head>
<title>Send | Scan</title>
</Head>
<ScanScreen />
</>
)
}

export const getServerSideProps = userProtectedGetSSP()

Page.getLayout = (children) => (
<YStack h="100vh" display="flex" justifyContent="center" alignItems="center">
{children}
</YStack>
)

export default Page
14 changes: 12 additions & 2 deletions packages/app/components/TopNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
Button as ButtonOg,
Container,
Separator,
useToastController,

Check warning on line 12 in packages/app/components/TopNav.tsx

View workflow job for this annotation

GitHub Actions / Unit Tests 

'useToastController' is defined but never used
type ButtonProps,
ButtonText,
View,
Expand All @@ -27,11 +27,13 @@
import { ReferralLink } from './ReferralLink'
import { IconCoin } from './icons/IconCoin'
import { Link } from 'solito/link'
import { Flashlight } from '@tamagui/lucide-icons'

export enum ButtonOption {
QR = 'QR',
SETTINGS = 'SETTINGS',
REFERRAL = 'REFERRAL',
TORCH = 'TORCH',
}

interface TopNavProps {
Expand Down Expand Up @@ -64,9 +66,9 @@
const parts = path.split('/').filter(Boolean)
const { push } = useRouter()
const media = useMedia()
const toast = useToastController()
const selectedCoin = useCoinFromTokenParam()
const isPwa = usePwa()
const router = useRouter()

const handleHomeBottomSheet = () => {
setRootParams(
Expand Down Expand Up @@ -130,7 +132,7 @@
<Button
$gtLg={{ display: 'none' }}
icon={<IconQr size={'$2.5'} color={iconColor} />}
onPress={() => toast.show('Coming Soon')}
onPress={() => router.push('/scan')}
/>
)
case button === ButtonOption.SETTINGS:
Expand All @@ -141,6 +143,14 @@
onPress={handleSettingsBottomSheet}
/>
)
case button === ButtonOption.TORCH:
return (
<Button
$gtLg={{ display: 'none' }}
icon={<Flashlight size={'$2.5'} color={iconColor} />}
onPress={() => console.log('flashlight')}
/>
)
default:
if (__DEV__) throw new Error(`Unknown button option: ${button}`)
return null
Expand Down
4 changes: 4 additions & 0 deletions packages/app/features/scan/Scanner.native.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
//@todo implement native QR scanner
export const Scanner = () => {
return <div />
}
6 changes: 6 additions & 0 deletions packages/app/features/scan/Scanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { Scanner as OgScanner } from '@yudiel/react-qr-scanner'
import { styled } from '@my/ui'

export const Scanner = styled(OgScanner, {
name: 'Scanner',
})
54 changes: 54 additions & 0 deletions packages/app/features/scan/screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { boundingBox } from '@yudiel/react-qr-scanner'
import { Scanner } from './Scanner'
import { Button, Container, isWeb, useMedia, usePwa, XStack, YStack } from '@my/ui'

Check warning on line 3 in packages/app/features/scan/screen.tsx

View workflow job for this annotation

GitHub Actions / Unit Tests 

'isWeb' is defined but never used
import { useState } from 'react'
import { IconArrowLeft } from 'app/components/icons'
import { Flashlight } from '@tamagui/lucide-icons'
import { useRouter } from 'solito/router'

export function ScanScreen() {
const media = useMedia()
const [isScannerView, setIsScannerView] = useState(!media.gtMd)

Check warning on line 11 in packages/app/features/scan/screen.tsx

View workflow job for this annotation

GitHub Actions / Unit Tests 

'isScannerView' is assigned a value but never used

Check warning on line 11 in packages/app/features/scan/screen.tsx

View workflow job for this annotation

GitHub Actions / Unit Tests 

'setIsScannerView' is assigned a value but never used

if (media.gtMd) return <QrCodeView />

return <ScannerView />
}

const ScannerView = () => {
const router = useRouter()
const [isPaused, setIsPaused] = useState(false)

Check warning on line 20 in packages/app/features/scan/screen.tsx

View workflow job for this annotation

GitHub Actions / Unit Tests 

'setIsPaused' is assigned a value but never used
const isPwa = usePwa()
return (
<Scanner
constraints={{}}
onScan={console.log}
formats={['qr_code']}
components={{
torch: true,
zoom: true,
finder: true,
tracker: boundingBox,
}}
scanDelay={2000}
paused={isPaused}
>
<YStack fullscreen>
<Container safeAreaPadding="y" pt={isPwa ? undefined : '$6'}>
<XStack jc="space-between" w="100%">
<Button chromeless icon={<IconArrowLeft size={'$4'} />} onPress={() => router.back()} />
<Button
chromeless
icon={<Flashlight size={'$4'} />}
onPress={() => console.log('flashlight')}
/>
</XStack>
</Container>
</YStack>
</Scanner>
)
}

const QrCodeView = () => {
return <div>QR Code View</div>
}
1 change: 1 addition & 0 deletions packages/app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"@wagmi/connectors": "^5.0.15",
"@wagmi/core": "^2.10.5",
"@web3modal/wagmi": "^5.0.2",
"@yudiel/react-qr-scanner": "^2.0.4",
"base64-arraybuffer": "^1.0.2",
"burnt": "^0.12.1",
"cbor": "^9.0.1",
Expand Down
63 changes: 63 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10832,6 +10832,20 @@ __metadata:
languageName: node
linkType: hard

"@types/dom-webcodecs@npm:^0.1.11":
version: 0.1.11
resolution: "@types/dom-webcodecs@npm:0.1.11"
checksum: 10/00141b61720110bdfe75d0c0d84e69e44aaeb9a173f921d6252fe42bbbe01394e395e778cf8701d5ddfec3d5258b4ca841f7522210172c00b1d433ffa3d3ea51
languageName: node
linkType: hard

"@types/emscripten@npm:^1.39.13":
version: 1.39.13
resolution: "@types/emscripten@npm:1.39.13"
checksum: 10/02c0446150f9cc2c74dc3a551f86ce13df266c33d8b98d11d9f17263e2d98a6a6b4d36bdd15066c4e1547ae1ed2d52eed9420116b4935d119009e0f53ddbb041
languageName: node
linkType: hard

"@types/eslint-scope@npm:^3.7.3":
version: 3.7.7
resolution: "@types/eslint-scope@npm:3.7.7"
Expand Down Expand Up @@ -13175,6 +13189,19 @@ __metadata:
languageName: node
linkType: hard

"@yudiel/react-qr-scanner@npm:^2.0.4":
version: 2.0.4
resolution: "@yudiel/react-qr-scanner@npm:2.0.4"
dependencies:
barcode-detector: "npm:^2.2.7"
webrtc-adapter: "npm:9.0.1"
peerDependencies:
react: ^17 || ^18
react-dom: ^17 || ^18
checksum: 10/3dc8ae66f0fceb353909f4af03b87537b1e401e00496dd1a7f96f86ab366d21d777eb8023d4621079364affde73a6311ce36ec84ffca31c46d7300312d7e36e0
languageName: node
linkType: hard

"@zxing/text-encoding@npm:0.9.0":
version: 0.9.0
resolution: "@zxing/text-encoding@npm:0.9.0"
Expand Down Expand Up @@ -13654,6 +13681,7 @@ __metadata:
"@wagmi/connectors": "npm:^5.0.15"
"@wagmi/core": "npm:^2.10.5"
"@web3modal/wagmi": "npm:^5.0.2"
"@yudiel/react-qr-scanner": "npm:^2.0.4"
babel-preset-expo: "npm:~11.0.0"
base64-arraybuffer: "npm:^1.0.2"
burnt: "npm:^0.12.1"
Expand Down Expand Up @@ -14429,6 +14457,16 @@ __metadata:
languageName: node
linkType: hard

"barcode-detector@npm:^2.2.7":
version: 2.2.7
resolution: "barcode-detector@npm:2.2.7"
dependencies:
"@types/dom-webcodecs": "npm:^0.1.11"
zxing-wasm: "npm:1.2.11"
checksum: 10/efa516981f3a1950dea86aadc672608d2e144758c06a20db9194c59269d01d57d6235035ffad1ee6d346efb0d46cfa772770eb6e0ba1e0977177fa5d371e1c45
languageName: node
linkType: hard

"bare-events@npm:^2.0.0, bare-events@npm:^2.2.0":
version: 2.2.0
resolution: "bare-events@npm:2.2.0"
Expand Down Expand Up @@ -29896,6 +29934,13 @@ __metadata:
languageName: node
linkType: hard

"sdp@npm:^3.2.0":
version: 3.2.0
resolution: "sdp@npm:3.2.0"
checksum: 10/3ea337c24f91f7429c79b97f1a16c19a5abb3b6672ce7c05cc931314af1318cdf3a7a88e66ea1ee71e05bf41bf3a20d5940b1c93f3099e820cec60068ddbd9b4
languageName: node
linkType: hard

"secp256k1@npm:^5.0.0":
version: 5.0.0
resolution: "secp256k1@npm:5.0.0"
Expand Down Expand Up @@ -34005,6 +34050,15 @@ __metadata:
languageName: node
linkType: hard

"webrtc-adapter@npm:9.0.1":
version: 9.0.1
resolution: "webrtc-adapter@npm:9.0.1"
dependencies:
sdp: "npm:^3.2.0"
checksum: 10/5e73ddb6fb807e28fc4bb727bdee2717a697bcf24cfbe1e401c5a3c57d61627fa000b6185470ec3c9fcc1dca42093b67776742c7fde7002fbc14da272a020cbf
languageName: node
linkType: hard

"whatwg-encoding@npm:^2.0.0":
version: 2.0.0
resolution: "whatwg-encoding@npm:2.0.0"
Expand Down Expand Up @@ -34707,3 +34761,12 @@ __metadata:
checksum: 10/6e965bf651759ea778ad8b8ad56dfc7c072fc546563abc2f189de1be305994c82d3f228ed99aa9b4992d839f119158f2ddc0d7e00dc87a216ffc16ed87d57813
languageName: node
linkType: hard

"zxing-wasm@npm:1.2.11":
version: 1.2.11
resolution: "zxing-wasm@npm:1.2.11"
dependencies:
"@types/emscripten": "npm:^1.39.13"
checksum: 10/d5f2b51e261f3b7d6203c0de08d22e3afe2841a3d0f1535a6a86c69a1958cee810aadffd7911df2a4b731d98b93c4e4d14e67c5d95058ff34d911da9ed8b30ba
languageName: node
linkType: hard
Loading