From f77cfdffef7f33bd6f715141b9ad949a271c04a9 Mon Sep 17 00:00:00 2001 From: Shivangi Date: Thu, 14 Sep 2023 15:49:39 +0530 Subject: [PATCH 1/4] build: add react-native-walkthrough-tooltip --- package.json | 1 + yarn.lock | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 76d9df9f..ef248878 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "react-native-safe-area-context": "^3.2.0", "react-native-screens": "^3.9.0", "react-native-toast-message": "^2.1.5", + "react-native-walkthrough-tooltip": "^1.5.0", "react-native-webview": "^11.13.0", "react-redux": "^8.1.1", "redux": "^4.2.1", diff --git a/yarn.lock b/yarn.lock index c34eda89..8fe52297 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6091,7 +6091,7 @@ prompts@^2.0.1, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.7.2, prop-types@^15.8.1: +prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -6151,6 +6151,11 @@ react-devtools-core@4.19.1: shell-quote "^1.6.1" ws "^7" +react-fast-compare@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + react-freeze@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/react-freeze/-/react-freeze-1.0.3.tgz#5e3ca90e682fed1d73a7cb50c2c7402b3e85618d" @@ -6310,6 +6315,14 @@ react-native-toast-message@^2.1.5: resolved "https://registry.yarnpkg.com/react-native-toast-message/-/react-native-toast-message-2.1.6.tgz#322827c66901fa22cb3db614c7383cc717f5bbe2" integrity sha512-VctXuq20vmRa9AE13acaNZhrLcS3FaBS2zEevS3+vhBsnVZYG0FIlWIis9tVnpnNxUb3ART+BWtwQjzSttXTng== +react-native-walkthrough-tooltip@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/react-native-walkthrough-tooltip/-/react-native-walkthrough-tooltip-1.5.0.tgz#10a15c700fef73db2b509a13b89b488a454ffd75" + integrity sha512-xzpTs3JQkUMkmurc7WJDSAWaH2KRiRL2YoTXVCRqEEWxIvLQTn9eQv0jBzs1geR0wL+ezRpjkBEGAlfQ6eMimw== + dependencies: + prop-types "^15.6.1" + react-fast-compare "^2.0.4" + react-native-webview@^11.13.0: version "11.26.1" resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.26.1.tgz#658c09ed5162dc170b361e48c2dd26c9712879da" From 4b7a4c79ac8ea1d8cf535d46e431383c7b6d6835 Mon Sep 17 00:00:00 2001 From: Shivangi Date: Sat, 16 Sep 2023 22:46:39 +0530 Subject: [PATCH 2/4] feat: add tooltip while scanning --- src/screens/AuthScreen/AuthScreen.tsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/screens/AuthScreen/AuthScreen.tsx b/src/screens/AuthScreen/AuthScreen.tsx index 0f424fb9..97b08578 100644 --- a/src/screens/AuthScreen/AuthScreen.tsx +++ b/src/screens/AuthScreen/AuthScreen.tsx @@ -24,6 +24,7 @@ import { urls } from '../../constants/appConstant/url'; import AuthApis from '../../constants/apiConstant/AuthApi'; import { CameraScreen } from 'react-native-camera-kit'; import CustomModal from '../../components/Modal/CustomModal'; +import Tooltip from 'react-native-walkthrough-tooltip'; const AuthScreen = () => { // TODO: will revamp github signIn feature @@ -35,6 +36,7 @@ const AuthScreen = () => { const [modalVisible, setModalVisible] = useState(false); const [addressbarURL, setAdressbarURL] = useState(''); const [key, setKey] = useState(1); + const [toolTip, setToolTip] = useState(false); const activateCamera = async () => { try { @@ -47,6 +49,7 @@ const AuthScreen = () => { const handleQRCodeScanned = ({ nativeEvent }: any) => { setScannedUserID(nativeEvent.codeStringValue); + setToolTip(true); }; //TODO: add to constants @@ -298,6 +301,27 @@ const AuthScreen = () => { /> )} + {cameraActive && ( + + + + Go to my-site scan QR code + + + } + placement="top" + onClose={() => setToolTip(false)} + > + setToolTip(true)}> + What to Do + + + + )} + {modalVisible && ( Date: Tue, 19 Sep 2023 18:34:34 +0530 Subject: [PATCH 3/4] refactor: use internal styling --- src/screens/AuthScreen/AuthScreen.tsx | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/screens/AuthScreen/AuthScreen.tsx b/src/screens/AuthScreen/AuthScreen.tsx index 97b08578..f80a5581 100644 --- a/src/screens/AuthScreen/AuthScreen.tsx +++ b/src/screens/AuthScreen/AuthScreen.tsx @@ -25,6 +25,7 @@ import AuthApis from '../../constants/apiConstant/AuthApi'; import { CameraScreen } from 'react-native-camera-kit'; import CustomModal from '../../components/Modal/CustomModal'; import Tooltip from 'react-native-walkthrough-tooltip'; +import { Button } from 'react-native-paper'; const AuthScreen = () => { // TODO: will revamp github signIn feature @@ -306,17 +307,13 @@ const AuthScreen = () => { - - Go to my-site scan QR code - - + Go to my-site & scan QR code } placement="top" onClose={() => setToolTip(false)} > setToolTip(true)}> - What to Do + What To Do @@ -333,4 +330,21 @@ const AuthScreen = () => { ); }; +const styles = StyleSheet.create({ + toolTip: { + color: 'blue', + fontSize: 14, + fontWeight: 'bold', + }, + toolButton: { + fontSize: 20, + backgroundColor: '#483d8b', + marginBottom: 15, + borderRadius: 20, + height: 50, + padding: 10, + textAlignVertical: 'center', + textAlign: 'center', + }, +}); export default AuthScreen; From c771ae6f7d3a40e2d43ffe73c4d974dfe0a88e46 Mon Sep 17 00:00:00 2001 From: Shivangi Date: Tue, 19 Sep 2023 19:45:56 +0530 Subject: [PATCH 4/4] remove unused button --- src/screens/AuthScreen/AuthScreen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/screens/AuthScreen/AuthScreen.tsx b/src/screens/AuthScreen/AuthScreen.tsx index f80a5581..0179da1f 100644 --- a/src/screens/AuthScreen/AuthScreen.tsx +++ b/src/screens/AuthScreen/AuthScreen.tsx @@ -25,7 +25,6 @@ import AuthApis from '../../constants/apiConstant/AuthApi'; import { CameraScreen } from 'react-native-camera-kit'; import CustomModal from '../../components/Modal/CustomModal'; import Tooltip from 'react-native-walkthrough-tooltip'; -import { Button } from 'react-native-paper'; const AuthScreen = () => { // TODO: will revamp github signIn feature