refactor: switch to non-relative import paths

.vscode/settings.json

@@ -15,4 +15,5 @@
             "source.organizeImports": true
         },        
     },
+    "typescript.preferences.importModuleSpecifier": "non-relative"
 }

src/App.tsx

@@ -8,19 +8,19 @@ import {
   Hide,
   Show,
 } from "@chakra-ui/react";
+import { Transaction } from "components/client/Transaction";
+import { Web3Provider } from "components/common/Web3Provider";
+import { Footer } from "components/Footer";
+import { Header } from "components/header/Header";
+import { ImportModal } from "components/ImportModal";
+import { InfoModal } from "components/info/InfoModal";
+import { Options } from "components/options/Options";
+import { Palette } from "components/palette/Palette";
+import { ShareModal } from "components/ShareModal";
+import { useSessionStoreWithoutUndo } from "hooks/useSessionStore";
 import React from "react";
-import { Transaction } from "./components/client/Transaction";
-import { Web3Provider } from "./components/common/Web3Provider";
-import { Footer } from "./components/Footer";
-import { Header } from "./components/header/Header";
-import { ImportModal } from "./components/ImportModal";
-import { InfoModal } from "./components/info/InfoModal";
-import { Options } from "./components/options/Options";
-import { Palette } from "./components/palette/Palette";
-import { ShareModal } from "./components/ShareModal";
-import { useSessionStoreWithoutUndo } from "./hooks/useSessionStore";
 
-import theme from "./theme";
+import theme from "theme";
 
 import "@solana/wallet-adapter-react-ui/styles.css";
 

src/coders/borsh.ts

@@ -1,7 +1,7 @@
 import * as Borsh from "@project-serum/borsh";
 import { PublicKey } from "@solana/web3.js";
-import { Coder } from ".";
-import { IInstrctionDataField } from "../types/internal";
+import { Coder } from "coders";
+import { IInstrctionDataField } from "types/internal";
 
 export class BorshCoder implements Coder {
   encode(fields: IInstrctionDataField[]): Buffer {

src/coders/buffer-layout.ts

@@ -1,7 +1,7 @@
 import * as BufferLayout from "@solana/buffer-layout";
 import { PublicKey } from "@solana/web3.js";
-import { Coder, rustString } from ".";
-import { IInstrctionDataField } from "../types/internal";
+import { Coder, rustString } from "coders";
+import { IInstrctionDataField } from "types/internal";
 
 export class BufferLayoutCoder implements Coder {
   encode(fields: IInstrctionDataField[]): Buffer {

src/coders/index.ts

@@ -1,5 +1,5 @@
 import * as BufferLayout from "@solana/buffer-layout";
-import { IInstrctionDataField } from "../types/internal";
+import { IInstrctionDataField } from "types/internal";
 
 export interface Coder {
   encode(fields: IInstrctionDataField[]): Buffer;

src/components/ImportModal.tsx

@@ -9,7 +9,7 @@ import {
   Text,
   VStack,
 } from "@chakra-ui/react";
-import { useImportFromUrl } from "../hooks/useImportFromUrl";
+import { useImportFromUrl } from "hooks/useImportFromUrl";
 
 export const ImportModal: React.FC = () => {
   const { isLoading, status, cancel } = useImportFromUrl();

src/components/ShareModal.tsx

@@ -27,15 +27,15 @@ import {
   Tooltip,
   useClipboard,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { FaGithub } from "react-icons/fa";
+import { CopyButton } from "components/common/CopyButton";
 import {
   useShallowSessionStoreWithoutUndo,
   useShallowSessionStoreWithUndo,
-} from "../hooks/useSessionStore";
-import { mapITransactionExtToProtobuf } from "../mappers/external-to-protobuf";
-import { mapITransactionToTransactionExt } from "../mappers/internal-to-external";
-import { CopyButton } from "./common/CopyButton";
+} from "hooks/useSessionStore";
+import { mapITransactionExtToProtobuf } from "mappers/external-to-protobuf";
+import { mapITransactionToTransactionExt } from "mappers/internal-to-external";
+import { useEffect, useState } from "react";
+import { FaGithub } from "react-icons/fa";
 
 export const ShareModal: React.FC = () => {
   const [isOpen, set] = useShallowSessionStoreWithoutUndo((state) => [

src/components/client/Instruction.tsx

@@ -15,17 +15,17 @@ import {
   Tooltip,
   useColorModeValue,
 } from "@chakra-ui/react";
+import { Accounts } from "components/client/accounts/Accounts";
+import { Data } from "components/client/data/Data";
+import { InstructionHeader } from "components/client/InstructionHeader";
+import { AccountAutoComplete } from "components/common/AccountAutoComplete";
+import { Description } from "components/common/Description";
+import { ExplorerButton } from "components/common/ExplorerButton";
+import { useInstruction } from "hooks/useInstruction";
+import { useSessionStoreWithUndo } from "hooks/useSessionStore";
+import { useWeb3Account } from "hooks/useWeb3Account";
 import React from "react";
 import { FaAnchor, FaRocket } from "react-icons/fa";
-import { useInstruction } from "../../hooks/useInstruction";
-import { useSessionStoreWithUndo } from "../../hooks/useSessionStore";
-import { useWeb3Account } from "../../hooks/useWeb3Account";
-import { AccountAutoComplete } from "../common/AccountAutoComplete";
-import { Description } from "../common/Description";
-import { ExplorerButton } from "../common/ExplorerButton";
-import { Accounts } from "./accounts/Accounts";
-import { Data } from "./data/Data";
-import { InstructionHeader } from "./InstructionHeader";
 
 export const Instruction: React.FC<{ index: number }> = ({ index }) => {
   const rpcEndpoint = useSessionStoreWithUndo((state) => state.rpcEndpoint);

src/components/client/InstructionHeader.tsx

@@ -15,6 +15,11 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { arrayMove } from "@dnd-kit/sortable";
+import { DragHandle } from "components/common/DragHandle";
+import { EditableName } from "components/common/EditableName";
+import { Numbering } from "components/common/Numbering";
+import { useInstruction } from "hooks/useInstruction";
+import { useShallowSessionStoreWithUndo } from "hooks/useSessionStore";
 import React from "react";
 import {
   FaAngleDoubleDown,
@@ -24,12 +29,7 @@ import {
   FaEye,
   FaEyeSlash,
 } from "react-icons/fa";
-import { useInstruction } from "../../hooks/useInstruction";
-import { useShallowSessionStoreWithUndo } from "../../hooks/useSessionStore";
-import { removeFrom } from "../../utils/sortable";
-import { DragHandle } from "../common/DragHandle";
-import { EditableName } from "../common/EditableName";
-import { Numbering } from "../common/Numbering";
+import { removeFrom } from "utils/sortable";
 
 export const InstructionHeader: React.FC<{ index: number }> = ({ index }) => {
   const { id, useShallowGet, update, reset } = useInstruction();

src/components/client/Instructions.tsx

@@ -7,13 +7,13 @@ import {
   Tooltip,
   useColorModeValue,
 } from "@chakra-ui/react";
+import { Instruction } from "components/client/Instruction";
+import { Sortable } from "components/common/Sortable";
+import { useShallowSessionStoreWithUndo } from "hooks/useSessionStore";
 import React from "react";
-import { useShallowSessionStoreWithUndo } from "../../hooks/useSessionStore";
-import { IID } from "../../types/sortable";
-import { newInstruction } from "../../utils/internal";
-import { addTo } from "../../utils/sortable";
-import { Sortable } from "../common/Sortable";
-import { Instruction } from "./Instruction";
+import { IID } from "types/sortable";
+import { newInstruction } from "utils/internal";
+import { addTo } from "utils/sortable";
 
 export const InstructionContext = React.createContext("");
 

src/components/client/Transaction.tsx

@@ -1,8 +1,8 @@
 import { Box, Divider, Grid } from "@chakra-ui/react";
+import { Instructions } from "components/client/Instructions";
+import { Results } from "components/client/results/Results";
+import { TransactionHeader } from "components/client/TransactionHeader";
 import React, { useRef } from "react";
-import { Instructions } from "./Instructions";
-import { Results } from "./results/Results";
-import { TransactionHeader } from "./TransactionHeader";
 
 export const Transaction: React.FC = () => {
   // used for scrolling to results

src/components/client/TransactionHeader.tsx

@@ -16,6 +16,16 @@ import {
   Tooltip,
 } from "@chakra-ui/react";
 import { useWallet } from "@solana/wallet-adapter-react";
+import { Description } from "components/common/Description";
+import { EditableName } from "components/common/EditableName";
+import { RpcEndpointMenu } from "components/common/RpcEndpointMenu";
+import { ToggleIconButton } from "components/common/ToggleIconButton";
+import { useConfigStore, useShallowConfigStore } from "hooks/useConfigStore";
+import { useSendWeb3Transaction } from "hooks/useSendWeb3Transaction";
+import {
+  useShallowSessionStoreWithoutUndo,
+  useShallowSessionStoreWithUndo,
+} from "hooks/useSessionStore";
 import React, { useEffect } from "react";
 import {
   FaCompress,
@@ -27,20 +37,7 @@ import {
   FaPlay,
   FaShareAlt,
 } from "react-icons/fa";
-import {
-  useConfigStore,
-  useShallowConfigStore,
-} from "../../hooks/useConfigStore";
-import { useSendWeb3Transaction } from "../../hooks/useSendWeb3Transaction";
-import {
-  useShallowSessionStoreWithoutUndo,
-  useShallowSessionStoreWithUndo,
-} from "../../hooks/useSessionStore";
-import { DEFAULT_TRANSACTION_RUN, EMPTY_TRANSACTION } from "../../utils/state";
-import { Description } from "../common/Description";
-import { EditableName } from "../common/EditableName";
-import { RpcEndpointMenu } from "../common/RpcEndpointMenu";
-import { ToggleIconButton } from "../common/ToggleIconButton";
+import { DEFAULT_TRANSACTION_RUN, EMPTY_TRANSACTION } from "utils/state";
 
 export const TransactionHeader: React.FC<{
   resultsRef: React.RefObject<HTMLDivElement>;

src/components/client/accounts/Account.tsx

@@ -9,20 +9,20 @@ import {
   useBreakpointValue,
   Wrap,
 } from "@chakra-ui/react";
+import { AccountInput } from "components/client/accounts/AccountInput";
+import { PdaTypeConfig } from "components/client/accounts/type-configs/PdaTypeConfig";
+import { Description } from "components/common/Description";
+import { DragHandle } from "components/common/DragHandle";
+import { EditableName } from "components/common/EditableName";
+import { Numbering } from "components/common/Numbering";
+import { ToggleIconButton } from "components/common/ToggleIconButton";
+import { useAccount } from "hooks/useAccount";
+import { useAccountType } from "hooks/useAccountType";
+import { useInstruction } from "hooks/useInstruction";
+import { useShallowSessionStoreWithUndo } from "hooks/useSessionStore";
 import React from "react";
 import { FaFeather, FaICursor } from "react-icons/fa";
-import { useAccount } from "../../../hooks/useAccount";
-import { useAccountType } from "../../../hooks/useAccountType";
-import { useInstruction } from "../../../hooks/useInstruction";
-import { useShallowSessionStoreWithUndo } from "../../../hooks/useSessionStore";
-import { removeFrom } from "../../../utils/sortable";
-import { Description } from "../../common/Description";
-import { DragHandle } from "../../common/DragHandle";
-import { EditableName } from "../../common/EditableName";
-import { Numbering } from "../../common/Numbering";
-import { ToggleIconButton } from "../../common/ToggleIconButton";
-import { AccountInput } from "./AccountInput";
-import { PdaTypeConfig } from "./type-configs/PdaTypeConfig";
+import { removeFrom } from "utils/sortable";
 
 export const Account: React.FC<{
   index: number;

src/components/client/accounts/AccountInput.tsx

@@ -6,16 +6,16 @@ import {
   InputRightElement,
   Tooltip,
 } from "@chakra-ui/react";
+import { AccountTypeButton } from "components/client/accounts/AccountTypeButton";
+import { AirdropButton } from "components/client/accounts/AirdropButton";
+import { AccountAutoComplete } from "components/common/AccountAutoComplete";
+import { ExplorerButton } from "components/common/ExplorerButton";
+import { useAccount } from "hooks/useAccount";
+import { useAccountType } from "hooks/useAccountType";
+import { useSessionStoreWithUndo } from "hooks/useSessionStore";
 import React from "react";
 import { FaMagic } from "react-icons/fa";
-import { useAccount } from "../../../hooks/useAccount";
-import { useAccountType } from "../../../hooks/useAccountType";
-import { useSessionStoreWithUndo } from "../../../hooks/useSessionStore";
-import { isValidPublicKey } from "../../../utils/web3js";
-import { AccountAutoComplete } from "../../common/AccountAutoComplete";
-import { ExplorerButton } from "../../common/ExplorerButton";
-import { AccountTypeButton } from "./AccountTypeButton";
-import { AirdropButton } from "./AirdropButton";
+import { isValidPublicKey } from "utils/web3js";
 
 export const AccountInput: React.FC = () => {
   const { useGet, update } = useAccount();

src/components/client/accounts/AccountTypeButton.tsx

@@ -9,6 +9,8 @@ import {
   Portal,
   Tooltip,
 } from "@chakra-ui/react";
+import { useAccount } from "hooks/useAccount";
+import { useAccountType } from "hooks/useAccountType";
 import {
   FaCog,
   FaCoins,
@@ -18,9 +20,7 @@ import {
   FaRobot,
   FaWallet,
 } from "react-icons/fa";
-import { useAccount } from "../../../hooks/useAccount";
-import { useAccountType } from "../../../hooks/useAccountType";
-import { AccountType } from "../../../types/internal";
+import { AccountType } from "types/internal";
 
 const TYPES: AccountType[] = [
   "wallet",

src/components/client/accounts/Accounts.tsx

@@ -11,13 +11,13 @@ import {
   Tooltip,
   useColorModeValue,
 } from "@chakra-ui/react";
+import { Account } from "components/client/accounts/Account";
+import { Sortable } from "components/common/Sortable";
+import { useInstruction } from "hooks/useInstruction";
 import React from "react";
-import { useInstruction } from "../../../hooks/useInstruction";
-import { IID } from "../../../types/sortable";
-import { newAccount } from "../../../utils/internal";
-import { addTo } from "../../../utils/sortable";
-import { Sortable } from "../../common/Sortable";
-import { Account } from "./Account";
+import { IID } from "types/sortable";
+import { newAccount } from "utils/internal";
+import { addTo } from "utils/sortable";
 
 export const AccountContext = React.createContext<{
   id: IID | number;

src/components/client/accounts/AirdropButton.tsx

@@ -30,14 +30,14 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
+import { ExplorerButton } from "components/common/ExplorerButton";
+import { useGetWeb3Transaction } from "hooks/useGetWeb3Transaction";
+import { useSessionStoreWithUndo } from "hooks/useSessionStore";
+import { useWeb3Connection } from "hooks/useWeb3Connection";
 import React, { useRef, useState } from "react";
 import { FaParachuteBox } from "react-icons/fa";
-import { useGetWeb3Transaction } from "../../../hooks/useGetWeb3Transaction";
-import { useSessionStoreWithUndo } from "../../../hooks/useSessionStore";
-import { useWeb3Connection } from "../../../hooks/useWeb3Connection";
-import { IPubKey } from "../../../types/internal";
-import { short, toLamports } from "../../../utils/web3js";
-import { ExplorerButton } from "../../common/ExplorerButton";
+import { IPubKey } from "types/internal";
+import { short, toLamports } from "utils/web3js";
 
 export const AirdropButton: React.FC<{ accountPubkey: IPubKey }> = ({
   accountPubkey,

src/components/client/accounts/type-configs/PdaTypeConfig.tsx

@@ -20,9 +20,9 @@ import {
   Text,
   Wrap,
 } from "@chakra-ui/react";
+import { useAccount } from "hooks/useAccount";
+import { useAccountType } from "hooks/useAccountType";
 import React, { useRef, useState } from "react";
-import { useAccount } from "../../../../hooks/useAccount";
-import { useAccountType } from "../../../../hooks/useAccountType";
 
 // TODO not sophisticated enough, we need to handle many types of numbers, basically Buffer.write*()
 

src/components/client/data/Data.tsx

@@ -11,10 +11,10 @@ import {
   Tabs,
   useColorModeValue,
 } from "@chakra-ui/react";
+import { DataEditor } from "components/client/data/editor/DataEditor";
+import { RawData } from "components/client/data/RawData";
+import { useInstruction } from "hooks/useInstruction";
 import React from "react";
-import { useInstruction } from "../../../hooks/useInstruction";
-import { DataEditor } from "./editor/DataEditor";
-import { RawData } from "./RawData";
 
 export const Data: React.FC = () => {
   const { isAnchor, useGet, update } = useInstruction();

src/components/client/data/RawData.tsx

@@ -9,9 +9,9 @@ import {
   useToast,
 } from "@chakra-ui/react";
 import bs58 from "bs58";
+import { Description } from "components/common/Description";
+import { useInstruction } from "hooks/useInstruction";
 import React from "react";
-import { useInstruction } from "../../../hooks/useInstruction";
-import { Description } from "../../common/Description";
 
 export const RawData: React.FC = () => {
   const { useShallowGet, update } = useInstruction();

src/components/client/data/editor/DataEditor.tsx

@@ -7,15 +7,15 @@ import {
   Tooltip,
   useColorModeValue,
 } from "@chakra-ui/react";
+import { DataField } from "components/client/data/editor/DataField";
+import { Sortable } from "components/common/Sortable";
+import { useInstruction } from "hooks/useInstruction";
 import { WritableDraft } from "immer/dist/internal";
 import React from "react";
-import { useInstruction } from "../../../../hooks/useInstruction";
-import { DataFormat, IInstrctionDataField } from "../../../../types/internal";
-import { IID, SortableCollection } from "../../../../types/sortable";
-import { newDataField } from "../../../../utils/internal";
-import { addTo } from "../../../../utils/sortable";
-import { Sortable } from "../../../common/Sortable";
-import { DataField } from "./DataField";
+import { DataFormat, IInstrctionDataField } from "types/internal";
+import { IID, SortableCollection } from "types/sortable";
+import { newDataField } from "utils/internal";
+import { addTo } from "utils/sortable";
 
 export const InstructionDataFieldContext = React.createContext<IID>("");