react-icons/fi#FiChevronRight JavaScript Examples

PrettyApp = ({ app, all }) => {
  const [selected, setSelected] = useState(false);
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);
  
  useEffect(() => {
    let found = selectedApps.findIndex((a) => a._id === app._id) !== -1;

    setSelected(found);
  }, [selectedApps, app._id]);

  let handleAppSelect = () => {
    let found = selectedApps.findIndex((a) => a._id === app._id);
    if (found !== -1) {
      let updatedSelectedApps = selectedApps.filter(
        (a, index) => index !== found
      );

      setSelectedApps(updatedSelectedApps);
      setSelected(false);
    } else {
      setSelected(true);
        
      if (all) {
        app = all.find((i) => app._id == i._id);

        setSelectedApps([...selectedApps, app]);
      } else {
        setSelectedApps([...selectedApps, app]);
      }
    }
  };

  if (!app && !app.img) return <></>;

  return (
    <li
      key={app._id}
      onClick={handleAppSelect}
      className={`${styles.app} ${selected ? styles.selected : ""}`}
    >
        <div>
            <div className={styles.imgContainer}>
            <picture>
                <source srcSet={`/assets/apps/${app.img}`} type="image/webp" />
                <source
                srcSet={`/assets/apps/fallback/${app.img.replace(
                    "webp",
                    "png"
                )}`}
                type="image/png"
                />
                <img
                src={`/assets/apps/fallback/${app.img.replace("webp", "png")}`}
                alt={`Logo for ${app.name}`}
                draggable={false}
                />
            </picture>
            </div>
            <h3 className={styles.imgHeader}>{app.name}</h3>
            <div className={styles.moreInfo}>
              <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
                <span onClick={e => {
                  e.stopPropagation();
                }}>
                  More Info <FiChevronRight />
                </span>
              </Link>
            </div>
            
        </div>
    </li>
  );
}

PackList = ({ children, title, id, packs}) => {
  const [packApps, setPackApps] = useState([]);
  const [pack, setPack] = useState();
  const headerRef = useRef(null);

  useEffect(() => {
    if (!packs) return;

    const pack = packs.find(p => p._id === id);

    if(!pack) return;

    setPackApps(pack.apps.slice(0, 5));
    setPack(pack);

  }, []);

  if(!pack) return <></>;

  return (
    <div className={styles.recommendation}>
      <Link href="/packs/[id]" as={`/packs/${pack._id}`} prefetch={false}>
        <a id={pack.accent} className={styles.packHeader} ref={headerRef}>
          {children}
          <h3>{title}</h3>
          <p>{pack.desc}</p>
        </a>
      </Link>

      <div className={styles.packListContainer}>
        {packApps && packApps.map((app) => <App key={app._id} data={app} />)}

        <Link href="/packs/[id]" as={`/packs/${pack._id}`} prefetch={false}>
          <a className={`button subtle ${styles.viewPack}`}>
            View Pack <FiChevronRight />
          </a>
        </Link>
      </div>
    </div>
  );
}

export function NavButton({type, bg, color, ...props}) {
  const isPrev = type === 'prev'
  // eslint-disable-next-line no-shadow
  const Icon = isPrev ? FiChevronLeft : FiChevronRight
  return (
    <Absolute
      top="50%"
      left={isPrev && 0}
      right={isPrev || 0}
      width={rem(280)}
      zIndex={0}
      css={{
        transform: 'translate(0, -50%)',
        overflow: 'hidden',
        height: rem(600),
      }}
      {...props}
    >
      <div>
        <Icon
          fontSize={rem(20)}
          color={color}
          style={{
            position: 'absolute',
            top: '50%',
            left: '50%',
            transform: `translate(-50%, -50%) translateX(${
              isPrev ? rem(80) : rem(-80)
            })`,
          }}
        />
        <style jsx>{`
          div {
            border-radius: 50%;
            cursor: pointer;
            height: 100%;
            width: ${rem(560)};
            position: relative;
            transform: translateX(${isPrev ? '-50%' : ''});
            transition: all 0.5s ease-out;
            transition-property: background;
            will-change: background;
          }
          div:hover {
            background: ${bg};
          }
        `}</style>
      </div>
    </Absolute>
  )
}

Hero = ({ projects }) => {
  const images = projects.map(item => {
    const {
      data: {
        image: { localFiles },
      },
    } = item
    const image = localFiles[0].childImageSharp.fluid
    return image
  })
  const [index, setIndex] = React.useState(0)
  React.useEffect(() => {
    const lastIndex = images.length - 1
    if (index < 0) {
      setIndex(lastIndex)
    }
    if (index > lastIndex) {
      setIndex(0)
    }
  }, [index, images])
  return (
    <Wrapper>
      <Background image={images[index]}>
        <article>
          <h3>If you can dream it, we can create it</h3>
          <h1>let your home be inique and stylish</h1>
          <Link to="/projects">Projects</Link>
        </article>

        <button className="prev-btn" onClick={() => setIndex(index - 1)}>
          <FiChevronLeft />
        </button>
        <button className="next-btn" onClick={() => setIndex(index + 1)}>
          <FiChevronRight />
        </button>
        <div className="dots">
          {images.map((_, btnIndex) => {
            return (
              <span
                key={btnIndex}
                onClick={() => setIndex(btnIndex)}
                className={index === btnIndex ? "active" : undefined}
              ></span>
            )
          })}
        </div>
      </Background>
    </Wrapper>
  )
}

Slider = () => {
  const {
    allAirtable: { nodes: customers },
  } = useStaticQuery(query)
  const [index, setIndex] = React.useState(0)
  React.useEffect(() => {
    const lastIndex = customers.length - 1
    if (index < 0) {
      setIndex(lastIndex)
    }
    if (index > lastIndex) {
      setIndex(0)
    }
  }, [index, customers])
  return (
    <Wrapper className="section">
      <Title title="reviews" />
      <div className="section-center">
        {customers.map((customer, customerIndex) => {
          const {
            data: { image, name, title, quote },
          } = customer
          const customerImg = image.localFiles[0].childImageSharp.fixed

          let position = "nextSlide"
          if (customerIndex === index) {
            position = "activeSlide"
          }
          if (
            customerIndex === index - 1 ||
            (index === 0 && customerIndex === customers.length - 1)
          ) {
            position = "lastSlide"
          }

          return (
            <article className={position} key={customerIndex}>
              <Image fixed={customerImg} className="img"></Image>
              <h4>{name}</h4>
              <p className="title">{title}</p>
              <p className="text">{quote}</p>
              <FaQuoteRight className="icon" />
            </article>
          )
        })}
        <button className="prev" onClick={() => setIndex(index - 1)}>
          <FiChevronLeft />
        </button>
        <button className="next" onClick={() => setIndex(index + 1)}>
          <FiChevronRight />
        </button>
      </div>
    </Wrapper>
  )
}

function ScrollCardsNavigator() {
  const { cards } = useContext(PreferencesContext)
  const [leftButtonVisible, setLeftButtonVisible] = useState(true)
  const [rightButtonVisible, setRightButtonVisible] = useState(true)
  const scrollBarContainer = useRef(null)

  const handleScroll = (e) => {
    const { scrollLeft, scrollWidth, offsetWidth } = e.target
    setLeftButtonVisible(scrollLeft > 0)
    const scrollRight = scrollWidth - offsetWidth - Math.abs(scrollLeft)
    setRightButtonVisible(scrollRight > 0)
  }

  const handleKeyboardKeys = (e) => {
    if (e.keyCode == 37) {
      scrollTo('left')
    } else if (e.keyCode == 39) {
      scrollTo('right')
    }
  }

  useLayoutEffect(() => {
    scrollBarContainer.current = document.querySelector('.AppContent')
  }, [])

  useEffect(() => {
    scrollBarContainer.current.addEventListener('scroll', handleScroll, true)
    window.addEventListener('keydown', handleKeyboardKeys)
    return () => {
      window.removeEventListener('keydown', handleKeyboardKeys)
      scrollBarContainer.current.removeEventListener('scroll', handleScroll)
    }
  }, [])

  useEffect(() => {
    setLeftButtonVisible(false)
    setRightButtonVisible(cards.length > APP.maxCardsPerRow)
  }, [cards])

  const scrollTo = (direction) => {
    if (!scrollBarContainer.current) {
      return
    }
    trackPageScroll(direction)
    const { scrollLeft } = scrollBarContainer.current
    const { offsetWidth } = scrollBarContainer.current.children[0]
    let extraPadding = 32 // Should be calculated dynamically

    const position =
      direction === 'left'
        ? scrollLeft - offsetWidth - extraPadding
        : scrollLeft + offsetWidth + extraPadding

    scrollBarContainer.current.scrollTo({
      left: position,
      behavior: 'smooth',
    })
  }

  return (
    <>
      {leftButtonVisible && (
        <button onClick={() => scrollTo('left')} className="scrollButton" style={{ left: 0 }}>
          <FiChevronLeft size={32} />
        </button>
      )}
      {rightButtonVisible && (
        <button onClick={() => scrollTo('right')} className="scrollButton" style={{ right: 0 }}>
          <FiChevronRight size={32} />
        </button>
      )}
    </>
  )
}

function Store({ data, error }) {
  if (error) return <Error title="Oops!" subtitle={error} />;

  const [apps, setApps] = useState([]);
  const [searchInput, setSearchInput] = useState();
  const [offset, setOffset] = useState(0);
  const [sort, setSort] = useState();

  const appsPerPage = 60;

  const totalPages = Math.ceil(apps.length / appsPerPage);

  useEffect(() => {
    if (Router.query.sort && Router.query.sort === "update-desc") {
      setSort(Router.query.sort);
      setApps(data.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)));
    } else {
      setSort("name-asc");
      setApps(data.sort((a, b) => a.name.localeCompare(b.name)));
    }

    let handlePagination = (e) => {
      if (e.keyCode === 39) {
        let nextBtn = document.getElementById("next");

        if (nextBtn) {
          document.getElementById("next").click();
        }
      } else if (e.keyCode === 37) {
        let previousBtn = document.getElementById("previous");

        if (previousBtn) {
          document.getElementById("previous").click();
        }
      }
    };

    document.addEventListener("keydown", handlePagination);

    setPagination(apps.length);

    return () => document.removeEventListener("keydown", handlePagination);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const setPagination = (appCount) => {
    let requestedPage = parseInt(Router.query.page);
    if (requestedPage) {
      let maxPages = Math.round(appCount / appsPerPage) + 1;

      // we check if its a valid page number
      if (requestedPage > maxPages || requestedPage < 2) return;

      // if it is, we continue
      let calculateOffset = appsPerPage * (requestedPage - 1);
      setOffset(calculateOffset);
    }
  };

  let handleNext = () => {
    window.scrollTo(0, 0);
    setOffset((offset) => offset + appsPerPage);

    Router.replace({
      pathname: "/apps",
      query: {
        page: Math.round((offset + appsPerPage - 1) / appsPerPage) + 1,
      },
    });
  };

  let handlePrevious = () => {
    window.scrollTo(0, 0);
    setOffset((offset) => offset - appsPerPage);

    Router.replace({
      pathname: "/apps",
      query: {
        page: Math.round((offset + appsPerPage - 1) / appsPerPage) - 1,
      },
    });
  };

  let Pagination = ({ small, disable }) => {
    return (
      <div className={small ? styles.minPagination : styles.pagbtn}>
        <button
          className={`button ${small ? styles.smallBtn : null}`}
          id={!small ? "previous" : ""}
          onClick={handlePrevious}
          title="Previous page of apps"
          disabled={offset > 0 ? (disable ? "disabled" : null) : "disabled"}
        >
          <FiChevronLeft />
          {!small ? "Previous" : ""}
        </button>
        <button
          className={`button ${small ? styles.smallBtn : null}`}
          id={!small ? "next" : ""}
          title="Next page of apps"
          onClick={handleNext}
          disabled={
            offset + appsPerPage < apps.length
              ? disable
                ? "disabled"
                : null
              : "disabled"
          }
        >
          {!small ? "Next" : ""}
          <FiChevronRight />
        </button>
      </div>
    );
  };

  const Title = () => {
    return (
      <>
        {!searchInput && <h1>All apps {`(${apps.length})`}</h1>}
        {searchInput && (
          <>
            {searchInput.startsWith("tags: ") && (
              <h1>Tag: {searchInput.split(": ")[1]}</h1>
            )}
            {!searchInput.startsWith("tags: ") && <h1>Search results</h1>}
          </>
        )}
      </>
    );
  };

  if (!apps) return <></>;

  return (
    <div>
      <MetaTags title="Apps - winstall" />

      <div className={styles.controls}>
        <Title />

        <Pagination small disable={searchInput ? true : false} />
      </div>

      <Search
        apps={apps}
        onSearch={(q) => setSearchInput(q)}
        label={"Search for apps"}
        placeholder={"Enter you search term here"}
      />

      <div className={styles.controls}>
        {!searchInput && (
          <>
            <p>
              Showing {apps.slice(offset, offset + appsPerPage).length} apps
              (page {Math.round((offset + appsPerPage - 1) / appsPerPage)} of{" "}
              {totalPages}).
            </p>
            <ListSort
              apps={apps}
              defaultSort={sort}
              onSort={(sort) => setSort(sort)}
            />
          </>
        )}
      </div>

      {!searchInput && (
        <ul className={`${styles.all} ${styles.storeList}`}>
          {apps.slice(offset, offset + appsPerPage).map((app) => (
            <SingleApp
              app={app}
              key={app._id}
              showTime={sort.includes("update-") ? true : false}
            />
          ))}
        </ul>
      )}

      <div className={styles.pagination}>
        <Pagination disable={searchInput ? true : false} />
        <em>
          Hit the <FiArrowLeftCircle /> and <FiArrowRightCircle /> keys on your
          keyboard to navigate between pages quickly.
        </em>
      </div>

      <Footer />
    </div>
  );
}

export default function Packs({ packs, error }) {
    if(error) return <Error title="Oops!" subtitle={error}/>
    
    const [offset, setOffset] = useState(0);

    const itemsPerPage = 60;
    const totalPages = Math.ceil(packs.length / itemsPerPage);

    let handleNext = () => {
        window.scrollTo(0, 0)
        setOffset(offset => offset + itemsPerPage);
    }
  
    let handlePrevious = () => {
        window.scrollTo(0, 0)
        setOffset(offset => offset - itemsPerPage);
    }

    const Pagination = ({ small, disable }) => {
        return (
          <div className={small ? styles.minPagination : styles.pagbtn}>
            <button
              className={`button ${small ? styles.smallBtn : null}`}
              id={!small ? "previous": ""}
              onClick={handlePrevious}
              title="Previous page of packs"
              disabled={offset > 0 ? (disable ? "disabled" : null) : "disabled"}
            >
              <FiChevronLeft />
              {!small ? "Previous" : ""}
            </button>
            <button
              className={`button ${small ? styles.smallBtn : null}`}
              id={!small ? "next" : ""}
              title="Next page of packs"
              onClick={handleNext}
              disabled={offset + itemsPerPage < packs.length ? ( disable ? "disabled" : null ) : "disabled"}
            >
              {!small ? "Next" : ""}
              <FiChevronRight />
            </button>
          </div>
        );
    }

      
    return (
        <PageWrapper>
            <MetaTags title="Packs - winstall" desc="Checkout the community's app collections for your new Windows 10 machine." />

            <div>
                <FeaturePromoter art="/assets/packsPromo.svg" promoId="packs" disableHide={true}>
                    <h3>Introducing Packs</h3>
                    <h1>Curate and share the apps you use daily.</h1>
                    <div className="box2">
                        <Link href="/packs/create"><button className="button spacer accent" id="starWine"><FiPlus/> Create a pack</button></Link>
                    </div>
                </FeaturePromoter>

                <div className={styles.controls}> 
                    <div>
                        <h1>All packs {`(${packs.length})`}</h1>
                        <p>
                            Showing {packs.slice(offset, offset + itemsPerPage).length} packs
                            (page {Math.round((offset + itemsPerPage - 1) / itemsPerPage)} of{" "}
                            {totalPages}).
                        </p>
                    </div>
                    <Pagination small/> 
                </div>

        
                
                <ul className={`${styles.all} ${styles.storeList}`}>
                    {packs.slice(offset, offset + itemsPerPage).map(pack => <li key={pack._id}><PackPreview pack={pack} /></li>)}
                </ul>

                <div className={styles.pagination}>
                    <Pagination/>
                    <em>
                        Hit the <FiArrowLeftCircle /> and <FiArrowRightCircle /> keys
                        on your keyboard to navigate between pages quickly.
                    </em>
                </div>
            </div>

        </PageWrapper>
    )
}

export default function Index() {
  const {t} = useTranslation()

  const {coinbase} = useAuthState()

  const [{all}] = useDeferredVotes()

  const {
    data: {balance, stake},
    isLoading,
  } = useBalance()

  const receiveDrawerDisclosure = useDisclosure()

  const sendDrawerDisclosure = useDisclosure()

  return (
    <Layout>
      <Page pt={[4, 6]}>
        <MobileApiStatus left={4} />
        <PageTitleNew>{t('Wallets')}</PageTitleNew>
        <Flex w="100%" flexFlow="row wrap">
          <Flex flexBasis={['100%', '50%']} order={1}>
            <Avatar
              display={['block', 'none']}
              size="80px"
              mr={6}
              address={coinbase}
            />
            <TotalAmount
              amount={parseFloat(balance) + parseFloat(stake)}
              isLoading={isLoading}
              mt={[2, 0]}
            />
          </Flex>
          <Flex flexBasis={['100%', '50%']} order={[4, 2]} mt={1}>
            <HStack
              justifyContent={['space-around', 'flex-end']}
              h={6}
              alignItems="center"
              flexBasis="100%"
            >
              <VDivider display={['none', 'initial']} />
              <IconButton
                mx={[3, 0]}
                fontSize={['mobile', 'md']}
                color={['red.500', 'blue.500']}
                icon={
                  <SendOutIcon boxSize={5} color={['red.500', 'blue.500']} />
                }
                onClick={sendDrawerDisclosure.onOpen}
              >
                {t('Send')}
              </IconButton>
              <VDivider />
              <IconButton
                mx={[3, 0]}
                fontSize={['mobile', 'md']}
                icon={<ReceiveIcon boxSize={5} color="blue.500" />}
                onClick={receiveDrawerDisclosure.onOpen}
              >
                {t('Receive')}
              </IconButton>
            </HStack>
          </Flex>
          <Flex flexBasis="100%" order={[2, 3]} mt={[8, 2]}>
            <Link
              target="_blank"
              href={`https://scan.idena.io/address/${coinbase}`}
              color="blue.500"
              fontWeight={500}
              w={['100%', 'auto']}
            >
              <Flex
                fontSize={['base', 'md']}
                alignItems="center"
                w={['100%', 'auto']}
              >
                <Box
                  boxSize={8}
                  backgroundColor="brandBlue.10"
                  borderRadius="10px"
                  display={['inline-block', 'none']}
                >
                  <OpenExplorerIcon boxSize={5} mt={1} ml={3 / 2} />
                </Box>
                <Box
                  as="span"
                  ml={[3, 0]}
                  borderBottomWidth={['1px', 0]}
                  flex={[1, 'auto']}
                  pb={[1, 0]}
                >
                  {t('More details in explorer')}{' '}
                  <Icon display={['none', 'inline']} as={FiChevronRight} />
                </Box>
              </Flex>
            </Link>
          </Flex>
          <Flex
            flexBasis="100%"
            order={[3, 4]}
            overflowX={['auto', 'initial']}
            sx={{
              '&::-webkit-scrollbar': {
                display: 'none',
              },
            }}
            mt={8}
            mb={[6, 0]}
          >
            <WalletCard
              address={coinbase}
              wallet={{name: 'Main', balance, isStake: false}}
              isSelected
              onSend={sendDrawerDisclosure.onOpen}
              onReceive={receiveDrawerDisclosure.onOpen}
              isLoading={isLoading}
            />
            <WalletCard
              wallet={{name: 'Stake', balance: stake, isStake: true}}
              isLoading={isLoading}
            />
          </Flex>
        </Flex>

        <Heading
          fontSize="lg"
          color="brandGray.500"
          fontWeight={500}
          mb={0}
          mt={8}
          display={['none', 'block']}
        >
          {t('Transactions')}
        </Heading>

        {all.length > 0 ? (
          <Tabs variant="unstyled" w={['100%', 'auto']} mt={[8, 6]}>
            <TabList bg={['gray.50', 'white']} borderRadius="md" p={[1, 0]}>
              <TransactionsTab>
                {t('Scheduled')}
                {all.length > 0 && (
                  <>
                    <Badge ml={2} display={['none', 'inline-block']}>
                      {all.length}
                    </Badge>
                    <Box as="span" ml={1} display={['inline', 'none']}>
                      {all.length}
                    </Box>
                  </>
                )}
              </TransactionsTab>
              <TransactionsTab> {t('Recent')}</TransactionsTab>
            </TabList>
            <TabPanels mt={4}>
              <TabPanel p={0}>
                <WalletPendingTransactions />
              </TabPanel>
              <TabPanel p={0}>
                <WalletTransactions address={coinbase} />
              </TabPanel>
            </TabPanels>
          </Tabs>
        ) : (
          <Flex mt={4}>
            <WalletTransactions address={coinbase} />
          </Flex>
        )}

        <SendDrawer {...sendDrawerDisclosure} />

        <ReceiveDrawer address={coinbase} {...receiveDrawerDisclosure} />
      </Page>
    </Layout>
  )
}

function RestoreKey() {
  const [warning, showWarning] = useState(false)
  const [password, setPassword] = useState('')
  const {login, removeKey} = useAuthDispatch()
  const {coinbase} = useSettingsState()
  const size = useBreakpointValue(['lg', 'md'])
  const [error, setError] = useState()
  const [, {resetRestrictedModal}] = useAppContext()

  const [dnaAppUrl, {dismiss: dimissDnaAppLink}] = useDnaAppLink()

  const router = useRouter()

  const {t} = useTranslation()

  return (
    <AuthLayout>
      <AuthLayout.Normal>
        <Flex
          direction={['column', 'initial']}
          align={['center', 'initial']}
          width="100%"
        >
          <Avatar address={coinbase} borderRadius={['mobile', '20px']} />
          <Flex
            direction="column"
            justify="center"
            flex="1"
            w={['70%', 'inherit']}
            m={['20px 0 0 0', '0 0 0 20px']}
          >
            <SubHeading color="white" css={{lineHeight: '21px'}}>
              {t('Enter password to unlock your account')}
            </SubHeading>

            <Flex justify={['center', 'space-between']}>
              <Text wordBreak="break-all" color="xwhite.050" fontSize="mdx">
                {coinbase}
              </Text>
            </Flex>

            <Flex justify="space-between">
              <FlatButton
                onClick={() => showWarning(true)}
                style={{
                  marginBottom: '19px',
                }}
                whiteSpace="break-spaces"
                fontSize={['15px', '13px']}
                m={['21px 0 0 0', '0']}
              >
                <span>{t('Remove private key from this device')}</span>

                <Box display={['none', 'initial']}>
                  <FiChevronRight
                    style={{
                      display: 'inline-block',
                    }}
                    fontSize="19px"
                  />
                </Box>
              </FlatButton>
            </Flex>
          </Flex>
        </Flex>
        <Flex w="100%" mt={['24px', '13px']} direction={['column', 'initial']}>
          <form
            style={{width: '100%'}}
            onSubmit={e => {
              try {
                e.preventDefault()
                setError(null)
                resetRestrictedModal()
                login(password)
              } catch (err) {
                setError(t('Password is invalid. Try again.'))
              }
            }}
          >
            <FormLabel
              display={['none', 'inherit']}
              fontSize={['18px', '13px']}
              htmlFor="password"
              style={{
                color: 'white',
              }}
            >
              {t('Password')}
            </FormLabel>

            <Flex width="100%" direction={['column', 'initial']}>
              <PasswordInput
                size={size}
                width="100%"
                value={password}
                borderColor="xblack.008"
                backgroundColor="xblack.016"
                onChange={e => setPassword(e.target.value)}
                placeholder={t('Enter your password')}
              />
              <PrimaryButton
                size={size}
                type="submit"
                isDisabled={!password}
                m={['16px 0 0 0', '0 0 0 10px']}
              >
                {t('Proceed')}
              </PrimaryButton>
            </Flex>
            {error && (
              <Flex
                mt="30px"
                fontSize="mdx"
                background="red.500"
                style={{
                  borderRadius: '9px',
                  padding: `18px 24px`,
                }}
              >
                {error}
              </Flex>
            )}
          </form>
        </Flex>
      </AuthLayout.Normal>

      {dnaAppUrl && (
        <DnaAppUrl url={dnaAppUrl} onOpenInApp={dimissDnaAppLink} />
      )}

      {router.pathname === '/oracles/view' && (
        <DnaAppUrl
          url={`dna://vote/v1?address=${router.query.id}`}
          onOpenInApp={() => {}}
        />
      )}

      <Dialog key="warning" isOpen={warning} onClose={() => showWarning(false)}>
        <DialogHeader>{t('Remove private key?')}</DialogHeader>
        <DialogBody>
          {t(
            'Make sure you have the private key backup. Otherwise you will lose access to your account.'
          )}
        </DialogBody>
        <DialogFooter>
          <SecondaryButton onClick={() => showWarning(false)}>
            {t('Cancel')}
          </SecondaryButton>
          <PrimaryButton
            onClick={removeKey}
            backgroundColor="red.090"
            _hover={{
              bg: 'red.500',
            }}
          >
            {t('Remove')}
          </PrimaryButton>
        </DialogFooter>
      </Dialog>
    </AuthLayout>
  )
}