setup monorepo

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+yarn.lock

README.md

@@ -1 +1,52 @@
-# frontend-assignment-pixelis0x
+# Enso shortcuts UI monorepo
+
+This is a monorepo project that includes multiple packages and applications. The project uses TypeScript, React, and several other libraries and tools.
+
+## Project Structure
+
+- `apps/feeling-lucky`: Contains example mini-app
+- `packages/sdk`: Contains the SDK used by mini-apps
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js
+- Yarn
+
+### Installation
+
+1. Clone the repository:
+    ```sh
+    git clone <repository-url>
+    cd <repository-directory>
+    ```
+
+2. Install dependencies:
+    ```sh
+    yarn install
+    ```
+
+### Running the Application
+
+1. Start the development server:
+    ```sh
+    yarn sdk:dev
+    yarn fl:dev
+    ```
+
+### Building the SDK
+
+1. Navigate to the SDK directory:
+    ```sh
+    cd packages/sdk
+    ```
+
+2. Build the SDK:
+    ```sh
+    yarn build
+    ```
+
+## License
+
+This project is licensed under the MIT License.

apps/feeling-lucky/.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_ENSO_API_KEY=
+NEXT_PUBLIC_COINGECKO_KEY=
+NEXT_PUBLIC_PRIVY_KEY

apps/feeling-lucky/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.env
+.next

apps/feeling-lucky/README.md

@@ -0,0 +1 @@
+# Feeling lucky mini-app

apps/feeling-lucky/app/components/TokenSelector.tsx

@@ -0,0 +1,66 @@
+import Image from "next/image";
+import { Flex, Text } from "@chakra-ui/react";
+import { useMemo } from "react";
+import { Select } from "chakra-react-select";
+import { useOneInchTokenList } from "../hooks";
+import { Address } from "@enso/shared/types";
+
+const TokenSelector = ({
+  value,
+  onChange,
+}: {
+  value: Address;
+  onChange: (value: Address) => void;
+}) => {
+  const { data: tokenMap } = useOneInchTokenList();
+  const token = tokenMap?.[value];
+  const tokenList = useMemo(
+    () => (tokenMap ? Object.values(tokenMap) : []),
+    [tokenMap],
+  );
+
+  const placeHolderStyles = value
+    ? {}
+    : { backgroundColor: "gray.700", color: "white" };
+
+  return (
+    <Select
+      chakraStyles={{
+        container: (provided) => ({
+          ...provided,
+          minWidth: "150px",
+        }),
+        control: (provided) => ({
+          ...provided,
+          ...placeHolderStyles,
+        }),
+        placeholder: (provided) => ({
+          ...provided,
+          color: "white",
+          whiteSpace: "nowrap",
+        }),
+      }}
+      value={token}
+      options={tokenList}
+      onChange={(token) => onChange(token?.address)}
+      getOptionLabel={(token) => token.symbol}
+      getOptionValue={(token) => token.address}
+      isSearchable
+      isClearable={false}
+      placeholder="Select token"
+      formatOptionLabel={(token) => (
+        <Flex align="center">
+          <Image
+            src={token.logoURI}
+            alt={token.symbol}
+            width={24}
+            height={24}
+          />
+          <Text ml={2}>{token.symbol}</Text>
+        </Flex>
+      )}
+    />
+  );
+};
+
+export default TokenSelector;

apps/feeling-lucky/app/components/WalletButton.tsx

@@ -0,0 +1,28 @@
+import { useAccount, useDisconnect } from "wagmi";
+import { Button } from "@chakra-ui/react";
+import { shortenAddress } from "@enso/shared/util";
+import { usePrivy } from "@privy-io/react-auth";
+
+
+// TODO: adopt for AA
+const WalletButton = () => {
+  const { address } = useAccount();
+  const { disconnect } = useDisconnect();
+  const { connectWallet } = usePrivy();
+
+  if (address) {
+    return (
+      <Button variant={"outline"} onClick={() => disconnect()}>
+        {shortenAddress(address)}
+      </Button>
+    );
+  }
+
+  return (
+    <Button variant={"solid"} onClick={() => connectWallet()}>
+      Connect Wallet
+    </Button>
+  );
+};
+
+export default WalletButton;

apps/feeling-lucky/app/config.ts

@@ -0,0 +1,43 @@
+import { extendTheme } from "@chakra-ui/react";
+import { createConfig } from "@privy-io/wagmi";
+import { base } from "viem/chains";
+import { http } from "viem";
+
+export const chakraTheme = extendTheme({
+  components: {
+    Badge: {
+      baseStyle: {
+        borderRadius: "full",
+      },
+    },
+    Button: {
+      variants: {
+        solid: {
+          bg: "gray.700",
+          color: "white",
+          _hover: {
+            bg: "brand.600",
+          },
+          _disabled: {
+            bg: "gray.200",
+            color: "gray.400",
+          },
+        },
+        outline: {
+          borderColor: "gray.200",
+          _hover: {
+            bg: "gray.50",
+          },
+        },
+      },
+    },
+  },
+});
+
+export const wagmiConfig = createConfig({
+  chains: [base], // Pass your required chains as an array
+  transports: {
+    // TODO: check if required
+    [base.id]: http(),
+  },
+});

apps/feeling-lucky/app/constants.ts

@@ -0,0 +1,21 @@
+import { arbitrum, base, mainnet } from "viem/chains";
+
+export const USDC_ADDRESSES = {
+  [base.id]: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
+  [arbitrum.id]: "0xaf88d065e77c8cc2239327c5edb3a432268e5831",
+  [mainnet.id]: "0x2791bca1f2de4661ed88a30c99a7a9449aa84174",
+};
+
+export const DECIMALS = {
+  usdc: 6,
+  wbtc: 8,
+  weth: 18,
+  eth: 18,
+} as any;
+
+export const USE_POSITIONS_DATA_SOURCE =
+  "https://enso-scrape.s3.us-east-2.amazonaws.com/output/backend/positions.json";
+
+export const ENSO_API_KEY = process.env.NEXT_PUBLIC_ENSO_API_KEY;
+
+console.log(ENSO_API_KEY);