diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js --- a/native/account/siwe-panel.react.js +++ b/native/account/siwe-panel.react.js @@ -1,7 +1,8 @@ // @flow +import BottomSheet from '@gorhom/bottom-sheet'; import * as React from 'react'; -import { ActivityIndicator, Text } from 'react-native'; +import { ActivityIndicator, Text, View } from 'react-native'; import WebView from 'react-native-webview'; import { @@ -100,13 +101,71 @@ [nonce], ); + const [isLoading, setLoading] = React.useState(true); + + const snapPoints = React.useMemo(() => { + if (isLoading) { + return [1]; + } else { + return [700]; + } + }, [isLoading]); + + const onWebViewLoaded = React.useCallback(() => { + setLoading(false); + }, []); + + const handleStyle = React.useMemo( + () => ({ + backgroundColor: '#242529', + }), + [], + ); + + const bottomSheetHandleIndicatorStyle = React.useMemo( + () => ({ + backgroundColor: 'white', + }), + [], + ); + + let bottomSheet; if (nonce) { - return ; - } else if (getSIWENonceCallFailed) { - return Oops, try again later!; - } else { - return ; + bottomSheet = ( + + + + ); + } + + let activity; + if (getSIWENonceCallFailed) { + activity = Oops, try again later!; + } else if (isLoading) { + activity = ; } + + const activityContainer = React.useMemo( + () => ({ + flex: 1, + }), + [], + ); + + return ( + <> + {activity} + {bottomSheet} + + ); } export default SIWEPanel; diff --git a/native/package.json b/native/package.json --- a/native/package.json +++ b/native/package.json @@ -52,6 +52,7 @@ "@commapp/sqlcipher-amalgamation": "^4.4.3-a", "@expo/react-native-action-sheet": "^3.14.0", "@expo/vector-icons": "^13.0.0", + "@gorhom/bottom-sheet": "^4.4.5", "@react-native-async-storage/async-storage": "^1.17.10", "@react-native-clipboard/clipboard": "^1.11.1", "@react-native-community/art": "^1.2.0", diff --git a/yarn.lock b/yarn.lock --- a/yarn.lock +++ b/yarn.lock @@ -2977,6 +2977,21 @@ teeny-request "^7.1.3" xdg-basedir "^4.0.0" +"@gorhom/bottom-sheet@^4.4.5": + version "4.4.5" + resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.4.5.tgz#b9041b01ce1af9a936e7c0fc1d78f026d759eebe" + integrity sha512-Z5Z20wshLUB8lIdtMKoJaRnjd64wBR/q8EeVPThrg+skrcBwBPHfUwZJ2srB0rEszA/01ejSJy/ixyd7Ra7vUA== + dependencies: + "@gorhom/portal" "1.0.14" + invariant "^2.2.4" + +"@gorhom/portal@1.0.14": + version "1.0.14" + resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111" + integrity sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A== + dependencies: + nanoid "^3.3.1" + "@graphql-tools/merge@8.3.1": version "8.3.1" resolved "https://registry.yarnpkg.com/@graphql-tools/merge/-/merge-8.3.1.tgz#06121942ad28982a14635dbc87b5d488a041d722" @@ -16426,6 +16441,11 @@ resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362" integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ== +nanoid@^3.3.1: + version "3.3.4" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" + integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"