New realm UI cleanup (#833)

Resolves #782 

Some cleanup work, deleted unused files, changed the structure of `ui`
and `components` directories

src/shared/components/Modal.tsx → src/shared/components/Dialogs/Modal.tsx

@@ -2,9 +2,9 @@ import classNames from "classnames"
 import React, { CSSProperties } from "react"
 import { easings, useSpring, animated } from "@react-spring/web"
 
-import Portal from "./Portal"
-import { noop } from "../utils"
-import ClickableModalOverlay from "./Modals/ClickableModalOverlay"
+import Portal from "../Interface/Portal"
+import { noop } from "../../utils"
+import ClickableModalOverlay from "./ClickableModalOverlay"
 
 function CloseBtn({ onClick, style }: React.SVGProps<SVGSVGElement>) {
   return (

src/shared/components/Panel.tsx → src/shared/components/Dialogs/Panel.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, CSSProperties } from "react"
 import classNames from "classnames"
 import { animated } from "@react-spring/web"
 import { useRealmPanelTransition } from "shared/hooks"
-import Portal from "./Portal"
+import Portal from "../Interface/Portal"
 
 type PortalSectionProps = {
   children: ReactNode

src/shared/components/Popup.tsx → src/shared/components/Dialogs/Popup.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from "react"
 import { animated } from "@react-spring/web"
 import { useVisibilityTransition } from "shared/hooks"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import closeIcon from "shared/assets/icons/s/close.svg"
 
 export type PopupProps = {

src/shared/components/Tooltip.tsx → src/shared/components/Dialogs/Tooltip.tsx

@@ -2,7 +2,7 @@ import React, { CSSProperties, ReactNode, useState } from "react"
 import infoIcon from "shared/assets/icons/m/info.svg"
 import { animated } from "@react-spring/web"
 import { useVisibilityTransition } from "shared/hooks"
-import Icon from "./Icon"
+import Icon from "../Media/Icon"
 
 type TooltipProps = {
   children: ReactNode

src/shared/components/Accordion.tsx → src/shared/components/Interface/Accordion.tsx

@@ -1,7 +1,7 @@
 import classNames from "classnames"
 import React, { CSSProperties, useEffect, useState } from "react"
-import arrowIcon from "../assets/icons/s/arrow-down.svg"
-import Icon from "./Icon"
+import arrowIcon from "shared/assets/icons/s/arrow-down.svg"
+import Icon from "../Media/Icon"
 
 type AccordionType = "default" | "frame" | "challenge" | "panel"
 

src/shared/components/TahoAmount.tsx → src/shared/components/Interface/TahoAmount.tsx

@@ -1,9 +1,9 @@
 import classNames from "classnames"
 import React from "react"
-import { parseTahoAmount, separateThousandsByComma } from "../utils"
-import Icon from "./Icon"
-import lockIcon from "../assets/icons/s/lock.svg"
-import coinIcon from "../assets/taho-coin.svg"
+import lockIcon from "shared/assets/icons/s/lock.svg"
+import coinIcon from "shared/assets/taho-coin.svg"
+import { parseTahoAmount, separateThousandsByComma } from "../../utils"
+import Icon from "../Media/Icon"
 
 type TahoAmountProps = {
   amount?: bigint

src/shared/components/FullPageLoader.tsx → src/shared/components/Loaders/FullPageLoader.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { useVisibilityTransition } from "shared/hooks"
 import { animated } from "@react-spring/web"
-import GoldenCircleSpinner from "./Loaders/GoldenCircleSpinner"
-import LoadingText from "./Loaders/LoadingText"
+import GoldenCircleSpinner from "./GoldenCircleSpinner"
+import LoadingText from "./LoadingText"
 
 export default function FullPageLoader({ loaded }: { loaded: boolean }) {
   const transition = useVisibilityTransition(!loaded)

src/shared/components/PrivacyPolicy.tsx → src/shared/components/Misc/PrivacyPolicy.tsx

@@ -1,11 +1,11 @@
 import React from "react"
-import Popup from "shared/components/Popup"
+import Popup from "shared/components/Dialogs/Popup"
 import cookiesIcon from "shared/assets/icons/cookies.svg"
 import newTabIcon from "shared/assets/icons/s/new-tab.svg"
 import { LINKS, LOCAL_STORAGE_COOKIES } from "shared/constants"
 import { useLocalStorageChange } from "shared/hooks"
-import Icon from "./Icon"
-import Button from "./Button"
+import Icon from "../Media/Icon"
+import Button from "../Interface/Button"
 
 export default function PrivacyPolicy() {
   const { value, updateStorage } = useLocalStorageChange<boolean>(

src/shared/components/RealmCutout/RealmPin.tsx → src/shared/components/Realm/RealmPin.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import realmPin from "shared/assets/realm-pin.svg"
-import Avatar from "../Avatar"
+import Avatar from "../Media/Avatar"
 
 export default function RealmPin() {
   return (

src/shared/components/Transactions/TransactionProgress.tsx

@@ -4,9 +4,9 @@ import iconNotifWrong from "shared/assets/icons/m/notif-wrong.svg"
 import { TransactionProgressStatus } from "shared/types"
 import classNames from "classnames"
 import { isTransactionPending } from "shared/utils"
-import Button from "../Button"
+import Button from "../Interface/Button"
 import Ripple from "../Loaders/Ripple"
-import Icon from "../Icon"
+import Icon from "../Media/Icon"
 
 export type TransactionProgressProps = {
   title?: string

src/shared/components/Transactions/TransactionsModal.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 // import { isTransactionPending } from "shared/utils"
-import Modal from "../Modal"
+import Modal from "../Dialogs/Modal"
 import TransactionProgress, {
   TransactionProgressProps,
 } from "./TransactionProgress"

src/ui/Assistant/AssistantContent/AssistantChallenges.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import starIcon from "shared/assets/icons/star-2.svg"
 import { useAssistant } from "shared/hooks"
 import AssistantContent from "."

src/ui/Assistant/AssistantContent/AssistantWelcome.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import realmPointer from "shared/assets/realm-pointer.png"
 import { useAssistant } from "shared/hooks"
 import { selectNumberOfRealms, useDappSelector } from "redux-state"

src/ui/Assistant/AssistantContent/index.tsx

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from "react"
-import Popup from "shared/components/Popup"
+import Popup from "shared/components/Dialogs/Popup"
 
 type AssistantContentProps = {
   children: ReactNode

src/ui/Assistant/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import assistantImage from "shared/assets/assistant.png"
-import Portal from "shared/components/Portal"
+import Portal from "shared/components/Interface/Portal"
 import { useAssistant } from "shared/hooks"
 import AssistantWelcome from "./AssistantContent/AssistantWelcome"
 import AssistantChallenges from "./AssistantContent/AssistantChallenges"

src/ui/Claim/ClaimAlreadyClaimed.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
-import TahoAmount from "shared/components/TahoAmount"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
+import TahoAmount from "shared/components/Interface/TahoAmount"
 import { useDappSelector, selectEligibility } from "redux-state"
 import { ROUTES } from "shared/constants"
 import ClaimHeader from "./components/ClaimHeader"

src/ui/Claim/ClaimCheck.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react"
 import classNames from "classnames"
 import { Redirect } from "react-router-dom"
 import { useDebounce } from "shared/hooks/helpers"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
 import Spinner from "shared/components/Loaders/Spinner"
 import { isProbablyEVMAddress, resolveNameToAddress } from "shared/utils"
 import {

src/ui/Claim/ClaimCheckFail.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
 import {
   useDappDispatch,
   useDappSelector,

src/ui/Claim/ClaimCheckSuccess.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Modal from "shared/components/Modal"
-import TahoAmount from "shared/components/TahoAmount"
+import Modal from "shared/components/Dialogs/Modal"
+import TahoAmount from "shared/components/Interface/TahoAmount"
 import iconConnected from "shared/assets/icons/s/connected.svg"
-import Button from "shared/components/Button"
+import Button from "shared/components/Interface/Button"
 import { useConnect } from "shared/hooks"
 import {
   useDappSelector,

src/ui/Claim/ClaimFinish.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import TahoAmount from "shared/components/TahoAmount"
-import Button from "shared/components/Button"
-import Modal from "shared/components/Modal"
+import TahoAmount from "shared/components/Interface/TahoAmount"
+import Button from "shared/components/Interface/Button"
+import Modal from "shared/components/Dialogs/Modal"
 import { useDappSelector, selectEligibility } from "redux-state"
 import { ROUTES } from "shared/constants"
 import ClaimHeader from "./components/ClaimHeader"

src/ui/Claim/components/ClaimCheckRules.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classNames from "classnames"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import iconNotifCorrect from "shared/assets/icons/s/notif-correct.svg"
 import iconNorifWrong from "shared/assets/icons/s/notif-wrong.svg"
 import { separateThousandsByComma } from "shared/utils"

src/ui/Claim/modals/ClaimCongratulations.tsx

@@ -1,8 +1,8 @@
 import React from "react"
 import { selectRealmById, useDappSelector } from "redux-state"
-import Button from "shared/components/Button"
-import CongratulationsModal from "shared/components/Modals/CongratulationsModal"
-import RealmIcon from "shared/components/RealmIcon"
+import Button from "shared/components/Interface/Button"
+import CongratulationsModal from "ui/Island/Modals/CongratulationsModal"
+import RealmIcon from "ui/Island/Realms/RealmIcon"
 
 type ClaimCongratulationsProps = {
   displayAmount: string

src/ui/Claim/subpages/ClaimingDelegate.tsx

@@ -5,8 +5,8 @@
 import React, { useState } from "react"
 import { useHistory } from "react-router-dom"
 import classNames from "classnames"
-import Button from "shared/components/Button"
-import Icon from "shared/components/Icon"
+import Button from "shared/components/Interface/Button"
+import Icon from "shared/components/Media/Icon"
 import iconNotifCorrect from "shared/assets/icons/s/notif-correct.svg"
 import iconSearch from "shared/assets/icons/m/search.svg"
 import { ROUTES } from "shared/constants"

src/ui/Claim/subpages/ClaimingFlow.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Redirect, Route, Switch } from "react-router-dom"
-import Modal from "shared/components/Modal"
+import Modal from "shared/components/Dialogs/Modal"
 import { ROUTES } from "shared/constants"
 import ClaimingPledge from "./ClaimingPledge"
 import ClaimingSignTx from "./ClaimingSignTx"

src/ui/Claim/subpages/ClaimingPledge.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { useHistory } from "react-router-dom"
-import Button from "shared/components/Button"
-import Icon from "shared/components/Icon"
+import Button from "shared/components/Interface/Button"
+import Icon from "shared/components/Media/Icon"
 import earthIcon from "shared/assets/icons/earth.svg"
 import communityIcon from "shared/assets/icons/community.svg"
 import rulerIcon from "shared/assets/icons/ruler.svg"

src/ui/Claim/subpages/ClaimingSignTx.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import Icon from "shared/components/Icon"
-import Button from "shared/components/Button"
+import Icon from "shared/components/Media/Icon"
+import Button from "shared/components/Interface/Button"
 import lockIcon from "shared/assets/icons/s/lock.svg"
 import ClaimingTransactions from "./ClaimingTransactions"
 

src/ui/Claim/subpages/ClaimingStats.tsx

@@ -1,11 +1,11 @@
 import React from "react"
-import TahoAmount from "shared/components/TahoAmount"
-import Modal from "shared/components/Modal"
-import Icon from "shared/components/Icon"
+import TahoAmount from "shared/components/Interface/TahoAmount"
+import Modal from "shared/components/Dialogs/Modal"
+import Icon from "shared/components/Media/Icon"
 import infoIcon from "shared/assets/icons/m/info.svg"
-import Accordion from "shared/components/Accordion"
+import Accordion from "shared/components/Interface/Accordion"
 import { useDappSelector, selectEligibility } from "redux-state"
-import { RealmCutout } from "shared/components/RealmCutout"
+import { RealmCutout } from "shared/components/Realm"
 import ClaimCheckRules from "../components/ClaimCheckRules"
 
 const MOCK_REALM = {

src/ui/Claim/subpages/ClaimingSteps.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import classNames from "classnames"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import iconNotifCorrect from "shared/assets/icons/s/notif-correct.svg"
 import iconStatusCurrent from "shared/assets/icons/s/status-current.svg"
 import iconStatusUpcoming from "shared/assets/icons/s/status-upcoming.svg"

src/ui/Claim/subpages/index.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Modal from "shared/components/Modal"
+import Modal from "shared/components/Dialogs/Modal"
 import { selectIsJoinRealmIslandMode } from "redux-state/selectors/island"
 import { useDappSelector } from "redux-state"
 import ClaimingStats from "./ClaimingStats"

src/ui/Controls/ZoomControl.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 
 type ZoomControlProps = {
   icon: string

src/ui/Controls/index.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Portal from "shared/components/Portal"
+import Portal from "shared/components/Interface/Portal"
 import { Stage } from "konva/lib/Stage"
 import ZoomControls from "./ZoomControls"
 import IslandControl from "./IslandControl"

src/ui/DApps/DesktopDApp.tsx

@@ -16,7 +16,7 @@ import {
   useWalletOnboarding,
 } from "shared/hooks"
 import Onboarding from "ui/Onboarding"
-import PrivacyPolicy from "../../shared/components/PrivacyPolicy"
+import PrivacyPolicy from "../../shared/components/Misc/PrivacyPolicy"
 import IslandView from "./IslandView"
 
 function DesktopDAppContent() {

src/ui/DApps/IslandView.tsx

@@ -14,7 +14,7 @@ import {
   selectIslandMode,
   useDappSelector,
 } from "redux-state"
-import FullPageLoader from "shared/components/FullPageLoader"
+import FullPageLoader from "shared/components/Loaders/FullPageLoader"
 import { Route, Switch } from "react-router-dom"
 import { useDisplayedPopulation } from "shared/hooks"
 

src/ui/Footer/FooterLinks.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import IconLink from "shared/components/IconLink"
+import IconLink from "shared/components/Media/IconLink"
 import { LINKS } from "shared/constants"
 import discordIcon from "shared/assets/icons/discord.svg"
 import twitterIcon from "shared/assets/icons/twitter.svg"

src/ui/Footer/PopulationCount.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import { separateThousandsByComma } from "shared/utils"
 import populationIcon from "shared/assets/icons/people.svg"
 import { selectTotalPopulation, useDappSelector } from "redux-state"

src/ui/Footer/RealmBar/RealmBarIcon.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import Icon from "shared/components/Icon"
+import Icon from "shared/components/Media/Icon"
 import { getRealmMapData } from "shared/constants"
 import { animated, easings, useSpring } from "@react-spring/web"
 import RealmBarTooltip from "./RealmBarTooltip"

src/ui/Footer/RealmBar/index.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react"
 import populationIcon from "shared/assets/icons/people.svg"
-import Icon from "shared/components/Icon"
-import Tooltip from "shared/components/Tooltip"
+import Icon from "shared/components/Media/Icon"
+import Tooltip from "shared/components/Dialogs/Tooltip"
 import { separateThousandsByComma } from "shared/utils"
 import {
   selectSortedDisplayedPopulation,

src/ui/Footer/index.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 // import ClaimProgressBar from "./ClaimProgressBar" // not used at the moment
-import Version from "shared/components/Version"
+import Version from "shared/components/Misc/Version"
 import RealmsBar from "./RealmBar"
 import FooterLinks from "./FooterLinks"
 import FooterWrapper from "./FooterWrapper"

src/ui/Island/InteractiveIsland.tsx → src/ui/Island/Background/InteractiveIsland.tsx

@@ -26,11 +26,11 @@ import {
   limitToBounds,
 } from "shared/utils"
 import Assistant from "ui/Assistant"
-import Background from "./Background"
-import Realms from "./IslandRealms"
-import RealmPin from "./IslandRealmsDetails/RealmPin"
-import Clouds from "./Clouds"
-import AttackLine from "./IslandRealmsDetails/AttackLine"
+import IslandBackground from "./IslandBackground"
+import Realms from "../Realms/IslandRealms"
+import RealmPin from "../Details/RealmPin"
+import Clouds from "../Details/Clouds"
+import AttackLine from "../Details/AttackLine"
 
 function InteractiveIsland() {
   const selectedRealmId = useDappSelector(selectDisplayedRealmId)
@@ -206,7 +206,7 @@ function InteractiveIsland() {
         height={stageBounds.height}
       >
         <Layer>
-          <Background overlay={overlay} />
+          <IslandBackground overlay={overlay} />
           <Realms />
           <Clouds />
           <RealmPin />