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

feat: wallectConnect preloader #81

Merged
merged 3 commits into from
May 27, 2024
+81 −5
Merged

feat: wallectConnect preloader #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6cb1ee9
feat: wallet connect preloader
anukulpandey May 27, 2024
e724fe5
feat: connection qr expired
anukulpandey May 27, 2024
565f239
feat: log error if brave
anukulpandey May 27, 2024
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
12 changes: 12 additions & 0 deletions public/img/wallets/walletconnect.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 32 additions & 4 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
}

const [selExtensionName, setSelExtensionName] = useState<string | undefined>(selectedWallet || undefined);
const [wcPreloader,setWcPreloader] = useState<boolean>(false);
const {
loading, error, signers, selectedReefSigner, network, provider, reefState, extension
} = hooks.useInitReefStateExtension(
Expand Down Expand Up @@ -65,7 +66,7 @@
useEffect(() => {
if (selExtensionName === reefExt.REEF_SNAP_IDENT && error?.code === 2) {
history.push(SNAP_URL);
}

Check warning on line 69 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

React Hook useEffect has missing dependencies: 'history' and 'selExtensionName'. Either include them or remove the dependency array
}, [extension, error]);

const[errorToast,setErrorToast] = useState<{
Expand All @@ -74,7 +75,7 @@
}|undefined>();

useEffect(()=>{
if(errorToast){

Check failure on line 78 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Expected '===' and instead saw '=='
if(errorToast.type == "danger"){
Uik.notify.danger(errorToast.message.toString());
}else{
Expand All @@ -86,7 +87,7 @@
text='Reconnect'
fill
onClick={() => window.location.reload()}
/>

Check failure on line 90 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Expected indentation of 10 space characters but found 20
</>
})
}
Expand All @@ -113,27 +114,42 @@
}
});

//handle preloader
useEffect(()=>{
// preloader active
if(wcPreloader && signers.length){
// if account connected , hide preloader
setWcPreloader(false)
}

Check warning on line 123 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

React Hook useEffect has a missing dependency: 'wcPreloader'. Either include it or remove the dependency array
},[signers])

Check failure on line 125 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Missing return type on function
const connectWalletConnect = async(ident:string)=>{
const response:reefExt.WcConnection | undefined = await connectWc()
console.log('connectWalletConnect',response);
if (response) {
reefExt.injectWcAsExtension(response, { name: reefExt.REEF_WALLET_CONNECT_IDENT, version: "1.0.0" });
setSelExtensionName(ident);
// display preloader
setWcPreloader(true);
} else {
// if proposal expired, recursively call
Uik.notify.danger("Connection QR expired, reloading")
await connectWalletConnect(ident);
}
}

Check failure on line 140 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Missing return type on function


const onExtensionSelected = async(ident: string) => {
console.log('onExtensionSelected', ident);
if (ident === reefExt.REEF_WALLET_CONNECT_IDENT) {
await connectWalletConnect(ident);
} else {
setSelExtensionName(ident);
try {
if (ident === reefExt.REEF_WALLET_CONNECT_IDENT) {
await connectWalletConnect(ident);
} else {

Check failure on line 148 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

'error' is already declared in the upper scope
setSelExtensionName(ident);
}
} catch (error) {
console.log(error);
}
}

Expand Down Expand Up @@ -187,7 +203,19 @@
accountSelectorOpen={history.location.pathname !== SNAP_URL} />
<ContentRouter />
<NetworkSwitching isOpen={isNetworkSwitching} />
<Uik.Modal title="Connecting to Mobile App"
isOpen={wcPreloader}>
<div>
<div className='wc-preloader'>
<div className='wc-loader'></div>
<img src="/img/wallets/walletconnect.svg" alt="" className='wc-icon-preloader' />

Check failure on line 211 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Expected indentation of 30 space characters but found 28
</div>
<div className='wc-loader-label' >
<Uik.Text type="mini" text="wait while we are establishing a connection"/>
</div>

Check failure on line 215 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Expected indentation of 30 space characters but found 28
</div>
</Uik.Modal>

Check failure on line 218 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Expected closing tag to match indentation of opening

Check failure on line 218 in src/App.tsx

View workflow job for this annotation

GitHub Actions / unit-lint 

Expected indentation of 28 space characters but found 26
<ToastContainer
draggable
newestOnTop
Expand Down
38 changes: 37 additions & 1 deletion src/assets/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,4 +341,40 @@ input.form-control:focus {
.modal-backdrop {
z-index: 999 !important;
opacity: 0 !important;
}
}

.wc-icon-preloader{
width: 4rem;
height: 4rem;
position: absolute;
}

.wc-preloader{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.wc-loader {
border: 5px solid #f3f3f3;
border-top: 5px solid #3496ff;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.wc-loader-label{
padding-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}

Loading