WT-1789 - migrate Immutable Provider to order V3

packages/provider/src/sample-app/README.md

@@ -14,7 +14,7 @@ To install yalc run
 npm i -g yalc
 ```
 
-From the root directory of the `@imtbl/sdk` run
+From the `sdk` folder in the root of the repository (`ts-immutable-sdk/sdk`).
 
 ```
 yalc publish
@@ -27,7 +27,7 @@ yalc add @imtbl/sdk
 npm install
 ```
 
-If changes are made to `@imtbl/sdk` in the root directory of the sdk after already publishing run
+If changes are made to `@imtbl/sdk` from `ts-immutable-sdk/sdk`
 
 ```
 yalc push

packages/provider/src/sample-app/src/App.tsx

@@ -7,10 +7,13 @@ import {
 import { BiomeCombinedProviders, Heading } from '@biom3/react';
 import { ConnectButton } from './Components/connect-button';
 import { DisconnectButton } from './Components/disconnect-button';
-import { Environment } from '@imtbl/sdk';
+import { config } from '@imtbl/sdk';
 import { SignMessage } from './Components/sign-message';
 import { useEffect, useReducer } from 'react';
 import { WalletDisplay } from './Components/wallet-display';
+import { CreateOrder } from './Components/create-order';
+import { CancelOrder } from './Components/cancel-order';
+import { CreateTrade } from './Components/create-trade';
 
 export const App = () => {
   const [state, dispatch] = useReducer(appReducer, initialState);
@@ -19,7 +22,7 @@ export const App = () => {
     dispatch({
       payload: {
         type: Actions.SetEnvironment,
-        env: Environment.SANDBOX,
+        env: config.Environment.SANDBOX,
       },
     });
   }, []);
@@ -31,6 +34,9 @@ export const App = () => {
         <WalletDisplay />
         <ConnectButton />
         <SignMessage />
+        <CreateOrder />
+        <CancelOrder />
+        <CreateTrade />
         <DisconnectButton />
       </AppCtx.Provider>
     </BiomeCombinedProviders>

packages/provider/src/sample-app/src/Components/cancel-order.tsx

@@ -0,0 +1,48 @@
+import { AppCtx } from '../Context/app-context';
+import {
+  Box,
+  Button,
+  FormControl,
+  TextInput,
+  Heading,
+} from '@biom3/react';
+import { ChangeEvent, useContext, useState } from 'react';
+
+export const CancelOrder = () => {
+  const { state } = useContext(AppCtx);
+  const [orderId, setorderId] = useState<undefined | number>(undefined);
+
+  const cancelOrder = async () => {
+    if (!orderId) {
+      alert('missing requirements')
+      return;
+    }
+
+    await state.metaMaskIMXProvider?.cancelOrder({ order_id: orderId })
+  };
+
+  const rendercancelOrder = () => {
+    const updateOrderId = (event: ChangeEvent<HTMLInputElement>) => {
+      setorderId(parseInt(event.target.value))
+    };
+
+    return (
+      <>
+        <Heading size="medium">Cancel an order</Heading>
+        <Box sx={{ mb: 'base.spacing.x4' }}>
+          <FormControl sx={{ mb: 'base.spacing.x2' }}>
+            <FormControl.Label>Order ID:</FormControl.Label>
+            <TextInput onChange={updateOrderId} />
+          </FormControl>
+        </Box>
+        <Button onClick={() => cancelOrder()}>Cancel</Button>
+      </>
+    );
+  };
+
+  return (
+    <Box sx={{ padding: 'base.spacing.x5' }}>
+      {state.address && rendercancelOrder()}
+    </Box>
+  );
+};

packages/provider/src/sample-app/src/Components/connect-button.tsx

@@ -1,5 +1,5 @@
 import { Box, Button } from '@biom3/react';
-import { MetaMaskIMXProvider, ProviderConfiguration } from '@imtbl/sdk';
+import { provider } from '@imtbl/sdk';
 import { Environment, ImmutableConfiguration } from '@imtbl/config';
 import { useContext } from 'react';
 import { Actions, AppCtx } from '../Context/app-context';
@@ -8,8 +8,8 @@ export const ConnectButton = () => {
   const { state, dispatch } = useContext(AppCtx);
 
   const wrapperMetaMaskConnect = async () => {
-    const metaMaskIMXProvider = await MetaMaskIMXProvider.connect(
-      new ProviderConfiguration({
+    const metaMaskIMXProvider = await provider.MetaMaskIMXProvider.connect(
+      new provider.ProviderConfiguration({
         baseConfig: new ImmutableConfiguration({
           environment: Environment.PRODUCTION,
         }),

packages/provider/src/sample-app/src/Components/create-order.tsx

@@ -0,0 +1,107 @@
+import { AppCtx } from '../Context/app-context';
+import {
+  Box,
+  Button,
+  FormControl,
+  TextInput,
+  Heading,
+  Select,
+  Option,
+} from '@biom3/react';
+import { ChangeEvent, useContext, useState } from 'react';
+
+export const CreateOrder = () => {
+  const { state } = useContext(AppCtx);
+  const [amount, setAmount] = useState<undefined | string>(undefined);
+  const [tokenAddress, setTokenAddress] = useState<undefined | string>(undefined);
+  const [tokenId, setTokenId] = useState<undefined | string>(undefined);
+
+  const createOrder = async () => {
+    if (
+      !amount ||
+      !tokenAddress ||
+      !tokenId
+    ) {
+      alert('missing requirements')
+      return;
+    }
+
+    await state.metaMaskIMXProvider?.createOrder({
+      // buy: {
+      //   amount: '1000000000000000000',
+      //   type: 'ETH',
+      // },
+      // sell: {
+      //   tokenAddress: '0xacb3c6a43d15b907e8433077b6d38ae40936fe2c',
+      //   tokenId: '194488020',
+      //   type: 'ERC721',
+      // }
+      buy: {
+        amount,
+        type: 'ETH',
+      },
+      sell: {
+        tokenAddress,
+        tokenId,
+        type: 'ERC721',
+      }
+    })
+  };
+
+  const renderCreateOrder = () => {
+    const updateAmount = (event: ChangeEvent<HTMLInputElement>) => {
+      setAmount(event.target.value)
+    };
+
+    const updateTokenAddress = (event: ChangeEvent<HTMLInputElement>) => {
+      setTokenAddress(event.target.value)
+    };
+
+    const updateTokenId = (event: ChangeEvent<HTMLInputElement>) => {
+      setTokenId(event.target.value)
+    };
+
+    return (
+      <>
+        <Heading size="medium">Create an order</Heading>
+        <Box sx={{ mb: 'base.spacing.x4' }}>
+          <FormControl sx={{ mb: 'base.spacing.x2' }}>
+            <FormControl.Label>Amount:</FormControl.Label>
+            <TextInput onChange={updateAmount} />
+          </FormControl>
+          <FormControl sx={{ mb: 'base.spacing.x2' }}>
+            <FormControl.Label>Type:</FormControl.Label>
+            <Select disabled selectedOption={'ETH'}>
+              <Option optionKey='ETH' selected>
+                <Option.Label>ETH</Option.Label>
+              </Option>
+            </Select>
+          </FormControl>
+          <FormControl sx={{ mb: 'base.spacing.x2' }}>
+            <FormControl.Label>Token Address:</FormControl.Label>
+            <TextInput onChange={updateTokenAddress} />
+          </FormControl>
+          <FormControl sx={{ mb: 'base.spacing.x2' }}>
+            <FormControl.Label>Token Id:</FormControl.Label>
+            <TextInput onChange={updateTokenId} />
+          </FormControl>
+          <FormControl sx={{ mb: 'base.spacing.x2' }}>
+            <FormControl.Label>Type:</FormControl.Label>
+            <Select disabled selectedOption={'ERC721'}>
+              <Option optionKey='ERC721' selected>
+                <Option.Label>ERC721</Option.Label>
+              </Option>
+            </Select>
+          </FormControl>
+        </Box>
+        <Button onClick={() => createOrder()}>Create</Button>
+      </>
+    );
+  };
+
+  return (
+    <Box sx={{ padding: 'base.spacing.x5' }}>
+      {state.address && renderCreateOrder()}
+    </Box>
+  );
+};

packages/provider/src/sample-app/src/Components/create-trade.tsx

@@ -0,0 +1,48 @@
+import { AppCtx } from '../Context/app-context';
+import {
+  Box,
+  Button,
+  FormControl,
+  TextInput,
+  Heading,
+} from '@biom3/react';
+import { ChangeEvent, useContext, useState } from 'react';
+
+export const CreateTrade = () => {
+  const { state } = useContext(AppCtx);
+  const [orderId, setorderId] = useState<undefined | number>(undefined);
+
+  const createTrade = async () => {
+    if (!orderId) {
+      alert('missing requirements')
+      return;
+    }
+
+    await state.metaMaskIMXProvider?.createTrade({ order_id: orderId, user: state.address })
+  };
+
+  const renderCreateTrade = () => {
+    const updateOrderId = (event: ChangeEvent<HTMLInputElement>) => {
+      setorderId(parseInt(event.target.value))
+    };
+
+    return (
+      <>
+        <Heading size="medium">Create a trade</Heading>
+        <Box sx={{ mb: 'base.spacing.x4' }}>
+          <FormControl sx={{ mb: 'base.spacing.x2' }}>
+            <FormControl.Label>Order ID:</FormControl.Label>
+            <TextInput onChange={updateOrderId} />
+          </FormControl>
+        </Box>
+        <Button onClick={() => createTrade()}>Trade</Button>
+      </>
+    );
+  };
+
+  return (
+    <Box sx={{ padding: 'base.spacing.x5' }}>
+      {state.address && renderCreateTrade()}
+    </Box>
+  );
+};

packages/provider/src/sample-app/src/Components/disconnect-button.tsx

@@ -1,13 +1,13 @@
 import { Actions, AppCtx } from '../Context/app-context';
 import { Box, Heading, Button } from '@biom3/react';
 import { useContext } from 'react';
-import { MetaMaskIMXProvider } from '@imtbl/sdk';
+import { provider } from '@imtbl/sdk';
 
 export const DisconnectButton = () => {
   const { state, dispatch } = useContext(AppCtx);
 
   const disconnect = async () => {
-    await MetaMaskIMXProvider.disconnect();
+    await provider.MetaMaskIMXProvider.disconnect();
 
     dispatch({
       payload: {

packages/provider/src/sample-app/src/Components/sign-message.tsx

@@ -8,7 +8,7 @@ import {
   Heading,
 } from '@biom3/react';
 import { ChangeEvent, useContext, useState } from 'react';
-import { MetaMaskIMXProvider } from '@imtbl/sdk';
+import { provider } from '@imtbl/sdk';
 
 export const SignMessage = () => {
   const { state, dispatch } = useContext(AppCtx);
@@ -34,7 +34,7 @@ export const SignMessage = () => {
   };
 
   const sign = async () => {
-    const signedMessage = await MetaMaskIMXProvider.signMessage(signMessage);
+    const signedMessage = await provider.MetaMaskIMXProvider.signMessage(signMessage);
     dispatch({
       payload: {
         type: Actions.MetaMaskIMXProviderSignMessage,

packages/provider/src/sample-app/src/Context/app-context.ts

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
-import { MetaMaskIMXProvider, Environment } from '@imtbl/sdk';
+import { provider, config } from '@imtbl/sdk';
 
 export interface AppState {
-  metaMaskIMXProvider: MetaMaskIMXProvider | null;
+  metaMaskIMXProvider: provider.MetaMaskIMXProvider | null;
   address: string;
   signedMessage: string;
   env: string;
@@ -46,12 +46,12 @@ export enum Actions {
 
 export interface SetEnvironment {
   type: Actions.SetEnvironment;
-  env: Environment;
+  env: config.Environment;
 }
 
 export interface MetaMaskIMXProviderConnected {
   type: Actions.MetaMaskIMXProviderConnected;
-  metaMaskIMXProvider: MetaMaskIMXProvider;
+  metaMaskIMXProvider: provider.MetaMaskIMXProvider;
   address: string;
 }
 

packages/provider/src/signable-actions/orders.test.ts

@@ -55,7 +55,7 @@ describe('Orders', () => {
       });
       (OrdersApi as jest.Mock).mockReturnValue({
         getSignableOrder: getSignableOrderMock,
-        createOrder: createOrderMock,
+        createOrderV3: createOrderMock,
       });
 
       (signRaw as jest.Mock).mockReturnValue('raw-eth-signature');
@@ -87,7 +87,6 @@ describe('Orders', () => {
           asset_id_buy: getSignableOrderResponse.asset_id_buy,
           asset_id_sell: getSignableOrderResponse.asset_id_sell,
           expiration_timestamp: getSignableOrderResponse.expiration_timestamp,
-          include_fees: true,
           fees: signableOrderRequest.fees,
           nonce: getSignableOrderResponse.nonce,
           stark_key: getSignableOrderResponse.stark_key,
@@ -128,8 +127,8 @@ describe('Orders', () => {
         data: createCancelResponse,
       });
       (OrdersApi as jest.Mock).mockReturnValue({
-        getSignableCancelOrder: getSignableCancelOrderMock,
-        cancelOrder: cancelOrderMock,
+        getSignableCancelOrderV3: getSignableCancelOrderMock,
+        cancelOrderV3: cancelOrderMock,
       });
 
       (signRaw as jest.Mock).mockReturnValue('raw-eth-signature');