Merge pull request #103 from Oshioke-Salaki/components-refac

refac: ui components

.github/workflows/test_contract.yml

@@ -11,6 +11,6 @@ jobs:
       - uses: software-mansion/setup-scarb@v1
       - uses: foundry-rs/setup-snfoundry@v3
         with:
-          starknet-foundry-version: 0.20.1
+          starknet-foundry-version: 0.25.0
       - name: Run cairo tests
-        run: cd contracts && snforge test
+        run: cd contracts && snforge test

contracts/Scarb.lock

@@ -11,10 +11,10 @@ dependencies = [
 
 [[package]]
 name = "openzeppelin"
-version = "0.11.0"
-source = "git+https://github.com/OpenZeppelin/cairo-contracts.git?tag=v0.11.0#a83f36b23f1af6e160288962be4a2701c3ecbcda"
+version = "0.14.0"
+source = "git+https://github.com/OpenZeppelin/cairo-contracts.git?tag=v0.14.0#f091c4f51ddeb10297db984acae965328c5a4e5b"
 
 [[package]]
 name = "snforge_std"
-version = "0.20.1"
-source = "git+https://github.com/foundry-rs/starknet-foundry?tag=v0.20.1#fea2db8f2b20148cc15ee34b08de12028eb42942"
+version = "0.25.0"
+source = "git+https://github.com/foundry-rs/starknet-foundry?tag=v0.25.0#5b366e24821e530fea97f11b211d220e8493fbea"

contracts/Scarb.toml

@@ -3,15 +3,15 @@ name = "contracts"
 version = "0.1.0"
 
 [dependencies]
-starknet = "2.6.3"
+starknet = "2.6.4"
 
 [dependencies.openzeppelin]
 git = "https://github.com/OpenZeppelin/cairo-contracts.git"
-tag = "v0.11.0"
+tag = "v0.14.0"
 
 [dependencies.snforge_std]
 git = "https://github.com/foundry-rs/starknet-foundry"
-tag = "v0.20.1"
+tag = "v0.25.0"
 
 [[target.starknet-contract]]
 casm = true

contracts/tests/test_contract.cairo

@@ -1,10 +1,11 @@
+use core::starknet::SyscallResultTrait;
 use snforge_std::{declare, ContractClassTrait};
 use contracts::{IHelloStarknetDispatcher, IHelloStarknetDispatcherTrait};
 
 #[test]
 fn test_balance() {
-    let contract = declare("HelloStarknet");
-    let contract_address = contract.deploy(@ArrayTrait::new()).unwrap();
+    let contract = declare("HelloStarknet").unwrap();
+    let (contract_address, _) = contract.deploy(@ArrayTrait::new()).unwrap_syscall();
 
     let dispatcher = IHelloStarknetDispatcher { contract_address };
 

docs/src/chapter_3/subchapter_1.md

@@ -22,7 +22,7 @@ The right side of the modal serves to educate the user on how wallet connections
 ## Import
 
 ```
-import ConnectModal from "~/components/ConnectModal";
+import ConnectModal from "~/ui_components/ConnectModal";
 ```
 
 ## Usage

docs/src/chapter_3/subchapter_2.md

@@ -5,7 +5,7 @@ The Address bar displays the address of the connected account. If the connected
 ## Import
 
 ```
-import AddressBar from "~/components/AddressBar";
+import AddressBar from "~/ui_components/AddressBar";
 ```
 
 ## Usage

docs/src/chapter_3/subchapter_3.md

@@ -13,7 +13,7 @@ Each transaction item shows the following:
 ## Import
 
 ```
-import TransactionModal from "~/components/TransactionModal";
+import TransactionModal from "~/TranscationList/TransactionModal";
 ```
 
 ## Usage

docs/src/chapter_3/subchapter_4.md

@@ -5,7 +5,7 @@ This modal contains a copy button for copying the address of the connected walle
 ## Import
 
 ```
-import UserModal from "~/components/UserModal";
+import {UserModal} from "~/ui_components/AddressBar";
 ```
 
 ## Usage

docs/src/chapter_3/subchapter_5.md

@@ -5,7 +5,7 @@ This component shows the STRK and ETH balance of the connected wallet address.
 ## Import
 
 ```
-import AccountBalance from "~/components/AccountBalance";
+import AccountBalance from "~/ui_components/AccountBalance";
 ```
 
 ## Usage

docs/src/chapter_3/subchapter_6.md

@@ -5,7 +5,7 @@ This is a dropdown component used to switch between Starknet networks (mainnet/s
 ## Import
 
 ```
-import NetworkSwitcher from "~/components/NetworkSwitcher";
+import NetworkSwitcher from "~/ui_components/NetworkSwitcher";
 ```
 
 ## Usage

docs/src/chapter_3/subchapter_7.md

@@ -5,7 +5,7 @@ The theme toggler is used to switch between light and dark modes.
 ## Import
 
 ```
-import ThemeSwitch from "./Theme";
+import ThemeSwitch from "~/ui_components/Theme";
 ```
 
 ## Usage
@@ -16,9 +16,9 @@ import ThemeSwitch from "./Theme";
 
 ## Props
 
-| Prop      | Type     | Description                                      |
-| :-------- | :------- | :----------------------------------------------- |
+| Prop      | Type     | Description                                     |
+| :-------- | :------- | :---------------------------------------------- |
 | className | string   | Additional classes to be added to the component |
-| action    | function | function to change the theme of the dapp         |
-| theme     | string   | specify the current theme of the dapp            |
-| openMenu  | boolean  | state value for whether a menu is open or not.    |
+| action    | function | function to change the theme of the dapp        |
+| theme     | string   | specify the current theme of the dapp           |
+| openMenu  | boolean  | state value for whether a menu is open or not.  |

frontend/src/app/address-book/columns.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { Button } from "~/ui/button";
+import { Button } from "@/app/components/ui_components/button";
 import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 import Link from "next/link";
 
@@ -46,7 +46,7 @@ export const columns: ColumnDef<Resource>[] = [
 
       return (
         <Link className="text-right font-medium" href={address} target="_blank">
-          {address.split('/')[address.split('/').length - 1]}
+          {address.split("/")[address.split("/").length - 1]}
         </Link>
       );
     },

frontend/src/app/address-book/data-table.tsx

@@ -19,10 +19,10 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/app/components/ui/table";
+} from "@/app/components/ui_components/table";
 
-import { Button } from "~/ui/button";
-import { Input } from "~/ui/input";
+import { Button } from "@/app/components/ui_components/button";
+import { Input } from "@/app/components/ui_components/input";
 import React from "react";
 
 interface DataTableProps<TData, TValue> {

frontend/src/app/components/AssetTransferModal.tsx

@@ -1,5 +1,5 @@
 "use client";
-import GenericModal from "./GenericModal";
+import GenericModal from "./ui_components/GenericModal";
 import starknetLogo from "../../../public/starknetlogo.svg";
 import Image from "next/image";
 import rightArr from "../../../public/assets/right-arr.svg";

frontend/src/app/components/Burner/Burner.tsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from "react";
 import { useAccount, useNetwork } from "@starknet-react/core";
 import { Contract, RpcProvider, ec, stark } from "starknet";
 import * as Abi from "../../../../public/abi/burnerWallet.json";
-import Header from "../Header";
+import Header from "../ui_components/Header";
 import BurnerWallet from "../BurnerWallet/BurnerWallet";
 import spinner from "../../../../public/assets/spinner.svg";
 import Image from "next/image";

frontend/src/app/components/BurnerWallet/BurnerWallet.tsx

@@ -5,10 +5,13 @@ import AssetTransferModal from "../AssetTransferModal";
 import ConnectionModal from "../ConnectionModal";
 import { useContractRead } from "@starknet-react/core";
 import { Account, RpcProvider } from "starknet";
-import CopyButton from "../CopyButton";
+import CopyButton from "../ui_components/CopyButton";
 import Erc20Abi from "../../abi/token.abi.json";
-import { ETH_SEPOLIA, STRK_SEPOLIA } from "@/app/utils/constant";
-import { formatCurrency } from "@/app/utils/currency";
+import {
+  ETH_SEPOLIA,
+  STRK_SEPOLIA,
+} from "@/app/components/ui_components/utils/constant";
+import { formatCurrency } from "@/app/components/ui_components/utils/currency";
 import ContractExecutionModal from "../ContractExecutionModal";
 interface IWallet {
   address: string;

frontend/src/app/components/ConnectionModal.tsx

@@ -1,6 +1,6 @@
 "use client";
-import CopyButton from "./CopyButton";
-import GenericModal from "./GenericModal";
+import CopyButton from "./ui_components/CopyButton";
+import GenericModal from "./ui_components/GenericModal";
 import { useEffect, useState } from "react";
 
 type Props = {

frontend/src/app/components/ContractExecutionModal.tsx

@@ -1,5 +1,5 @@
 "use client";
-import GenericModal from "./GenericModal";
+import GenericModal from "./ui_components/GenericModal";
 import Image from "next/image";
 import rightArr from "../../../public/assets/right-arr.svg";
 import { useEffect, useState } from "react";
@@ -123,7 +123,6 @@ function ContractExecutionModal({ isOpen, onClose, account }: Props) {
 
       setLoading(true);
 
-
       const call: Call = {
         contractAddress: contractAddress,
         calldata: JSON.parse(callData),
@@ -135,10 +134,11 @@ function ContractExecutionModal({ isOpen, onClose, account }: Props) {
         calldata: JSON.parse(callData),
       });
 
-      const { transaction_hash: transferTxHash } = await account.execute(call, {maxFee});
-      const transactionReponse = await account.waitForTransaction(
-        transferTxHash
-      );
+      const { transaction_hash: transferTxHash } = await account.execute(call, {
+        maxFee,
+      });
+      const transactionReponse =
+        await account.waitForTransaction(transferTxHash);
 
       console.log(transactionReponse);
       toast.success("Your contract function was executed successfully!", {

frontend/src/app/components/ScaffoldDeployer/ScaffoldDeployer.tsx

@@ -3,7 +3,7 @@ import cloudUploadIcon from "../../../../public/assets/cloudUploadIcon.svg";
 import fileIcon from "../../../../public/assets/fileIcon.svg";
 import trash from "../../../../public/assets/deleteIcon.svg";
 import { useRef, useState } from "react";
-import Header from "../Header";
+import Header from "../ui_components/Header";
 import Image from "next/image";
 import {
   DeclareContractPayload,

frontend/src/app/components/TransactionList/TransactionItem.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { formatDate } from "@/app/utils/date";
+import { formatDate } from "@/app/components/ui_components/utils/date";
 import { Status, Transaction } from "./TransactionList";
 import { CheckCircle2, Clock, AlertCircle } from "lucide-react";
 

frontend/src/app/components/TransactionList/TransactionModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
-import GenericModal from "../GenericModal";
+import GenericModal from "../ui_components/GenericModal";
 import TransactionList from "./TransactionList";
 import React from "react";
 const TransactionModal = ({

frontend/src/app/components/AccountBalance.tsx → frontend/src/app/components/ui_components/AccountBalance.tsx

@@ -1,8 +1,8 @@
 import { useContractRead } from "@starknet-react/core";
 import { useEffect, useState } from "react";
-import { ETH_SEPOLIA, STRK_SEPOLIA } from "../utils/constant";
-import Erc20Abi from "../abi/token.abi.json";
-import { formatCurrency } from "../utils/currency";
+import { ETH_SEPOLIA, STRK_SEPOLIA } from "./utils/constant";
+import Erc20Abi from "../../abi/token.abi.json";
+import { formatCurrency } from "./utils/currency";
 
 type Props = {
   address: string;

frontend/src/app/components/Header.tsx → frontend/src/app/components/ui_components/Header.tsx

@@ -3,8 +3,8 @@ import AddressBar, { UserModal } from "./AddressBar";
 import { useEffect, useRef, useState } from "react";
 import { useConnect, useAccount } from "@starknet-react/core";
 import { LibraryBig } from "lucide-react";
-import TransactionModal from "./TransactionList/TransactionModal";
-import useTheme from "../hooks/useTheme";
+import TransactionModal from "../TransactionList/TransactionModal";
+import useTheme from "./hooks/useTheme";
 import ThemeSwitch from "./Theme";
 import NetworkSwitcher from "./NetworkSwitcher";
 import ConnectModal from "./ConnectModal";

frontend/src/app/components/NetworkSwitcher.tsx → frontend/src/app/components/ui_components/NetworkSwitcher.tsx

@@ -3,20 +3,20 @@
 import * as React from "react";
 import { Check, ChevronsUpDown } from "lucide-react";
 import { useNetwork } from "@starknet-react/core";
-import { Button } from "@/app/components/ui/button";
+import { Button } from "@/app/components/ui_components/button";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "@/app/components/ui/command";
+} from "@/app/components/ui_components/command";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/app/components/ui/popover";
-import { cn } from "@/app/lib/utils";
+} from "@/app/components/ui_components/popover";
+import { cn } from "@/app/components/ui_components/lib/utils";
 
 const NETWORK_MAPPING: { [key: string]: string } = {
   mainnet: "SN_MAIN",
@@ -38,7 +38,7 @@ export function NetworkSwitcher() {
   const { chain } = useNetwork();
   const [open, setOpen] = React.useState(false);
   const [selectedNetwork, setSelectedNetwork] = React.useState(
-    NETWORK_MAPPING[chain.network]
+    NETWORK_MAPPING[chain.network],
   );
 
   const switchNetwork = async (newNetworkId: string, networkLabel: string) => {
@@ -95,7 +95,7 @@ export function NetworkSwitcher() {
                     "mr-2 h-4 w-4",
                     selectedNetwork === network.value
                       ? "opacity-100"
-                      : "opacity-0"
+                      : "opacity-0",
                   )}
                 />
                 {network.label}

frontend/src/app/components/ui/button.tsx → frontend/src/app/components/ui_components/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/app/lib/utils";
+import { cn } from "@/app/components/ui_components/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300",
@@ -32,7 +32,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 export interface ButtonProps
@@ -51,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";