oko 372

apps/customer_dashboard/src/components/dashboard_header/dashboard_header.tsx

@@ -1,9 +1,9 @@
-import React from "react";
+import { type FC } from "react";
 import { Logo } from "@oko-wallet/oko-common-ui/logo";
 
 import styles from "./dashboard_header.module.scss";
 
-export const DashboardHeader: React.FC = () => {
+export const DashboardHeader: FC = () => {
   return (
     <div className={styles.wrapper}>
       {/* NOTE: theme is hardcoded to light for now */}

apps/customer_dashboard/src/components/info_modal/info_modal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { Card } from "@oko-wallet/oko-common-ui/card";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -14,7 +14,7 @@ interface InfoModalProps {
   renderTrigger: (props: { onOpen: () => void }) => React.ReactNode;
 }
 
-export const InfoModal: React.FC<InfoModalProps> = ({
+export const InfoModal: FC<InfoModalProps> = ({
   title,
   content,
   renderTrigger,

apps/customer_dashboard/src/components/reset_password/reset_password.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { EyeIcon } from "@oko-wallet/oko-common-ui/icons/eye";
 import { EyeOffIcon } from "@oko-wallet/oko-common-ui/icons/eye_off";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -11,7 +11,7 @@ import { AccountForm } from "@oko-wallet-ct-dashboard/ui";
 import { useResetPasswordForm } from "./use_reset_password_form";
 import styles from "./reset_password.module.scss";
 
-export const ResetPassword: React.FC = () => {
+export const ResetPassword: FC = () => {
   const { onSubmit, register, errors, isLoading, isValid } =
     useResetPasswordForm();
 

apps/customer_dashboard/src/components/sign_in_form/sign_in_form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import type { FC } from "react";
 import { Input } from "@oko-wallet/oko-common-ui/input";
 import { Card } from "@oko-wallet/oko-common-ui/card";
 import { Logo } from "@oko-wallet/oko-common-ui/logo";
@@ -14,7 +14,7 @@ import styles from "./sign_in_form.module.scss";
 import { useSignInForm } from "./use_sign_in_form";
 import { GET_STARTED_URL } from "@oko-wallet-ct-dashboard/constants";
 
-export const SignInForm: React.FC = () => {
+export const SignInForm: FC = () => {
   const {
     onSubmit,
     register,

apps/customer_dashboard/src/components/sign_up_digits/sign_up_digits.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 import { OtpInput } from "@oko-wallet/oko-common-ui/otp_input";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
@@ -10,7 +10,7 @@ import { ResendCode } from "../resend_code/resend_code";
 import { ExpiryTimer } from "../expiry_timer/expiry_timer";
 import { EMAIL_VERIFICATION_TIMER_SECONDS } from "@oko-wallet-ct-dashboard/constants";
 
-export const SignUpDigits: React.FC = () => {
+export const SignUpDigits: FC = () => {
   const {
     digits,
     handleDigitsChange,

apps/demo_web/src/components/oko_provider/oko_provider.tsx

@@ -1,10 +1,10 @@
 "use client";
 
-import React, { type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 
 import { useInitOko } from "./use_oko";
 
-export const OkoProvider: React.FC<PropsWithChildren> = ({ children }) => {
+export const OkoProvider: FC<PropsWithChildren> = ({ children }) => {
   useInitOko();
 
   return <>{children}</>;

apps/demo_web/src/components/preview_panel/preview_panel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import cn from "classnames";
+import type { FC } from "react";
 import { Skeleton } from "@oko-wallet/oko-common-ui/skeleton";
 
 import styles from "./preview_panel.module.scss";
@@ -14,7 +15,7 @@ import { EthereumOffchainSignWidget } from "@oko-wallet-demo-web/components/widg
 import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
 import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
 
-export const PreviewPanel: React.FC = () => {
+export const PreviewPanel: FC = () => {
   const isLazyInitialized = useSDKState(
     (st) => st.isCosmosLazyInitialized && st.isEthLazyInitialized,
   );

apps/demo_web/src/components/widgets/account_widget/account_info_widget.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import { GoogleIcon } from "@oko-wallet/oko-common-ui/icons/google_icon";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Spacing } from "@oko-wallet/oko-common-ui/spacing";
@@ -21,7 +21,7 @@ export type AccountInfoWidgetProps = {
   onSignOut: () => void;
 };
 
-export const AccountInfoWidget: React.FC<AccountInfoWidgetProps> = ({
+export const AccountInfoWidget: FC<AccountInfoWidgetProps> = ({
   type,
   email,
   publicKey,

apps/demo_web/src/components/widgets/account_widget/account_widget.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import type { AuthType } from "@oko-wallet/oko-types/auth";
 import { useSDKState } from "@oko-wallet-demo-web/state/sdk";
 import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
@@ -22,7 +22,7 @@ function authTypeToLoginMethod(authType: AuthType | null): LoginMethod {
   return authType;
 }
 
-export const AccountWidget: React.FC<AccountWidgetProps> = () => {
+export const AccountWidget: FC<AccountWidgetProps> = () => {
   const okoWallet = useSDKState((state) => state.oko_cosmos)?.okoWallet;
   const [signingInState, setSigningInState] = useState<SigningInState>({
     status: "ready",

apps/demo_web/src/components/widgets/account_widget/auth_progress_widget.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import cn from "classnames";
 import { GoogleIcon } from "@oko-wallet/oko-common-ui/icons/google_icon";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
@@ -20,7 +20,7 @@ type AuthProgressWidgetProps = {
   onRetry?: () => void;
 };
 
-export const AuthProgressWidget: React.FC<AuthProgressWidgetProps> = ({
+export const AuthProgressWidget: FC<AuthProgressWidgetProps> = ({
   method,
   status = "loading",
   onRetry,

apps/demo_web/src/components/widgets/account_widget/spinner.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 
 import styles from "./spinner.module.scss";
 
@@ -8,7 +8,7 @@ interface SpinnerProps {
   status?: "loading" | "failed";
 }
 
-export const Spinner: React.FC<SpinnerProps> = ({
+export const Spinner: FC<SpinnerProps> = ({
   size = 62,
   className,
   status = "loading",

apps/demo_web/src/components/widgets/account_widget/wallet_box.tsx

@@ -1,9 +1,9 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "./wallet_box.module.scss";
 
-export const WalletBox: React.FC<WalletBoxProps> = ({ icon, label }) => {
+export const WalletBox: FC<WalletBoxProps> = ({ icon, label }) => {
   return (
     <div className={styles.boxContainer}>
       {icon}

apps/demo_web/src/components/widgets/address_widget/address_row.tsx

@@ -1,14 +1,10 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { Tooltip } from "@oko-wallet/oko-common-ui/tooltip";
 
 import styles from "./address_row.module.scss";
 
-export const AddressRow: React.FC<AddressRowProps> = ({
-  icon,
-  chain,
-  address,
-}) => {
+export const AddressRow: FC<AddressRowProps> = ({ icon, chain, address }) => {
   const isLoggedIn = !!address;
   const label = chain === "ethereum" ? "Ethereum" : "Cosmos Hub";
   const prefix = chain === "ethereum" ? "0x" : "cosmos1";

apps/demo_web/src/components/widgets/address_widget/address_widget.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import { CosmosIcon } from "@oko-wallet/oko-common-ui/icons/cosmos_icon";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import { WalletIcon } from "@oko-wallet/oko-common-ui/icons/wallet";
@@ -13,7 +13,7 @@ import { ViewChainsModal } from "./view_chains_modal";
 import { useAddresses } from "@oko-wallet-demo-web/hooks/wallet";
 import { useGetChainInfos } from "@oko-wallet-demo-web/hooks/use_get_chain_infos";
 
-export const AddressWidget: React.FC<AddressWidgetProps> = ({}) => {
+export const AddressWidget: FC<AddressWidgetProps> = ({}) => {
   const [showModal, setShowModal] = useState(false);
   const { cosmosAddress, ethAddress } = useAddresses();
 

apps/demo_web/src/components/widgets/address_widget/chains_row.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactElement } from "react";
+import { type FC, type ReactElement } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "./chains_row.module.scss";
@@ -8,7 +8,7 @@ export interface ChainsRowProps {
   icon: ReactElement;
 }
 
-export const ChainsRow: React.FC<ChainsRowProps> = ({ chainName, icon }) => {
+export const ChainsRow: FC<ChainsRowProps> = ({ chainName, icon }) => {
   return (
     <div className={styles.row}>
       {icon}

apps/demo_web/src/components/widgets/address_widget/view_chains_button.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import type { FC } from "react";
 import { CosmosIcon } from "@oko-wallet/oko-common-ui/icons/cosmos_icon";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import { OsmosisIcon } from "@oko-wallet/oko-common-ui/icons/osmosis_icon";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 
 import styles from "./view_chains_button.module.scss";
 
-export const ViewChainsButton: React.FC<ViewChainsButtonProps> = ({
+export const ViewChainsButton: FC<ViewChainsButtonProps> = ({
   buttonVariant,
   onClick,
 }) => {

apps/demo_web/src/components/widgets/address_widget/view_chains_modal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 import type { ChainInfo } from "@keplr-wallet/types";
 import { SearchIcon } from "@oko-wallet/oko-common-ui/icons/search";
 import { XCloseIcon } from "@oko-wallet/oko-common-ui/icons/x_close";
@@ -8,7 +8,7 @@ import cn from "classnames";
 import styles from "./view_chains_modal.module.scss";
 import { ChainsRow } from "./chains_row";
 
-export const ViewChainsModal: React.FC<ViewChainsModalProps> = ({
+export const ViewChainsModal: FC<ViewChainsModalProps> = ({
   onClose,
   chains,
 }) => {

apps/demo_web/src/components/widgets/cosmos_offchain_sign_widget/cosmos_offchain_sign_widget.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { CosmosIcon } from "@oko-wallet/oko-common-ui/icons/cosmos_icon";
 
 import { SignWidget } from "@oko-wallet-demo-web/components/widgets/sign_widget/sign_widget";

apps/demo_web/src/components/widgets/cosmos_onchain_sign_widget/cosmos_onchain_sign_widget.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import { makeSignDoc as makeProtoSignDoc } from "@cosmjs/proto-signing";
 import { makeSignDoc as makeAminoSignDoc } from "@cosmjs/amino";
 import {

apps/demo_web/src/components/widgets/docs_widget/docs_widget.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import type { FC } from "react";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 import { ArrowRightOutlinedIcon } from "@oko-wallet/oko-common-ui/icons/arrow_right_outlined";
 import { BookOpenIcon } from "@oko-wallet/oko-common-ui/icons/book_open";
@@ -8,7 +8,7 @@ import { Widget } from "../widget_components";
 import styles from "./docs_widget.module.scss";
 import { useUserInfoState } from "@oko-wallet-demo-web/state/user_info";
 
-export const DocsWidget: React.FC = () => {
+export const DocsWidget: FC = () => {
   const isSignedIn = useUserInfoState((state) => state.isSignedIn);
 
   const handleOpenDocs = () => {

apps/demo_web/src/components/widgets/ethereum_offchain_sign_widget/ethereum_offchain_sign_widget.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import { isAddressEqual, recoverMessageAddress } from "viem";
 

apps/demo_web/src/components/widgets/ethereum_onchain_sign_widget/ethereum_onchain_sign_widget.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { EthereumBlueIcon } from "@oko-wallet/oko-common-ui/icons/ethereum_blue_icon";
 import {
   parseTransaction,

apps/demo_web/src/components/widgets/login_widget/login_widget.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState, type FC } from "react";
 
 import { Widget } from "../widget_components";
 import styles from "./login_widget.module.scss";
@@ -10,7 +10,7 @@ export interface LoginWidgetProps {
   onSignIn: (method: LoginMethod) => void;
 }
 
-export const LoginWidget: React.FC<LoginWidgetProps> = ({ onSignIn }) => {
+export const LoginWidget: FC<LoginWidgetProps> = ({ onSignIn }) => {
   const [showSocials, setShowSocials] = useState(false);
 
   return (

apps/demo_web/src/components/widgets/sign_widget/sign_widget.tsx

@@ -1,4 +1,4 @@
-import React, { type ReactElement, useState, useRef, useEffect } from "react";
+import { type ReactElement, useState, useRef, useEffect, type FC } from "react";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 import { InfoCircleIcon } from "@oko-wallet/oko-common-ui/icons/info_circle";
 import { LoadingIcon } from "@oko-wallet/oko-common-ui/icons/loading";
@@ -10,7 +10,7 @@ import styles from "./sign_widget.module.scss";
 
 type SignStep = "initial" | "loading" | "success" | "error";
 
-export const SignWidget: React.FC<SignWidgetProps> = ({
+export const SignWidget: FC<SignWidgetProps> = ({
   chain,
   chainIcon,
   signType,

apps/demo_web/src/components/widgets/user_data_widget/user_data_widget.tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import type { FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 import { CodeIcon } from "@oko-wallet/oko-common-ui/icons/code";
 
 import { Widget } from "@oko-wallet-demo-web/components/widgets/widget_components";
 import styles from "./user_data_widget.module.scss";
 
-export const UserDataWidget: React.FC<UserDataWidgetProps> = ({ userData }) => {
+export const UserDataWidget: FC<UserDataWidgetProps> = ({ userData }) => {
   const isLoggedIn = !!userData;
 
   return (

apps/demo_web/src/components/widgets/widget_components.tsx

@@ -1,9 +1,9 @@
-import React, { type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren } from "react";
 import cn from "classnames";
 
 import styles from "./widget_components.module.scss";
 
-export const Widget: React.FC<
+export const Widget: FC<
   PropsWithChildren<{
     gradientBorder?: boolean;
   }>

apps/oko_admin_web/src/components/account/account_info_base.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { type FC } from "react";
 import { Typography } from "@oko-wallet/oko-common-ui/typography";
 
 import styles from "./account_info_base.module.scss";
@@ -10,7 +10,7 @@ export interface AccountInfoBaseProps {
   avatarUrl?: string;
 }
 
-export const AccountInfoBase: React.FC<AccountInfoBaseProps> = ({
+export const AccountInfoBase: FC<AccountInfoBaseProps> = ({
   username,
   email,
   avatarUrl,

apps/oko_admin_web/src/components/account/avatar.tsx

@@ -1,5 +1,4 @@
-import Image from "next/image";
-import { useState } from "react";
+import { useState, type FC } from "react";
 
 import styles from "./avatar.module.scss";
 
@@ -9,7 +8,7 @@ export interface AvatarProps {
   alt: string;
 }
 
-export const Avatar: React.FC<AvatarProps> = ({ src, fallback, alt }) => {
+export const Avatar: FC<AvatarProps> = ({ src, fallback, alt }) => {
   const [imgSrc, setImgSrc] = useState(src || fallback || "");
   const [showAlt, setShowAlt] = useState(!src && !fallback);
 

apps/oko_admin_web/src/components/apps_view/apps_view_header.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import React from "react";
+import { type FC } from "react";
 import { useRouter } from "next/navigation";
 import { Button } from "@oko-wallet/oko-common-ui/button";
 
 import { paths } from "@oko-wallet-admin/paths";
 import { useGetCustomerListWithAPIKeys } from "./use_get_customer";
 import { TitleHeader } from "@oko-wallet-admin/components/title_header/title_header";
 
-export const AppsViewHeader: React.FC = () => {
+export const AppsViewHeader: FC = () => {
   const router = useRouter();
 
   const { data } = useGetCustomerListWithAPIKeys();