update file structure (#233)

## Goal

The goal of this PR is to update the file structure to something more
readable

Closes #211 

## Discussion

- created atoms, features, and pages sub directories
- grouped features component into feature specific sub directories

- an **atom** is something like a button, card or modal - very general
- a **feature** is a component or group of components that make up an
app-specific feature. Rule of thumb to be included in a feature
directory is if you are a child component that is only used in that
specific feature. If a child component is used in more than one page or
feature and not an atom, they become their own feature.
- **pages** are used for components that define a whole page's content
but are used conditionally on the same path.

## Checklist

- [ ] PR Self-Review and Commenting
- [ ] Docs updated
- [ ] Tests added

## How To Test the Changes

1. Clone the pr branch
2. `npm run dev`
3. check that the app still runs as expected
4. navigate through the file structure

Author: claireclark1

src/components/BecomeAProvider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import CopyIcon from '../lib/assets/CopyIcon.svelte';
+  import CopyIcon from '$lib/assets/CopyIcon.svelte';
 
   let origFill = '#000';
 
@@ -37,5 +37,5 @@
 
 <div class="{classes} flex flex-col">
   <CopyIcon {fill} {handleClick} {handleMouseEnter} {handleMouseLeave} />
-  <span class="top-f24 absolute text-xs {!isClicked && 'hidden'}">Copied</span>
+  <span class="top-f24 absolute text-xs whitespace-nowrap {!isClicked && 'hidden'}">Copied</span>
 </div>

src/components/KeySelection.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import BackHomeButton from '$atoms/BackHomeButton.svelte';
+  import { NetworkType } from '$lib/stores/networksStore';
+  import { user } from '$lib/stores/userStore';
+  import CreateMsa from './CreateMsa.svelte';
+  import CreateProvider from './CreateProvider.svelte';
+  import RequestToBeProvider from './RequestToBeProvider.svelte';
+
+  interface Props {
+    hasRequestedToBeProvider: boolean;
+  }
+
+  let { hasRequestedToBeProvider = $bindable(), ...rest }: Props = $props();
+</script>
+
+{#if $user && $user?.address !== ''}
+  {#if $user?.msaId === 0}
+    <CreateMsa />
+  {:else if $user?.network?.id === NetworkType.MAINNET}
+    <RequestToBeProvider bind:hasRequestedToBeProvider />
+  {:else}
+    <CreateProvider />
+  {/if}
+{:else}
+  <BackHomeButton cancelText="Back" />
+{/if}

src/components/AddToClipboard.svelte renamed to src/components/atoms/AddToClipboard.svelte

@@ -9,9 +9,9 @@
   import { user } from '$lib/stores/userStore';
   import { getMsaInfo } from '$lib/polkadotApi';
   import LoadingIcon from '$lib/assets/LoadingIcon.svelte';
-  import ActivityLogPreviewItem from './ActivityLogPreviewItem.svelte';
   import { activityLog } from '$lib/stores/activityLogStore';
-  import BackToRootButton from '$components/BackHomeButton.svelte';
+  import BackToRootButton from '$atoms/BackHomeButton.svelte';
+  import ActivityLogPreviewItem from '$features/ActivityLogItem/ActivityLogItem.svelte';
 
   let recentActivityItem: Activity | undefined = $state();
   let recentTxnId: Activity['txnId'] | undefined = $state();

src/components/BackHomeButton.svelte renamed to src/components/atoms/BackHomeButton.svelte

@@ -9,8 +9,8 @@
   import { TxnStatus, type Activity, type MsaInfo } from '$lib/storeTypes';
   import LoadingIcon from '$lib/assets/LoadingIcon.svelte';
   import { activityLog } from '$lib/stores/activityLogStore';
-  import ActivityLogPreviewItem from './ActivityLogPreviewItem.svelte';
-  import BackHomeButton from '$components/BackHomeButton.svelte';
+  import ActivityLogPreviewItem from '../ActivityLogItem/ActivityLogItem.svelte';
+  import BackHomeButton from '$atoms/BackHomeButton.svelte';
   import { Button } from '@frequency-chain/style-guide';
   import { goto } from '$app/navigation';
   // TODO: uncomment on transition to svelte 5

src/components/BlockSection.svelte renamed to src/components/atoms/BlockSection.svelte

@@ -6,10 +6,10 @@
   import { createMailto, getExtension, providerNameToHuman } from '$lib/utils';
   import { user } from '$lib/stores/userStore';
   import { activityLog } from '$lib/stores/activityLogStore';
-  import ActivityLogPreviewItem from './ActivityLogPreviewItem.svelte';
-  import BackHomeButton from '$components/BackHomeButton.svelte';
+  import BackHomeButton from '$atoms/BackHomeButton.svelte';
   import LoadingIcon from '$lib/assets/LoadingIcon.svelte';
   import { getMsaInfo } from '$lib/polkadotApi';
+  import ActivityLogPreviewItem from '$features/ActivityLogItem/ActivityLogItem.svelte';
 
   let { hasRequestedToBeProvider = $bindable(), ...props } = $props();
 

src/components/Button.svelte renamed to src/components/atoms/Button.svelte

@@ -4,7 +4,7 @@
   import { activityLog } from '$lib/stores/activityLogStore';
   import { defaultCapacityDetails, getCapacityInfo, type CapacityDetails } from '$lib/polkadotApi';
   import { balanceToHuman } from '$lib/utils.js';
-  import ListCard from './ListCard.svelte';
+  import ListCard from '../../atoms/ListCard.svelte';
   import Stake from './Stake.svelte';
   import { Button } from '@frequency-chain/style-guide';
 

src/components/DropDownMenu.svelte renamed to src/components/atoms/DropDownMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Modal from './Modal.svelte';
+  import Modal from '../../atoms/Modal.svelte';
   import StakeForm from './StakeForm.svelte';
   import { storeChainInfo } from '$lib/stores';
 

src/components/FAQItem.svelte renamed to src/components/atoms/FAQItem.svelte

@@ -5,7 +5,7 @@
   import type { ApiPromise } from '@polkadot/api';
   import { DOLLARS, submitStake } from '$lib/connections';
   import { formatAccount, getExtension } from '$lib/utils';
-  import DropDownMenu from './DropDownMenu.svelte';
+  import DropDownMenu from '../../atoms/DropDownMenu.svelte';
   import { type Account, allAccountsStore } from '$lib/stores/accountsStore';
   import { Button } from '@frequency-chain/style-guide';
 

src/components/ListCard.svelte renamed to src/components/atoms/ListCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Modal from '../components/Modal.svelte';
-  import LoginForm from './LoginForm.svelte';
+  import Modal from '../../atoms/Modal.svelte';
+  import LoginForm from '../LoginForm/LoginForm.svelte';
   interface Props {
     close?: () => void;
     isOpen?: boolean;

src/components/Modal.svelte renamed to src/components/atoms/Modal.svelte

@@ -3,7 +3,7 @@
   import { clearLog } from '$lib/stores/activityLogStore';
   import { user } from '$lib/stores/userStore';
   import { Button } from '@frequency-chain/style-guide';
-  import SelectNetworkAndAccount from './SelectNetworkAndAccount.svelte';
+  import SelectNetworkAndAccount from '../SelectNetworkAndAccount/SelectNetworkAndAccount.svelte';
 
   // Props
   interface Props {

src/components/ActivityLogPreviewItem.svelte renamed to src/components/features/ActivityLogItem/ActivityLogItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { logout } from '$lib/stores';
   import { isLoggedIn } from '$lib/stores';
-  import NavItem from '$components/NavItem.svelte';
+  import NavItem from './NavItem.svelte';
 
   let url = $state();
 

src/components/features/BecomeProviderNextSteps/BecomeProviderNextSteps.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ActivityLogPreviewItem from './ActivityLogPreviewItem.svelte';
+  import ActivityLogPreviewItem from '../ActivityLogItem/ActivityLogItem.svelte';
   import { activityLog } from '$lib/stores/activityLogStore';
   import type { Activity } from '$lib/storeTypes';
 

src/components/CreateMsa.svelte renamed to src/components/features/BecomeProviderNextSteps/CreateMsa.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { user } from '$lib/stores/userStore';
-  import AddToClipboard from './AddToClipboard.svelte';
+  import AddToClipboard from '../../atoms/AddToClipboard.svelte';
 </script>
 
 <div class="flex flex-col items-center gap-2 md:min-w-[300px] md:flex-row md:gap-4">

src/components/CreateProvider.svelte renamed to src/components/features/BecomeProviderNextSteps/CreateProvider.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Profile from '$components/Profile.svelte';
-  import ActivityLogPreview from '$components/ActivityLogPreview.svelte';
+  import Profile from '$features/ProfileOverview/Profile.svelte';
+  import ActivityLogPreview from '$features/ProfileOverview/ActivityLogPreview.svelte';
 </script>
 
 <div class="content-block flex flex-col justify-between gap-2 break-all md:gap-16 lg:flex-row">

src/components/RequestToBeProvider.svelte renamed to src/components/features/BecomeProviderNextSteps/RequestToBeProvider.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-  import AddKeyRequirements from './AddKeyRequirements.svelte';
-  import Modal from './Modal.svelte';
+  import Modal from '../../atoms/Modal.svelte';
   import { user } from '$lib/stores/userStore';
   import { type Account } from '$lib/stores/accountsStore';
-  import AddAccountIdForm from '$components/AddAccountIdForm.svelte';
+  import AddAccountIdForm from './AddAccountIdForm.svelte';
+  import AddAccountIdRequirements from './AddAccountIdRequirements.svelte';
 
   interface Props {
     isOpen: boolean;
@@ -33,7 +33,7 @@
 
       <span class="border-b-divider min-w-full border-b"></span>
 
-      <AddKeyRequirements />
+      <AddAccountIdRequirements />
     </div>
   {/snippet}
 </Modal>

src/components/Capacity.svelte renamed to src/components/features/Capacity/Capacity.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Account, unusedKeyAccountsStore } from '$lib/stores/accountsStore.js';
   import { formatAccount, getExtension } from '$lib/utils.js';
-  import DropDownMenu from '$components/DropDownMenu.svelte';
+  import DropDownMenu from '$atoms/DropDownMenu.svelte';
   import { Button } from '@frequency-chain/style-guide';
   import { user } from '$lib/stores/userStore.js';
   import { submitAddAccountId } from '$lib/connections.js';

src/components/Stake.svelte renamed to src/components/features/Capacity/Stake.svelte

@@ -7,7 +7,7 @@
   import { balanceToHuman } from '$lib/utils';
   import { getBalances } from '$lib/polkadotApi';
   import type { AccountBalances } from '$lib/polkadotApi';
-  import ListCard from './ListCard.svelte';
+  import ListCard from '../../atoms/ListCard.svelte';
   import AddAccountId from './AddAccountId.svelte';
   import { Button } from '@frequency-chain/style-guide';
 

src/components/StakeForm.svelte renamed to src/components/features/Capacity/StakeForm.svelte

@@ -6,7 +6,7 @@
   import { Account, fetchAccountsForNetwork, type Accounts } from '$lib/stores/accountsStore';
   import type { ApiPromise } from '@polkadot/api';
   import type { web3Enable, web3Accounts } from '@polkadot/extension-dapp';
-  import DropDownMenu from '$components/DropDownMenu.svelte';
+  import DropDownMenu from '$atoms/DropDownMenu.svelte';
   import { formatNetwork, formatAccount, isValidURL } from '$lib/utils';
   import { createApi } from '$lib/polkadotApi';
 

src/components/ChainStatus.svelte renamed to src/components/features/ChainStatus/ChainStatus.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  import Capacity from '$components/Capacity.svelte';
-  import Provider from '$components/Provider.svelte';
-  import DashboardHeader from '$components/DashboardHeader.svelte';
-  import ChainStatus from '$components/ChainStatus.svelte';
+  import Capacity from '$features/Capacity/Capacity.svelte';
+  import Provider from '$features/Provider/Provider.svelte';
+  import ProfileOverview from '$features/ProfileOverview/ProfileOverview.svelte';
   import { fetchAccountsForNetwork } from '$lib/stores/accountsStore';
   import { user } from '$lib/stores/userStore';
   import type { ApiPromise } from '@polkadot/api';
   import { dotApi } from '$lib/stores';
   import { onMount } from 'svelte';
   import type { web3Enable, web3Accounts } from '@polkadot/extension-dapp';
+  import ChainStatus from '$features/ChainStatus/ChainStatus.svelte';
 
   let thisWeb3Accounts: typeof web3Accounts | undefined = $state();
   let thisWeb3Enable: typeof web3Enable | undefined = $state();
@@ -31,7 +31,7 @@
 </script>
 
 <div class="max-w-dashboard column w-full" id="dashboard">
-  <DashboardHeader />
+  <ProfileOverview />
 
   <ChainStatus />
 

src/components/ConnectProvider.svelte renamed to src/components/features/Header/ConnectProvider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import BlockSection from '$components/BlockSection.svelte';
-  import LoginForm from './LoginForm.svelte';
-  import HowToTransact from '$components/HowToTransact.svelte';
+  import BlockSection from '$atoms/BlockSection.svelte';
+  import LoginForm from '$features/LoginForm/LoginForm.svelte';
+  import HowToTransact from '$features/HowToTransact/HowToTransact.svelte';
   import { Button } from '@frequency-chain/style-guide';
   import { goto } from '$app/navigation';
 </script>

src/components/ConnectionStatus.svelte renamed to src/components/features/Header/ConnectionStatus.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Header from '../components/Header.svelte';
-  import Nav from '../components/Nav.svelte';
+  import Header from '$features/Header/Header.svelte';
+  import Nav from '$features/Nav/Nav.svelte';
   import { logInPromise, dotApi, storeChainInfo } from '$lib/stores';
   import { getToken } from '$lib/polkadotApi';
   import { getBlockNumber, getEpoch } from '$lib/connections';

src/components/Header.svelte renamed to src/components/features/Header/Header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Dashboard from '$components/Dashboard.svelte';
-  import ProviderLogin from '$components/ProviderLogin.svelte';
+  import Dashboard from '$pages/Dashboard.svelte';
+  import ProviderLogin from '$pages/ProviderLogin.svelte';
   import { pageContent, PageContent } from '$lib/stores/pageContentStore';
 </script>
 

src/components/HowToTransact.svelte renamed to src/components/features/HowToTransact/HowToTransact.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import ActivityLogPreviewItem from '../../components/ActivityLogPreviewItem.svelte';
   import { activityLog } from '$lib/stores/activityLogStore';
-  import BlockSection from '$components/BlockSection.svelte';
+  import BlockSection from '$atoms/BlockSection.svelte';
   import type { Activity } from '$lib/storeTypes';
+  import ActivityLogPreviewItem from '$features/ActivityLogItem/ActivityLogItem.svelte';
 
   let activityItems: Activity[] = $derived($activityLog);
 </script>

src/components/LoginForm.svelte renamed to src/components/features/LoginForm/LoginForm.svelte

@@ -1,5 +1,33 @@
 <script lang="ts">
-  import BecomeAProvider from '$components/BecomeAProvider.svelte';
+  import { user } from '$lib/stores/userStore';
+  import { nonProviderAccountsStore } from '$lib/stores/accountsStore';
+  import BlockSection from '$atoms/BlockSection.svelte';
+  import SelectNetworkAndAccount from '$features/SelectNetworkAndAccount/SelectNetworkAndAccount.svelte';
+  import BecomeProviderNextSteps from '$features/BecomeProviderNextSteps/BecomeProviderNextSteps.svelte';
+
+  let hasRequestedToBeProvider = $state(false);
 </script>
 
-<BecomeAProvider />
+<BlockSection id="become-a-provider" title="Become a Provider">
+  <form class="column gap-f16">
+    {#if hasRequestedToBeProvider === false}
+      <SelectNetworkAndAccount
+        bind:newUser={$user}
+        accounts={$nonProviderAccountsStore}
+        accountSelectorTitle="Select an Account Id"
+        accountSelectorPlaceholder="Select an Account Id"
+        noAccountsFoundErrorMsg="No accounts found.  Add an Account Id to your wallet."
+      />
+    {/if}
+    <BecomeProviderNextSteps bind:hasRequestedToBeProvider />
+  </form>
+</BlockSection>
+
+<BlockSection title="More Info">
+  <div class="text-sm">
+    For developer and testing convenience, on Testnet, anyone with an MSA who wishes to become a Provider may simply
+    submit a createProvider transaction.<br /><br />This action will register the MSA Id that is controlled by the
+    selected Transaction Signing Address above. Any Account Id that has been added to the MSA can submit the
+    transaction.
+  </div>
+</BlockSection>

src/components/Nav.svelte renamed to src/components/features/Nav/Nav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import FAQItem from '$components/FAQItem.svelte';
-  import HowToTransact from '$components/HowToTransact.svelte';
+  import FAQItem from '$atoms/FAQItem.svelte';
+  import HowToTransact from '$features/HowToTransact/HowToTransact.svelte';
 </script>
 
 {#snippet question1()}