feat: Support for Starknet contracts

.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "node_modules/@redstone-finance/fuel-connector/src/autogenerated/prices.bin": ["@parcel/transformer-raw"]
+  }
+}

package.json

@@ -7,19 +7,26 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
+    "@argent/get-starknet": "^5.3.13",
     "@redstone-finance/evm-connector": "^0.0.18",
+    "@redstone-finance/starknet-connector": "^0.2.2",
+    "axios": "^1.2.2",
     "ethers": "^5.6.9",
     "parcel": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "redstone-api": "^0.4.11",
+    "redstone-sdk": "^1.0.9",
+    "starknet": "^4.22.0",
     "web3modal": "^1.9.8"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "assert": "^2.0.0",
     "buffer": "^5.5.0",
+    "graphql-request": "5.1.0",
+    "path-browserify": "^1.0.1",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",
     "stream-browserify": "^3.0.0",

src/chains/evm/EvmPricesContractAdapter.ts

@@ -0,0 +1,32 @@
+import { ContractParamsProvider, PricesContractAdapter } from "redstone-sdk";
+import { Contract } from "ethers";
+
+import { WrapperBuilder } from "@redstone-finance/evm-connector";
+
+export class EvmPricesContractAdapter implements PricesContractAdapter {
+  constructor(private contract: Contract) {}
+
+  async getPricesFromPayload(
+    paramsProvider: ContractParamsProvider
+  ): Promise<number[]> {
+    return await WrapperBuilder.wrap(this.contract)
+      .usingDataService(paramsProvider.requestParams, paramsProvider.urls)
+      .getPrices();
+  }
+
+  readPricesFromContract(
+    paramsProvider: ContractParamsProvider
+  ): Promise<number[]> {
+    throw "Method not supported";
+  }
+
+  readTimestampFromContract(): Promise<number> {
+    throw "Method not supported";
+  }
+
+  writePricesFromPayloadToContract(
+    paramsProvider: ContractParamsProvider
+  ): Promise<string | number[]> {
+    throw "Method not supported";
+  }
+}

src/chains/evm/EvmPricesContractConnector.ts

@@ -0,0 +1,23 @@
+import { Contract, providers } from "ethers";
+import { IContractConnector, IPricesContractAdapter } from "redstone-sdk";
+import { EvmPricesContractAdapter } from "./EvmPricesContractAdapter";
+import { abi } from "./ShowroomContractAbi.json";
+
+export class EvmPricesContractConnector
+  implements IContractConnector<IPricesContractAdapter>
+{
+  constructor(
+    private readonly contractAddress: string,
+    private readonly signer: providers.JsonRpcSigner
+  ) {}
+
+  getBlockNumber(rpcUrl: string): Promise<number> {
+    return this.signer.provider.getBlockNumber();
+  }
+
+  async getAdapter(): Promise<IPricesContractAdapter> {
+    return new EvmPricesContractAdapter(
+      new Contract(this.contractAddress, abi, this.signer)
+    );
+  }
+}

src/components/ChainButton.tsx

@@ -20,7 +20,11 @@ export const ChainButton = ({
     onClick={() => onChainClick(chain)}
     disabled={disabled}
   >
-    <img width={24} height={24} src={chain.logo} alt={`${chain.label} logo`} />
+    <img
+      style={{ height: 24, width: 24 }}
+      src={chain.logo}
+      alt={`${chain.label} logo`}
+    />
     {chain.label}
   </button>
 );

src/components/ChainDataTable.tsx

@@ -11,28 +11,31 @@ export const ChainDataTable = ({ walletAddress, network }: Props) => (
   <table className="w-3/5 table-auto border mb-8">
     <tbody className="text-md">
       <tr>
-        <td className="flex items-center gap-3 py-3 px-6">
+        <td className="flex items-center gap-3 py-3 px-3">
           <img
             className="object-scale-down w-6 h-6"
             src={WalletIcon}
             alt="Wallet icon"
           />
           Your wallet
         </td>
-        <td className="py-3 px-6 text-right">{walletAddress}</td>
+        <td className="py-3 px-3 text-right">{walletAddress}</td>
       </tr>
       <tr>
-        <td className="flex items-center gap-3 py-3 px-6">
+        <td className="flex items-center gap-3 py-3 px-3">
           <img
             className="object-scale-down w-6 h-6"
             src={ContractIcon}
             alt="Contract icon"
           />
           Integrated Contract
         </td>
-        <td className="py-3 px-6 text-right underline">
+        <td className="py-3 px-3 text-right underline">
           <a
-            href={network.contractExplorerUrl}
+            href={network.contractExplorerUrl.replace(
+              "{walletAddress}",
+              walletAddress
+            )}
             target="blank"
             referrerPolicy="no-referrer"
           >

src/components/ChainTx.tsx

@@ -0,0 +1,41 @@
+import { ChainDetails } from "../config/chains";
+import TxIcon from "../assets/icons/tx.png";
+
+interface Props {
+  txHash: string;
+  network: ChainDetails;
+}
+
+export const ChainTx = ({ txHash, network }: Props) => (
+  <table className="w-3/5 table-auto border mt-8">
+    <tbody className="text-md">
+      <tr>
+        <td className="flex items-center gap-3 py-3 px-3">
+          <img
+            className="object-scale-down w-6 h-6"
+            src={TxIcon}
+            alt="Contract icon"
+          />
+          Last transaction:
+        </td>
+        <td className="py-3 px-3 text-right underline">
+          <a
+            href={network.txExplorerUrl + txHash}
+            target="blank"
+            referrerPolicy="no-referrer"
+          >
+            {txHash}
+          </a>
+        </td>
+      </tr>
+      <tr>
+        <td colSpan={2} className="text-sm px-3 text-gray-500">
+          <i>
+            This transaction writes a snapshot of current prices to the
+            contract's storage.
+          </i>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+);

src/components/PricesTable.tsx

@@ -14,7 +14,7 @@ export const PricesTable = ({ blockNumber, timestamp, prices }: Props) => {
   }));
 
   return (
-    <table className="w-3/5 table-auto border">
+    <table className="w-3/5 table-auto border mb-5">
       <tbody className="text-md">
         <tr>
           <td className="py-3 px-6">Block number</td>

src/components/ReadPricesButton.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  readPricesFromContract: () => void;
+}
+
+export const ReadPricesButton = ({ readPricesFromContract }: Props) => (
+  <button
+    className="bg-redstone bg-opacity-60 hover:opacity-75 text-white py-3 px-8 rounded-full text-xl"
+    onClick={readPricesFromContract}
+  >
+    Read prices
+  </button>
+);

src/components/WritePricesButton.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  writePricesToContract: () => void;
+}
+
+export const WritePricesButton = ({ writePricesToContract }: Props) => (
+  <button
+    className="bg-gray-400 hover:opacity-75 text-white py-3 px-8 rounded-full text-xl"
+    onClick={writePricesToContract}
+  >
+    Write prices
+  </button>
+);

src/config/chains.ts

@@ -19,9 +19,12 @@ import WagmiLogo from "../assets/chains/wagmi-testnet.png";
 import PolygonZkEVMLogo from "../assets/chains/polygon-zk-evm.png";
 import CantoLogo from "../assets/chains/canto.png";
 import BaseLogo from "../assets/chains/base.png";
+import StarknetLogo from "../assets/chains/starknet.png";
 
 export type Chains = { [chainId in number]: ChainDetails };
 
+export type ChainType = "eth" | "starknet" | "fuel";
+
 export interface ChainDetails {
   chainId: string;
   rpcUrls: string[];
@@ -35,7 +38,9 @@ export interface ChainDetails {
   blockExplorerUrls: string[];
   exampleContractAddress: string;
   contractExplorerUrl: string;
+  txExplorerUrl?: string;
   logo?: any;
+  type?: ChainType;
 }
 
 export const chains: Chains = {
@@ -391,4 +396,25 @@ export const chains: Chains = {
       "https://goerli.basescan.org/address/0xd75f4b5aa9480e6956f2570dd258ca716784f6e1",
     logo: BaseLogo,
   },
+  [9999999998]: {
+    chainId: utils.hexValue(9999999998),
+    rpcUrls: [
+      "https://starknet-goerli.infura.io/v3/0d9bfc9a170947ce8c4f2e15dae7c62a",
+    ],
+    chainName: "Starknet Test Network",
+    label: "Starknet",
+    nativeCurrency: {
+      name: "GoerliETH",
+      symbol: "GoerliETH",
+      decimals: 18,
+    },
+    blockExplorerUrls: ["https://testnet.starkscan.co/"],
+    exampleContractAddress:
+      "0x03a4732136f974a250bf7d95683af13b05a4d605d3f3390469f6178448a73ae1",
+    contractExplorerUrl:
+      "https://testnet.starkscan.co/contract/0x03a4732136f974a250bf7d95683af13b05a4d605d3f3390469f6178448a73ae1",
+    txExplorerUrl: "https://testnet.starkscan.co/tx/",
+    logo: StarknetLogo,
+    type: "starknet",
+  },
 };

src/hooks/useMockLoader.tsx

@@ -4,7 +4,7 @@ import { timeout } from "../utils";
 const loaderTexts = [
   "Fetching price data",
   "Sending transaction with fetched price data",
-  "Receiving price from smart contract",
+  "Receiving data from smart contract",
 ];
 
 export const useMockLoader = () => {
@@ -14,9 +14,9 @@ export const useMockLoader = () => {
   const handleTextChange = async () => {
     for (const text of loaderTexts) {
       setText(text);
-      await timeout(1000);
+      await timeout(10);
     }
-    setIsMockLoading(false);
+    // setIsMockLoading(false);
   };
 
   const startMockLoader = () => {