Stackr-JS comes with a base RollupState base class that can be extended to create a custom rollup. 
import { RollupState } from "@stackr/stackr-js/execution";

export class FastestUTXORollup extends RollupState<
  StateVariable,
  StateTransport
> {}
You need to provide the StateVariable and StateTransport types to the RollupState class which you defined previously.

​
Extending RollupState

You need to extend the RollupState class and implement 4 methods:

​
constructor

You need to call the super constructor with the StateVariable type for it to be able to use the defined state 
constructor(initialCount: StateVariable) {
    super(initialCount);
  }

​
createTransport

This method is used to create a transport object that will be used to wrap a StateVariable. 
createTransport(state: StateVariable): StateTransport {
    return { currentCount: state };
  }

​
getState

This is the opposite of createTransport and is used to extract the state from a transport object. 
getState(transport: StateTransport): StateVariable {
    return transport.currentCount;
  }

​
calculateRoot

This method is used to calculate the state root of the rollup. The idea behind is that the rollups must converge into single state root that is succint representation of the state of the rollup. 
calculateRoot(): ethers.BytesLike {
    return ethers.solidityPackedKeccak256(
      ["uint256"],
      [this.transport.currentCount]
    );
  }

​
Final RollupState

Overall the final rollup state could look like this: 
export class CounterRollup extends RollupState<StateVariable, StateTransport> {
  constructor(count: StateVariable) {
    super(count);
  }

  createTransport(state: StateVariable): StateTransport {
    return { currentCount: state };
  }

  getState(): StateVariable {
    return this.transport.currentCount;
  }

  calculateRoot(): ethers.BytesLike {
    return ethers.solidityPackedKeccak256(
      ["uint256"],
      [this.transport.currentCount]
    );
  }
}