I'm trying to build an Uniswap Clone with React & Tailwind CSS, and I have created a "Connect Wallet" button that triggers a Metamask popup to connect wallet.
Everything else seems to be working fine, but when I fully refresh the web application page, my cursor pointer becomes disabled when I hover over the "Connect Wallet" button.** Basically, my cursor stays at the default arrow pointer mode, doesn't change to cursor pointer, and I am unable to click the button.
Image of app in Chrome Browser
Interestingly enough, when I refresh the page and quickly place my mouse over the Connect Wallet button, I am briefly able to click the button and open the Metamask Pop-up as usual. But, when the page is fully refreshed, the cursor goes back to the normal/default arrow pointer, and I am unable to click the button.
Anybody have an idea of what might be causing this, and how I may be able to resolve it?
PS: I have tried to add "cursor-pointer" class to my button. I thought it would force the cursor to change to pointer on hover, but this didn't fix the problem.
Here's my React code block for the button:
const WalletButton = () => {
const [rendered, setRendered] = useState('');
const {ens} = useLookupAddress();
const {account, activateBrowserWallet, deactivate} = useEthers();
return (
<button
onClick={() => {
if (!account) {
activateBrowserWallet();
} else {
deactivate();
}
}}
className={styles.walletButton}
>
{rendered === "" && "Connect Wallet"}
{rendered !== "" && rendered}
</button>
);
};
export default WalletButton
Here are the tailwind CSS styles that are currently applied to the button:
// WalletButton
walletButton:
"bg-site-pink border-none outline-none px-6 py-2 font-poppins font-bold text-lg text-white rounded-3xl leading-[24px] hover:bg-pink-600 transition-all",
Related
I have 4 main components for my React portfolio site called Home, Portfolio, About, Contact. The components are linked in Navigation. If I click on those link, Component appears. But the problem is if I scroll the Portfolio page 50% and click on About. The About page stay automatically scrolled top by 50%. I don't want an automated scroll. Rather I want the component will start from top 0;
I have tried "css-snap-type" but it doesn't work.
How can I solve the problem?
you could solve this using a react component that will scroll the window up everytime you click on a different link.
checkout this documentation is pretty straight forward https://reactrouter.com/web/guides/scroll-restoration
If you are using gatsby it comes with and API called called shouldUpdateScroll you could implement it on the gatsby.browser.js
const transitionDelay= 500
exports.shouldUpdateScroll = ({
routerProps: { location }, //location
getSavedScrollPosition, //last position on the previous page
}) => {
if(location.action === 'PUSH'){
window.setTimeout(()=> window.scrollTo (0,0), transitionDelay)
}
else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
()=> window.scrollTo((savedPosition || [0,0])),
transitionDelay
)
}
return false
}
U need to set window.scrollTo(0, 0) when u click on link so it would start on top of page.
I have created a Dropdown.Item that, when pressed triggers a modal. If I close the Modal by pressing the Close Icon of the modal, the modal disappears and the dropdown is still open behind it. If I close the modal by clicking outside the modal, both are closed. I would like the dropdown to be closed in both cases.
This is code I created in the semantic sandbox that recreates the issue
import React from 'react'
import { Dropdown, Modal, Button, Icon, Header } from 'semantic-ui-react'
const DropdownExampleDropdown = () => (
<Dropdown text='File'>
<Dropdown.Menu>
<ModalExampleCloseIcon />
<Dropdown.Item text='Open...' description='ctrl + o' />
</Dropdown.Menu>
</Dropdown>
)
const ModalExampleCloseIcon = () => (
<Modal trigger={<Dropdown.Item text='Details' />} closeIcon>
<Header icon='archive' content='Archive Old Messages' />
<Modal.Content>
<p>
Your inbox is getting full, would you like us to enable automatic archiving of old messages?
</p>
</Modal.Content>
<Modal.Actions>
<Button color='red'>
<Icon name='remove' /> No
</Button>
<Button color='green'>
<Icon name='checkmark' /> Yes
</Button>
</Modal.Actions>
</Modal>
)
export default DropdownExampleDropdown
If you click on the "File" dropdown and then on "Details", a modal will appear. Pressing on the X in the modal closes the modal, but the "Details" and "Open.." options of the dropdown is still visible. If you click the "Details" button and then click outside the modal, the modal disappears and the dropdown closes. You see the "File" dropdown as it originally appeared, which is what I would like to see in both cases.
As a means to learn, I am trying to build an autocomplete feature. I am following this example:
https://codesandbox.io/s/8lyp733pj0.
I see two issues with this solution:
1.) Conflict with mouse hover and keydown. If I use the keypad to navigate the list the active item gets highlighted and if I use my mouse at the same time another item will get highlighted. This results in 2 highlighted fields.
2.) If i select an item by pressing enter it will fill the input field with the selected text but if I press enter again it will change that text to the index 0 item I believe.
Can someone please help me in understanding how to resolve these issues. I have tried hover and focus for css but it still doesn't achieve the expected outcome.
My approach (not sure if this is the correct one):
If keyboard is being used then the mouse event should be disabled and vice versa.
I've also tried removing this.setState({activeSuggestion: 0}) for the enter event.
Thanks for your help - it's taking me some time to grasp the concepts of state with React.
The onKeyDown function updates correctly the value ofactiveSuggestion. I sugest you to add a scroll in the select when activeSuggestion is not vissible.
In my opinion, you need to update the value of activeSuggestion with theonMouseEnter function.
When you do that, remember to remove the line 32 from styles.css: .suggestions li:hover.
Only the element with .suggestion-active must have the active styles. Not the hovered ones. The idea is that onMouseEnter must update the value of activeSuggestion.
Here is the code:
// Autocomplete.jsx
//in line 84, after function onKeyDown, add:
onMouseEnter = e => {
try {
e.persist();
const currentIndex = parseInt(e.target.dataset.index, 10);
this.setState({ activeSuggestion: currentIndex });
} catch (reason) {
console.error(reason);
}
}
// then, create const onMouseEnter after the render() method:
render() {
const {
onChange,
onClick,
onKeyDown,
onMouseEnter,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
// In the li nodes (line 123), add props onMouseEnter and data-index:
<li
className={className}
key={suggestion}
onClick={onClick}
onMouseEnter={onMouseEnter}
data-index={index}
>
{suggestion}
</li>
Remember to remove the line 32 from styles.css: .suggestions li:hover.
Hope it helps.
I'm new to React Native (experiences iOS developer in Swift) and I can't seem to find anything online for how to move UI elements in response to touch events. (Or maybe I'm just really bad at searching stack overflow lol).
Eventually, I want to have a textbox in the center of the screen, and when the user begins to type (or taps on the box to start typing), the box will slide to the top of the screen. However I can't even find a simple tutorial for this. I know that I can have a const style that defines style/position aspects of the textbox, and I can create a second style and then on button tap I can change the textbox's style and re-render, but it seems overkill to make an entire second style, where only one attribute is changing.
Can someone provide sample React Native code, where there is a text label and a button on the screen, and when the user taps the button, the label moves from above the button to below the button?
Check out this example of moving an element on touch. I use a <TouchableWithoutFeedback> and onPressIn. When you touch it, it changes the x and y position of it:
https://snack.expo.io/#noitsnack/onpressin-twice
import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback, Image, Dimensions } from 'react-native';
import IMAGE_EXPO from './assets/expo.symbol.white.png'
const IMAGE_SIZE = 100;
export default class App extends Component {
state = {
score: 0,
...getRandXY()
}
render() {
const { score, x, y } = this.state;
return (
<View style={{flex:1, backgroundColor:'steelblue' }}>
<Text style={{fontSize:72, textAlign:'center'}}>{score}</Text>
<TouchableWithoutFeedback onPressIn={this.addScore}>
<Image source={IMAGE_EXPO} style={{ width:IMAGE_SIZE, height:IMAGE_SIZE, left:x, top:y, position:'absolute' }} />
</TouchableWithoutFeedback>
</View>
)
}
addScore = e => {
this.setState(({ score }) => ({ score:score+1, ...getRandXY() }));
}
}
function getRandXY() {
return {
x: getRandInt(0, Dimensions.get('window').width - IMAGE_SIZE),
y: getRandInt(0, Dimensions.get('window').height - IMAGE_SIZE)
}
}
function getRandInt(min, max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
Once you get this movement down you can move to the Animation API to get teh sliding effect.
I have a div that displays another content on hover using css transitions.
There is one text element <h3>Another Text</h3> that overlays link email adress. On desktop browser it's working correctly - I can click the link after hover is activated. On phone device where hover is replaced by clicking on the element, there's a problem - If I activate the hover by clicking on "Another Text" it opens the link right away.
My question is if there is any way how to restrict link opening on first click.
Ideal scenario on phone device is:
user clicks on "Another text"
hover is activated, link is displayedbut not fired
user click link and link is fired
Here is the code: https://jsfiddle.net/9bc0bcja/2/
I've partially solved it using javscript:
$(".team-social")
.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",
function(e){
if($(this).hasClass("pointerA")){
if(is_touch_device()){
$(this).removeClass( "pointerA" );
}
}
else{
$(this).addClass( "pointerA" );
}
});
$('.team-social a').click(function() {
if(is_touch_device()){
$(this).parent().removeClass("pointerA");
}
});
It activates pointer-events after transition finishes, so it is not fired right away when I click overlay on phone device.
https://jsfiddle.net/9bc0bcja/4/
added javascript + jquery link
added class .pointerA
added pointer-events:none; to class .team-social
Try this Fiddle.
I simplified your code, keeping only the necessary elements.
This script only operates if you're using a mobile device, which is what you should want for performance reasons.
This code watches the hover event rather than transitionEnd, that way the function trigger timing is not dependent on the length of the transition.
if (is_touch_device()) {
var $wrap = $(".wrap"),
$pw = $wrap.find(".pointer-watch"),
$tc = $pw.find(".transition-container");
$pw.addClass("pointerN");
$('.wrap').hover(function wrapHovered() {
if ($pw.hasClass("pointerN")){
setTimeout(function enablePE() {
$pw.removeClass("pointerN");
}, 0);
}
else if (!$wrap.is(":hover")) {
$pw.addClass("pointerN");
}
});
}